.elementor-267 .elementor-element.elementor-element-3ffca82{--display:flex;--min-height:420px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-267 .elementor-element.elementor-element-3ffca82:not(.elementor-motion-effects-element-type-background), .elementor-267 .elementor-element.elementor-element-3ffca82 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://yamelili.fun/wp-content/uploads/2026/02/twilight-business-illumination-dark-office-interior-photo_960396-64848.avif");}.elementor-267 .elementor-element.elementor-element-a55427e{--display:flex;}.elementor-267 .elementor-element.elementor-element-4f4a861{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-267 .elementor-element.elementor-element-7851bbd img{height:500px;object-fit:scale-down;object-position:center center;}.elementor-267 .elementor-element.elementor-element-052c798{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-267 .elementor-element.elementor-element-4c46cd7 .elementor-heading-title{color:#FFFFFF;}.elementor-267 .elementor-element.elementor-element-f11e154 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-267 .elementor-element.elementor-element-063c85c{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-267 .elementor-element.elementor-element-861ac74 .elementor-button{background-color:#DC7474;font-family:"Roboto", Sans-serif;font-size:20px;font-weight:500;border-radius:25px 25px 25px 25px;}.elementor-267 .elementor-element.elementor-element-30d548c .elementor-button{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:500;border-radius:25px 25px 25px 25px;}.elementor-267 .elementor-element.elementor-element-d75c380{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-267 .elementor-element.elementor-element-1446556{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-267 .elementor-element.elementor-element-1446556.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-267 .elementor-element.elementor-element-068ce49{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-267 .elementor-element.elementor-element-b50db82{padding:10px 0px 10px 0px;}.elementor-267 .elementor-element.elementor-element-b50db82 img{width:100%;max-width:100%;height:290px;border-radius:200px 200px 200px 200px;}.elementor-267 .elementor-element.elementor-element-240f15a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-267 .elementor-element.elementor-element-42602dc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;}.elementor-267 .elementor-element.elementor-element-42602dc::before, .elementor-267 .elementor-element.elementor-element-42602dc > .elementor-background-video-container::before, .elementor-267 .elementor-element.elementor-element-42602dc > .e-con-inner > .elementor-background-video-container::before, .elementor-267 .elementor-element.elementor-element-42602dc > .elementor-background-slideshow::before, .elementor-267 .elementor-element.elementor-element-42602dc > .e-con-inner > .elementor-background-slideshow::before, .elementor-267 .elementor-element.elementor-element-42602dc > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-267 .elementor-element.elementor-element-cdbc2a3{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-267 .elementor-element.elementor-element-45a01e5{--display:flex;}.elementor-widget-counter .elementor-counter-number-wrapper{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-counter .elementor-counter-title{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-267 .elementor-element.elementor-element-26ef76c .elementor-counter-title{color:#000000;}.elementor-267 .elementor-element.elementor-element-e54d5e6{--display:flex;}.elementor-267 .elementor-element.elementor-element-c2fcdd4{--display:flex;}.elementor-267 .elementor-element.elementor-element-2e5106e{--display:flex;}.elementor-267 .elementor-element.elementor-element-43a1e95{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-267 .elementor-element.elementor-element-3cd4068{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-267 .elementor-element.elementor-element-ea6c7e6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-267 .elementor-element.elementor-element-e1b5990{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-267 .elementor-element.elementor-element-e533231{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-267 .elementor-element.elementor-element-4b4c460{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-267 .elementor-element.elementor-element-843d0a9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-267 .elementor-element.elementor-element-1446556{--width:35%;}.elementor-267 .elementor-element.elementor-element-068ce49{--width:30%;}.elementor-267 .elementor-element.elementor-element-240f15a{--width:35%;}}@media(max-width:1024px){.elementor-267 .elementor-element.elementor-element-4f4a861{--grid-auto-flow:row;}.elementor-267 .elementor-element.elementor-element-063c85c{--grid-auto-flow:row;}.elementor-267 .elementor-element.elementor-element-cdbc2a3{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-267 .elementor-element.elementor-element-4f4a861{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-267 .elementor-element.elementor-element-063c85c{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-267 .elementor-element.elementor-element-cdbc2a3{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-232b5d6 *//* Import a clean Font like the video */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

.services-section {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns like the video */
    background: #fff;
    font-family: 'Inter', sans-serif;
}

.service-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 40px;
    border: 1px solid #f2f2f2; /* Light grid lines */
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.service-left {
    display: flex;
    align-items: center;
    gap: 30px;
}

.num {
    font-size: 38px;
    font-weight: 800;
    color: #e5e5e5; /* Grey number */
    transition: color 0.4s ease;
}

.title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    max-width: 250px;
    line-height: 1.2;
}

/* Icon Styling */
.arrow-wrapper {
    font-size: 24px;
    color: #6e2feb;
    opacity: 0;
    transform: translateX(-30px); /* Starts hidden to the left */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- THE HOVER STATE --- */

/* 1. Number becomes purple */
.service-box:hover .num {
    color: #6e2feb;
}

/* 2. Icon slides in and becomes visible */
.service-box:hover .arrow-wrapper {
    opacity: 1;
    transform: translateX(0);
}

/* 3. The bottom purple line expands */
.active-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #6e2feb;
    transition: width 0.4s ease;
}

.service-box:hover .active-line {
    width: 100%;
}

/* Responsive fix */
@media (max-width: 900px) {
    .services-section { grid-template-columns: 1fr; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-89ef0d8 *//* Import a clean Font like the video */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

.services-section {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns like the video */
    background: #fff;
    font-family: 'Inter', sans-serif;
}

.service-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 40px;
    border: 1px solid #f2f2f2; /* Light grid lines */
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.service-left {
    display: flex;
    align-items: center;
    gap: 30px;
}

.num {
    font-size: 38px;
    font-weight: 800;
    color: #e5e5e5; /* Grey number */
    transition: color 0.4s ease;
}

.title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    max-width: 250px;
    line-height: 1.2;
}

/* Icon Styling */
.arrow-wrapper {
    font-size: 24px;
    color: #6e2feb;
    opacity: 0;
    transform: translateX(-30px); /* Starts hidden to the left */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- THE HOVER STATE --- */

/* 1. Number becomes purple */
.service-box:hover .num {
    color: #6e2feb;
}

/* 2. Icon slides in and becomes visible */
.service-box:hover .arrow-wrapper {
    opacity: 1;
    transform: translateX(0);
}

/* 3. The bottom purple line expands */
.active-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #6e2feb;
    transition: width 0.4s ease;
}

.service-box:hover .active-line {
    width: 100%;
}

/* Responsive fix */
@media (max-width: 900px) {
    .services-section { grid-template-columns: 1fr; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0c15c5b *//* Import a clean Font like the video */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

.services-section {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns like the video */
    background: #fff;
    font-family: 'Inter', sans-serif;
}

.service-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 40px;
    border: 1px solid #f2f2f2; /* Light grid lines */
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.service-left {
    display: flex;
    align-items: center;
    gap: 30px;
}

.num {
    font-size: 38px;
    font-weight: 800;
    color: #e5e5e5; /* Grey number */
    transition: color 0.4s ease;
}

.title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    max-width: 250px;
    line-height: 1.2;
}

/* Icon Styling */
.arrow-wrapper {
    font-size: 24px;
    color: #6e2feb;
    opacity: 0;
    transform: translateX(-30px); /* Starts hidden to the left */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- THE HOVER STATE --- */

/* 1. Number becomes purple */
.service-box:hover .num {
    color: #6e2feb;
}

/* 2. Icon slides in and becomes visible */
.service-box:hover .arrow-wrapper {
    opacity: 1;
    transform: translateX(0);
}

/* 3. The bottom purple line expands */
.active-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #6e2feb;
    transition: width 0.4s ease;
}

.service-box:hover .active-line {
    width: 100%;
}

/* Responsive fix */
@media (max-width: 900px) {
    .services-section { grid-template-columns: 1fr; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6fdf883 */* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    padding: 80px 0;
}

.main-title {
    text-align: center;
    font-size: 45px;
    margin-bottom: 50px;
    font-weight: 700;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Columns */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.member-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.image-container {
    position: relative;
    width: 100%;
    height: 400px;
    /* Video wala Arch shape */
    border-radius: 200px 200px 15px 15px; 
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover Blue Tint Overlay */
.blue-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(58, 87, 232, 0.65); /* Blue shade from video */
    opacity: 0;
    transition: 0.4s ease;
    z-index: 1;
}

.member-card:hover .blue-overlay {
    opacity: 1;
}

/* Social Icons Sliding from Left */
.social-icons {
    position: absolute;
    left: -60px; /* Start outside */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 2;
    transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.member-card:hover .social-icons {
    left: 20px;
}

.social-icons a {
    width: 38px; height: 38px;
    background: #fff;
    color: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.social-icons a:hover {
    background: #000;
    color: #fff;
}

/* White Name Label Sliding Up from Bottom */
.info-box {
    position: absolute;
    bottom: -100px; /* Start hidden below */
    left: 0;
    width: 100%;
    background: #fff;
    padding: 20px 25px;
    z-index: 3;
    transition: 0.4s ease-out;
    border-radius: 20px 20px 0 0; /* Rounded top for the label */
}

.member-card:hover .info-box {
    bottom: 0;
}

.info-box h3 {
    font-size: 19px;
    color: #111;
    margin: 0;
    font-weight: 600;
}

.info-box p {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
}

/* Responsive */
@media (max-width: 1024px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .team-grid { grid-template-columns: 1fr; }
}/* End custom CSS */