@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Outfit:wght@100..900&display=swap");

   :root {
     
      --yellow: #d8ac66;
      --yellow-dark: #d8ac66;
        --tc-purple:        #6a5acd;
      --tc-purple-light:  #ede9fe;
      --tc-purple-dark:   #3a2b97;
      --tc-purple-accent: #a78bfa;
      --tc-dark:          #1e1b4b;
      --tc-orange:        #f59e0b;
      --tc-gray-50:       #f9fafb;
      --tc-gray-100:      #f3f4f6;
      --tc-gray-200:      #e5e7eb;
      --tc-gray-400:      #9ca3af;
      --tc-gray-600:      #4b5563;
      /* Bootstrap purple overrides */
      --bs-primary:       #7c3aed;
      --bs-primary-rgb:   124,58,237;
    
      /* --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; */
    }
a,
a:hover {
    text-decoration: none;
}
@font-face {
  font-family: "SportsMillGoudy";
  src: url("../fonts/SportsMillGoudy-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
ul {
    padding: 0;
    margin: 0;
}

ul li {
    list-style: none;
}

h2,
p {
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0;
}

input,
textarea {
    background: none;
    border: none;
    outline: none;
}

img {
    max-width: 100%;
    max-height: 100%;
}

body {
    font-family: var(--ztc-family-font1);
    overflow-x : hidden;
    margin-top: 78.91px;
}

.space6 {
    height: 6px;
}

.space8 {
    height: 8px;
}

.space10 {
    height: 10px;
}

.space12 {
    height: 12px;
}

.space14 {
    height: 14px;
}
@media (max-width: 1400px) {
 .space14{
 height: 8px;
 
}
}
.space16 {
    height: 16px;
}

.space18 {
    height: 18px;
}

.space20 {
    height: 20px;
}

.space22 {
    height: 22px;
}

.space24 {
    height: 24px;
}

.space26 {
    height: 26px;
}

.space28 {
    height: 28px;
}

.space30 {
    height: 30px;
}

.space32 {
    height: 32px;
}

.space34 {
    height: 34px;
}

.space36 {
    height: 36px;
}

.space38 {
    height: 38px;
}

.space40 {
    height: 40px;
}

.space42 {
    height: 42px;
}

.space44 {
    height: 44px;
}

.space46 {
    height: 46px;
}

.space48 {
    height: 48px;
}

.space50 {
    height: 50px;
}

.space52 {
    height: 52px;
}

.space54 {
    height: 54px;
}

.space56 {
    height: 56px;
}

.space58 {
    height: 58px;
}

.space60 {
    height: 60px;
}

.space62 {
    height: 62px;
}

.space64 {
    height: 64px;
}

.space66 {
    height: 66px;
}

.space68 {
    height: 68px;
}

.space70 {
    height: 70px;
}

.space72 {
    height: 72px;
}

.space74 {
    height: 74px;
}

.space76 {
    height: 76px;
}

.space78 {
    height: 78px;
}

.space80 {
    height: 80px;
}

.space82 {
    height: 82px;
}

.space84 {
    height: 84px;
}

.space86 {
    height: 86px;
}

.space {
    height: 88px;
}

.space90 {
    height: 90px;
}

.space92 {
    height: 92px;
}

.space94 {
    height: 94px;
}

.space96 {
    height: 96px;
}

.space98 {
    height: 98px;
}

.space100 {
    height: 100px;
}

@keyframes animation-5 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}



:root {
    --ztc-text-text-1: #fff;
    --ztc-text-text-2: #1C293F;
    --ztc-text-text-3: #31353D;
    --ztc-text-text-4: #BEDC48;
    --ztc-text-text-5: #021A38;
    --ztc-text-text-6: #414952;
    --ztc-text-text-7: #1BB77C;
    --ztc-text-text-8: #00397F;
    --ztc-text-text-9: #021A13;
    --ztc-text-text-10: #64B427;
    --ztc-text-text-11: #01002f;
    --ztc-text-text-12: #3d3289;
    --ztc-text-text-13: #E6E6EF;
    --ztc-text-text-14: #06030E;
    --ztc-text-text-15: #323246;
    --ztc-text-text-16: #892CFF;
    --ztc-text-text-17: #090B0E;
    --ztc-text-text-18: #494A4A;
    --ztc-text-text-19: #84A17D;
    --ztc-text-text-20: #153C3C;
    --ztc-text-text-21: #565857;
    --ztc-text-text-22: #F28737;
    --ztc-text-text-23: #009EA7;
    --ztc-bg-bg-1: #fff;
    --ztc-bg-bg-2: #1C293F;
  --ztc-bg-bg-3:#3d3289;
    --ztc-bg-bg-4: #F4F4F9;
    --ztc-bg-bg-5: #021A38;
    --ztc-bg-bg-6: #1BB77C;
    --ztc-bg-bg-7: #00397F;
    --ztc-bg-bg-8: #021A13;
    --ztc-bg-bg-9: #64B427;
    --ztc-bg-bg-10: #02015A;
    --ztc-bg-bg-11: #3D3289;
    --ztc-bg-bg-12: #06030E;
    --ztc-bg-bg-13: #892CFF;
    --ztc-bg-bg-14: #090B0E;
    --ztc-bg-bg-15: #84A17D;
    --ztc-bg-bg-16: #153C3C;
    --ztc-bg-bg-17: #F28737;
    --ztc-bg-bg-18: #009EA7;
   

    --ztc-font-size-font-s10: 10px;
    --ztc-font-size-font-s12: 12px;
    --ztc-font-size-font-s14: 14px;
    --ztc-font-size-font-s16: 16px;
    --ztc-font-size-font-s18: 18px;
    --ztc-font-size-font-s20: 15px;
    --ztc-font-size-font-s22: 22px;
    --ztc-font-size-font-s24: 24px;
    --ztc-font-size-font-s26: 26px;
    --ztc-font-size-font-s28: 28px;
    --ztc-font-size-font-s30: 30px;
    --ztc-font-size-font-s32: 32px;
    --ztc-font-size-font-s34: 34px;
    --ztc-font-size-font-s36: 36px;
    --ztc-font-size-font-s38: 38px;
    --ztc-font-size-font-s40: 40px;
    --ztc-font-size-font-s42: 42px;
    --ztc-font-size-font-s44: 44px;
    --ztc-font-size-font-s46: 46px;
    --ztc-font-size-font-s48: 48px;
    --ztc-font-size-font-s50: 50px;
    --ztc-font-size-font-s52: 52px;
    --ztc-font-size-font-s54: 54px;
    --ztc-font-size-font-s56: 56px;
    --ztc-font-size-font-s58: 58px;
    --ztc-font-size-font-s60: 60px;
    --ztc-font-size-font-s62: 62px;
    --ztc-font-size-font-s64: 64px;
    --ztc-font-size-font-s66: 66px;
    --ztc-font-size-font-s68: 68px;
    --ztc-font-size-font-s70: 70px;
    --ztc-font-size-font-s10: 10px;
    --ztc-font-size-font-s12: 12px;
    --ztc-font-size-font-s14: 14px;
    --ztc-font-size-font-s16: 16px;
    --ztc-font-size-font-s18: 18px;
    --ztc-font-size-font-s20: 20px;
    --ztc-font-size-font-s22: 22px;
    --ztc-font-size-font-s24: 24px;
    --ztc-font-size-font-s26: 26px;
    --ztc-font-size-font-s28: 28px;
    --ztc-font-size-font-s30: 30px;
    --ztc-font-size-font-s32: 32px;
    --ztc-font-size-font-s34: 34px;
    --ztc-font-size-font-s36: 36px;
    --ztc-font-size-font-s38: 38px;
    --ztc-font-size-font-s40: 40px;
    --ztc-font-size-font-s42: 42px;
    --ztc-font-size-font-s44: 44px;
    --ztc-font-size-font-s46: 46px;
    --ztc-font-size-font-s48: 48px;
    --ztc-font-size-font-s50: 50px;
    --ztc-font-size-font-s52: 52px;
    --ztc-font-size-font-s54: 54px;
    --ztc-font-size-font-s56: 56px;
    --ztc-font-size-font-s58: 58px;
    --ztc-font-size-font-s60: 60px;
    --ztc-font-size-font-s62: 62px;
    --ztc-font-size-font-s64: 64px;
    --ztc-font-size-font-s66: 66px;
    --ztc-font-size-font-s68: 68px;
    --ztc-font-size-font-s70: 70px;
    --ztc-specing-height6: 6px;
    --ztc-specing-height8: 8px;
    --ztc-specing-height10: 10px;
    --ztc-specing-height12: 12px;
    --ztc-specing-height14: 114px;
    --ztc-specing-height16: 16px;
    --ztc-specing-height18: 18px;
    --ztc-specing-height20: 20px;
    --ztc-specing-height22: 22px;
    --ztc-specing-height24: 24px;
    --ztc-specing-height26: 26px;
    --ztc-specing-height28: 28px;
    --ztc-specing-height30: 30px;
    --ztc-specing-height32: 32px;
    --ztc-specing-height34: 34px;
    --ztc-specing-height36: 36px;
    --ztc-specing-height38: 38px;
    --ztc-specing-height40: 40px;
    --ztc-specing-height42: 42px;
    --ztc-specing-height44: 44px;
    --ztc-specing-height46: 46px;
    --ztc-specing-height48: 48px;
    --ztc-specing-height50: 50px;
    --ztc-specing-height52: 52px;
    --ztc-specing-height54: 54px;
    --ztc-specing-height56: 56px;
    --ztc-specing-height58: 58px;
    --ztc-specing-height60: 60px;
    --ztc-specing-height70: 70px;
    --ztc-specing-height80: 80px;
    --ztc-specing-height90: 90px;
    --ztc-specing-height100: 100px;
    --ztc-specing-height110: 110px;
    --ztc-specing-height120: 120px;
    --ztc-specing-height130: 130px;
    --ztc-weight-regular: 400;
    --ztc-weight-medium: 500;
    --ztc-weight-semibold: 600;
    --ztc-weight-bold: 700;
    --ztc-weight-black: 800;
    --ztc-family-font1: 'Figtree', sans-serif;
    --ztc-family-font2: 'Outfit', sans-serif;
}

/*============= COMMON CSS AREA ===============*/
.menu-container{
    width:95%;
}
.heading1 h5 {
    color: var(--ztc-text-text-2);
    font-family: var(--ztc-family-font2);
    font-size: var(--ztc-font-size-font-s18);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 18px;
    text-transform: uppercase;
}

.heading1 h5 img {
    margin: 0 4px 0 0;
}

.heading1 h2 {
    color: var(--ztc-text-text-2);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s38);
    font-style: normal;
    font-weight: var(--ztc-weight-bold);
    line-height: 46px;
}

@media (max-width: 767px) {
    .heading1 h2 {
        font-size: var(--ztc-font-size-font-s32);
        line-height: 40px;
    }
}
@media (min-width: 767px) and (max-width: 1400px) {
     .heading1 h2 {
        font-size: var(--ztc-font-size-font-s34);
      
    }
}
.heading1 p {
    color: var(--ztc-text-text-3);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 26px;
}
@media (max-width: 767px) {
  .heading1 p {
    font-weight:var(--ztc-weight-medium);
    font-size: var(--ztc-font-size-font-s16);
 
}
}


.heading4 h5 {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font2);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    display: inline-block;
    transition: all 0.4s;
    border-radius: 50px;
    /*background: rgba(68, 22, 255, 0.1);*/
    background:#d8ac66;
    box-shadow: 0px 3px 8px 0px rgba(68, 22, 255, 0.05);
    padding: 8px 16px;
}
.headingdark h5 {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font2);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    display: inline-block;
    transition: all 0.4s;
    border-radius: 50px;
    background: #D8AC66;
    box-shadow: 0px 3px 8px 0px rgba(68, 22, 255, 0.05);
    padding: 8px 16px;
}

.heading4 h5 span {
    display: inline-block;
    transition: all 0.4s;
    /*color: #C4BAE8;*/
    color:var(--ztc-text-text-11);
    margin: 0 6px;
}

.heading4 h5 svg {
    padding-left: 4px;
    height: 16px;
    width: 16px;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all 0.4s;
}

.heading4 h5:hover svg {
    padding-left: 8px;
    transition: all 0.4s;
}

.heading4 h1 {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s70);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    /* line-height: 70px; */
    /* letter-spacing: -4.2px; */
    display: inline-block;
    transition: all 0.4s;
}

@media (max-width: 767px) {
    .heading4 h1 {
        font-size: var(--ztc-font-size-font-s32);
        line-height: 40px;
        letter-spacing: 0.5px;
    }
}

.heading4 h2 {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: 42px;
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 48px;
    display: inline-block;
    transition: all 0.4s;
}
.headingdark h2 {
    color: white;
    font-family: var(--ztc-family-font1);
    font-size: 42px;
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 48px;
    display: inline-block;
    transition: all 0.4s;
}

@media (max-width: 767px) {
    
    .heading4 h2 {
        font-size: 28px;
        line-height: 32px;
    }

}
@media (min-width: 767px) and (max-width: 1400px) {
    
   .headingdark h2 {
        line-height: 38px;
    font-size: 32px;
    
}
 .heading4 h2 {
      line-height: 38px;
        font-size: 32px;
    }
}

.heading4 p {
    color: 15px;
    font-family: var(--ztc-family-font1);
    font-size: 15px;
    font-style: normal;
    font-weight: var(--ztc-weight-regular);
    line-height: 25px;
    letter-spacing: -0.4px;
}




.vl-btn4 {
     border:none;
    color: var(--ztc-text-text-13);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 16px;
    letter-spacing: -0.16px;
    display: inline-block;
    transition: all 0.4s;
    border-radius: 50px;
    background: #694da8;
    box-shadow: 0px 4px 15px 0px rgba(68, 22, 255, 0.2);
    padding: 14px 16px;
    position: relative;
    z-index: 1;
}

.vl-btn4:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}

.vl-btn4:hover svg {
    transform: rotate(45deg);
    transition: all 0.4s;
}

.vl-btn4:hover::after {
    width: 100%;
    left: 0;
    transition: all 0.4s;
    visibility: visible;
    opacity: 1;
}

.vl-btn4::after {
    position: absolute;
    content: "";
    height: 100%;
    left: 50%;
    top: 0;
    transition: all 0.4s;
    width: 10px;
    background: var(--ztc-bg-bg-10);
    border-radius: 50px;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
}

.vl-btn4 svg {
    margin-left: 10px;
    transition: all 0.4s;
}


/*============= COMMON CSS AREA ENDS===============*/

.image-anime {
    position: relative;
    overflow: hidden;
}

.image-anime:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 20%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal {
    position: relative;
    display: -ms-inline-flexbox;
    visibility: hidden;
    overflow: hidden;
}

.reveal img {
    height: 100%;
    width: 100%;
    display: inline-block;
    -o-object-fit: cover;
    object-fit: cover;
    transform-origin: left;
}

.w-bg {
    background: var(--ztc-bg-bg-1) !important;
}

.sp1 {
    padding: 100px 0 100px;
}

@media (max-width: 767px) {
    .sp1 {
        padding: 50px 0 50px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp1 {
        padding: 50px 0 50px;
    }
}

.sp2 {
    padding: 100px 0 70px;
}

@media (max-width: 767px) {
    .sp2 {
        padding: 50px 0 20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp2 {
        padding: 50px 0 20px;
    }
}

.sp3 {
    padding: 100px 0 50px;
}

.sp4 {
    padding: 80px 0 80px;
}

@media (max-width: 767px) {
    .sp4 {
        padding: 40px 0 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp4 {
        padding: 40px 0 40px;
    }
}

.sp5 {
    padding: 60px 0 60px;
}

@media (max-width: 767px) {
    .sp5 {
        padding: 30px 0 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp5 {
        padding: 30px 0 30px;
    }
}

.sp6 {
    padding: 120px 0 120px;
}

@media (max-width: 767px) {
    .sp6 {
        padding: 60px 0 60px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp6 {
        padding: 60px 0 60px;
    }
}

.sp7 {
    padding: 120px 0 90px;
}

@media (max-width: 767px) {
    .sp7 {
        padding: 60px 0 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp7 {
        padding: 60px 0 30px;
    }
}

.sp8 {
    padding: 100px 0 0;
}

@media (max-width: 767px) {
    .sp8 {
        padding: 50px 0 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp8 {
        padding: 50px 0 0;
    }
}

.sp9 {
    padding: 120px 0 0;
}

@media (max-width: 767px) {
    .sp9 {
        padding: 60px 0 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp9 {
        padding: 60px 0 0;
    }
}

.sp10 {
    padding: 0 0 100px;
}

@media (max-width: 767px) {
    .sp10 {
        padding: 0 0 50px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sp10 {
        padding: 0 0 50px;
    }
}

.space-margin60 {
    margin-bottom: 60px;
}

@media (max-width: 767px) {
    .space-margin60 {
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .space-margin60 {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    body,
    html {
        overflow-x: hidden !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    body,
    html {
        overflow-x: hidden !important;
    }
}

/*============= ABOUT CSS AREA ===============*/

.about1-section-area {
    position: relative;
    z-index: 1;
}

.about1-section-area .about-images-area {
    position: relative;
    z-index: 1;
}

.about1-section-area .about-images-area .elements5 {
    position: absolute;
    left: -20px;
    z-index: -1;
    top: 0;
}

.about1-section-area .about-images-area .img1 img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.about1-section-area .about-images-area .about-contact {
    display: flex;
    align-items: center;
    background: var(--ztc-bg-bg-2);
    border-radius: 110px;
    padding: 16px 36px 16px 16px;
    width: 280px;
    position: absolute;
    top: 50%;
    margin-top: -45px;
    left: 23%;
    z-index: 1;
}

.about1-section-area .about-images-area .about-contact:hover span {
    transform: rotateY(-180deg);
    transition: all 0.4s;
}

.about1-section-area .about-images-area .about-contact span {
    height: 60px;
    width: 60px;
    text-align: center;
    line-height: 60px;
    display: inline-block;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-1);
    border-radius: 50%;
}

.about1-section-area .about-images-area .about-contact .text {
    padding-left: 10px;
}

.about1-section-area .about-images-area .about-contact .text p {
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    margin-bottom:0px;
}


.about1-section-area .about-images-area .about-contact .text a {
    color: var(--ztc-text-text-1);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 20px;
    display: inline-block;
    transition: all 0.4s;
}

.about1-section-area .about-images-area .about-contact .text a:hover {
    color: var(--ztc-text-text-4);
    transition: all 0.4s;
}

.about1-section-area .about-heading {
    position: relative;
    z-index: 1;
    /*padding: 0 0 0 100px;*/
}

@media (max-width: 767px) {
    .about1-section-area .about-heading {
        padding: 0;
        margin-top: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about1-section-area .about-heading {
        padding: 0;
        margin-top: 30px;
    }
}

.about1-section-area .about-heading ul li {
    color: var(--ztc-text-text-2);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 18px;
    display: inline-block;
    transition: all 0.4s;
    margin-top: 16px;
}

.about1-section-area .about-heading ul li img {
    margin: 0 4px 0 0;
}





/*============= ABOUT CSS AREA ENDS ===============*/


.service-benefites-section-area {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.service-benefites-section-area .benefites-box {
    position: relative;
    z-index: 1;
}

.service-benefites-section-area .benefites-box .star {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    border:9px solid #694da8;
    display: inline-block;
    background: var(--ztc-bg-bg-1);
    line-height: 150px;
    text-align: center;
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    margin-left: -75px;
    margin-top: -85px;
}

.service-benefites-section-area .benefites-box .benefites-widget-boxarea {
    position: relative;
    /* background: #F4F4F9; */
     background: #1e1369;
    overflow: hidden;
    min-height:250px;
    padding: 32px;
    border-radius: 38px;
    transition: all 0.4s;
    margin-bottom: 30px;
}
/* Background image with low opacity */
.benefites-widget-boxarea::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('https://i.pinimg.com/1200x/d8/a2/ce/d8a2ce8596adc8eee6408ac87d358bee.jpg');
    background-size: cover;
    opacity: 0.08; /* subtle */
    z-index: 0;
}

/* Keep content above background */
.benefites-widget-boxarea > * {
    position: relative;
    z-index: 1;
}

.service-benefites-section-area .benefites-box .benefites-widget-boxarea:hover {
    transform: translateY(-5px);
    transition: all 0.4s;
}

.service-benefites-section-area .benefites-box .benefites-widget-boxarea:hover .icons {
    transform: rotateY(-180deg);
    transition: all 0.4s;
}

.service-benefites-section-area .benefites-box .benefites-widget-boxarea .icons {
    height: 80px;
    width: 80px;
    text-align: center;
    line-height: 80px;
    border-radius: 50%;
    background: var(--ztc-bg-bg-1);
    transition: all 0.4s;
    position: absolute;
}

.service-benefites-section-area .benefites-box .benefites-widget-boxarea .icons img {
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    display: inline-block;
    text-align: center;
}

.service-benefites-section-area .benefites-box .benefites-widget-boxarea .content-area {
    padding-left: 100px;
}

.service-benefites-section-area .benefites-box .benefites-widget-boxarea .content-area .title {
    color:white;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 140%;
    /*letter-spacing: -1.2px;*/
    transition: all 0.4s;
}

.service-benefites-section-area .benefites-box .benefites-widget-boxarea .content-area .title:hover {
    color: var(--ztc-text-text-12);
    transition: all 0.4s;
}

.service-benefites-section-area .benefites-box .benefites-widget-boxarea .content-area p {
    color: white;
    font-family: var(--ztc-family-font1);
    /*font-size: var(--ztc-font-size-font-s20);*/
    font-style: normal;
    font-weight: var(--ztc-weight-regular);
    line-height: 30px;
    letter-spacing: -0.4px;
}

.service-benefites-section-area .benefites-box .benefites-widget-boxarea .content-area .readmore {
    color: white;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 30px;
    letter-spacing: -0.4px;
    display: inline-block;
    transition: all 0.4s;
}

.service-benefites-section-area .benefites-box .benefites-widget-boxarea .content-area .readmore svg {
    margin-left: 4px;
    transition: all 0.4s;
}

.service-benefites-section-area .benefites-box .benefites-widget-boxarea .content-area .readmore:hover {
    color: var(--ztc-text-text-12);
    transition: all 0.4s;
}

.service-benefites-section-area .benefites-box .benefites-widget-boxarea .content-area .readmore:hover svg {
    transform: rotate(45deg);
}




/*============= MOBILE MENU CSS AREA ===============*/

.vl-header-action-item {
    float: right;
    border: 1px solid var(--ztc-text-text-2);
    padding: 6px;
    border-radius: 4px;
    color: var(--ztc-text-text-2);
}

.vl-header-action-item button {
    border: none;
    outline: none;
    background: none;
    transition: all 0.4s;
    color: var(--ztc-text-text-2);
    font-size: var(--ztc-font-size-font-s20);
}

.vl-offcanvas {
    position: fixed;
    background: var(--ztc-bg-bg-2);
    width: 450px;
    z-index: 99;
    right: 0;
    top: 0;
    padding: 50px 40px;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: 0.3s;
    overflow-y: scroll;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}

@media only screen and (max-width: 450px) {
    .vl-offcanvas {
        width: 100%;
    }
}

.vl-offcanvas-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.vl-offcanvas-close-toggle {
    font-size: var(--ztc-font-size-font-s30);
    color: var(--vl-heading-color);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
    .vl-offcanvas-header {
        margin-bottom: 40px;
    }
}

.vl-offcanvas-title {
    font-size: 35px;
    color: var(--ztc-text-text-1);
}

.vl-offcanvas-info span a {
    display: block;
    color: var(--ztc-text-text-1);
    margin-bottom: 10px;
}

.vl-offcanvas-info span a i {
    margin: 0 4px 0 0;
}

.vl-offcanvas-sm-title {
    font-size: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-1);
}

.vl-offcanvas-social a {
    display: inline-block;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    color: var(--ztc-text-text-1);
    border: 1px solid var(--ztc-text-text-1);
    font-size: 14px;
}

.vl-offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: 0.45 easc-in-out;
    background: rgba(24, 24, 24, 0.4);
}

.vl-offcanvas-overlay-open {
    opacity: 0.7;
    visibility: visible;
}

.vl-offcanvas .vl-offcanvas-logo {
    height: 50px;
    width: 164px;
    -o-object-fit: contain;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.vl-offcanvas .vl-offcanvas-close button {
    border: none;
    background: none;
    outline: none;
    color: var(--ztc-text-text-1);
}

.vl-offcanvas-menu ul {
    list-style: none;
}

.vl-offcanvas-menu ul li {
    position: relative;
}

.vl-offcanvas-menu ul li a {
    padding: 8px 0;
    display: block;
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}

.vl-offcanvas-menu ul li a span {
    display: block;
}

.vl-offcanvas-menu ul li>a {
    border-bottom: none;
}

.vl-offcanvas-menu ul li.active>a {
    color: var(--ztc-text-text-1);
}

.vl-offcanvas-menu ul li.active>.vl-menu-close i {
    transform: rotate(90deg);
}

.vl-offcanvas-menu ul li .sub-menu {
    display: none;
    padding-left: 20px;
}

.vl-menu-close {
    position: absolute;
    right: 0;
    top: 7px;
    border: 1px solid var(--ztc-text-text-1);
    height: 30px;
    width: 30px;
    text-align: center;
    font-size: 12px;
    line-height: 25px;
    background: transparent;
    color: var(--ztc-text-text-1);
    border-radius: 4px;
}

.vl-menu-close i {
    transition: 0.3s;
}



.homepage4-body .vl-header-action-item {
    float: right;
    border: 1px solid var(--ztc-text-text-11);
    padding: 6px;
    border-radius: 4px;
    color: var(--ztc-text-text-11);
}

.homepage4-body .vl-header-action-item button {
    border: none;
    outline: none;
    background: none;
    transition: all 0.4s;
    color: var(--ztc-text-text-11);
    font-size: var(--ztc-font-size-font-s20);
}

.homepage4-body .vl-offcanvas {
    position: fixed;
    background: #2d2565;
    width: 450px;
    z-index: 99999;
    right: 0;
    top: 0;
    padding: 50px 40px;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: 0.3s;
    overflow-y: scroll;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}

@media only screen and (max-width: 450px) {
    .homepage4-body .vl-offcanvas {
        width: 100%;
    }
}

.homepage4-body .vl-offcanvas-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.homepage4-body .vl-offcanvas-close-toggle {
    font-size: var(--ztc-font-size-font-s30);
    color: var(--vl-heading-color);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
    .homepage4-body .vl-offcanvas-header {
        margin-bottom: 40px;
    }
}

.homepage4-body .vl-offcanvas-title {
    font-size: 35px;
    color: var(--ztc-text-text-1);
}

.homepage4-body .vl-offcanvas-info span a {
    display: block;
    color: var(--ztc-text-text-1);
    margin-bottom: 10px;
}

.homepage4-body .vl-offcanvas-info span a i {
    margin: 0 4px 0 0;
}

.homepage4-body .vl-offcanvas-sm-title {
    font-size: var(--ztc-font-size-font-s24);
    color: var(--ztc-text-text-1);
}

.homepage4-body .vl-offcanvas-social a {
    display: inline-block;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    color: var(--ztc-text-text-1);
    border: 1px solid var(--ztc-text-text-1);
    font-size: 14px;
}

.homepage4-body .vl-offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: 0.45 easc-in-out;
    background: rgba(24, 24, 24, 0.4);
}

.homepage4-body .vl-offcanvas-overlay-open {
    opacity: 0.7;
    visibility: visible;
}

.homepage4-body .vl-offcanvas .vl-offcanvas-logo {
    height: 50px;
    width: 164px;
    -o-object-fit: contain;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.homepage4-body .vl-offcanvas .vl-offcanvas-close button {
    border: none;
    background: none;
    outline: none;
    color: var(--ztc-text-text-1);
}

.homepage4-body .vl-offcanvas-menu ul {
    list-style: none;
}

.homepage4-body .vl-offcanvas-menu ul li {
    position: relative;
}

.homepage4-body .vl-offcanvas-menu ul li a {
    padding: 8px 0;
    display: block;
    font-size: var(--ztc-font-size-font-s18);
    font-weight: var(--ztc-weight-medium);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}

.homepage4-body .vl-offcanvas-menu ul li a span {
    display: block;
}

.homepage4-body .vl-offcanvas-menu ul li>a {
    border-bottom: none;
}

.homepage4-body .vl-offcanvas-menu ul li.active>a {
    color: var(--ztc-text-text-1);
}

.homepage4-body .vl-offcanvas-menu ul li.active>.vl-menu-close i {
    transform: rotate(90deg);
}

.homepage4-body .vl-offcanvas-menu ul li .sub-menu {
    display: none;
    padding-left: 20px;
}

.homepage4-body .vl-menu-close {
    position: absolute;
    right: 0;
    top: 7px;
    border: 1px solid var(--ztc-text-text-1);
    height: 30px;
    width: 30px;
    text-align: center;
    font-size: 12px;
    line-height: 25px;
    background: transparent;
    color: var(--ztc-text-text-1);
    border-radius: 4px;
}

.homepage4-body .vl-menu-close i {
    transition: 0.3s;
}







/*============= MOBILE MENU CSS AREA ===============*/

/*============= BLOG CSS AREA ===============*/



.vl-blog-4-area {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.vl-blog-4-area .vl-blog-1-item {
    background: var(--ztc-bg-bg-1);
    border-radius: 8px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 8px;
    background: #F4F4F9;
    margin-bottom: 30px;
}

.vl-blog-4-area .vl-blog-1-item:hover .vl-blog-1-thumb img {
    transform: scale(1.1) rotate(-4deg);
    transition: all 0.4s;
}

.vl-blog-4-area .vl-blog-1-item .vl-blog-1-thumb {
    position: relative;
    z-index: 1;
    border-radius: 8px 8px 0 0;
}

.vl-blog-4-area .vl-blog-1-item .vl-blog-1-thumb img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
    transition: all 0.4s;
}

.vl-blog-4-area .vl-blog-1-item .vl-blog-1-content {
    padding: 24px 30px 24px 24px;
}

.vl-blog-4-area .vl-blog-1-item .vl-blog-1-content .vl-blog-meta ul li {
    display: inline-block;
}

.vl-blog-4-area .vl-blog-1-item .vl-blog-1-content .vl-blog-meta ul li a {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s14);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 14px;
    display: inline-block;
    transition: all 0.4s;
    border-radius: 50px;
    background: rgba(68, 22, 255, 0.1);
    box-shadow: 0px 3px 8px 0px rgba(68, 22, 255, 0.05);
    padding: 8px;
    text-transform: uppercase;
}

.vl-blog-4-area .vl-blog-1-item .vl-blog-1-content .vl-blog-1-title a {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 32px;
    /* 125% */
    display: inline-block;
    transition: all 0.4s;
}

.vl-blog-4-area .vl-blog-1-item .vl-blog-1-content .vl-blog-1-title a:hover {
    color: var(--ztc-text-text-12);
    transition: all 0.4s;
}

.vl-blog-4-area .vl-blog-1-item .vl-blog-1-content .vl-blog-1-icon a.learnmore {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    letter-spacing: -0.32px;
    display: inline-block;
    transition: all 0.4s;
}

.vl-blog-4-area .vl-blog-1-item .vl-blog-1-content .vl-blog-1-icon a.learnmore svg {
    margin-left: 4px;
    height: 16px;
    width: 16px;
    -o-object-fit: cover;
    object-fit: cover;
}

.vl-blog-4-area .vl-blog-1-item .vl-blog-1-content .vl-blog-1-icon a.learnmore:hover {
    color: var(--ztc-text-text-12);
    transition: all 0.4s;
}

.vl-blog-4-area .vl-blog-1-item .vl-blog-1-content .vl-blog-1-icon a.learnmore:hover svg {
    transform: rotate(45deg);
    transition: all 0.4s;
}



.vl-blog-4-area-inner {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.vl-blog-4-area-inner .vl-blog-1-item {
    background: var(--ztc-bg-bg-1);
    border-radius: 8px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 8px;
    background: #F4F4F9;
    margin-bottom: 20px;
}

.vl-blog-4-area-inner .vl-blog-1-item:hover .vl-blog-1-thumb img {
    transform: scale(1.1) rotate(-4deg);
    transition: all 0.4s;
}

.vl-blog-4-area-inner .vl-blog-1-item .vl-blog-1-thumb {
    position: relative;
    z-index: 1;
    border-radius: 8px 8px 0 0;
}

.vl-blog-4-area-inner .vl-blog-1-item .vl-blog-1-thumb img {
    min-height:290px;
    max-height:290px;
    /*height: 100%;*/
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
    transition: all 0.4s;
}
.vl-blog-1-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
   
}
.vl-blog-4-area-inner .vl-blog-1-item .vl-blog-1-content {
    padding: 24px 30px 24px 24px;
}

.vl-blog-4-area-inner .vl-blog-1-item .vl-blog-1-content .vl-blog-meta ul li {
    display: inline-block;
}

.vl-blog-4-area-inner .vl-blog-1-item .vl-blog-1-content .vl-blog-meta ul li a {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s14);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 14px;
    display: inline-block;
    transition: all 0.4s;
    border-radius: 50px;
    background: rgba(68, 22, 255, 0.1);
    box-shadow: 0px 3px 8px 0px rgba(68, 22, 255, 0.05);
    padding: 8px;
    text-transform: uppercase;
}

.vl-blog-4-area-inner .vl-blog-1-item .vl-blog-1-content .vl-blog-1-title a {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 32px;
    /* 125% */
    display: inline-block;
    transition: all 0.4s;
}

.vl-blog-4-area-inner .vl-blog-1-item .vl-blog-1-content .vl-blog-1-title a:hover {
    color: var(--ztc-text-text-12);
    transition: all 0.4s;
}

.vl-blog-4-area-inner .vl-blog-1-item .vl-blog-1-content .vl-blog-1-icon a.learnmore {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    letter-spacing: -0.32px;
    display: inline-block;
    transition: all 0.4s;
}

.vl-blog-4-area-inner .vl-blog-1-item .vl-blog-1-content .vl-blog-1-icon a.learnmore svg {
    margin-left: 4px;
    height: 16px;
    width: 16px;
    -o-object-fit: cover;
    object-fit: cover;
}

.vl-blog-4-area-inner .vl-blog-1-item .vl-blog-1-content .vl-blog-1-icon a.learnmore:hover {
    color: var(--ztc-text-text-12);
    transition: all 0.4s;
}

.vl-blog-4-area-inner .vl-blog-1-item .vl-blog-1-content .vl-blog-1-icon a.learnmore:hover svg {
    transform: rotate(45deg);
    transition: all 0.4s;
}

.vl-blog-details-section {
    position: relative;
    z-index: 1;
}

.vl-blog-details-section .blog-auhtor-details-side {
    position: sticky;
    top: 120px;
}

.vl-blog-details-section .blog-auhtor-details-side h3 {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 24px;
}

.vl-blog-details-section .blog-auhtor-details-side .search-area {
    position: relative;
    z-index: 1;
    border-radius: 8px;
    background: #F4F4F9;
    padding: 24px 28px;
}

.vl-blog-details-section .blog-auhtor-details-side .search-area form {
    position: relative;
    z-index: 1;
}

.vl-blog-details-section .blog-auhtor-details-side .search-area form input {
    width: 100%;
    border-radius: 8px;
    background: var(--ztc-bg-bg-1);
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    padding: 19px 16px;
}

.vl-blog-details-section .blog-auhtor-details-side .search-area form button {
    border: none;
    background: none;
    outline: none;
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: var(--ztc-font-size-font-s22);
}

.vl-blog-details-section .blog-auhtor-details-side .category-list-area {
    border-radius: 8px;
    background: #F4F4F9;
    padding: 24px 28px;
}

.vl-blog-details-section .blog-auhtor-details-side .category-list-area ul li {
    margin-top: 18px;
}

.vl-blog-details-section .blog-auhtor-details-side .category-list-area ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 18px;
    border-radius: 8px;
    background: var(--ztc-bg-bg-1);
    padding: 20px;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}

.vl-blog-details-section .blog-auhtor-details-side .category-list-area ul li a:hover {
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}

.vl-blog-details-section .blog-auhtor-details-side .category-list-area ul li a:hover::after {
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
}

.vl-blog-details-section .blog-auhtor-details-side .category-list-area ul li a::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--ztc-bg-bg-11);
    transition: all 0.4s;
    border-radius: 8px;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
}

.vl-blog-details-section .blog-auhtor-details-side .tags-area {
    border-radius: 8px;
    background: #F4F4F9;
    padding: 24px 28px;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-auhtor-details-side .tags-area {
        text-align: center;
    }
}

.vl-blog-details-section .blog-auhtor-details-side .tags-area ul li {
    display: inline-block;
}

.vl-blog-details-section .blog-auhtor-details-side .tags-area ul li a {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    line-height: 18px;
    display: inline-block;
    border-radius: 4px;
    background: var(--ztc-bg-bg-1);
    padding: 10px;
    font-weight: var(--ztc-weight-semibold);
    transition: all 0.4s;
    color: var(--ztc-text-text-11);
    margin-top: 16px;
    position: relative;
    z-index: 1;
    margin-right: 12px;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-auhtor-details-side .tags-area ul li a {
        margin-right: 0;
    }
}

.vl-blog-details-section .blog-auhtor-details-side .tags-area ul li a:hover {
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}

.vl-blog-details-section .blog-auhtor-details-side .tags-area ul li a:hover::after {
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
}

.vl-blog-details-section .blog-auhtor-details-side .tags-area ul li a::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--ztc-bg-bg-11);
    transition: all 0.4s;
    border-radius: 8px;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
}

.vl-blog-details-section .blog-auhtor-details-side .auhtor-area {
    border-radius: 8px;
    background: #F4F4F9;
    padding: 24px 28px;
}

.vl-blog-details-section .blog-auhtor-details-side .auhtor-area ul li {
    display: inline-block;
}

.vl-blog-details-section .blog-auhtor-details-side .auhtor-area ul li a {
    margin: 0 10px 0 0;
}

.vl-blog-details-section .blog-auhtor-details-side .auhtor-area ul li a img {
    height: 70px;
    width: 70px;
    text-align: center;
    line-height: 70px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.vl-blog-details-section .blog-auhtor-details-side .recent-posts-area {
    position: relative;
    z-index: 1;
    border-radius: 8px;
    background: #F4F4F9;
    padding: 24px 28px;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-auhtor-details-side .recent-posts-area {
        text-align: center;
    }
}

.vl-blog-details-section .blog-auhtor-details-side .recent-posts-area .recent-posts {
    position: relative;
    margin-top: 30px;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-auhtor-details-side .recent-posts-area .recent-posts {
        text-align: center;
    }
}

.vl-blog-details-section .blog-auhtor-details-side .recent-posts-area .recent-posts .img1 {
    position: absolute;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-auhtor-details-side .recent-posts-area .recent-posts .img1 {
        position: relative;
    }
}

.vl-blog-details-section .blog-auhtor-details-side .recent-posts-area .recent-posts .img1 img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-auhtor-details-side .recent-posts-area .recent-posts .img1 img {
        height: 100px;
        width: 100px;
        -o-object-fit: cover;
        object-fit: cover;
    }
}

.vl-blog-details-section .blog-auhtor-details-side .recent-posts-area .recent-posts .content {
    padding-left: 140px;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-auhtor-details-side .recent-posts-area .recent-posts .content {
        padding-left: 0;
        margin-top: 16px;
    }
}

.vl-blog-details-section .blog-auhtor-details-side .recent-posts-area .recent-posts .content ul li a {
    color: var(--ztc-text-text-11);
    font-family: var(---ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    display: inline-block;
    transition: all 0.4s;
}

.vl-blog-details-section .blog-auhtor-details-side .recent-posts-area .recent-posts .content ul li a svg {
    margin: -5px 4px 0 0;
    transition: all 0.4s;
}

.vl-blog-details-section .blog-auhtor-details-side .recent-posts-area .recent-posts .content ul li a span {
    color: #E6E6EB;
    display: inline-block;
    margin: 0 8px 0;
}

.vl-blog-details-section .blog-auhtor-details-side .recent-posts-area .recent-posts .content h4 a {
    color: var(--ztc-text-text-11);
    font-family: var(---ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 26px;
    display: inline-block;
    transition: all 0.4s;
}

.vl-blog-details-section .blog-auhtor-details-side .recent-posts-area .recent-posts .content h4 a:hover {
    color: var(--ztc-text-text-12);
    transition: all 0.4s;
}

.vl-blog-details-section .blog-others-sidebar.padding-left {
    padding: 0 0 0 50px;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-others-sidebar.padding-left {
        padding: 0;
        margin-top: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .vl-blog-details-section .blog-others-sidebar.padding-left {
        padding: 0;
        margin-top: 30px;
    }
}

.vl-blog-details-section .blog-others-sidebar.padding-right {
    padding: 0 50px 0 0;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-others-sidebar.padding-right {
        padding: 0;
        margin-top: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .vl-blog-details-section .blog-others-sidebar.padding-right {
        padding: 0;
        margin-top: 30px;
    }
}

.vl-blog-details-section .blog-others-sidebar h2 {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s44);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 52px;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-others-sidebar h2 {
        font-size: var(--ztc-font-size-font-s32);
        line-height: 40px;
    }
}

.vl-blog-details-section .blog-others-sidebar h3 {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s32);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 40px;
}

.vl-blog-details-section .blog-others-sidebar p {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 26px;
    letter-spacing: -0.18px;
}

.vl-blog-details-section .blog-others-sidebar .img1 img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 8px;
}

.vl-blog-details-section .blog-others-sidebar .list-author li {
    display: inline-block;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-others-sidebar .list-author li:nth-child(3) {
        margin-top: 10px;
    }
}

.vl-blog-details-section .blog-others-sidebar .list-author li:nth-child(1) a {
    color: var(--ztc-text-text-1);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    text-transform: capitalize;
    display: inline-block;
    background: var(--ztc-bg-bg-11);
    padding: 10px;
    border-radius: 4px;
    margin: 0 16px 0 0;
}

.vl-blog-details-section .blog-others-sidebar .list-author li a {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    display: inline-block;
}

.vl-blog-details-section .blog-others-sidebar .list-author li a img {
    height: 18px;
    width: 18px;
    -o-object-fit: contain;
    object-fit: contain;
    margin: -5px 4px 0 0;
}

.vl-blog-details-section .blog-others-sidebar .list-author li a span {
    color: #CDCDD6;
    display: inline-block;
    margin: 0 8px;
}

.vl-blog-details-section .blog-others-sidebar .m-list-area .m-list li {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 18px;
    display: inline-block;
    transition: all 0.4s;
    margin-top: 16px;
}

.vl-blog-details-section .blog-others-sidebar .m-list-area .m-list li img {
    margin: 0 6px 0 0;
}

.vl-blog-details-section .blog-others-sidebar .case-pera-box {
    border-radius: 16px;
    background: var(--ztc-bg-bg-10);
    padding: 28px 32px;
    position: relative;
    z-index: 1;
}

.vl-blog-details-section .blog-others-sidebar .case-pera-box p {
    color: var(--ztc-text-text-1);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s22);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 32px;
}

.vl-blog-details-section .blog-others-sidebar .case-pera-box .list-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vl-blog-details-section .blog-others-sidebar .case-pera-box .list-area .author-boxarea {
    display: flex;
    align-items: center;
}

.vl-blog-details-section .blog-others-sidebar .case-pera-box .list-area .author-boxarea .img img {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.vl-blog-details-section .blog-others-sidebar .case-pera-box .list-area .author-boxarea .text {
    padding-left: 12px;
}

.vl-blog-details-section .blog-others-sidebar .case-pera-box .list-area .author-boxarea .text a {
    color: var(--ztc-text-text-1);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s22);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 22px;
    display: inline-block;
    transition: all 0.4s;
}

.vl-blog-details-section .blog-others-sidebar .case-pera-box .list-area .author-boxarea .text p {
    color: var(--ztc-text-text-1);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    opacity: 80%;
}

.vl-blog-details-section .blog-others-sidebar .case-pera-box .list-area ul li {
    display: inline-block;
    height: 26px;
    width: 26px;
    text-align: center;
    line-height: 26px;
    background: var(--ztc-bg-bg-1);
    border-radius: 4px;
    color: #FFA800;
}

.vl-blog-details-section .blog-others-sidebar .video-play-area {
    position: relative;
    z-index: 1;
}

.vl-blog-details-section .blog-others-sidebar .video-play-area .elements3 {
    position: absolute;
    right: 0;
    height: 100%;
    z-index: 2;
}

.vl-blog-details-section .blog-others-sidebar .video-play-area a.play-img {
    display: block;
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}

.vl-blog-details-section .blog-others-sidebar .video-play-area a.play-img::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: var(--ztc-bg-bg-10);
    transition: all 0.4s;
    opacity: 40%;
    border-radius: 8px;
}

.vl-blog-details-section .blog-others-sidebar .video-play-area a.play-img img {
    width: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 8px;
    transition: all 0.4s;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-others-sidebar .video-play-area a.play-img img {
        height: 300px;
    }
}

.vl-blog-details-section .blog-others-sidebar .video-play-area .play-btn {
    position: absolute;
    bottom: 20px;
    right: 30px;
    z-index: 2;
}

.vl-blog-details-section .blog-others-sidebar .video-play-area .play-btn a {
    border-radius: 120px;
    background: var(--ztc-bg-bg-1);
    padding: 8px 22px 8px 10px;
    display: inline-block;
    color: var(--ztc-text-text-2);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    font-style: normal;
    font-weight: var(--ztc-weight-bold);
    line-height: 24px;
    text-transform: uppercase;
}

.vl-blog-details-section .blog-others-sidebar .video-play-area .play-btn a span {
    height: 70px;
    width: 70px;
    text-align: center;
    line-height: 70px;
    border-radius: 50%;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-11);
    color: var(--ztc-text-text-1);
    display: inline-block;
    font-size: var(--ztc-font-size-font-s30);
    margin: 0 8px 0 0;
}

.vl-blog-details-section .blog-others-sidebar .tags-social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 32px;
    border-top: 1px solid #E8EAEC;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-others-sidebar .tags-social {
        display: inline-block;
    }
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-others-sidebar .tags-social .tags {
        margin-bottom: 16px;
    }
}

.vl-blog-details-section .blog-others-sidebar .tags-social .tags ul li {
    display: inline-block;
}

.vl-blog-details-section .blog-others-sidebar .tags-social .tags ul li:nth-child(1) {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 24px;
    margin: 0 16px 0 0;
}

.vl-blog-details-section .blog-others-sidebar .tags-social .tags ul li a {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    text-transform: capitalize;
    display: inline-block;
    transition: all 0.4s;
    border-radius: 4px;
    background: var(--Gray-Color, #F4F4F9);
    padding: 10px;
    margin: 0 8px 0 0;
}

.vl-blog-details-section .blog-others-sidebar .tags-social .tags ul li a:hover {
    background: var(--ztc-bg-bg-11);
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
}

.vl-blog-details-section .blog-others-sidebar .tags-social .social ul li {
    display: inline-block;
}

.vl-blog-details-section .blog-others-sidebar .tags-social .social ul li:nth-child(1) {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 24px;
    margin: 0 16px 0 0;
}

.vl-blog-details-section .blog-others-sidebar .tags-social .social ul li a {
    height: 44px;
    width: 44px;
    text-align: center;
    line-height: 44px;
    border-radius: 50%;
    transition: all 0.4s;
    background: #F4F4F9;
    color: var(--ztc-text-text-2);
    transition: all 0.4s;
    display: inline-block;
    font-size: var(--ztc-font-size-font-s20);
    margin: 0 8px 0 0;
}

.vl-blog-details-section .blog-others-sidebar .tags-social .social ul li a:hover {
    background: var(--ztc-bg-bg-11);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}

.vl-blog-details-section .blog-others-sidebar .comments-boxarea {
    position: relative;
    z-index: 1;
    border-radius: 16px;
    background: #F4F4F9;
    padding: 24px;
}

.vl-blog-details-section .blog-others-sidebar .comments-boxarea.box2 {
    margin: 0 0 0 30px;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-others-sidebar .comments-boxarea.box2 {
        margin: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .vl-blog-details-section .blog-others-sidebar .comments-boxarea.box2 {
        margin: 0;
    }
}

.vl-blog-details-section .blog-others-sidebar .comments-boxarea .comments-boxes {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-others-sidebar .comments-boxarea .comments-boxes {
        display: inline-block;
    }
}

.vl-blog-details-section .blog-others-sidebar .comments-boxarea .comments-boxes .comments-auhtor-box {
    display: flex;
    align-items: center;
}

.vl-blog-details-section .blog-others-sidebar .comments-boxarea .comments-boxes .comments-auhtor-box .img3 img {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.vl-blog-details-section .blog-others-sidebar .comments-boxarea .comments-boxes .comments-auhtor-box .content {
    padding-left: 18px;
}

.vl-blog-details-section .blog-others-sidebar .comments-boxarea .comments-boxes .comments-auhtor-box .content .date {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    /* 100% */
    display: inline-block;
    margin-bottom: 16px;
}

.vl-blog-details-section .blog-others-sidebar .comments-boxarea .comments-boxes .comments-auhtor-box .content .date svg {
    height: 18px;
    width: 18px;
    -o-object-fit: contain;
    object-fit: contain;
    margin: -5px 4px 0 0;
}

.vl-blog-details-section .blog-others-sidebar .comments-boxarea .comments-boxes .comments-auhtor-box .content .name {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 20px;
    display: block;
    transition: all 0.4s;
}

.vl-blog-details-section .blog-others-sidebar .comments-boxarea .comments-boxes .reply {
    color: var(--ztc-text-text-1);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 16px;
    text-transform: capitalize;
    display: inline-block;
    transition: all 0.4s;
    padding: 12px 16px;
    background: var(--ztc-bg-bg-10);
    border-radius: 8px;
}

@media (max-width: 767px) {
    .vl-blog-details-section .blog-others-sidebar .comments-boxarea .comments-boxes .reply {
        margin-top: 12px;
    }
}

.vl-blog-details-section .blog-others-sidebar .comments-boxarea .comments-boxes .reply i {
    margin: 0 2px 0 0;
}

.vl-blog-details-section .blog-others-sidebar .contact-boxarea {
    border-radius: 16px;
    background: var(--Gray-Color, #F4F4F9);
    padding: 32px;
}

.vl-blog-details-section .blog-others-sidebar .contact-boxarea h3 {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s32);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 32px;
}

.vl-blog-details-section .blog-others-sidebar .contact-boxarea .input-area {
    margin-top: 16px;
}

.vl-blog-details-section .blog-others-sidebar .contact-boxarea .input-area input {
    width: 100%;
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    padding: 20px;
    border-radius: 4px;
    background: var(--ztc-bg-bg-1);
}

.vl-blog-details-section .blog-others-sidebar .contact-boxarea .input-area input::-moz-placeholder {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
}

.vl-blog-details-section .blog-others-sidebar .contact-boxarea .input-area input::placeholder {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
}

.vl-blog-details-section .blog-others-sidebar .contact-boxarea .input-area textarea {
    width: 100%;
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    padding: 20px;
    border-radius: 4px;
    background: var(--ztc-bg-bg-1);
    height: 120px;
}

.vl-blog-details-section .blog-others-sidebar .contact-boxarea .input-area textarea::-moz-placeholder {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
}

.vl-blog-details-section .blog-others-sidebar .contact-boxarea .input-area textarea::placeholder {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
}

.vl-blog-details-section .blog-others-sidebar .contact-boxarea .input-area button {
    border: none;
    outline: none;
    text-align: center;
    width: 100%;
}

/*============= BLOG CSS AREA ENDS ===============*/

/*============= FOOTER CSS AREA ===============*/

.vl-footer1-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-bg-bg-4);
    padding: 80px 0 32px;
    overflow: hidden;
}

.vl-footer1-section-area .footer-time-area h4 {
    color: var(--ztc-text-text-2);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 24px;
    display: inline-block;
}

.vl-footer1-section-area .footer-time-area ul {
    background: var(--ztc-bg-bg-1);
    border-radius: 8px;
    padding: 6px 28px 24px 28px;
}

.vl-footer1-section-area .footer-time-area ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid #E8EAEC;
    padding-top: 18px;
}

.vl-footer1-section-area .footer-time-area ul li:nth-child(3) {
    padding-bottom: 0;
    padding-top: 18px;
    border: none;
}

.vl-footer1-section-area .footer-time-area ul li span a {
    color: var(--ztc-text-text-2);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-family-font1);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    display: inline-block;
    transition: all 0.4s;
}

.vl-footer1-section-area .footer-time-area ul li span a:nth-child(1) {
    font-weight: var(--ztc-weight-semibold);
}

.vl-footer1-section-area .footer-widget-area.foot-padding1 {
    padding-left: 60px;
}

@media (max-width: 767px) {
    .vl-footer1-section-area .footer-widget-area.foot-padding1 {
        padding-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .vl-footer1-section-area .footer-widget-area.foot-padding1 {
        padding-left: 0;
    }
}

.vl-footer1-section-area .footer-widget-area.foot-padding1 ul li a:hover {
    color: var(--ztc-text-text-4);
    transition: all 0.4s;
    padding-left: 5px;
}

.vl-footer1-section-area .footer-widget-area.foot-padding2 {
    padding-left: 30px;
}

@media (max-width: 767px) {
    .vl-footer1-section-area .footer-widget-area.foot-padding2 {
        padding-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .vl-footer1-section-area .footer-widget-area.foot-padding2 {
        padding-left: 0;
    }
}
.footer-widget-area ul li a {
  display: flex;
  align-items: flex-start;
}

.footer-widget-area ul li a svg {
  margin-right: 10px;
  flex-shrink: 0; /* keep icon fixed */
}

.footer-widget-area ul li a span {
  display: block;
  line-height: 1.5;
}
.vl-footer1-section-area .footer-widget-area.foot-padding2 ul li a:hover {
    color: var(--ztc-text-text-4);
    transition: all 0.4s;
    padding-left: 5px;
}

.vl-footer1-section-area .footer-widget-area h3 {
    color: var(--ztc-text-text-2);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 24px;
}

.vl-footer1-section-area .footer-widget-area ul li a {
    color: var(--ztc-text-text-3);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    transition: all 0.4s;
    display: inline-block;
    padding-top: 24px;
}

.vl-footer1-section-area .footer-widget-area ul li a img {
    margin: 0 4px 0 0;
}

.vl-footer1-section-area .footer-widget-area .social-links li {
    display: inline-block;
}

.vl-footer1-section-area .footer-widget-area .social-links li a {
    height: 36px;
    width: 36px;
    display: inline-block;
    transition: all 0.4s;
    border-radius: 50%;
    background: var(--ztc-bg-bg-1);
    color: var(--ztc-text-text-2);
    line-height: 36px;
    padding: 0;
    text-align: center;
    margin: 0 4px 0 0;
}

.vl-footer1-section-area .footer-widget-area .social-links li a:nth-child(4) {
    margin: 0;
}

.vl-footer1-section-area .footer-widget-area .social-links li a:hover {
    background: var(--ztc-bg-bg-3);
    transition: all 0.4s;
}

.vl-footer1-section-area .footer-widget-area .footer-images {
    padding-top: 10px;
    position: relative;
    z-index: 1;
}

.vl-footer1-section-area .footer-widget-area .footer-images:hover .icons a {
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
}

.vl-footer1-section-area .footer-widget-area .footer-images img {
    height: 70px;
    width: 70px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
    max-width: 70px;
}

@media (max-width: 767px) {
    .vl-footer1-section-area .footer-widget-area .footer-images img {
        width: 100px;
        max-width: 100px;
    }
}

.vl-footer1-section-area .footer-widget-area .footer-images .icons a {
    height: 26px;
    width: 26px;
    text-align: center;
    line-height: 26px;
    display: inline-block;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-3);
    color: var(--ztc-text-text-2);
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -7px;
    margin-left: -7px;
    visibility: hidden;
    opacity: 0;
}

.vl-footer1-section-area .copyright-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 28px;
    border-top: 1px solid #D4D6DD;
}

@media (max-width: 767px) {
    .vl-footer1-section-area .copyright-area {
        display: inline-block;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .vl-footer1-section-area .copyright-area {
        display: inline-block;
    }
}

.vl-footer1-section-area .copyright-area img {
    width: 175px;
    height: 34px;
    -o-object-fit: contain;
    object-fit: contain;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .vl-footer1-section-area .copyright-area ul {
        padding-top: 20px;
    }
}

.vl-footer1-section-area .copyright-area ul li {
    display: inline-block;
}

.vl-footer1-section-area .copyright-area ul li span {
    margin: 0 14px;
    display: inline-block;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .vl-footer1-section-area .copyright-area ul li span {
        margin: 0 6px;
    }
}

.vl-footer1-section-area .copyright-area ul li a {
    color: var(--ztc-text-text-2);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 18px;
    display: inline-block;
    transition: all 0.4s;
    opacity: 80%;
}

@media (max-width: 767px) {
    .vl-footer1-section-area .copyright-area ul li a {
        font-size: var(--ztc-font-size-font-s14);
        line-height: 16px;
        padding-top: 16px;
    }
}



.footer-container{
    width:80%;
}
.vl-footer4-section-area {
    position: relative;
    z-index: 1;
    padding: 80px 0 32px;
    overflow: hidden;
    background-image: url(https://img.freepik.com/free-vector/dark-abstract-dna-structure-background_23-2148192850.jpg?semt=ais_hybrid&w=740&q=80);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Add black overlay */
.vl-footer4-section-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* adjust opacity as needed */
    z-index: -1; /* make sure overlay stays behind the content */
}

.vl-footer4-section-area .footer-description-area {
    padding: 0 30px 0 0;
}

.vl-footer4-section-area .footer-description-area img {
    width: 200px;
    /* height: 44px; */
    -o-object-fit: cover;
    object-fit: cover;
}

.vl-footer4-section-area .footer-description-area p {
    color: white;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    font-style: normal;
    font-weight: var(--ztc-weight-regular);
    line-height: 30px;
    letter-spacing: -0.4px;

    padding-bottom: 28px;
    /* border-bottom: 1px solid var(--ztc-text-text-1); */
}

.vl-footer4-section-area .footer-description-area .footer-form-area {
    position: relative;
    z-index: 1;
}

.vl-footer4-section-area .footer-description-area .footer-form-area form {
    position: relative;
    z-index: 1;
}

.vl-footer4-section-area .footer-description-area .footer-form-area form input {
    width: 100%;
    background: var(--ztc-bg-bg-1);
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-regular);
    line-height: 24px;
    /* 150% */
    letter-spacing: -0.16px;
    padding: 24px;
    border-radius: 100px;
}

.vl-footer4-section-area .footer-description-area .footer-form-area form input::-moz-placeholder {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-regular);
    line-height: 24px;
    /* 150% */
    letter-spacing: -0.16px;
    opacity: 70%;
}

.vl-footer4-section-area .footer-description-area .footer-form-area form input::placeholder {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-regular);
    line-height: 24px;
    /* 150% */
    letter-spacing: -0.16px;
    opacity: 70%;
}

.vl-footer4-section-area .footer-description-area .footer-form-area form button {
    border: none;
    outline: none;
    position: absolute;
    right: 10px;
    top: 11px;
}

.vl-footer4-section-area .footer-widget-area.foot-padding1 {
    /*padding-left: 60px;*/
}

@media (max-width: 767px) {
    .vl-footer4-section-area .footer-widget-area.foot-padding1 {
        padding-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .vl-footer4-section-area .footer-widget-area.foot-padding1 {
        padding-left: 0;
    }
}

.vl-footer4-section-area .footer-widget-area.foot-padding1 ul li a:hover {
    color: var(--ztc-text-text-12);
    transition: all 0.4s;
    padding-left: 5px;
}

.vl-footer4-section-area .footer-widget-area.foot-padding2 {
    padding-left: 30px;
}

@media (max-width: 767px) {
    .vl-footer4-section-area .footer-widget-area.foot-padding2 {
        padding-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .vl-footer4-section-area .footer-widget-area.foot-padding2 {
        padding-left: 0;
    }
}

.vl-footer4-section-area .footer-widget-area.foot-padding2 ul li a:hover {
    color: var(--ztc-text-text-12);
    transition: all 0.4s;
    padding-left: 5px;
}

.vl-footer4-section-area .footer-widget-area h3 {
    color: white;
    font-family: var(--ztc-family-font1);
    font-size: 22px;
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 24px;
}

.vl-footer4-section-area .footer-widget-area ul li a {
    color: white;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 20px;
    transition: all 0.4s;
    /*display: inline-block;*/
    padding-top: 24px;
    /* opacity: 70%; */
}

.vl-footer4-section-area .footer-widget-area ul li a svg {
    margin: 0 4px 0 0;

}

.vl-footer4-section-area .footer-widget-area .social-links li {
    display: inline-block;
}

.vl-footer4-section-area .footer-widget-area .social-links li a {
    height: 36px;
    width: 36px;
    display: inline-block;
    transition: all 0.4s;
    border-radius: 50%;
    background: linear-gradient(118deg, #97A2FA 0.63%, #D9D5FD 85.25%);
    box-shadow: 0px 5px 12px rgba(180, 170, 251, 0.4);
    color: var(--ztc-text-text-11);
    line-height: 36px;
    padding: 0;
    text-align: center;
    margin: 0 4px 0 0;
}

.vl-footer4-section-area .footer-widget-area .social-links li a:nth-child(4) {
    margin: 0;
}

.vl-footer4-section-area .footer-widget-area .social-links li a:hover {
    background: var(--ztc-bg-bg-11);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}

.vl-footer4-section-area .footer-widget-area .footer-images {
    padding-top: 10px;
    position: relative;
    z-index: 1;
}

.vl-footer4-section-area .footer-widget-area .footer-images:hover .icons a {
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
}

.vl-footer4-section-area .footer-widget-area .footer-images img {
    height: 70px;
    width: 70px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
    max-width: 70px;
}

@media (max-width: 767px) {
    .vl-footer4-section-area .footer-widget-area .footer-images img {
        width: 100px;
        max-width: 100px;
    }
}

.vl-footer4-section-area .footer-widget-area .footer-images .icons a {
    height: 26px;
    width: 26px;
    text-align: center;
    line-height: 26px;
    display: inline-block;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-9);
    color: var(--ztc-text-text-1);
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -7px;
    margin-left: -7px;
    visibility: hidden;
    opacity: 0;
}

.vl-footer4-section-area .copyright-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 28px;
    border-top: 1px solid #333333;
}

@media (max-width: 767px) {
    .vl-footer4-section-area .copyright-area {
        display: inline-block;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .vl-footer4-section-area .copyright-area {
        display: inline-block;
    }
}

.vl-footer4-section-area .copyright-area a {
    color: white;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 18px;
    display: inline-block;
    transition: all 0.4s;
    opacity: 70%;
}

@media (max-width: 767px) {
    .vl-footer4-section-area .copyright-area a {
        font-size: var(--ztc-font-size-font-s14);
        line-height: 16px;
        padding-top: 16px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .vl-footer4-section-area .copyright-area ul {
        padding-top: 20px;
    }
}

.vl-footer4-section-area .copyright-area ul li {
    display: inline-block;
}

.vl-footer4-section-area .copyright-area ul li span {
    margin: 0 14px;
    display: inline-block;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .vl-footer4-section-area .copyright-area ul li span {
        margin: 0 6px;
    }
}

.vl-footer4-section-area .copyright-area ul li a {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 18px;
    display: inline-block;
    transition: all 0.4s;
    opacity: 70%;
}

@media (max-width: 767px) {
    .vl-footer4-section-area .copyright-area ul li a {
        font-size: var(--ztc-font-size-font-s14);
        line-height: 16px;
        padding-top: 16px;
    }
}
@media (max-width: 1400px){
    .vl-footer4-section-area .footer-widget-area ul li a{
        font-size:14px;
    }
    .vl-footer4-section-area .footer-description-area p{
        font-size:16px;
    }
}




/*============= FOOTER CSS AREA ===============*/



/*============= HEADER CSS AREA ENDS ===============*/


.homepage4-body .vl-transparent-header {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    padding: 0px 0;
    background: white;
    border-bottom: 1px solid #E8EAEC !important;
}

@media (max-width: 767px) {
    .homepage4-body .vl-transparent-header {
        background: var(--ztc-bg-bg-1);
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .homepage4-body .vl-transparent-header {
        background: var(--ztc-bg-bg-1);
    }
}

.homepage4-body .vl-transparent-header .vl-logo img {
    width: 174px;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
        /* animation: logoFloat 4.5s ease-in-out infinite; */
         /*animation: iconFoldLR 7s infinite ease-in-out;*/
    will-change: transform, filter;

}
@keyframes logoFloat {
    0% {
        transform: translateY(0) scale(1);
        /* filter: drop-shadow(0 0 6px rgba(61, 50, 137, 0.4)); */
    }
    50% {
        transform: translateY(-6px) scale(1.04);
        filter: drop-shadow(0 0 16px rgba(61, 50, 137, 0.9));
    }
    100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 6px rgba(61, 50, 137, 0.4));
    }
}
.homepage4-body .vl-transparent-header .row-bg1 {
    /* background: var(--ztc-bg-bg-1); */
    /*padding: 1px 0 0px 30px;*/
    border-radius: 100px;
    transition: all 0.4s;
}

@media (max-width: 767px) {
    .homepage4-body .vl-transparent-header .row-bg1 {
        padding: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .homepage4-body .vl-transparent-header .row-bg1 {
        padding: 0;
    }
}

.homepage4-body .vl-main-menu ul {
    text-align: center;
}

.homepage4-body .vl-main-menu ul>li {
    display: inline-block;
    position: relative;
}

.homepage4-body .vl-main-menu ul>li .span-arrow {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.homepage4-body .vl-main-menu ul>li a.nav-link.active {
    color: var(--ztc-text-text-12);
    background: none;
    opacity: 70%;
}

.homepage4-body .vl-main-menu ul>li>a {
    color: #3D3289;
      /*font-family: "SportsMillGoudy", serif;*/

    font-size: 15px;
    display: inline-block;
    position: relative;
    transition: 0.4s;
    padding: 0 10px;
    font-weight: 500;
}
@media (min-width: 900px) and (max-width: 1600px) {
 .homepage4-body .vl-main-menu ul>li>a {
      font-size: 13px;
    padding: 0 7px;

}
}
.homepage4-body .vl-main-menu ul>li>a .arrow-size {
    font-size: var(--ztc-font-size-font-s12);
}

.homepage4-body .vl-main-menu ul>li:hover a {
    color: var(--ztc-text-text-12);
}

.homepage4-body .vl-main-menu ul>li .sub-menu {
    position: absolute;
    top: 201%;
    width: 220px;
    left: 0;
    background: var(--ztc-bg-bg-1);
    padding: 12px 20px 24px;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
    transition: 0.4s;
    border-radius: 4px;
    transform-origin: top;
    transform: scale(1, 0);
}

.homepage4-body .vl-main-menu ul>li .sub-menu::after {
    position: absolute;
    content: "";
    height: 2px;
    left: 0;
    width: 100%;
    background: #fd7cb6;
    top: 0;
}

.homepage4-body .vl-main-menu ul>li .sub-menu.menu1 {
    top: 20% !important;
}

.homepage4-body .vl-main-menu ul>li .sub-menu li {
    margin-right: 0;
    display: block;
    text-align: start;
}

.homepage4-body .vl-main-menu ul>li .sub-menu li a {
    color: 14px;
    display: inline-block;
    font-size:14px;
    position: relative;
    z-index: 1;
    padding: 12px 0 0 0;
    font-weight: 500;
}

.homepage4-body .vl-main-menu ul>li .sub-menu li a::after {
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    transition: all 0.4s;
    left: 0;
    bottom: 0;
    background: var(--ztc-bg-bg-11);
    z-index: 1;
}

.homepage4-body .vl-main-menu ul>li .sub-menu li a:hover::after {
    width: 50%;
    transition: all 0.4s;
}

.homepage4-body .vl-main-menu ul>li .sub-menu li a:before {
    display: none;
}

.homepage4-body .vl-main-menu ul>li .sub-menu li .sub-menu {
    left: 100%;
    top: 201%;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
    transform-origin: top;
    transform: scale(1, 0);
}

.homepage4-body .vl-main-menu ul>li .sub-menu li:hover>a {
    color: var(--ztc-text-text-12);
}

.homepage4-body .vl-main-menu ul>li .sub-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    top: 201%;
    transform: scale(1);
}

.homepage4-body .vl-main-menu ul>li:hover a {
    color: #d366af;
}

.homepage4-body .vl-main-menu ul>li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    top: 201%;
    transform: scale(1);
    transition: all 0.4s;
}

.homepage4-body .vl-main-menu ul>li:hover .vl-mega-menu {
    opacity: 1;
    visibility: visible;
    transition: 0.3s;
    top: 201%;
    transform: scale(1);
}

.homepage4-body .vl-mega-menu {
    position: absolute;
    left: -240px;
    top: 100px;
    width: 1300px;
    background: var(--ztc-bg-bg-1);
    padding: 25px;
    box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    top: 201.3%;
    transform: scale(1, 0);
    transform-origin: top;
    border-radius: 4px;
    border: 1px solid #E8EAEC;
    height: 630px;
    overflow-y: scroll;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .homepage4-body .vl-mega-menu {
        left: -162px;
        width: 929px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
    .homepage4-body .vl-mega-menu {
        width: auto;
        opacity: 1;
        visibility: visible;
        transition: none;
        position: static;
        display: none;
        transform: scale(1);
    }
}

.homepage4-body .vl-home-thumb {
    position: relative;
    z-index: 1;
}

.homepage4-body .vl-home-thumb img {
    box-shadow: 0px 2px 6px rgba(1, 15, 28, 0.2);
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .homepage4-body .vl-home-thumb img {
        -o-object-fit: cover;
        object-fit: cover;
    }
}

.homepage4-body .vl-home-thumb .img1 {
    position: relative;
    z-index: 1;
}

.homepage4-body .vl-home-thumb .img1::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    transition: all 0.4s;
    top: 0;
    background: var(--ztc-text-text-2);
    border-radius: 4px;
    transform: scale(0.8);
    visibility: hidden;
    opacity: 0;
}

.homepage4-body .vl-home-thumb .btn-area1 {
    position: absolute;
    top: 20%;
    left: 50%;
    transition: all 0.6s;
    visibility: hidden;
    opacity: 0;
    z-index: 2;
    margin-top: -38px;
    margin-left: -76px;
}

@media (max-width: 767px) {
    .homepage4-body .vl-home-thumb .btn-area1 {
        margin-top: -73px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .homepage4-body .vl-home-thumb .btn-area1 {
        margin-top: -73px;
    }
}

.homepage4-body .vl-home-thumb .btn-area1 .vl-btn4 {
    color: var(--ztc-text-text-1) !important;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 16px;
    letter-spacing: -0.16px;
    display: inline-block;
    transition: all 0.4s;
    border-radius: 50px;
    background: var(--ztc-bg-bg-11);
    box-shadow: 0px 4px 15px 0px rgba(68, 22, 255, 0.2);
    padding: 14px 16px;
    position: relative;
    z-index: 1;
}

.homepage4-body .vl-home-thumb .btn-area1 .vl-btn4:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}

.homepage4-body .vl-home-thumb .btn-area1 .vl-btn4:hover::after {
    width: 100%;
    left: 0;
    transition: all 0.4s;
    visibility: visible;
    opacity: 1;
}

.homepage4-body .vl-home-thumb .btn-area1 .vl-btn4:hover svg {
    transform: rotate(45deg);
    transition: all 0.4s;
}

.homepage4-body .vl-home-thumb .btn-area1 .vl-btn4::after {
    position: absolute;
    content: "";
    height: 100%;
    left: 50%;
    top: 0;
    transition: all 0.4s;
    width: 10px;
    background: var(--ztc-bg-bg-10);
    border-radius: 50px;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
}

.homepage4-body .vl-home-thumb .btn-area1 .vl-btn4 svg {
    margin-left: 10px;
    transition: all 0.4s;
}

.homepage4-body .vl-home-thumb a {
    font-size: var(--ztc-font-size-font-s16);
    line-height: 16px;
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-11) !important;
    transition: all 0.4s;
    display: block;
    padding-top: 16px;
    text-align: center;
    font-family: var(--ztc-family-font1);
}

.homepage4-body .vl-home-thumb a:hover {
    color: var(--ztc-text-text-12) !important;
    transition: all 0.4s;
}

.homepage4-body .vl-home-thumb:hover .btn-area1 {
    visibility: visible;
    opacity: 1;
    transition: all 0.6s;
    top: 50%;
}

.homepage4-body .vl-home-thumb:hover .img1::after {
    transform: scale(1);
    transition: all 0.4s;
    visibility: visible;
    opacity: 0.8;
}

.homepage4-body .vl-hero-btn .btn-area1 .phone {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 140%;
    display: inline-block;
    transition: all 0.4s;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.6);
    padding: 15px 12px;
    margin: 0 8px 0 0;
    position: relative;
    z-index: 1;
}

.homepage4-body .vl-hero-btn .btn-area1 .phone:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}

.homepage4-body .vl-hero-btn .btn-area1 .phone:hover svg {
    filter: brightness(0) invert(1);
    transition: all 0.4s;
}

.homepage4-body .vl-hero-btn .btn-area1 .phone:hover::after {
    width: 100%;
    left: 0;
    transition: all 0.4s;
    visibility: visible;
    opacity: 1;
}

.homepage4-body .vl-hero-btn .btn-area1 .phone::after {
    position: absolute;
    content: "";
    height: 100%;
    left: 50%;
    top: 0;
    transition: all 0.4s;
    width: 10px;
    background: var(--ztc-bg-bg-10);
    border-radius: 50px;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
}

.homepage4-body .vl-hero-btn .btn-area1 .phone svg {
    margin: 0 4px 0 0;
    transition: all 0.4s;
}

.homepage4-body .header-sticky {
    z-index:99999;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    animation: 0.7s ease-in-out 0s normal none 1 running vlfadeInDown;
    background: var(--ztc-bg-bg-1);
    border-bottom: 1px solid #E8EAEC;
}

.homepage4-body .header-sticky .row-bg1 {
    padding: 0;
    background: none;
    transition: all 0.4s;
}


/*============= HEADER CSS AREA ENDS ===============*/


/*============= OTHERS CSS AREA STARTS ===============*/

.cs_preloader {
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 99999;
    left: 0;
    top: 0;
    background-color: var(--ztc-bg-bg-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs_preloader .cs_preloader_in {
    position: relative;
}

.cs_preloader .cs_preloader_in svg {
    width: 110px;
    height: 110px;
}

.cs_preloader .cs_wave_first svg {
    fill: var(--ztc-bg-bg-11);
}

.cs_preloader .cs_wave_second {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    animation: spark 1.25s linear infinite;
}

.cs_preloader .cs_wave_second svg {
    fill: var(--accent-color);
}

@keyframes spark {
    0% {
        max-width: 0;
    }
    100% {
        max-width: 100%;
    }
}

.progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 200ms linear;
    color: var(--ztc-text-text-1);
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.progress-wrap::after {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    color: var(--ztc-text-text-2);
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 1;
    transition: all 200ms linear;
}

.progress-wrap:hover::after {
    opacity: 0;
    color: var(--ztc-text-text-2);
}

.progress-wrap::before {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    opacity: 0;
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 2;
    transition: all 200ms linear;
}

.progress-wrap:hover::before {
    opacity: 1;
    color: var(--ztc-text-text-2);
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: var(--ztc-text-text-2);
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/*============= OTHERS CSS AREA ENDS ===============*/

/*============= OTHERS CSS AREA STARTS ===============*/



.pagination-area nav ul {
    display: block;
    text-align: center;
}

.pagination-area nav ul li {
    display: inline-block;
    border: none;
    outline: none;
    box-shadow: none;
    margin: 0 8px 0 0;
}

.pagination-area nav ul li:nth-last-child(1) {
    margin: 0;
}

.pagination-area nav ul li a {
    color: var(--ztc-text-text-11);
    text-align: center;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s24);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    height: 56px;
    width: 56px;
    line-height: 56px;
    border-radius: 8px;
    background: #ECE8FF;
    transition: all 0.4s;
    height: auto;
    border: none;
    display: inline-block;
    padding: 0;
    box-shadow: none;
}

.pagination-area nav ul li a.active {
    background: var(--ztc-bg-bg-11);
    color: var(--ztc-text-text-1);
}

.pagination-area nav ul li a:hover {
    background: var(--ztc-bg-bg-11);
    transition: all 0.4s;
    color: var(--ztc-text-text-1);
}

/*============= OTHERS CSS AREA ENDS ===============*/



/*============= CONTACT CSS AREA ===============*/

.contact1-section-area {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 30px;
    margin: 0 60px;
    border-radius: 16px;
}

.contact1-section-area .contact-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .contact1-section-area {
        margin: 0 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact1-section-area {
        margin: 0;
        border: 0;
        padding: 30px 0;
    }
}

@media (max-width: 767px) {
    .contact1-section-area {
        margin: 0;
        border-radius: 0;
        padding: 30px 0;
        padding-bottom:50px;
    }
}

.contact1-section-area .contact-boxarea {
    position: relative;
    z-index: 1;
    background: var(--ztc-bg-bg-1);
    border-radius: 16px;
    padding: 34px 32px;
}

@media (max-width: 767px) {
    .contact1-section-area .contact-boxarea {
        margin-top: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact1-section-area .contact-boxarea {
        margin-top: 30px;
    }
}

.contact1-section-area .contact-boxarea h4 {
    color: var(--ztc-text-text-2);
    text-align: center;
    font-family: var(--ztc-family-font2);
    font-size: var(--ztc-font-size-font-s20);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 24px;
    text-transform: uppercase;
}

.contact1-section-area .contact-boxarea p {
    color: var(--ztc-text-text-3);
    text-align: center;
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 28px;
}

.contact1-section-area .contact-boxarea .input-area {
    padding-top: 18px;
}

.contact1-section-area .contact-boxarea .input-area input {
    width: 100%;
    border-radius: 8px;
    background: var(--Home-Page-1-Color-Gray-Color, #F4F4F9);
    color: var(--ztc-text-text-3);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    padding: 18px 16px;
    outline: none;
    overflow: hidden;
}

.contact1-section-area .contact-boxarea .input-area input::-moz-placeholder {
    color: var(--ztc-text-text-3);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
}

.contact1-section-area .contact-boxarea .input-area input::placeholder {
    color: var(--ztc-text-text-3);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
}

.contact1-section-area .contact-boxarea .input-area .nice-select {
    width: 100%;
    border-radius: 8px;
    background: var(--Home-Page-1-Color-Gray-Color, #F4F4F9);
    color: var(--ztc-text-text-3);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    padding: 18px 16px;
    border: none;
    box-shadow: none;
    outline: none;
    height: auto;
}

.contact1-section-area .contact-boxarea .input-area .nice-select::after {
    height: 7px;
    width: 7px;
    -o-object-fit: cover;
    object-fit: cover;
    right: 16px;
}

.contact1-section-area .contact-boxarea .input-area .nice-select::-moz-placeholder {
    color: var(--ztc-text-text-3);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
}

.contact1-section-area .contact-boxarea .input-area .nice-select::placeholder {
    color: var(--ztc-text-text-3);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
}

.contact1-section-area .contact-boxarea .input-area textarea {
    width: 100%;
    border-radius: 8px;
    background: var(--Home-Page-1-Color-Gray-Color, #F4F4F9);
    color: var(--ztc-text-text-3);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    padding: 18px 16px;
    outline: none;
    height: 140px;
}

.contact1-section-area .contact-boxarea .input-area textarea::-moz-placeholder {
    color: var(--ztc-text-text-3);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
}

.contact1-section-area .contact-boxarea .input-area textarea::placeholder {
    color: var(--ztc-text-text-3);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
}

.contact1-section-area .contact-boxarea .input-area button {
    border: none;
    outline: none;
    background: none;
}

.contact1-section-area .contact-single-boxarea {
    position: relative;
    padding-top: 394px;
}

@media (max-width: 767px) {
    .contact1-section-area .contact-single-boxarea {
        padding-top: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact1-section-area .contact-single-boxarea {
        padding-top: 0;
    }
}

.contact1-section-area .contact-single-boxarea .single-box {
    background: var(--ztc-bg-bg-1);
    border-radius: 8px;
    padding: 18px;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.contact1-section-area .contact-single-boxarea .single-box .icons {
    height: 60px;
    width: 60px;
    text-align: center;
    line-height: 60px;
    display: inline-block;
    transition: all 0.4s;
    /*background: var(--ztc-bg-bg-3);*/
    border-radius: 50%;
}

.contact1-section-area .contact-single-boxarea .single-box .text {
    padding-left: 14px;
}

.contact1-section-area .contact-single-boxarea .single-box .text h4 {
    color: var(--ztc-text-text-2);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 18px;
    /*text-transform: uppercase;*/
}

.contact1-section-area .contact-single-boxarea .single-box .text a {
    color: var(--ztc-text-text-3);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s18);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 18px;
    display: inline-block;
    transition: all 0.4s;
}
@media (max-width: 1400px) {
    .contact1-section-area .contact-single-boxarea .single-box .text a {
            font-size: 14px;
    }
}



/*============= CONTACT CSS AREA ENDS===============*/

/*============= CTA CSS AREA ===============*/


.cta4-section-area {
        background: linear-gradient(135deg, rgb(21, 12, 80), #6A5ACD);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

@media (max-width: 767px) {
    .cta4-section-area {
        padding: 40px 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cta4-section-area {
        padding: 40px 0;
    }
}

.cta4-section-area .cta-content-area {
    padding: 60px 0 60px;
}

@media (max-width: 767px) {
    .cta4-section-area .cta-content-area {
        padding: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cta4-section-area .cta-content-area {
        padding: 0;
    }
}

.cta4-section-area .cta-content-area h2 {
    color: var(--ztc-text-text-1);
}

.cta4-section-area .cta-content-area p {
    color: var(--ztc-text-text-1);
    opacity: 70% !important;
}

.cta4-section-area .cta-content-area .btn-area1 .phone {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 140%;
    display: inline-block;
    transition: all 0.4s;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.6);
    padding: 15px 12px;
    margin: 0 0 0 16px;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .cta4-section-area .cta-content-area .btn-area1 .phone {
        margin: 20px 0 0 0;
    }
}

.cta4-section-area .cta-content-area .btn-area1 .phone:hover {
    color: var(--ztc-text-text-1);
    transition: all 0.4s;
    transform: translateY(-5px);
}

.cta4-section-area .cta-content-area .btn-area1 .phone:hover svg {
    filter: brightness(0) invert(1);
    transition: all 0.4s;
}

.cta4-section-area .cta-content-area .btn-area1 .phone:hover::after {
    width: 100%;
    left: 0;
    transition: all 0.4s;
    visibility: visible;
    opacity: 1;
}

.cta4-section-area .cta-content-area .btn-area1 .phone::after {
    position: absolute;
    content: "";
    height: 100%;
    left: 50%;
    top: 0;
    transition: all 0.4s;
    width: 10px;
    background: var(--ztc-bg-bg-10);
    border-radius: 50px;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
}

.cta4-section-area .cta-content-area .btn-area1 .phone svg {
    margin: 0 4px 0 0;
    transition: all 0.4s;
}

.cta4-section-area .cta-circle-area {
    position: relative;
    z-index: 1;
    position: relative;
    z-index: 1;
    width: 550px;
    bottom: -30px;
    left: -150px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cta4-section-area .cta-circle-area {
        margin-top: 30px;
        left: 0;
        bottom: -40px;
    }
}

@media (max-width: 767px) {
    .cta4-section-area .cta-circle-area {
        margin-top: 30px;
        height: 100%;
        width: 100%;
        left: 0;
        bottom: -41px;
    }
}

.cta4-section-area .cta-circle-area .bg1 {
    position: absolute;
    bottom: 0;
}

.cta4-section-area .cta-circle-area .img1 img {
    position: relative;
    top: 0;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cta4-section-area .cta-circle-area .img1 img {
        left: 0;
    }
}

@media (max-width: 767px) {
    .cta4-section-area .cta-circle-area .img1 img {
        left: 0;
    }
}

.cta4-section-area .cta-circle-area span {
    height: 84px;
    width: 84px;
    text-align: center;
    line-height: 84px;
    border-radius: 50%;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-1);
    display: inline-block;
    position: absolute;
    top: 50%;
    margin-top: -33px;
    left: 50%;
    margin-left: -84px;
}

.cta4-section-area .cta-circle-area .text {
    position: absolute;
    top: 60px;
    left: 50%;
    margin-left: -160px;
}

@media (max-width: 767px) {
    .cta4-section-area .cta-circle-area .text {
        top: 20px;
    }
}

.cta4-section-area .cta-circle-area .text a {
    color: var(--ztc-text-text-1);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s26);
    font-style: normal;
    font-weight: var(--ztc-weight-semibold);
    line-height: 26.013px;
    text-transform: uppercase;
    display: inline-block;
    transition: all 0.4s;
    background: var(--ztc-bg-bg-6);
    border-radius: 4px;
    padding: 26px 34px;
}

.cta4-section-area .cta-circle-area .text svg {
    position: absolute;
    bottom: -33px;
    left: 50%;
    margin-left: -17px;
}



/*============= CTA CSS AREA ENDS===============*/



/*# sourceMappingURL=main.css.map */

.hero-video {
  position: relative;
  width: 100%;
  max-width: 620px;     /* keeps it visually centered */
  min-height: 580px;
  margin: auto;        /* horizontal centering */
  overflow: hidden;
  border-radius: 16px;
}

/* Cover-style iframe */
.hero-video iframe {
  position: absolute;
  inset: -40%;
  width: 180%;
  height: 180%;
  margin: auto;
  pointer-events: none;
}

.hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(
    120deg,
    #00f5ff,
    #7c7cff,
    #00f5ff
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.7;
  pointer-events: none;
}

.img1 img {
  height: 350px;
  transition: transform 0.6s ease, filter 0.6s ease;
  animation: moveLeftRight 8s ease-in-out infinite;
}
@keyframes moveLeftRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-18px);
  }
  100% {
    transform: translateX(0);
  }
}


.icons-area > div img {
  transition: transform 0.4s ease, filter 0.4s ease;
}

@keyframes slowRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes softZoom {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.icons1 img {
  animation: slowRotate 22s linear infinite;
}

.icons3 img {
  animation: slowRotate 18s linear infinite reverse;
}

.icons5 img {
  animation: slowRotate 26s linear infinite;
}
.icons2 img {
  animation: softZoom 4.5s ease-in-out infinite;
}

.icons4 img {
  animation: softZoom 6s ease-in-out infinite;
}

.icons6 img {
  animation: softZoom 5.2s ease-in-out infinite;
}

.brand-single-box h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.icon {
  font-size: 22px;
  color: #3D3289;
}

/* Pulse */
.pulse {
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Bounce */
.bounce {
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Rotate */
.rotate {
  animation: rotate 4s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Slide */
.slide {
  animation: slide 2s ease-in-out infinite;
}
.video-wide .slide {
  animation: none;
}
@keyframes slide {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(1px); }
}
.brand-single-box h3 {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* text span */
.hover-text {
  padding: 6px 14px;
  border-radius: 20px;
  transition: border 0.3s ease;
  white-space: nowrap;
  color: transparent;
}

/* hover effect ONLY on text */
.brand-single-box h3:hover .hover-text {
  border: 1px solid #ffffff;
}


/* SECTION */
  .lab-services {
  position: relative;
  overflow: hidden;
  padding: 80px 20px;
  background:
    /* 🧠 AI diagnostic grid */
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),

    /* 🎞 subtle scan lines */
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.02),
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 18px
    ),

    /* 🎨 main gradient */
    linear-gradient(
      135deg,
      #2A2268 0%,
      #3D3289 45%,
      #5B4FCF 100%
    );

  background-size:
    40px 40px,
    40px 40px,
    200% 200%,
    300% 300%;

}
.lab-bg-img{
    position:absolute;
    top: 0;
    left:-100px;
    z-index:-1;
     animation: bgZoomPulse 14s ease-in-out infinite;
}
@keyframes bgZoomPulse {
  0% {
    transform: scale(0.95) translateY(0);
  }
  50% {
    transform: scale(1.08) translateY(-20px);
  }
  100% {
    transform: scale(0.95) translateY(0);
  }
}

/* 🧠 Moving grid animation */
@keyframes gridMove {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 40px 40px, 40px 40px, 0 0, 0 0;
  }
}

/* 🎨 Gradient breathing effect */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 🎞 Subtle scan movement */
@keyframes scanMove {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 0 0, 0 0, 200px 200px, 0 0;
  }
}


    /* .container {
      max-width: 1400px;
      margin: auto;
    } */

    .section-head {
      text-align: center;
      margin-bottom: 60px;
    }

    .section-head h2 {
      font-size: 36px;
      color: #0a1f44;
    }

    .section-head p {
      max-width: 650px;
      margin: 12px auto 0;
      color: #6b7a99;
      font-size: 16px;
    }

    /* GRID */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
        justify-content: center; /* ✅ centers last row */
    }

    /* CARD */
    .service-card {
        z-index:9999;
      background: #ffffff;
      padding: 35px;
      border-radius: 16px;
      box-shadow: 0 15px 40px rgba(0,0,0,0.06);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      position: relative;
      overflow: hidden;
      transition: all 0.45s ease;
      animation: fadeUp 0.8s ease forwards;
    }

    /* Gradient Hover */
    .service-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #3D3289, #5b4df2);
      opacity: 0;
      transition: 0.45s ease;
      z-index: 1;
    }

    .service-card:hover::before {
      opacity: 1;
    }

    .service-card:hover {
      transform: translateY(-12px);
    }

    /* CONTENT */
    .service-content {
      /*max-width: 65%;*/
      position: relative;
      z-index: 2;
    }

    .icon {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      background: #beb4ff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      transition: all 0.4s ease;
    }

    .icon i {
      font-size: 24px;
      color: #3D3289;
    }

    .service-card h3 {
        font-weight:600;
      font-size: 24px;
      margin-bottom: 12px;
      color: #0a1f44;
      transition: 0.3s;
    }

    .service-card p {
      font-size: 15px;
      color: #6b7a99;
      margin-bottom: 20px;
      transition: 0.3s;
    }

    .service-card a {
      font-weight: 600;
      text-decoration: none;
      color: #0a1f44;
      transition: 0.3s;
    }

    /* RIGHT IMAGE */
    .service-img {
      max-width: 35%;
      position: relative;
      z-index: 2;
    }

    .service-img img {
      width: 100%;
      max-width: 140px;
      opacity: 0.9;
      transition: transform 0.6s ease, opacity 0.4s ease;
      animation: float 4s ease-in-out infinite;
    }

    /* HOVER TEXT COLOR */
    .service-card:hover h3,
    .service-card:hover p,
    .service-card:hover a {
      color: #ffffff;
    }

    .service-card:hover .icon {
      background: #ffffff;
      transform: scale(1.1) rotate(6deg);
    }

    .service-card:hover .service-img img {
      transform: translateX(10px) scale(1.08);
      opacity: 1;
    }

    /* RESPONSIVE */
    @media (max-width: 991px) {
      .services-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 575px) {
      .services-grid {
        grid-template-columns: 1fr;
      }

      .service-card {
        flex-direction: column;
        text-align: center;
      }

      .service-content,
      .service-img {
        max-width: 100%;
      }

      .service-img img {
        max-width: 120px;
        margin-top: 20px;
      }
      .lab-services{
          padding:80px 0px;
      }
    }

    /* ANIMATIONS */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(40px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes float {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }


    /* Demo */

.visual {
  width: 200px;
  height: 200px;
  background: #aaa;
  transition: all 0.5s ease;

  /*  all the animations  */
  animation: 
    to-circle 0.6s cubic-bezier(0.25, 1, 0.5, 1) both,
    to-diamond 0.6s cubic-bezier(0.25, 1, 0.5, 1) both,
    to-expansion 0.6s cubic-bezier(0.25, 1, 0.5, 1) both,
    to-dot 0.6s cubic-bezier(0.25, 1, 0.5, 1) both;

  /* connecting the triggers */
  animation-trigger: 
    --step-1 play-forwards play-backwards,
    --step-2 play-forwards play-backwards,
    --step-3 play-forwards play-backwards,
    --step-4 play-forwards play-backwards;
}

/* Triggers */

.step[data-step="1"] {
  timeline-trigger: 
    --self view() entry 20% exit 100%, /* this is the the text */
    --step-1 view() entry 50% exit 200%; /* this is for the visual */
}

.step[data-step="2"] {
  timeline-trigger: 
    --self view() entry 20% exit 100%,
    --step-2 view() entry 50% exit 200%;
}

.step[data-step="3"] {
  timeline-trigger: 
    --self view() entry 20% exit 100%,
    --step-3 view() entry 50% exit 200%;
}

.step[data-step="4"] {
  timeline-trigger: 
    --self view() entry 20% exit 100%,
    --step-4 view() entry 50% exit 200%;
}

/* Also animate opacity of the text on the side */
.step {
  animation: fade-in-text 0.8s ease;
  trigger-scope: --self;
  animation-trigger: --self play-forwards;
}


@layer animations {
  @keyframes fade-in-text {
    from { opacity: 0.2; transform: translateY(20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  
  @keyframes to-circle {
    to {
      background-color: royalblue;
      border-radius: 50%;
      transform: scale(1) rotate(0deg);
      width: 200px;
    }
  }

  @keyframes to-diamond {
    to {
      background-color: crimson;
      border-radius: 0;
      transform: rotate(45deg) scale(1.2);
      width: 200px;
    }
  }

  @keyframes to-expansion {
    to {
      background-color: mediumseagreen;
      transform: rotate(0deg) scale(1.4, 0.8);
    }
  }

  @keyframes to-dot {
    to {
      background-color: darkorchid;
      border-radius: 50%;
      transform: rotate(0deg) scale(0.2);
    }
  }
}

/* Setup */

@layer base {

  
  .scrolly-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100dvh;
    
    @media (width <= 600px) {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
    }
  }

.visual-column {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('https://i.pinimg.com/1200x/a5/ab/fe/a5abfe19b5a4ccb32b5465a51cec68bd.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0; /* ensures overlay and content layering works */
}

/* Dark overlay using a pseudo-element */
.visual-column::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; left:0; right:0; bottom:0; */
  background: rgba(19, 0, 71, 0.8); /* adjust opacity for darkness */
  z-index: 1;
  pointer-events: none; /* overlay won’t block interactions */
}
.visual-column  h2{
    font-size:70px !important;
    color:white;
}
/* Make the content above the overlay */
.visual-column > * {
  position: relative;
  z-index: 2;
}

/* Responsive for mobile */
@media (max-width: 600px) {
  .visual-column {
    height: 300px;
  }
}


  /* Text content */
  .scrolly-content {
    background-repeat:no-repeat;
    background-position:top right;
    /* background-image:url('https://thumbs.dreamstime.com/b/abstract-molecular-structure-chemical-elements-medical-science-technology-concept-vector-geometric-background-123036713.jpg'); */
    padding: 0 5%;
    padding-top: 10dvh;
    padding-bottom: 10dvh;
  }

  .step {
    min-height: 40dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    transition: opacity 0.5s;
  }

  .intro {
    min-height: 80dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    
    @media (width <= 600px) {
      min-height: 40dvh;
    }
  }

  .intro h1 {
    font-size: 3rem;
    font-weight: 400;
  }
}

.luxury-card {
  background: linear-gradient(145deg, #ffffff, #f3f3f3);
  border-radius: 20px;
  /* box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); */
  overflow: hidden;

  max-width: 90%;
  margin: 20px auto;
  text-align: left;
  padding: 20px;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  font-family: 'Poppins', sans-serif;
  position: relative;
}

/* Hover effect */
.luxury-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

/* Card title */
.card-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #070130;
  text-align:left;
  margin-bottom: 25px;
}

/* Image styling */
.card-image {
  height: 300px;
  margin: 0 auto 15px;
  border-radius:5px;
  overflow: hidden;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.luxury-card:hover .card-image img {
  transform: scale(1.1);
}

/* Description styling */
.card-description {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.5;
  text-align:left;
}
.card-description1 {
  font-size: 16px;
  color: white;
  margin-bottom: 20px;
  line-height: 1.5;
  text-align:left;
}
/* Read more button */
.read-more-btn {
  display: inline-block;
  padding: 10px 25px;
  font-weight: 600;
  color: #fff;
  background: #3D3289;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.4s ease;
  box-shadow: 0 5px 15px rgba(61, 50, 137, 0.4);
}

.read-more-btn:hover {
  background: #5a46c4;
  box-shadow: 0 8px 20px rgba(61, 50, 137, 0.6);
  transform: translateY(-3px);
}

@media (max-width: 1400px) {
.card-description {
  font-size: 14px;

}
.card-description1 {
  font-size: 14px;
 
}
}
/* Responsive adjustments */
@media (max-width: 400px) {
    
  .luxury-card {
    padding: 15px;
  }
  .card-title {
    font-size: 1.4rem;
  }
  .card-image {
    width: 100px;
    height: 100px;
  }
}


.advance-wrap {
     z-index: 9999;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr ;
    gap: 20px;
}

@media screen and (max-width: 1199px) {
    .advance-wrap {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 991px) {
    .advance-wrap {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 767px) {
    .advance-wrap {
        grid-template-columns: 1fr ;
    }
}

.advance-item {
    background: hsl(var(--white));
    padding: 3px;
    box-shadow: 0 9px 20px 0 rgba(50, 69, 93, 0.04);
    border-radius: 17px;
}

.advance-thumb img {
    border-radius: 17px;
}

.advance-btn {
    border: 1px solid rgba(0, 83, 98, 0.1);
}

.advance-two-area {
    background: #00A8BE;
    padding-block-start: 180px;
}

@media screen and (max-width: 991px) {
    .advance-two-area .gallery-two-btn {
        justify-content: left !important;
        margin-block-end: 0;
        margin-block-start: 30px;
    }
}

@media screen and (max-width: 1499px) {
    .advance-two-wrap {
        grid-template-columns: 1fr 1fr 1fr ;
    }
}

@media screen and (max-width: 1199px) {
    .advance-two-wrap {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 991px) {
    .advance-two-wrap {
        grid-template-columns: 1fr 1fr;
        margin-block-start: -40px;
    }
}

@media screen and (max-width: 575px) {
    .advance-two-wrap {
        grid-template-columns: 1fr;
    }
}

.advance-two-item {
    position: relative;
}

.advance-two-item:nth-of-type(3) {
    z-index: 1;
}

.advance-two-item:nth-of-type(4) {
    z-index: -1;
}

.advance-two-item:nth-of-type(5) {
    z-index: -2;
}

@media screen and (max-width: 575px) {
    .advance-two-thumb img {
        width: 100%;
    }
}

.card-wrapper {
	position: relative;
}
.card-top{
    min-height:150px;
    /* height: 100px; */
}

.card1 {
 
	--r: 30px; /* radius */
	--s: 40px; /* inner curve size */
	/* background-color: #fff; */
    /* background: linear-gradient(135deg, #e297bb, #a976b1); */
    background: #d8ad6d;
	padding: 24px;
	width: 100%;
	text-align: left;
	border-radius: 30px;
	clip-path: shape(
		from 0 0,
		hline to calc(100% - var(--s) - 2 * var(--r)),
		arc by var(--r) var(--r) of var(--r) cw,
		arc by var(--s) var(--s) of var(--s),
		arc by var(--r) var(--r) of var(--r) cw,
		vline to 100%,
		hline to 0
	);
    margin-bottom: 30px;
}

.card-circle {
    width: 60px;
    height: 60px;
    background-color: #fc7bb6;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;  /* Horizontal center */
    align-items: center;       /* Vertical center */
    transition: all 0.4s ease-in-out;
}

.card-circle i {
      transition: all 0.4s ease-in-out;
       transform: rotate(-25deg); /* rotates icon upward/right direction */
    color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    line-height: 1 !important;  /* Fix FA spacing */
    font-size: 1.5rem;
    font-weight: 300;

}
.card-circle a{
    text-decoration: none;
}
/* Hover effect */
/* Hover Effect */
.card-circle:hover {
    background-color: #9783c2; /* purple */
    transform: rotate(-25deg) scale(1.1);
}

.card-circle:hover .arrow {
    color: #fff; /* white */
    transform: rotate(25deg);
}
.card-top{
    margin-top: 20px;
}
.card-title {
     color: #262627 !important; 
	font-size: 24px;
	/* font-weight: 700; */
	margin-bottom: 5px;
	padding-right: 70px;
    line-height: 28px;
    color: rgb(11, 1, 68);
    font-family: "Chakra Petch", sans-serif; 

}
.card-title2{
    font-size: 0.9rem;
    	padding-right: 40px;
        line-height: 20px;
          color: #160039;
}
.card-desc {
	font-size: 15px;
	line-height: 1.5;
	color: #141414;
	margin-bottom: 12px;
	/* padding-right: 65px; */
}

.card-figure {
	height: 220px;
	background-color: #eee;
	border-radius: 20px;
	position: relative;
	overflow: hidden;
}
.card-figure img{
    height: 220px;
}
.card-img {
	height: 100%;
	position: absolute;
	width: 100%;
	inset: 0;
	object-fit: cover;
}
/* CARD HOVER */
.card-wrapper {
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.card-wrapper:hover {
  transform: translateY(-10px);
}

/* Card glow */
.card-wrapper:hover .card1 {
  box-shadow: 0 30px 70px rgba(126, 107, 202, 0.45);
}

/* Image zoom */
.card-figure img {
  transition: transform 0.7s ease;
}

.card-wrapper:hover .card-figure img {
  transform: scale(1.1);
}

/* Arrow floating effect */
.card-wrapper:hover .card-circle {
  transform: translateY(-6px) rotate(-25deg) scale(1.1);
  background-color: #9783c2;
}

/* Arrow icon counter-rotate */
.card-wrapper:hover .card-circle i {
  transform: rotate(25deg);
  color:red;
}
.card-circle i {
  color: #fff; /* white icon */
  font-size: 1.5rem;
}
/* Text micro-motion */
.card-title,
.card-desc {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.card-wrapper:hover .card-title {
  transform: translateY(-2px);
}

.card-wrapper:hover .card-desc {
  opacity: 0.95;
}
    .usg-mini-wave {
  width: 130px;
  /* margin: 0 auto 12px; */
  position: relative;
  padding-bottom: 20px;
}



.ecg-wave {
  width: 100%;
  height: 40px;
}

.ecg-wave path {
  fill: none;
  stroke: url(#ecgGradient);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255,105,180,0.6))
          drop-shadow(0 0 12px rgba(178,102,255,0.5));
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: ecgLine 1.6s ease-in-out infinite;
}

/* Pulse animation for a smoother ECG feel */
@keyframes ecgLine {
  0% {
    stroke-dashoffset: 80;
    opacity: 0.7;
  }
  50% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -80;
    opacity: 0.8;
  }
}

/* Optional glowing fade effect behind the wave */
.usg-mini-wave::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffb3e6, #c9a6ff, transparent);
  transform: translateY(-50%);
  opacity: 0.3;
  filter: blur(4px);
}
/* ===========================
   Particles Canvas
   =========================== */
#particles {
  position: absolute;
  inset: 0;
  z-index: 9999; /* behind everything */
  block-size: 100dvh;
  inline-size: 100vw;
  pointer-events: none;
  opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
  #particles {
    display: none;
  }
}

.location-btn1 {
    min-width:150px;
    text-align:center;
}
#locationBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  perspective: 1000px;
}

#locationText {
  display: inline-block;
  font-weight: 600;
  transition: opacity 0.3s ease;
}

.rotate {
  animation: spin360 0.9s ease-in-out;
}

@keyframes spin360 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}


/* Background Icons Container */
.background-icons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* So icons don’t block clicks */
}

/* Common icon styles */
.bg-icon {
    position: absolute;
    opacity: 0.4; /* Low opacity */
    width: 80px;  /* Adjust size as needed */
    animation: float 10s linear infinite;
}

/* Position each icon differently */
.bg-icon.doctor {
    height: 50px;
    width: auto;
    top: 10%;
    left: 25%;
    animation-delay: 0s;
}

.bg-icon.kidney {
    bottom: 15%;
    right: 10%;
    animation-delay: 2s;
}

.bg-icon.heart {
  height: 50px;
    width: auto;
    top: 40%;
    left: 50%;
    animation-delay: 0s;
}

/* Floating Animation */
@keyframes float {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
    100% { transform: translateY(0) rotate(0deg); }
}
.floating_btn {
  position: fixed;
  bottom: 150px;
  right: 10px;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  z-index: 99999;
  gap:20px;
}

@keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}
@keyframes pulsing-1 {
  to {
    box-shadow: 0 0 0 30px #00ab68;
  }
}
.contact_icon.whatsapp {
    background: #00ab68 !important;
     /* animation: pulse 1.5s infinite; */
  box-shadow: 0 0 0 0 #00ab8f;
  -webkit-animation: pulsing -1 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulsing -1 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulsing -1 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulsing -1 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.contact_icon {
  background: linear-gradient(120deg, #bb3c9b 0%, #8b40b2 50%, #5544be 100%);

  color: #fff;
  width: 60px;
  height: 60px;
  font-size:30px;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translatey(0px);
  animation: pulse 1.5s infinite;
  box-shadow: 0 0 0 0 #5544be;
  -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  font-weight: normal;
  font-family: sans-serif;
  text-decoration: none !important;
  transition: all 300ms ease-in-out;
}


.text_icon {
  margin-top: 8px;
  color: #707070;
  font-size: 13px;
}

@media (min-width: 900px) and (max-width: 1400px) {
.hero-video {
  max-width: 520px;     /* keeps it visually centered */
  min-height: 400px;
}
.heading4 h1{
    font-size:50px;
    letter-spacing:0px;
    line-height:55px;
}
.hero4-section-area .hero-header{
    top:10px;
}
.card-title{
    font-size:20px;
}
}


.star img {

  animation: logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(1.5deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}
.benefites-widget-boxarea .icons p{
    font-size:44px;
}

.visual-column h3{
    font-size:40px;
    color:red;
}

@media (max-width: 767px) {
    .hero-video {
  min-height: 300px;
}
.img1 img{
    display:none;
}
.step{
    padding:0px;
}
.luxury-card h3{
    line-height:30px;
}
.vl-section-title  h2{
    font-size:28px;
    line-height:52px;
}
.star{
    display:none;
}
.bg1 img{
    display:none;
}
}

/* Container & Section */
.locations-section {
  padding: 60px 20px;
  background: #f5f5f5;
  text-align: center;
}


.locations-section .section-title {
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: #3d3289; /* brand color */
  font-weight: 700;
}
.locations-section h2 , .general-service h2{
color: var(--ztc-text-text-11);
}
/* Grid Layout */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, max-content));
  justify-content: center;   /* 👈 centers ALL rows */
  gap: 25px;
}

/* Location Card */
.location-card {
      background: linear-gradient(135deg, #3d3289, #231966);
  color: #fff;
  display: flex;
  align-items: center;
  
  padding: 20px;
  border-radius: 12px;
  text-decoration: none;
  
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.location-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
color: #333;
background: #fff;
}

/* Icon */
.location-icon {

  font-size: 2rem;
  margin-right: 15px;
  transition: transform 0.3s ease;
}

.location-card:hover .location-icon {
  transform: rotate(20deg) scale(1.2);
}

/* Info */
.location-info h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.location-info p {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: inherit; /* changes on hover */
}
.location-icon i{
    color:#d8ac66;
}
/* Responsive Typography */
@media (max-width: 768px) {
  .locations-section .section-title {
    font-size: 1.8rem;
  }

  .location-card {
    padding: 10px;
  }

  .location-info h3 {
    font-size: 1rem;
  }
  .location-info p {
    font-size: 0.9rem;
  }
}
@media (max-width: 576px) {
  .locations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .location-card {
    text-align: left;
    padding: 10px;
  }

  .location-icon {
    font-size: 1.6rem;
    margin-right: 10px;
  }

  .location-info h3 {
    font-size: 0.95rem;
  }

  .location-info p {
    font-size: 0.8rem;
  }
  .service-benefites-section-area .benefites-box .benefites-widget-boxarea .content-area{
    margin-top:80px;
    padding-left:0;
  }
}
.location-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  background: #fff;
  border-radius: 14px;
  text-decoration: none;
  color: #333;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  height: 100%;
}

.location-card:hover {
  transform: translateY(-6px);
  background: linear-gradient(135deg, #3d3289, #b266ff);
  color: #fff;
}

.para-logo-wrap {
  /* top: -10px; */
  position: relative;
  display: inline-block;
  padding: 5px 25px;
  overflow: visible;

  perspective: 900px;
  transform-style: preserve-3d;

  /* small base shadow */
  /*box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);*/
 /*animation: iconFoldLR 7s infinite ease-in-out;*/
  /* animation: logoLiveFlip 6s ease-in-out infinite; */
  /*transition: transform 0.6s ease, box-shadow 0.6s ease;*/
}

/* Skewed background */
.para-logo-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: white;
  /*transform: skew(15deg) translateZ(-1px);*/
  z-index: -1;
  border-radius: 10px;

  /* soft breathing shadow */
  box-shadow: 0 0 0 rgba(61, 50, 137, 0.2);
  /*animation: bgGlow 6s ease-in-out infinite;*/
}

/* Logo image */
.para-logo-wrap img {
  width: 150px;
  height: auto;
  position: relative;
  z-index: 1;
  transform: translateZ(20px);
}

/* Hover */
.para-logo-wrap:hover {
  /*transform: translateY(-6px) rotateY(10deg) scale(1.04);*/
  /*box-shadow: 0 16px 35px rgba(0, 0, 0, 0.18);*/
}

/* Flip + float animation */
@keyframes logoLiveFlip {
  0% {
    transform: translateY(0) rotateY(0deg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  }
  25% {
    transform: translateY(-4px) rotateY(6deg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  }
  50% {
    transform: translateY(0) rotateY(0deg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  }
  75% {
    transform: translateY(-4px) rotateY(-6deg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  }
  100% {
    transform: translateY(0) rotateY(0deg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  }
}

/* Glow breathing */
@keyframes bgGlow {
  0% {
    box-shadow: 0 0 0 rgba(61, 50, 137, 0.25);
  }
  50% {
    box-shadow: 0 12px 30px rgba(61, 50, 137, 0.35);
  }
  100% {
    box-shadow: 0 0 0 rgba(61, 50, 137, 0.25);
  }
}

@media (max-width:767px){


.para-logo-wrap img{
    width:100px;
}
.location-btn1{
  display:none;
}

}
.flip-logo {
  display: block; /* remove inline spacing */
  transform-style: preserve-3d; /* enable 3D */
  backface-visibility: hidden;   /* hide backface to avoid gap */
  animation: flipY 1.2s linear infinite; /* continuous flip */
}
.flip-left-right {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  /*animation: iconFoldLR 7s infinite ease-in-out;*/
}

@keyframes iconFoldLR {
  /* visible – pause */
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }

  /* quick fold left */
  10% {
    transform: rotateY(-90deg);
    opacity: 0.4;
  }

  /* open + HOLD (2s pause) */
  25% {
    transform: rotateY(0deg);
    opacity: 1;
  }

  /* hold longer */
  45% {
    transform: rotateY(0deg);
    opacity: 1;
  }

  /* quick fold right */
  60% {
    transform: rotateY(90deg);
    opacity: 0.4;
  }

  /* open + HOLD */
  75% {
    transform: rotateY(0deg);
    opacity: 1;
  }

  /* final pause */
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

/* Sticky container */
.location-sticky {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;

  width: 60px;
  min-height: 160px;
  background: #000;
  /* border-radius: 14px; */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  padding: 14px 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

/* Location icon */
.location-icon1 {
  font-size: 22px;
  color: #fff;
  animation: pulse 2.5s infinite;
}

/* Location text wrapper */
.location-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  overflow: hidden;
  height: 90px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Location name */
#locationName {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Fade animation classes */
.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Icon pulse */
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}

/* Responsive */
@media (max-width: 768px) {
  .location-sticky {
    right: 10px;
    width: 52px;
    min-height: 140px;
  }

  #locationName {
    font-size: 11px;
  }
}
.location-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 90px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  cursor: pointer;
}

#locationName {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.location-text:hover #locationName {
  color: #c7b6ff;
}
/* Enable 3D */
.location-sticky {
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* Flip animation class */
.location-sticky.flip {
  animation: boxFlip 0.9s ease-in-out;
}

@keyframes boxFlip {
  0% {
    transform: translateY(-50%) rotateX(0deg);
  }
  40% {
    transform: translateY(-50%) rotateX(90deg);
  }
  60% {
    transform: translateY(-50%) rotateX(90deg);
  }
  100% {
    transform: translateY(-50%) rotateX(0deg);
  }
}

#sliderHeading {
  transition: all 0.6s ease;
}


.bottom-animation {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.anim-img {
  position: absolute;
  bottom: 0;
  left: -300px;
  height: 80px;
  opacity: 0;
  transform: translateX(0) scale(0.9);
  transition:
    transform 1.2s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.8s ease;
}

/* Enter */
.anim-img.show {
  left: 20px;
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Forward / depth feel */
.anim-img.forward {
  transform: translateX(60px) scale(1.08);
}

/* Exit */
.anim-img.hide {
  opacity: 0;
  transform: translateX(-200px) scale(0.85);
}


/* After scroll */
.scrolled .homepage4-body .vl-main-menu ul > li > a {
  color:#392e82;
}


/* BANNER */
.banner{
  position:relative;
  width:100vw;
  height:calc(100vh - 73px);
  overflow:hidden;
  /*margin-top: 78.91px;*/
}

/* VIDEO FULL SCREEN */
.banner-video{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}

.banner-video iframe{
  position:absolute;
  top:50%;
   left:67%;
  width:66%;
  height:120%;
  transform:translate(-50%,-50%);
  border:0;
  pointer-events:none;
}

/* SLIDER OVERLAY WITH DIAGONAL CUT */
.slider-overlay{
  position:absolute;
  top:0;
  left:0;
  width:35%; /* initial width */
  height:100%;
  background:#ffffff;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:80px;
   box-shadow: 8px 0 15px -6px rgba(0, 0, 0, 0.4);

  /* DIAGONAL CUT */
  /*clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);*/
  color:#000000;
}

/* SINGLE SLIDE */
.slide{
    padding-inline: 0px;
    width:100%;
    display: grid;
    grid-template-columns: 1fr;
    align-items:center;
    justify-content:space-between;
    position:absolute;
   
}

.slide .text{
  width:100%;
}

.slide .text h1{
  font-size:30px;
  margin-bottom:15px;
}

.slide .text p{
  font-size:18px;
  opacity:.8;
}

.slide .image{
  /* width:50%; */
}
/*.video-wide .slide img {*/
/*  opacity: 0 !important;*/
/*  visibility: hidden !important;*/
/*}*/
.video-wide .slide .text h1 {
    font-size: 30px;
    margin-bottom: 15px;
}

/*.video-wide .slide .image img{*/
/*    width : 100%;*/

/*}*/
.video-wide .homepage4-body .vl-main-menu ul>li>a{
    color: #f3f3f3;
}
/*.video-wide .slide{*/
    /* padding-inline: 20px; */
/*    width:100%;*/
/*    display:flex;*/
/*    flex-direction: column-reverse;*/
    /* align-items:center; */
/*    justify-content:space-between;*/
/*    position:absolute;*/
 
/*}*/

.video-wide .slide .text {
    width: 80%;
}

.slide .image img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}
/* Frosted glass overlay */
.video-frosted {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(12px);
  /* blur effect 
  background: rgba(255,255,255,0.25); /* semi-transparent white */
  transition: opacity 0.6s ease;
  z-index: 2;
}

.video-wide .video-frosted {
  opacity: 0; /* hide frosted effect on hover */
}
/* MOBILE */
@media(max-width:768px){
    .homepage4-body{
        /*margin-top:10px;*/
    }
    .banner{
        margin-top:20px;
    }
  /*.slider-overlay{*/
  /*  width:100%;*/
  /*  clip-path:none;*/
  /*  padding:40px;*/
  /*}*/
  /*.slider-overlay{*/
  /*    display:none;*/
  /*}*/
  .banner-video iframe{
   pointer-events: none;
   left:70%;
  width:100%;
 height:100%;
}
.slider-overlay{
    box-shadow:none;
}

  .slide{
    flex-direction:column;
    justify-content:center;
    text-align:center;
  }
  .slide .text, .slide .image{
    width:100%;
  }
  .slide .text h1{
    font-size:32px;
  }
}

.location-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 26px;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  font-weight: 500;
}

/* GLASS BASE */
.glass-water{
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow:
    inset 0 0 0.5px rgba(255,255,255,.8),
    0 10px 30px rgba(0,0,0,.25);
  color: #fff;
}

/* IMAGE CIRCLE */
.loc-img{
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* TEXT */
.loc-text{
  z-index: 2;
  white-space: nowrap;
  color : white;
}

/* WATERY FLOW LAYER */
.water-layer{
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.25), transparent 55%);
  animation: waterMove 6s linear infinite;
  opacity: .6;
  z-index: 1;
}

/* WATER ANIMATION */
@keyframes waterMove{
  0%{
    transform: translateX(-20%) rotate(0deg);
  }
  100%{
    transform: translateX(20%) rotate(360deg);
  }
}

/* HOVER – liquid shift */
.location-btn:hover .water-layer{
  animation-duration: 3s;
  opacity: .9;
}


.loc-img{
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .6s ease, opacity .4s ease;
}

.loc-img img{
  width: 18px;
}

.loc-text{
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform .6s ease, opacity .4s ease;
}

/* EXIT animation */
.change-out .loc-img{
  transform: translateX(40px);
  opacity: 0;
}
.change-out .loc-text{
  transform: translateX(20px);
  opacity: 0;
}

/* ENTER animation */
.change-in .loc-img,
.change-in .loc-text{
  transform: translateX(0);
  opacity: 1;
}


.btn--liquidBtn {
  position: relative;
  overflow: hidden;
}

.btn--liquidBtn span {
  position: relative;
  z-index: 2;
}

.btn--liquidBtn:hover .btn--liquidBtn--liquid {
  top: -120px;
}

/* liquid layer */
.btn--liquidBtn--liquid {
  position: absolute;
  top: -80px;
  left: 0;
  width: 200px;
  height: 200px;
  background: #5e99b7;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
  transition: 0.5s;
}

/* liquid blobs */
.btn--liquidBtn--liquid::before,
.btn--liquidBtn--liquid::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -75%);
}

.btn--liquidBtn--liquid::before {
  border-radius: 45%;
  background: rgba(20, 20, 20, 1);
  animation: liquidAnimation 10s linear infinite;
}

.btn--liquidBtn--liquid::after {
  border-radius: 40%;
  background: rgba(20, 20, 20, 0.5);
  animation: liquidAnimation 10s linear infinite;
}

@keyframes liquidAnimation {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}

/* separator */
.video-frosted::after {
    content: "";
    position: relative;
    top: 0;
    right: -6px;
    width: 12px;
    height: 100%;
    background: linear-gradient(
        to left,
        rgba(0,0,0,0.25),
        rgba(0,0,0,0)
    );
    pointer-events: none;
}

/*.video-wide .hide{*/
/*    display: none;*/
/*}*/


/* Slider */
.location-slider {
  position: relative;
  width: 200px;
  height: 50px;
  border-radius: 30px;
  background: #111;
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: width 0.4s ease, background 0.5s;
  /*border: 1px solid #bf38971c;*/
}
.location-slider {
  /* Frosted yellow glass */
  background: #d8ac66; /* transparent yellow */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Glass styling */
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* Depth */
  /*box-shadow: */
  /*  0 4px 12px rgba(0,0,0,0.15),*/
  /*  inset 0 1px 0 rgba(255,255,255,0.4);*/

  overflow: hidden;
  cursor: pointer;
}

/* Pin */
.pin {
  position: absolute;
  left: 0px;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 10;
  border: 1px solid #bf3897;
}

.pin i{
    font-size: 24px;
    color: #6d4ba4;
}

/* Slide wrapper */
.slide-btn {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Image */
/*.slide-btn img {*/
/*  position: absolute;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  object-fit: cover;*/
/*  transform: translateX(0);*/
/*  transition: transform 0.7s ease;*/
/*}*/
/* Blur ONLY the image */
.slide-btn img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(1px);          /* 👈 adjust blur */
  transform: scale(1.08);     /* avoids edge cut after blur */
  z-index: 0;
}

/* Text stays crisp */
.slide-btn span {
  position: relative;
  z-index: 2;
}
/* Image */
.slide-btn img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(0);
  transition: transform 0.7s ease;
}
/* Text */
.slide-btn span {
  color: #3d3289;
  font-weight: 500;
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.4s ease, opacity 0.3s ease, color 0.3s ease;
  margin-left: 70px;
}

/* 🔥 Hover effect */
.location-slider:hover .slide-btn span {
  transform: translateX(2px);   /* slight move */
  color: white;              /* darker shade */
  opacity: 0.9;
}

/* 🔥 Slide everything LEFT into pin */
.hide-all {
  width: 60px;
  background: transparent;
}

.hide-all img,
.hide-all span {
  transform: translateX(-160%);
  opacity: 0;
}

/* IMAGE OUT first */
.show-image img {
  transform: translateX(0);
}

/* TEXT OUT later */
.show-text span {
  transform: translateX(0);
  opacity: 1;
}
.relative{
    position: relative;
}

/* better care text */

 .tagline {
            font-family: "SportsMillGoudy", serif;
            text-align: center;
            margin-top: 15px;
            font-size: 14px;
            color: balck;
            font-weight: 500;
            letter-spacing: 3px;
            /*color: #bf3897;*/
            /*text-shadow: 1px 1px 0px #8852d5;*/
              font-style: italic;
        }

        .tagline span {
            display: inline-block;
            opacity: 0;
            animation: letterPop 0.6s ease-out infinite;
        }

        @keyframes letterPop {
            0%, 100% {
                opacity: 0;
                transform: translateY(20px) scale(0.5);
            }
            10% {
                opacity: 1;
                transform: translateY(-5px) scale(1.1);
            }
            20%, 90% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
@media (min-width: 900px) and (max-width: 1600px) {
 .tagline {
           
            font-size: 12px;
          
        }
}

    .flex-center{
        display: flex;
        align-items: center;
    }



    /* New Service */

    .scroll-cards {
  height: 100vh;
  background: #f6efe7;
  padding: 80px 5vw;
  position: relative;
}

.section-title {
  text-align: center;
  font-size: clamp(26px, 4vw, 48px);
  margin-bottom: 60px;
}

.cards-container {
  position: relative;
  height: 70vh;
  overflow: hidden;
}

.scroll-card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  opacity: 0;
    margin-bottom:100px;

}
.service-header{
    font-size:42px;
    color:#1d1464;
}
.scroll-card img {
width: 45%;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 30px 70px rgba(0,0,0,0.2);
}
/* 
.card-content {
  max-width: 350px;
} */
.card-content {
  padding: 42px;
  /* border-radius: 16px; */
  background:#1b0e2c;
  /* background: linear-gradient(
    180deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.02)
  ); */
  backdrop-filter: blur(10px);
  color: #fff;
  transition: all 0.4s ease;
}
.card-content-ikda {

  background:#67102a;
 
}
.card-content-knmklm{
    background:#2d3d51;
}
.card-content-amballur{
    background:#6a4b28;
}
.device-badge {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 30px;
  background: linear-gradient(135deg, #6ee7ff, #c77dff);
  color: #000;
  font-weight: 600;
  margin-bottom: 12px;
}

.card-content h3 {
  font-size: 24px;
  margin: 10px 0;
  line-height: 1.3;
}

.card-content .desc {
  font-size: 14px;
  opacity: 0.8;
  line-height: 1.6;
  margin-bottom: 18px;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.time {
  font-size: 13px;
  opacity: 0.7;
}

.read-more {
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 30px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color:black;
  text-decoration: none;
  transition: all 0.3s ease;
}

.read-more:hover {
  background: linear-gradient(135deg, #6ee7ff, #c77dff);
  color: #000;
  border-color: transparent;
}

/* Optional hover enhancement for the whole card */
.service-card:hover .card-content {
  transform: translateY(-6px);
}

.card-content h3 {
  /*font-size: 32px;*/
  margin: 10px 0;
}

.card-content p {
  opacity: 0.7;
}

/* Hover */
.scroll-card:hover img {
  transform: scale(1.04);
  transition: 0.4s ease;
}

/* Next section */
.after-section {
  height: 100vh;
  background: #0f1f29;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile */
@media (max-width: 768px) {
  .scroll-card {
    flex-direction: column;
    gap: 5px;
    text-align: center;
  }
.cards-container {
  height: 80vh;

}
.card-content h3{
    font-size:22px;
}
  .scroll-card img {
    width: 60%;
  }
}

.curved-carousel {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: #f6efe7;
}

.carousel-track {
  position: relative;
  height: 100%;
}

.carousel-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 360px;
  background: white;
  border-radius: 20px;
  transform: translate(-50%, -50%);
  box-shadow: 0 30px 60px rgba(0,0,0,0.2);
}

.carousel-card img {
  width: 100%;
  height: 340px;
  object-fit: cover;
}

.carousel-card h3 {
  padding: 15px;
  font-size: 18px;
}

/* Hover */
.carousel-card:hover {
  transform: scale(1.05);
  transition: 0.3s ease;
}

/* Mobile */
@media (max-width: 768px) {
  .carousel-card {
    width: 200px;
  }

  .carousel-card img {
    height: 260px;
  }
}

.after {
  height: 100vh;
  background: #0e1c24;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.cards {
  position: absolute;
  width: 14rem;
  height: 18rem;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cards li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 14rem;
  aspect-ratio: 9/16;
  text-align: center;
  line-height: 18rem;
  font-size: 2rem;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  border-radius: 0.8rem;
}

.actions {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

a {
  color: pink;
  text-decoration: none;
}
a:hover {
  /*text-decoration: underline;*/
}
.drag-proxy {
  visibility: hidden;
  position: absolute;
}
.headinglight h5 {
    color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font2);
    font-size: var(--ztc-font-size-font-s16);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 16px;
    display: inline-block;
    transition: all 0.4s;
    border-radius: 50px;
    background: #D8AC66;
    box-shadow: 0px 3px 8px 0px rgba(68, 22, 255, 0.05);
    padding: 8px 16px;
}

.scroll-card {
  pointer-events: none;
}

.scroll-card.active {
  pointer-events: auto;
}
@media (max-width: 768px) {
.menu-container{
    width:100%;
}
}
@media(min-width:1500px){
    .menu-container{
    width:83%;
}
}
.custom-width {
  width: 40% !important;
  margin-left: auto;

}
.right-cont{
     /*background-color: green !important; */
    
}
.slider-main{min-height: 700px; 
    /* background: radial-gradient(50% 50% at 50% 50%, #C7F6D0 0%, #7CB686 92.19%);  */
    display: flex; justify-content: space-between; align-items: center; height: 100%; overflow: hidden; position: relative; z-index: 1; }
#backgrounds { position: absolute; width: 100%; height: 100%; top: 0; z-index: -1; }
.background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2s ease-in-out; }
.container-slider{position: relative; 
    /* left: calc(50% - (1140px/2));  */
    /* left:10%; */
    /* width: 50%;  */
    padding-block: 100px; 
    /* max-width: 525px;  */
    height: 100%; }

/* content */
.slider-content-wrap{display: flex; flex-direction: column; justify-content: center;height: 100%;}
/* social media */
.social-icons{display: flex;align-items: center;gap: 16px;}
.social-icons a{border: 2px solid #fff;border-radius: 50%;width: 45px;height: 45px;display: inline-block;display: flex;justify-content: center;align-items: center;}
.social-icons img{width: 22px;height: 22px;}

/* images */
.slider-images {
  /* display: flex;
  width: 100%; */
  /* min-height: 500px; */
  /* background-color: red; */
}
.right-cont{
    /* background-color: green !important; */
    
}
.slider-images > img.next{
    opacity: 1;   
    transition:  2s; 
    filter: blur(35px); 
    left: 100%; 
    top: 10%;
    transform: translate(-50% , -50%) scale(0.3); 
}
.slider-images > img.active {
    opacity: 1;   
    transform: scale(1); 
    transition:  2s; 
    filter: blur(0px);
    left: 15%; 
    top: 50%; 
    transform: translateY(-50%);
    z-index: 1;
}
.slider-images > img.previous{ 
    opacity: 1; 
    transition:  2s; 
    filter: blur(25px); 
    left: 95%; 
    top: 90%;     
}
.slider-images > img.inactive{
    opacity: 0;   
    transition: 2s; 
    filter: blur(35px); 
    left: 100%; 
    top: 100%;
    transform: translate(10%, 10%) scale(0.3);
}
.slider-images { 
    position: relative; 
    /* width: 50%;  */
    height: 0%; 
    top: 50%;
 }
.slider-images > img {    
    position: absolute; 
    top: 0%; 
    left: 100%;
    filter: blur(25px); 
    transform: translate(-50%, -50%) scale(0.3); 
    transition: opacity 3s; 
    object-fit: cover; 
    max-width: 593px; 
    max-height: 779px;
    height: 100%;
    min-height: 450px;
}


/* ========================= media query ============================== */
@media screen and (max-width: 1199px) {
    .logo a img{width: 230px;}
    .heading-style-2{font-size: 40px; line-height: 45px; margin-bottom: 30px; }
    p{font-size: 17px; line-height: 28px; margin-bottom: 22px;}
    .container-slider{left: calc(50% - (920px/2)); padding-block: 80px; max-width: 475px; }   
    .slider-images > img {width: 453px; height: auto;aspect-ratio: 1/1.3;}    
}
@media screen and (max-width: 991px) {
    .logo a img{width: 210px;}
    .heading-style-2{font-size: 35px; line-height: 43px; margin-bottom: 22px;}
    p{font-size: 16px; line-height: 26px; margin-bottom: 18px;}
    .container-slider{left: calc(50% - (720px/2)); padding-block: 70px; max-width: 405px; } 
    .slider-images{width: 45%;}  
    .slider-images > img {width: 340px;aspect-ratio: 1/1.3;}    
}
@media screen and (max-width: 767px) {
    .logo a img{width: 200px;}
    .logo a{margin-bottom: 20px;}
    .slider-main{flex-direction: column;min-height: 900px;}
    .social-icons a{width: 35px;height: 35px;}
    .social-icons img{width: 16px;height: 16px;}
    .container-slider{position: unset; padding-block: 70px; max-width: 540px;width: 100%; } 
    .slider-images{
        width: 100%; 
        /*height:50vh;*/
        margin-bottom:350px;
    }  
    .slider-images > img {height: 180px;aspect-ratio: 1/1.3; width: auto;} 
    .slider-images > img.active{
        top: 10%;
        left: 20%;}  
    .custom-width {
  width: 100% !important;
  margin-left: auto;

} 
}
@media screen and (max-width: 575px) {
    .logo a img{width: 180px;}
    .logo a{margin-bottom: 18px;}
    .heading-style-2{font-size: 30px; line-height: 40px; margin-bottom: 20px;}
    p{font-size: 15px; line-height: 24px; margin-bottom: 16px;}
    .social-icons a{width: 32px;height: 32px;}
    .social-icons img{width: 15px;height: 15px;}
    .container-slider{padding: 50px 20px 50px 20px; max-width: 100%;} 
    .slider-images > img { min-height: 350px;} 
    .slider-images > img.active{top: 50%;left: 5%;}
    .slider-images > img.previous{top: 100%;}   
}
 .unmute-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            /*padding: 12px 20px;*/
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: background 0.3s;
            z-index: 10;
            display:none;
        }

        .unmute-btn:hover {
            background: white;
        }
        .video-wide .unmute-btn {
  display:block;
}
@keyframes waterFloat {
  0%   { transform: translate(-50%, -50%) translateY(0px) rotate(0deg); }
  25%  { transform: translate(-50%, -50%) translateY(-4px) rotate(-0.6deg); }
  50%  { transform: translate(-50%, -50%) translateY(0px) rotate(0deg); }
  75%  { transform: translate(-50%, -50%) translateY(4px) rotate(0.6deg); }
  100% { transform: translate(-50%, -50%) translateY(0px) rotate(0deg); }
}
.glass-button {
  position: absolute;
  top: 5%;
  right: 1%;
  text-align:center;
  transform: translate(-50%, -50%);
  cursor: pointer;
  outline: none;
  width: 35px;
  height: 35px;
  border-radius: 19px;

  /* White frosted border */
  border: 1.5px solid rgba(255, 255, 255, 0.3);

  /* Glass background */
  background: rgba(255, 255, 255, 0.15);

  /* Frosted blur effect */
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);

  /* Soft glow */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 0 0.5px rgba(255, 255, 255, 0.6);

  /* Floating animation */
  animation: waterFloat 5s ease-in-out infinite;

  transition: all 0.6s ease;
}


.glass-button:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -50%) scale(1.08);
}

/* lOcationPopup */
.rloc-overlay {
  position: fixed;
  inset: 0;
 background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  z-index: 999999;
}

.rloc-overlay.active {
  opacity: 1;
  visibility: visible;
}


.rloc-title {
  color:black;
  font-weight: 600;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
  margin-top:30px;
}

.button-wrap button{
    background:#3d3289;
}
.rloc-popup {
  /*width: 670px;*/
  /*max-width: 90%;*/
   background:#3d3289; 
   /*background: url("https://pbs.twimg.com/media/GE73G29a8AADbIj.jpg") center/cover no-repeat;*/
  border-radius: 15px;
  padding: 8px;
  position: relative;

  /* Roll animation start */
  transform: translateX(-100%) rotate(-120deg);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(.25,.8,.25,1), opacity 0.4s;
}
.rloc-popup::before {
    border-radius:20px;
  content: "";
  position: absolute;
  inset: 0;
  background: white; /* adjust darkness here */
  z-index: 0;
}
.rloc-overlay.active .rloc-popup {
  transform: translateX(0) rotate(0deg);
  opacity: 1;
}
.button-wrap button {
  width: 100%;
  box-sizing: border-box;
}
/* Roll out animation */
.rloc-overlay.active.closing .rloc-popup {
  transform: translateX(100%) rotate(120deg);
  opacity: 0;
}
.rloc-locations {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ALWAYS 2 per row */
  gap: 10px;
  padding: 20px;
  position: relative;
  z-index: 1;
}


.rloc-item {
  display: flex;
  justify-content: center;
}

/* FORCE LAST ITEM TO CENTER */
.rloc-locations .rloc-item:nth-last-child(1):nth-child(odd) {
  grid-column: 1 / -1;   /* span both columns */
}


/* Tablet */
@media (max-width: 992px) {
  .rloc-locations {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 576px) {
  .rloc-locations {
    grid-template-columns:  repeat(2, 1fr);
  }
  .glass-button{
      top:10%;
  }
}



.rloc-close {
  position: absolute;
  top: 10px;
  right: 12px;
  color:white;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  line-height: 1;
  cursor: pointer;

  background:#3d3289;
  transition: 0.3s;
}

.rloc-close:hover {
  background: #e63946;
  color: #fff;
  transform: rotate(90deg);
}

/* radiology inner page */


/* Testimonials */
.testimonial-section {
  padding: 180px 0 0;
}
.testimonial-section .content {
  border: 2px solid var(--color-4);
  padding: 40px 60px;
  width: 100%;
}
.testimonial-section .row {
  align-items: flex-end;
}
.testimonial-section .content h3 {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  margin: 0px 0px 20px;
  color: var(--color-1);
}
.testimonial-section .content p {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  font-style: italic;
  font-weight: 400;
  color: var(--color-1);
}
.testimonial-section .img-box {
  width: 340px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.testimonial-section .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.testimonial-section .reverse-row {
  align-items: flex-start;
}
.testimonial-section .reverse-row .img-box {
  margin-left: auto;
}

/* Contact */
.contact-us {
  padding: 100px 0 76px;
}
.contact-us h4 {
  margin: 0 0 40px;
  font-size: 32px;
  line-height: 48px;
  font-style: normal;
  font-weight: 600;
  color: var(--color-1);
}
.contact-us .nav {
  width: 80%;
}
.contact-us .nav .nav-item {
  margin: 0 0 24px;
  padding: 0 0 0 64px;
  position: relative;
}
.contact-us .nav .nav-item img {
  position: absolute;
  top: -2px;
  left: 0;
  width: 32px;
}
.contact-us .nav .nav-item .nav-link {
  font-size: 18px;
  line-height: 28px;
  font-style: normal;
  font-weight: 400;
  color: #333333;
  padding: 0;
}
.contact-info {
  padding: 56px;
  position: relative;
  z-index: 1;
}
.contact-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--color-5);
  z-index: -2;
}
.contact-border {
  left: 24px;
  top: -24px;
  position: absolute;
  border: 2px solid var(--color-6);
  height: 100%;
  width: 100%;
  z-index: -1;
}
.contact-info h3 {
  margin: 0 0 24px;
  font-size: 64px;
  line-height: 72px;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-3);
}
.contact-info p {
  margin-bottom: 48px;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: var(--color-3);
}

@media screen and (max-width: 1399px) {
  /* common */
  .container {
    max-width: 1140px;
  }
}
@media screen and (max-width: 1199px) {
  /* common */
  .container {
    max-width: 960px;
  }
  h2.title {
    font-size: 148px;
    top: -20px;
  }
  .paragraph p:first-child:first-letter {
    font-size: 22px;
    line-height: 34px;
  }

  /* button */
  .common-btn {
    padding: 14px 20px;
    font-size: 15px;
    line-height: 22px;
  }
  .common-btn img {
    width: 20px;
  }

  /* banner */
  .banner .container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
  }
  .banner-box h1 {
    top: 0;
  }
  .banner-text {
    margin: 0;
  }
  .banner-text h2 {
    font-size: 85px;
  }

  /* company */
  .compy-box::before {
    left: 24px;
    top: -24px;
  }
  .designer-box .team-member {
    width: 260px;
  }
  .designer-box .team2 {
    top: 17%;
  }

  /* Projects */
  .project-content p {
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 20px;
  }
  .project-content .common-btn {
    padding: 6px 16px;
  }

  /* Contact */
  .contact-us h4 {
    font-size: 28px;
  }
}
@media screen and (max-width: 991px) {
  /* common */
  .container {
    max-width: 720px;
  }
  h2.title {
    font-size: 110px;
    top: -17px;
  }
  p {
    font-size: 16px;
    line-height: 24px;
  }

  /* banner */
  .banner-box {
    padding: 40px;
  }
  .banner-box h1 {
    top: -5%;
    font-size: 280px;
    line-height: 1.3;
  }
  .banner-text {
    max-width: 90%;
  }
  .banner-text h2 {
    font-size: 65px;
  }
  .banner-text h3 {
    font-size: 16px;
    line-height: 24px;
  }

  /* Company */
  .company-section {
    padding-top: 156px;
  }

}



@media screen and (max-width: 767px) {
  /* common */
  .container {
    max-width: calc(100% - 12px);
  }
  h2.title {
    font-size: 52px;
    top: -8px;
  }
  /*p {*/
  /*  margin-bottom: 16px;*/
  /*  font-size: 12px;*/
  /*  line-height: 18px;*/
  /*}*/
  .paragraph p:first-child:first-letter {
    font-size: 20px;
    line-height: 32px;
  }

  /* button */
  .common-btn {
    padding: 10px 16px;
    font-size: 12px;
    line-height: 19px;
  }
  .common-btn::before {
    top: 3px;
    left: 3px;
  }
  .common-btn img {
    width: 16px;
  }
.digital-lab-visual img{
    height:250px;
}
  /* banner */
  /* .banner {
    height: 100dvh;
    min-height: 500px;
  } */
  .banner-box {
    padding: 0px;
  }
  .banner-box h1 {
    top: 0;
    font-size: 160px;
    line-height: 1;
    position: relative;
  }
  .banner-text {
    padding: 64px 0 0 48px;
    max-width: 100%;
  }
  .banner-text h2 {
    font-size: 36px;
  }
  .banner-text h3 {
    font-size: 14px;
    line-height: 22px;
  }
  .banner-img {
    margin-top: 0px;
  }
.chalakudy-op-bnr .banner-img{
    
        margin-top:0px;
    }

  

 
}

    
    ul.breadcrumb {
    background: none;
    display: flex;
    /*justify-content:center;*/
    column-gap: 10px;
    /* padding: 45px 0; */
    font-size: 18px;
    margin-bottom: 0;
    margin-top:50px;
}
ul.breadcrumb li a, ul.breadcrumb li span{
    color:white;
    font-family: "Chakra Petch", sans-serif; 
}
ul.breadcrumb li a:hover{
    color:  #8859af;;
}
.breadcrumblist li{
    font-family: "Chakra Petch", sans-serif; 
    color:#d8ac66;
}
.active-breadcrumb{
    color: var(--primary-pink);
}


/* career-whychoossection */

.career-whychoossection {
    position: relative;
    padding: 50px 0;
    overflow: hidden;
}

/* Background layer */
/* Background layer with horizontal movement */
.career-whychoossection::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url(https://www.pngkey.com/png/detail/437-4379380_networking-networking-png-portable-network-graphics.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;

    opacity: 0.1;          
    z-index: 0;
    pointer-events: none;

    /* Animation: move left and right */
    animation: bgMove 8s ease-in-out infinite alternate;
}

/* Content stays normal */
.career-whychoossection > * {
    position: relative;
    z-index: 1;
}

/* Keyframes: left-right movement */
@keyframes bgMove {
    0% {
        transform: translateX(-20px);
    }
    50% {
        transform: translateX(20px);
    }
    100% {
        transform: translateX(-20px);
    }
}

@keyframes careerReveal {
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.career-whychoossection .service-leftlayer{
    position: absolute;
    top: 0;
    left: 116px;
}
.career-whychoossection .service-rightlayer{
    position: absolute;
    bottom: -20px;
    right: 112px;
}
.career-whychoossection .service-dotimage{
    position: absolute;
    left: 334px;
    bottom: 102px;
}
.career-whychoossection .service-box h4{
     /* font-family: "Chakra Petch", sans-serif;    */
    padding-right: 15px;

    /* font-size: 18px; */
}
.career-whychoossection .service-box h5{
     /* font-family: "Chakra Petch", sans-serif;    */
    padding-right: 15px;
    color:white;
    font-size: 18px;
}
.career-whychoossection .service-box p{
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 10px;
    color: var(--e-global-color-text);
}
.service_contentbox1{
    margin-top:40px;
}
.service_contentbox {
    position: relative;
    overflow: hidden;
}

/* Rotating background layer */
.service_contentbox::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../../assets/img/420789122_d5190211-8d6d-4835-b6f1-dfb1e0ef458a.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: rotateBG 40s linear infinite; /* slow rotation */
    z-index: 0;
}

/* Keep your content above */
.service_contentbox > * {
    position: relative;
    z-index: 1;
}

@keyframes rotateBG {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.career-whychoossection .service_contentbox .box-top {
    padding-top: 37px;
}
.career-whychoossection .service_contentbox .service-box {
    /* background: var(--e-global-color-white); */
    background: #694da8;
    border-radius: 10px;
    padding: 18px 14px 28px 14px;
    margin-bottom: -12px;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    box-shadow: 1px 21px 46px rgb(0 0 0 / 4%);
}
.career-whychoossection .service_contentbox .service-box:hover {
    /* background:linear-gradient(90deg, #f7f2ff, #ffffff);;
    transform: translateY(-5px); */
}
.career-whychoossection .service-box:hover h4{
    color: var(--e-global-color-white);
} 
.career-whychoossection .service-box:hover p{
    color: var(--e-global-color-white);
} 
.career-whychoossection .service_contentbox .service-box figure {
    background: white;
    border-radius: 100px;
    height: 60px;
    width: 60px;
    
    /* line-height: 100px; */
    text-align: center;
    margin-bottom: 20px;
    display: inline-block;
    margin-left: 4px;
    transition: all 0.3s ease-in-out;
}
.career-whychoossection .service_contentbox .service-box figure:hover {
    transform: translateY(-5px);
}


.career-whychoossection .service-box:hover figure{
    background:#694da8;
}
.career-whychoossection .service-box:hover img{
    filter: brightness(0) invert(1);
}
.career-whychoossection .service-box img{
    padding-left: 12px;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}
.career-whychoossection .service-box .circle {
    background: #000219;
    border-radius: 100px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    margin-left: -2px;
    text-align: center;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}
.career-whychoossection .service-box .circle:hover {
    transform: translateY(-5px);
}
.career-whychoossection .service-box:hover .circle {
    background-image: linear-gradient(to right, #ffffff 0%, #ffffff 51%, #ffffff 100%);
}
.career-whychoossection .service-box .circle:before {
    font-size: 18px;
    padding-top: 2px;
    font-family: 'FontAwesome';
    transition: all 0.3s ease;
    color: var(--e-global-color-white);
}
.career-whychoossection .service-box:hover .circle:before {
    color: #30aa9d;
}
.career-whychoossection .service_content .service-rightcircle{
    position: absolute;
    right: -38px;
    top: 162px;
}
.vision-right{
    /* background-image: url(https://img.freepik.com/premium-vector/continuous-line-drawing-stethoscope_767201-244.jpg);
    background-size: contain;
    background-position: bottom; */
        display: flex;
    justify-content: center;
    align-items: center;
}
.career-whychoossection .service_content{
    
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* padding-left: 48px;
    padding-top: 194px; */
}
.career-whychoossection .service_content h2{
    margin-bottom: 18px;
    padding-right: 10px;
}

.career-whychoossection .service_content p{
    margin-bottom: 12px;
}
.career-whychoossection .service_content .text {
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    color: var(--e-global-color-primary);
}
.career-whychoossection .service_content .text:hover{
    color: #30aa9d;
}
.career-whychoossection .service_content ul li .circle {
    background: linear-gradient(90deg, rgb(114 193 137) 0%, rgb(58 172 155) 100%);
    border-radius: 100px;
    height: 18px;
    width: 18px;
    line-height: 18px;
    text-align: center;
    margin-right: 12px;
    margin-left: 0;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}
.career-whychoossection .service_content ul li .circle:before {
    font-size: 12px;
    padding-top: 2px;
    font-family: 'FontAwesome';
    transition: all 0.3s ease;
    color: var(--e-global-color-white);
}
.career-whychoossection .service_content .text1 {
    margin-bottom: 36px;
}
.career-whychoossection .service_content .get_started{
    background-image: linear-gradient(to right, #7bc685, #67c08c, #55b993, #43b299, #35ab9d);
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    border-radius: 30px;
    padding: 15px 25px 15px 43px; 
    text-align: center;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}
.career-whychoossection .service_content .get_started figure {
    display: inline-block;
    margin-left: 16px;
}
.career-whychoossection .service_content .get_started:hover{
    background-image: linear-gradient(to right, var(--e-global-color-desaturated-blue) 0%, var(--e-global-color-desaturated-blue) 100%);
}

/*.services-section {*/
/*  padding: 100px 8%;*/
/*  background: #0f172a;*/
/*  color: #fff;*/
/*  min-height: 100vh;*/
/*}*/

/*.services-section h2 {*/
/*  text-align: center;*/
/*  margin-bottom: 50px;*/
/*  font-size: 2.5rem;*/
/*}*/

/* Grid layout (final state) */
/*.services-grid {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(3, 1fr);*/
/*  gap: 25px;*/
/*  position: relative;*/
/*}*/

/* Cards default (stacked on left) */
/*.service-card {*/
  /*background: #1e293b;*/
/*  background:white;*/
/*  padding: 30px;*/
/*  border-radius: 16px;*/
/*  text-align: center;*/
/*  font-size: 1.2rem;*/
/*  box-shadow: 0 10px 30px rgba(0,0,0,0.4);*/

/*  transform: translateX(-250px) scale(0.85);*/
/*  opacity: 0;*/

/*  transition: */
/*    transform 0.9s cubic-bezier(.22,.61,.36,1),*/
/*    opacity 0.7s ease;*/
/*}*/

/* Spread animation trigger */
/*.services-grid.animate .service-card {*/
/*  transform: translateX(0) scale(1);*/
/*  opacity: 1;*/
/*}*/

/* Stagger effect */
/*.service-card:nth-child(1) { transition-delay: 0.1s; }*/
/*.service-card:nth-child(2) { transition-delay: 0.2s; }*/
/*.service-card:nth-child(3) { transition-delay: 0.3s; }*/
/*.service-card:nth-child(4) { transition-delay: 0.4s; }*/
/*.service-card:nth-child(5) { transition-delay: 0.5s; }*/
/*.service-card:nth-child(6) { transition-delay: 0.6s; }*/

/* Responsive */
/*@media (max-width: 900px) {*/
/*  .services-grid {*/
/*    grid-template-columns: repeat(2, 1fr);*/
/*  }*/
/*}*/

/*@media (max-width: 500px) {*/
/*  .services-grid {*/
/*    grid-template-columns: 1fr;*/
/*  }*/
/*}*/

/* Button Wrap Container */
.button-wrap {
  position: relative;
  z-index: 2;
  border-radius: 999vw;
  background: transparent;
  pointer-events: none;
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
}

/* Button Shadow Container */
.button-shadow {
  --shadow-cuttoff-fix: 2em;
  position: absolute;
  width: calc(100% + var(--shadow-cuttoff-fix));
  height: calc(100% + var(--shadow-cuttoff-fix));
  top: calc(0% - var(--shadow-cuttoff-fix) / 2);
  left: calc(0% - var(--shadow-cuttoff-fix) / 2);
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
  -moz-filter: blur(clamp(2px, 0.125em, 12px));
  -ms-filter: blur(clamp(2px, 0.125em, 12px));
  overflow: visible;
  pointer-events: none;
}

/* Shadow */
.button-shadow::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 999vw;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  left: calc(var(--shadow-cuttoff-fix) - 0.875em);
  padding: 0.125em;
  box-sizing: border-box;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  overflow: visible;
  opacity: 1;
}

/* ========== BUTTON BASE STYLES ========== */

.rloc-item button {
  /* Basic Styling */
  /*--border-width: clamp(1px, 0.0625em, 4px);*/
  /*all: unset;*/
  /*cursor: pointer;*/
  /*position: relative;*/
  /*-webkit-tap-highlight-color: rgba(0, 0, 0, 0);*/
  pointer-events: auto;
  z-index: 3;
  border: none;
  /*background: linear-gradient(*/
  /*  -75deg,*/
  /*  rgba(255, 255, 255, 0.05),*/
  /*  rgba(255, 255, 255, 0.2),*/
  /*  rgba(255, 255, 255, 0.05)*/
  /*);*/
  border-radius: 999vw;
  /*box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),*/
  /*  inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),*/
  /*  0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),*/
  /*  0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),*/
  /*  0 0 0 0 rgba(255, 255, 255, 1);*/
  /*backdrop-filter: blur(clamp(1px, 0.125em, 4px));*/
  /*-webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));*/
  /*-moz-backdrop-filter: blur(clamp(1px, 0.125em, 4px));*/
  /*-ms-backdrop-filter: blur(clamp(1px, 0.125em, 4px));*/
  /*transition: all var(--anim--hover-time) var(--anim--hover-ease);*/
}

.rloc-item button:hover {
  transform: scale(0.975);
  backdrop-filter: blur(0.01em);
  -webkit-backdrop-filter: blur(0.01em);
  -moz-backdrop-filter: blur(0.01em);
  -ms-backdrop-filter: blur(0.01em);
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
    0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5),
    0 0 0 0 rgba(255, 255, 255, 1);
}

/* Button Text */
.rloc-item button span {
    width:150px;
  position: relative;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  font-weight: 500;
  font-size: 1em;
  color: white;
  /* -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
  /* text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1); */
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  padding-inline: 1.5em;
  padding-block: 0.875em;
}

/*button:hover span {*/
/*  text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12);*/
/*}*/

/* Text */

/* ========== BUTTON OUTLINE ========== */

/* Outline */
.rloc-item button::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 999vw;
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  top: calc(0% - var(--border-width) / 2);
  left: calc(0% - var(--border-width) / 2);
  padding: var(--border-width);
  box-sizing: border-box;
  background: conic-gradient(
      from var(--angle-1) at 50% 50%,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0) 5% 40%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0) 60% 95%,
      rgba(0, 0, 0, 0.5)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--anim--hover-time) var(--anim--hover-ease),
    --angle-1 500ms ease;
  box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5);
}

.rloc-item button:hover::after {
  --angle-1: -125deg;
}

.rloc-item button:active::after {
  --angle-1: -75deg;
}

@media (hover: none) and (pointer: coarse) {
 .rloc-item button::after,
 .rloc-item button:hover::after,
.rloc-item  button:active::after {
    --angle-1: -75deg;
  }
}

/* Shadow Hover */
.button-wrap:has(button:hover) .button-shadow {
  filter: blur(clamp(2px, 0.0625em, 6px));
  -webkit-filter: blur(clamp(2px, 0.0625em, 6px));
  -moz-filter: blur(clamp(2px, 0.0625em, 6px));
  -ms-filter: blur(clamp(2px, 0.0625em, 6px));
  transition: filter var(--anim--hover-time) var(--anim--hover-ease);
}

.button-wrap:has(button:hover) .button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.875em);
  opacity: 1;
}

/* Rotation */
.button-wrap:has(button:active) {
  transform: rotate3d(1, 0, 0, 25deg);
}

.button-wrap:has(button:active) button {
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
    0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05),
    0 0.25em 0 0 rgba(255, 255, 255, 0.75),
    inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
}

.button-wrap:has(button:active) .button-shadow {
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
  -moz-filter: blur(clamp(2px, 0.125em, 12px));
  -ms-filter: blur(clamp(2px, 0.125em, 12px));
}

.button-wrap:has(button:active) .button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  opacity: 0.75;
}

.button-wrap:has(button:active) span {
  text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12);
}
.animated-icon{
    position: absolute;
}
/* Section wrapper */
.neo-cta-wrap {
  padding: 80px 20px;
  display: flex;
  justify-content: center;
  background: #f4f6ff;
}

/* Card */
.neo-cta-card {
  max-width: 1100px;
  width: 100%;
  min-height: 350px;
  border-radius: 28px;
  background: linear-gradient(135deg, #694da8, #372d7e);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
  transition: 0.8s ease;
}

/* Glass overlay */
.neo-cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  z-index: 0;
}
.neo-leftbg{
  background-image: url('../img/all-images/bg/hero-bg2.png');
  background-size: cover;
  background-position:center;
  z-index:1;
}
.neo-cta-content,
.neo-phone-box {
  position: relative;
  z-index: 2;

}

/* Text */
.neo-cta-content h2 {
  font-size: 2.4rem;
  margin-bottom: 15px;
}

.neo-cta-content span {
  color: #ffe082;
}

.neo-cta-content p {
  max-width: 420px;
  line-height: 1.6;
  margin-bottom: 25px;
  opacity: 0.9;
}

/* Button */
.neo-btn-primary {
  padding: 14px 32px;
  border-radius: 30px;
  border: none;
  background: #fff;
  color: #6a5cff;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
}

.neo-btn-primary:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 30px rgba(255,255,255,0.4);
}

/* Phone */
/* .neo-phone-box {
  width: 240px;
  animation: neoFloat 4s ease-in-out infinite;
} */
.neo-phone-box {
  width: 240px;
  position: relative; /* required for left animation */
  animation: floatHorizontally 4s ease-in-out infinite alternate;
}

@keyframes floatHorizontally {
  0% {
    left: 0; /* start position */
  }
  100% {
    left: 200px; /* end position (adjust as needed) */
  }
}
.neo-phone-img {
  width: 100%;
  filter: drop-shadow(0 25px 40px rgba(0,0,0,0.35));
}

/* Floating animation */
@keyframes neoFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

/* Scroll animation */
.neo-hidden {
  opacity: 0;
  transform: translateY(60px) scale(0.95);
}

.neo-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Responsive */
@media (max-width: 768px) {
  .neo-cta-card {
    flex-direction: column;
    text-align: center;
    padding: 40px 25px;
    gap: 30px;
  }

  .neo-cta-content p {
    margin: auto;
  }

  .neo-phone-box {
    width: 180px;
  }
  .banner3{
    padding-inline:0px;
  }
  ul.breadcrumb{
    margin-top:20px;
    font-size:14px;
  }
}

.neo-highlight-text {
  margin-top: 10px;
  font-weight: 600;
  color: #fff;
}

.neo-service-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 18px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px 18px;
  font-size: 0.95rem;
}

.neo-service-list li {
  background: rgba(255,255,255,0.15);
  padding: 6px 12px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

.neo-terms {
  font-size: 0.75rem;
  opacity: 0.75;
  margin-bottom: 20px;
}
.neo-aniamtion{
    position: relative;
    top: 90px;
    left:400px;
    z-index:0
   

}
.career-bganim{
    position: absolute;
    top: 20px;
    left: -9%;
    width: 500px;
    height: auto;
    z-index: -1;
    overflow: hidden;
    opacity:0.4;
}
.lab-tagline{
  font-size: 17px;
  color: #8a6fb3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.lab-tagline span{
  padding: 5px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg,#fde2f3,#e9d5ff);
  color: #6b21a8;
  font-weight: 600;
  animation: fadeUp 0.6s ease forwards;
  box-shadow: 0 3px 8px rgba(180, 140, 255, 0.18);
}

.lab-tagline span:nth-child(1){ animation-delay: 0.1s; }
.lab-tagline span:nth-child(2){ animation-delay: 0.2s; }
.lab-tagline span:nth-child(3){ animation-delay: 0.3s; }
.lab-tagline span:nth-child(4){ animation-delay: 0.4s; }

.lab-tagline .highlight{
  background: linear-gradient(90deg,#fbcfe8,#e9d5ff);
  color: #6b21a8;
}

@keyframes fadeUp{
  from{
    opacity: 0;
    transform: translateY(10px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
.neo-bg {
    position: absolute;
    left: -50px;
 
    opacity: 0.5;
}

.neo-bg img {
    height: 300px;
    transform-origin: center center; /* rotate around its center */
    animation: slightRotate 10s linear infinite;
    rotate: -20deg;
}

@keyframes slightRotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(5deg);   /* slight tilt */
    }
    100% {
        transform: rotate(0deg);
    }
}
@media (min-width: 992px) and (max-width: 1399px) {
 .banner-box h1 {
     font-size:219px;
 }
 .banner-text h2{
     font-size:54px;
 }
 .banner-text {
  margin: 60px 0 0;
  padding:65px 0 0 70px;
 }

}
@media (max-width: 767px) {
 .career-bganim {
     display:none;
 }
 .tagline{
     font-size:12px;
     width:110px;
     text-align:left;
 }
}
/* new */
 .hero-images {
      display: grid;
      grid-template-columns: repeat(2, auto);
      gap: 20px;
      justify-content: center;
      align-items: center;
   /* background-image: url(https://sasstechwp.webnextpro.com/wp-content/uploads/2025/03/sqaure_shape.png); */

    }

    .shape {
      width: 260px;
      height: 260px;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      background: #f2f2f2;
      /*box-shadow: 0 22px 20px rgba(0,0,0,0.08);*/
      box-shadow: 0 22px 20px rgb(255 255 255 / 13%);
    }
@media (min-width: 1110px) and (max-width: 1400px) {
     .shape {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      background: #f2f2f2;
     box-shadow: 0 22px 20px rgb(255 255 255 / 13%);
    }
}
@media (min-width: 990px) and (max-width: 1110px) {
     .shape {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      background: #f2f2f2;
     box-shadow: 0 22px 20px rgb(255 255 255 / 13%);
    }
}
/*     
    .shape {
      width: 260px;
      height: 260px;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      background: #f2f2f2;
    } */

    .shape img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: 0.4s ease;
    }

    .shape:hover img {
      transform: scale(1.05);
    }

    .shape:nth-child(1) { border-radius: 50% 50% 20% 50%; }
    .shape:nth-child(2) { border-radius: 30% 50% 50% 50%; }
    .shape:nth-child(3) { border-radius: 50% 40% 50% 20%; }
    .shape:nth-child(4) { border-radius: 50% 50% 50% 50%; }
 @media (max-width: 992px) {
      .slide-content {
        flex-direction: column;
        text-align: center;
      }

      .hero-images {
        margin-top: 40px;
      }

      .shape {
        width: 180px;
        height: 180px;
      }
    }

    @media (max-width: 576px) {
      .shape {
        width: 140px;
        height: 140px;
      }
    }
    
.drop {
  width: 250px;
  height: 300px;
  overflow: hidden;
  clip-path: path("M125 0 C190 0 250 70 250 140 C250 230 125 300 125 300 C125 300 0 230 0 140 C0 70 60 0 125 0 Z");
}

.drop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.insurance-dark {
  background: #0b0f1a;
  padding: 80px 20px;
  color: #fff;
  overflow: hidden;
}

.insurance-wrap {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.side {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 320px;
}

.pill {
  background: #121a33;
  padding: 22px 24px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  transition: all 0.4s ease;
  border: 1px solid transparent;
  cursor: pointer;
}

.side.right .pill {
  flex-direction: row-reverse;
}

.pill .icon {
  width: 50px;
  height: 50px;
  background: #1f2b50;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  transition: 0.4s;
}

.pill h3 {
  margin: 0;
  font-size: 17px;
}

.pill p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #aaa;
}

.pill:hover {
  transform: translateX(12px);
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  border-color: #3b82f6;
}

.side.right .pill:hover {
  transform: translateX(-12px);
}

.pill:hover .icon {
  background: #fff;
  color: #2563eb;
}

.pill.active {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
}

.center-circle img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #2563eb;
  box-shadow: 0 0 50px rgba(37, 99, 235, 0.5);
  transition: 0.5s ease;
}

.center-circle img:hover {
  transform: scale(1.05) rotate(2deg);
}

/* MOBILE RESPONSIVE */

@media (max-width: 900px) {
  .insurance-wrap {
    flex-direction: column;
  }

  .side {
    width: 100%;
    align-items: center;
  }

  .pill {
    width: 100%;
    max-width: 420px;
  }

  .side.right .pill {
    flex-direction: row;
  }

  .side.right .pill:hover {
    transform: translateX(12px);
  }
}
.scan-section {
  max-width: 1200px;
  margin: auto;
  padding: 80px 20px;
}

.scan-item {
  display: flex;
  align-items: center;
  /* gap: 50px; */
  margin-bottom: 90px;
}

.scan-item.reverse {
  flex-direction: row-reverse;
}

.scan-text {
    height:300px;
  flex: 1;
  background: black;
  background-image: url(https://modinatheme.com/html/quantech-html/assets/img/footer-widgets-bg.png);
  padding: 40px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: all 0.4s ease;
}

.scan-text:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.15);
}

.scan-text h3 {
    color:white;
  font-size: 26px;
  margin-bottom: 12px;
}

.scan-text p {
  color: white;
  line-height: 1.7;
  margin-bottom: 18px;
}

.scan-link {
  color: #0077ff;
  font-weight: 600;
  transition: 0.3s;
}

.scan-text:hover .scan-link {
  letter-spacing: 1px;
}

.scan-img {
  flex: 1;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}

.scan-img img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.scan-item:hover img {
  transform: scale(1.1);
}

/* Mobile */
@media (max-width: 768px) {
  .scan-item,
  .scan-item.reverse {
    flex-direction: column;
  }

  .scan-text {
    text-align: center;
  }
}

.healthservice{
    background: 
    radial-gradient(circle at top left, rgba(168,85,247,0.35), transparent 45%),
    radial-gradient(circle at bottom right, rgba(236,72,153,0.35), transparent 45%),
    #0b0614;
    position: relative;
    display: inline-block;
    width: 100%;
    z-index: 10;
    padding-top:150px;
    overflow: hidden;
}

.healthservice-top{
    position: relative;
    z-index: 10;
}

.healthservice-image{
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background-color: lightgray 50%;
    width: 100%;
    position: relative;
    display: inline-block;
    z-index: 10;
}

.healthservice-image img{
    width: 100%;
    height: 400px;
    border-radius: 12px;
    object-fit: cover;
}

.healthservice-content{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
}

.healthservice-heading{
    font-size: 28px;
    color:white;
    margin-bottom: 20px;
}
.healthservice-heading {
  font-weight: 700;
  background: linear-gradient(90deg,#b798ff, #f97eb9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.healthservice-description{
    color: white;
}

.know-more-link{
    color: white;
    width: 100%;
    margin-top: 2rem;
    display: inline-block;
    transition: ease-in 0.3s;
}

.know-more-link:hover{
    color: var(--theme-color-4);
    transition: ease-in 0.3s;
}

.know-more-link i{
    margin-left: 10px;
}

.right-content{
    padding-left: 2rem;
}

.healthservice-layer-purple{
    position: absolute;
    left: 0;
    top: 30%;
    z-index: 1;
    width: 60%;
    opacity: 0.3;
}

.healthservice-layer-green{
    position: absolute;
    right: -15rem;
    bottom: 20%;
    z-index: 1;
    width: 60%;
    opacity: 0.3;
}
.ba-wrapper {
  display: flex;
  justify-content: center;
  padding: 60px 20px;

}

.ba-container {
  position: relative;
  width: 100%;
  max-width: 60%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

.ba-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-after-wrap {
  position: absolute;
  inset: 0;
  width: 80%;
  overflow: hidden;
  transition: width 0.15s ease;
}

/* Range Slider */
.ba-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
}

/* Handle */
.ba-handle {
  position: absolute;
  top: 0;
  left: 80%;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #d8ac66, #d8ac66);
  transform: translateX(-50%);
  z-index: 4;
}

.ba-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.ba-handle span::before {
 content: "❮❯";
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #0f172a;
}

/* Labels */
.ba-label {
  position: absolute;
  top: 20px;
  padding: 6px 14px;
  background: #6b4fa9;
  color: #fff;
  font-size: 14px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
}
.know-more-link:hover {
  background: linear-gradient(90deg, #b798ff, #f97eb9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.before-label { left: 20px; }
.after-label { right: 20px; }
.map-wrapper {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(10%) contrast(110%);
}
.before-after-sec {
    position: relative;
    margin-top: 100px;
    /* keep content normal */
    z-index: 1;
}

/* background overlay */
.before-after-sec::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background-image: url("../img/pngpattern.png");
    background-repeat:no-repeat;
    background-position:top right;
    background-size: 40%; /* optional, adjust as needed */
    opacity: 0.4; /* adjust opacity here */
    z-index: 0;
}
.contact1-section-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* background image */
.contact1-section-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://t4.ftcdn.net/jpg/01/69/34/23/360_F_169342380_foSFV2bes4e5tUs0HIYeWiJRDb3g8QQe.jpg");
  background-position: bottom top;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

/* black overlay */
.contact1-section-area::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55); /* 🔹 adjust darkness here */
  z-index: 1;
}

/* keep content above overlays */
.contact1-section-area > * {
  position: relative;
  z-index: 2;
}

.healthservice-image img {
  width: 100%;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.healthservice-image:hover img {
  transform: scale(1.08) translateY(-6px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.45);
}
/* Preloader wrapper */
#preloader {
  position: fixed;
  inset: 0;
  background: #ffffff; /* or dark bg */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

/* Logo animation */
.preloader-logo {
  width: 140px; /* adjust */
  opacity: 0;
  transform: scale(0.5);
  animation: logoZoomFade 1.8s ease-in-out forwards;
}

/* Animation */
@keyframes logoZoomFade {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

/* Hide smoothly */
#preloader.hide {
  opacity: 0;
  visibility: hidden;
  transition: 0.6s ease;
}

.availability-section {
  padding: 40px 20px;
  background: linear-gradient(180deg, #f7fbff, #eef5fb);
  text-align: center;
}

.availability-title {
  font-size: 2.2rem;
  /* margin-bottom: 50px; */
  color: #0f2a44;
}

/*.availability-title span {*/
/*  background:  linear-gradient(90deg, #7056ac, #e37ab8);*/
/*  -webkit-background-clip: text;*/
/*  -webkit-text-fill-color: transparent;*/
/*}*/

/*.availability-grid {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));*/
/*  gap: 25px;*/
/*  max-width: 1100px;*/
/*  margin: auto;*/
/*}*/

.availability-grid {
  text-align: center;     /* center inline items */
  /* max-width: 1100px; */
  margin: auto;
  font-size: 0;           /* remove inline-block gaps */
}

.availability-grid a {
  display: inline-flex;
  justify-content: center;
  min-width: 200px;
  margin: 8px;
  vertical-align: top;
  font-size: 16px;       
  text-decoration: none;
}

/* ≤ 1000px → 2 items */
/* @media (max-width: 1000px) {
  .availability-grid a {
    width: 45%;
  }
} */

/* ≤ 600px → 1 item */
@media (max-width: 600px) {
  .availability-grid a {
    width: 90%;
  }
}
.availability-card {
  /*background: #3D3289;*/
  background:#2d1d4f;
  border-radius: 78px;
  padding: 35px 25px;
  text-decoration: none;
  color: white;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transform: scale(0.95);
  opacity: 0.8;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.availability-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(0, 123, 255, 0.15),
    transparent
  );
  transform: translateX(-100%);
}

.availability-card.active {
  transform: scale(1.05);
  opacity: 1;
  color:white;
  box-shadow: 0 18px 45px rgba(0,123,255,0.25);
}
.availability-card:hover p, .availability-card h3
.availability-card.active p , .availability-card h3 {
  color: #ffffff;
  opacity: 1;
}

.availability-card.active::before {
  animation: shine 1.2s ease;
}

.availability-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 20px 50px rgba(0,123,255,0.3);
}

.icon-24 {
  font-size:35px;
  margin-bottom: 15px;
}
.icon-24 img{
    height:45px;
}
.availability-card h3 {
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.availability-card p {
  font-size: 0.95rem;
  opacity: 0.8;
}

@keyframes shine {
  100% {
    transform: translateX(100%);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .availability-title {
    font-size: 1.8rem;
  }
}
.team-section {
  padding: 80px 5%;
  background: #fff;
  font-family: 'Inter', sans-serif;
}

.team-header {
  margin-bottom: 50px;
}

.team-header .badge {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #555;
}

.team-header h2 {
  font-size: 42px;
  margin-top: 10px;
}

/*.team-grid {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));*/
/*  gap: 30px;*/
/*}*/
.team-grid {
  /*text-align: center;*/
}

/* default card style */
.team-card {
  display: inline-block;
  /* width: 23%;               */
  min-width: 240px;
  margin: 1%;
  vertical-align: top;     /* prevents height jump */
}
@media (min-width:1000px) and (max-width:1400px) {
    .team-card {
    min-width: 200px;
  }
}
/* ≤ 1000px → 2 items */
@media (max-width: 1000px) {
  .team-card {
    width: 45%;
  }
}

/* ≤ 600px → 1 item */
@media (max-width: 600px) {
  .team-card {
    width: 90%;
  }
}
.team-card {
  /*background: #8fa3a2;*/
  background:#9a87c5;
  padding: 30px 20px;
  text-align: center;
  border-radius: 80px 20px 80px 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}

.team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.team-card:hover::before {
  opacity: 1;
}

/* Opposite corner animation */
.team-card:hover {
  border-radius: 20px 80px 20px 80px;
}

/* Image wrapper */
.img-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* Circle container */
.img-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  transition: transform 0.5s ease;
}

/* Doctor image */
.img-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* keeps face focused */
  object-position: top;    /* adjust to center/top if needed */
  transition: transform 0.5s ease;
}

/* Hover zoom effect */
.team-card:hover .img-circle img {
  transform: scale(1.2);
}

.team-card h3,
.team-card p {
  position: relative;
  z-index: 1;
  color: #fff;
}

.team-card h3 {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 600;
}

.team-card p {
  font-size: 14px;
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 768px) {
  .team-header h2 {
    font-size: 30px;
  }
}
.gradient-text {
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(90deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.medsrv-section {
  background: #6a7f2b;
  padding: 60px 20px;
}

.medsrv-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}


.medsrv-card {
    max-width:250px;
    /* min-height:300px; */
  /* background: #ffffff; */
  border-radius: 0 120px 120px 120px;
  padding: 50px 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
  .coming-right a{
   color:#d8ac66;
  }
@media (min-width: 1000px) and (max-width:1400px) {
  .medsrv-card {
    max-width: 220px;
  }
}
@media (min-width: 700px) and (max-width:1000px) {
  .medsrv-card {
    max-width: 200px;
  }
}
@media (max-width : 776px){
    .medsrv-card {
  padding: 30px 20px;
}
}
.medsrv-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.medsrv-img-wrap {
  width: 160px;
  height: 160px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
}

.medsrv-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.medsrv-title {
  font-size: 20px;
  margin-bottom: 10px;
  /*color: var( --yellow:);*/
}

.medsrv-text {
  font-size: 14px;
  color: white;
  line-height: 1.6;
}

.medsrv-card--highlight {
  background: #2f3f12;
}

.medsrv-card--highlight .medsrv-title,
.medsrv-card--highlight .medsrv-text {
  color: #ffffff;
}

.grad-text {
  background:linear-gradient(90deg, #7056ac, #e37ab8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.grad-text-light {
  background:linear-gradient(90deg, #bdb1d9, #e37ab8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.hero-wrapper {
  position: relative;
  width: 100%;
  height: 50vh;
  overflow: hidden;
  display: flex;
}

/* Right Image Section (80%) */
.hero-image {
  width: 51%;
  margin-left: auto;
}

.hero-image img {
  width: 100%;
  height: 100%;
    
  object-fit: cover;
    animation: heroZoom 10s ease-in-out infinite;
  transform-origin: center;
}
@keyframes heroZoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
/* Left Overlay with Diagonal Cut */
.hero-overlay {
    display:flex;
    justify-content:center;
    flex-direction:column;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 55%;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
  padding: 60px 90px;
   color:
  var(--ztc-text-text-11);
  z-index: 2;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(120,80,200,0.18), transparent 60%),
  radial-gradient(circle at top left, rgba(168,85,247,0.35), transparent 45%),
  radial-gradient(circle at bottom right, rgba(139,92,246,0.35), transparent 45%),
  #0b0614;
}

/* Background image with opacity */
/* .hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(https://previews.123rf.com/images/pro100vector/pro100vector1809/pro100vector180900167/108436984-medical-background-from-hexagons-geometric-elements-of-design-for-modern-communications-medicine.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  z-index: -1;
} */
/* Text Styling */
.hero-overlay h2 {
  font-size:3.1rem;
  color:white;
  letter-spacing:-1px;
  /* var(--ztc-text-text-11); */
  margin-bottom: 15px;
}
.hero-overlay h1 {
  font-size:40px;
  color:white;
  font-weight:700;
  /* var(--ztc-text-text-11); */
  margin-bottom: 15px;
}

.hero-overlay p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 25px;
}
.logo-float img {
  animation: floatY 4s ease-in-out infinite;
}
@keyframes floatY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

@media (max-width: 768px) {
  .hero-overlay {
    width: 100%;
    clip-path: none;
    position: relative;
  }

  .hero-image {
    width: 100%;
  }

  .hero-wrapper {
    flex-direction: column;
    height: auto;
  }
}
@media (max-width: 780px) {
 .radio-service-p p{
     display:none;
 }
 .hero-overlay h1{
     font-size:32px;
 }
 .hero-overlay h2{
     font-size:28px;
 }
 .hero-overlay{
     padding:50px 50px;
 }
 .availability-grid{
     max-width:300px;
 }
 .map-wrapper{
     margin-top:40px;
       margin-bottom:40px;
 }
 .healthservice{
   
    padding-top:0px;

}
}

 .ikda-banner{
 background:radial-gradient(circle at center, rgba(170, 40, 80, 0.88), rgba(90, 12, 35, 0.96) 70%),
  radial-gradient(circle at top left, rgba(200, 50, 90, 0.92), rgba(80, 10, 30, 0.96) 65%),
  radial-gradient(circle at bottom right, rgba(150, 30, 65, 0.92), rgba(70, 8, 25, 0.96) 65%);
 }
 .chalakudy-bnr{
    background: radial-gradient(circle at center, rgba(120,80,200,0.18), transparent 60%),
     radial-gradient(circle at top left, rgba(168,85,247,0.35), transparent 45%), 
     radial-gradient(circle at bottom right, rgba(139,92,246,0.35), transparent 45%), #0b0614
 }
 .amballur-bnr{
background:
  radial-gradient(circle at center, rgba(120, 85, 45, 0.92), rgba(55, 40, 20, 0.98) 70%),
  radial-gradient(circle at top left, rgba(150, 110, 65, 0.94), rgba(65, 45, 25, 0.98) 65%),
  radial-gradient(circle at bottom right, rgba(100, 70, 40, 0.94), rgba(45, 30, 18, 0.98) 65%);
 }
 .knmklm-bnr{
background:
  radial-gradient(circle at center, rgba(65, 85, 105, 0.92), rgba(25, 35, 55, 0.98) 70%),
  radial-gradient(circle at top left, rgba(90, 115, 140, 0.94), rgba(30, 45, 70, 0.98) 65%),
  radial-gradient(circle at bottom right, rgba(50, 70, 95, 0.94), rgba(20, 30, 50, 0.98) 65%);
 }
.kdnglr-bnr{
background:
   radial-gradient(circle at center, rgba(30, 120, 150, 0.92), rgba(12, 55, 75, 0.98) 70%),
  radial-gradient(circle at top left, rgba(45, 155, 185, 0.94), rgba(18, 70, 90, 0.98) 65%),
  radial-gradient(circle at bottom right, rgba(25, 95, 125, 0.94), rgba(10, 45, 60, 0.98) 65%);
}
.mala-bnr{
background:
  radial-gradient(circle at center, rgba(55, 75, 65, 0.9), rgba(25, 40, 35, 0.95) 65%),
  radial-gradient(circle at top left, rgba(85, 110, 95, 0.9), rgba(45, 65, 55, 0.95) 60%),
  radial-gradient(circle at bottom right, rgba(45, 65, 55, 0.9), rgba(20, 35, 30, 0.95) 60%);
}
.mvtpzha-bnr{
background:
 radial-gradient(circle at center, rgba(90, 90, 95, 0.9), rgba(35, 35, 40, 0.95) 65%),
  radial-gradient(circle at top left, rgba(120, 120, 130, 0.9), rgba(55, 55, 60, 0.95) 60%),
  radial-gradient(circle at bottom right, rgba(80, 80, 85, 0.9), rgba(30, 30, 35, 0.95) 60%);
}
.about-bnr{
  background:      linear-gradient(135deg, rgb(21, 12, 80), #6A5ACD)
    
}
.ckdy-bg{
    background: linear-gradient(135deg, #fff1f7, #f3e8ff);
}
 .gold-text{
    color: #D8AC66;
 }


 .irkda-card{
background:#b51c4a;
 }
 .irka-clr{
    color: #b51c4a;
 }
 .irkda-dctr{
    background:#c2416a;
 }
 .ikda-cntact-icons{
     background: #901f41;
}

.knmklm-card{
    background:#2d5487;
}
.knmklm-dctr{
    background:#6486ab;
}
 .knmkl-cntact-icons{
     background: #2c3b4f;
}

.ckdy-cntact-icons{
     background: var(--ztc-bg-bg-3);
}
.ckdy-dctr{
    background:#9a87c5;
}


.amblr-card{
    background:#a98348;
}
.amblr-dctr{
    background:#b68842;
}
.amblr-cntact-icons{
    background:#684a28;
}


.kdnglr-card{
    background:#135168;
}
.card-content-kdnglr{
    background:#0d3e55;
}
.kdnglr-dctr{
    background:#4a7280;
}
 .kdnglr-cntact-icons{
     background:#4a7280;
}

.mala-card{
    background:#293b33;
}
.card-content-mala{
    background:#1e3128;
}
.mala-dctr{
    background:#678e81;
}
 .mala-cntact-icons{
     background:#1a2924;
}

.mvtpzha-card{
    background:#1a2925;
}
.card-content-mvtpzha{
    background:#333335;
}
.mvtpzha-dctr{
    background:#808080;
}
 .mvtpzha-cntact-icons{
     background:#333335;
}
@media (min-width: 780px) and (max-width: 1400px) {
    .hero-overlay h1 {
    font-size: 38px; /* adjust as needed */
    line-height: 1.2;
  }
  .hero-overlay h2 {
    font-size: 38px; /* adjust as needed */
    line-height: 1.2;
  }
  .hero-overlay{
      padding: 20px 50px;
  }
  ul.breadcrumb{
      margin-top:0px;
  }
  .healthservice{
      padding-top:70px;
  }
  .hero-wrapper {

  height: 60vh;

}
}

.comingsoon-wrap {
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  padding: 90px 20px;
}

.comingsoon-inner {
 
  margin: auto;
  text-align: center;
}

.comingsoon-badge {
  display: inline-block;
  background: #e8f3ff;
  color: #0a5fd8;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  animation: pulse 2s infinite;
}

.comingsoon-title {
  font-size: 42px;
  font-weight: 700;
  color: #1f2a44;
  line-height: 1.3;
  margin-bottom: 25px;
}

.comingsoon-title .highlight {
  background: linear-gradient(90deg, #10465c, #27b6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.comingsoon-title .highlight-mala {
  background: linear-gradient(
    90deg,
    #1f3a2e,   /* deep charcoal green */
    #2f5f4a,   /* muted emerald */
    #4f8f6f    /* soft green highlight */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.comingsoon-title .location {
  color:#3d8aa7;
}
.comingsoon-title .location-mala {
  color:#4f8f6f;
}
.comingsoon-desc {
  font-size: 17px;
  color: #5b667d;
  line-height: 1.8;
  margin-bottom: 15px;
}
.comingsoon-title .location-mvtpzha {
  color: #4b5563;
}
.comingsoon-title .highlight-mvtpzha{
    background: linear-gradient(
        90deg,
        #4b5563,   /* slate gray */
        #6b7280,   /* cool gray */
        #9ca3af    /* light gray highlight */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.comingsoon-desc.secondary {
  font-size: 16px;
}

/* Animation */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(10,95,216,0.25); }
  70% { box-shadow: 0 0 0 12px rgba(10,95,216,0); }
  100% { box-shadow: 0 0 0 0 rgba(10,95,216,0); }
}

/* Responsive */
@media (max-width: 768px) {
  .comingsoon-title {
    font-size: 30px;
  }

  .comingsoon-desc {
    font-size: 15px;
  }
  .benefites-widget-boxarea .icons p{
      line-height:50px;
       font-size:24px;
  }
}

.coming-layout {
  background: linear-gradient(135deg, #0b0f14, #111827);
  padding: 80px 20px;
  color: #e5e7eb;
}

.coming-wrap {
  max-width: 1200px;
  margin: auto;
  display: flex;
  gap: 40px;
  align-items: center;
}
/* LEFT TEXT */
.coming-left-text {
  flex: 1;
  animation: slideFromLeft 1.2s ease forwards;
}

.coming-tag {
  display: inline-block;
  color: purple;
  font-size: clamp(32px, 6vw, 50px);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 14px;
  position: relative;
  animation: floatText 2.5s ease-in-out infinite;
}

/* Soft floating animation */
@keyframes floatText {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.coming-tag::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 55px;
  height: 3px;
  background: linear-gradient(90deg, pink, transparent);
}

.coming-left-text h2 {
  font-size: 2.6rem;
  line-height: 1.2;
  margin: 18px 0;
}

.coming-left-text p {
  color: #9ca3af;
  max-width: 420px;
  line-height: 1.7;
}


/* RIGHT SERVICES */
.coming-right {
  flex: 1.3;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}
/* RESPONSIVE */
@media (max-width: 900px) {
  .coming-wrap {
    flex-direction: column;
  }

  .coming-right {
    grid-template-columns: 1fr;
  }

  .coming-left h2 {
    font-size: 1.8rem;
  }
}
/* POPUP OVERLAY */
.dept-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* POPUP BOX */
.dept-popup {
  width: 90%;
  max-width: 400px;
  background: #fff;
  border-radius: 18px;
  padding: 28px 22px;
  position: relative;
  animation: scalePop 0.35s ease;
}

@keyframes scalePop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* CLOSE BUTTON */
.dept-close {
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  margin: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  text-align:center;
  border: none;
  background: #3d3289;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
/* TITLE */
.dept-popup h4 {
  text-align: center;
  margin-bottom: 22px;
  font-weight: 700;
}

/* DEPARTMENT BUTTONS */
.dept-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dept-btn {
  padding: 14px;
  border-radius: 34px;
  border: none;
  font-weight: 600;
  background: linear-gradient(135deg,#3d3289,#3d3289);
  color: #fff;
  text-align:center;
  cursor: pointer;
  transition: 0.25s ease;
  font-size:18px;
}

.dept-btn:hover {
 box-shadow: 0 8px 18px rgba(168, 85, 247, 0.45);
}
.location-slider,
.location-slider * {
  cursor: pointer;
}

.partners-section {
    padding:80px;
  background: #efedff;
}

.partner-badge {
  background: #d8ac66;
  color: #02015a;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 14px;
}

.partner-title {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  margin-bottom: 15px;
}

.partner-title .highlight {
  color: #d3699d;
}

.partner-text {
  color: #555;
  font-size: 15px;
  max-width: 420px;
}

/* LOGO BOX */
.partner-box {
    margin:10px;
  background: white;
  width:200px;
  height: 90px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.partner-box img {
  max-width: 120px;
  max-height: 60px;
  object-fit: contain;
}

/* GLOW EFFECT */
.partner-box:hover {
  border-color: #a855f7;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.6);
  transform: translateY(-3px);
}



.brand-marquee-section{
  padding:30px 20px;
  overflow:hidden;
}

.marquee{
    /*padding:10px;*/
  overflow:hidden;
  white-space:nowrap;
}

.marquee-content{
  display:inline-flex;
  animation:scrollLeft 15s linear infinite;
}

.marquee-right .marquee-content{
  animation:scrollRight 15s linear infinite;
}

.marquee span{
  margin:0 10px;
  font-size:20px;
  font-weight:600;
}

@keyframes scrollLeft{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}

@keyframes scrollRight{
  from{
    transform:translateX(-50%);
  }
  to{
    transform:translateX(0);
  }
}
/* MOBILE OPTIMIZATION */
@media (max-width: 767px) {
  .partner-box {
    height: 70px;
      width:150px;
  }

  .partner-box img {
    max-width: 80px;
  }
  .partners-section{
      padding:40px 0px;
  }
  .brand-marquee-section{
  padding:0px;
  overflow:hidden;
}
}
/* diagnostic-innerpages */


/* SECTION */
.diagnostic-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #eef4ff, #f9fbff);
  font-family: "Inter", sans-serif;
}

/* LEFT IMAGE CARD */
.diagnostic-image-card {
  height: 100%;
  min-height: 390px;
  /* background: linear-gradient(135deg, #3b82f6, #60a5fa); */
  border-radius: 22px;
  display: flex;
  object-fit: contain;
  /* align-items: center; */
  justify-content: center;
  overflow: hidden;
  /* box-shadow: 0 30px 70px rgba(59,130,246,0.35); */
}

/* IMAGE ANIMATION */
.diagnostic-slide-img {
  /* width: 160px; */
  opacity: 0;
  transform: translateX(-180px);
  animation:
    diagnostic-slide-in 1.2s ease-out forwards,
    diagnostic-float 4s ease-in-out infinite;
  height: 600px;
  object-fit: cover;
}

@keyframes diagnostic-slide-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes diagnostic-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* RIGHT STACK */
.diagnostic-right-stack {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
/* INNER FLEX LAYOUT */
.diagnostic-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* LEFT TEXT */
.diagnostic-inner-text {
  flex: 1;
}

.diagnostic-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  background: #e0ecff;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

/* RIGHT IMAGE */
.diagnostic-inner-image {
  flex: 1;
  text-align: center;
}

.diagnostic-inner-image img {
  width: 350px;
  max-width: 100%;
  opacity: 0.95;
  transform: translateX(-180px);
  animation:
    diagnostic-slide-in 1.2s ease-out forwards,
    diagnostic-left-right 4s ease-in-out infinite;
}
/* Slide in from left */
@keyframes diagnostic-slide-in {
  from {
    transform: translateX(-180px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Continuous left ↔ right movement */
@keyframes diagnostic-left-right {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px); /* move right */
  }
  100% {
    transform: translateX(0);   /* back to center */
  }
}
/* RESPONSIVE */
@media (max-width: 576px) {
  .diagnostic-inner {
    flex-direction: column;
    text-align: center;
  }

  .diagnostic-inner-image {
    order: -1; /* image comes on top */
  }
}
/* RIGHT BOXES */
.diagnostic-info-box {
  padding: 34px;
  border-radius: 20px;
  /* background: #ffffff; */
  box-shadow: 0 25px 55px rgba(15,23,42,0.12);
  transition: transform 0.35s ease;
}
.info-box-text{
    color:white;
}
.diagnostic-info-box:hover {
  transform: translateY(-6px);
}

/* TEXT */
.diagnostic-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #0f172a;
}

.diagnostic-text {
  font-size: 15px;
  color: #334155;
  line-height: 1.6;
}

/* HOURS */
.diagnostic-hours {
  list-style: none;
  padding: 0;
  margin: 0;
}
.amballur-timing{
    font-size:26px;
   animation: pulseText 3.2s infinite;
}
.diagnostic-info-box p{
    font-size:14px;
}
@keyframes pulseText{
  0%{transform: scale(1);}
  50%{transform: scale(1.1);}
  100%{transform: scale(1);}
}

.diagnostic-hours li {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px dashed #dbe3f1;
  font-size: 15px;
  color:purple;
}

.diagnostic-hours li:last-child {
  border-bottom: none;
}

/* MOBILE REFINEMENT */
@media (max-width: 576px) {
  .diagnostic-image-card {
    /* min-height: 260px; */
  }

  .diagnostic-slide-img {
    /* width: 120px; */
  }
}
.lab-tnc {
  font-size: 13px;
  color:white;
  /*opacity: 0.75;*/
  border-left: 3px solid #22c55e;
  padding-left: 12px;
}

.digital-lab {
  padding: 100px 20px;

  color: #ffffff;
}

.digital-lab-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  gap: 50px;
  align-items: center;
}

.digital-lab-content {
  flex: 1.3;
}

.digital-lab-content h2 {
  font-size: 38px;
  font-weight: 700;
  color: white;
  margin-bottom: 36px;
}

.digital-lab-intro {
  max-width: 600px;
  line-height: 1.7;
  opacity: 0.9;
  margin-bottom: 38px;
}

.digital-lab-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-bottom: 22px;
}

.feature-box {
  background: rgba(255, 255, 255, 0.04);
  padding: 28px 20px;
  border-radius: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(56, 189, 248, 0.25);
}

.feature-box h4 {
  font-size: 20px;
  margin-bottom: 16px;
  color: white;
}

.feature-box p {
  font-size: 14px;
  opacity: 0.85;
}

.digital-lab-tnc {
  font-size: 13px;
  opacity: 0.7;
  border-left: 3px solid #38bdf8;
  padding-left: 12px;
  line-height:10px;
}

.digital-lab-visual {
  flex: 0.9;
  text-align: center;
}

.digital-lab-visual img {
  max-width: 100%;
  border-radius: 18px;
}
.digital-lab-visual img {
  max-width: 100%;
  display: block;
  animation: rotateLeftRight 5s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes rotateLeftRight {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-1.2deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(1.2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* Responsive */
@media (max-width: 768px) {
  .digital-lab-container {
    flex-direction: column;
    text-align: center;
  }

  .digital-lab-features {
    grid-template-columns: 1fr;
  }

  .digital-lab-tnc {
    text-align: left;
  }
}





/*--------------------------------------------------------------
# Funfact
--------------------------------------------------------------*/
.funfact-one{
    position: relative;
    padding: 50px;
    overflow: hidden;
    z-index: 1;
}

.funfact-one::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../img/225668499_0a352d89-c2a0-478a-9131-7823fadb4681.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: -1;

    animation: bgZoom 12s infinite ease-in-out;
}

/* zoom animation */
@keyframes bgZoom{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}
@media (max-width: 991px) {
  .funfact-one {
    padding-bottom: 100px;
  }
}

.funfact-one__inner {
  /* margin-top: -140px; */
  padding: 30px;
  z-index: 1;
  position: relative;

}
@media (max-width: 767px) {
    .funfact-one__inner {
  /* margin-top: -140px; */
  padding: 0px;


}
  .funfact-one {
    padding-bottom: 50px;
    padding-inline :0px;
  }
}
.funfact-one__item {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: 27px;
  margin-bottom:30px;
}

.funfact-one__item::after {
  position: absolute;
  bottom: 0%;
  min-height:260px;
  top: 15px;
  left: 0%;
  right: 0%;
  content: "";
  /*background-color: #1c1231;*/
  border-radius:40px;
  /* opacity: 0.1; */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  z-index: -1;
  transition: all 0.4s ease-in-out;
}
.funfact-one__item h3{
    color:white;
    margin-bottom:20px;
}
.funfact-card{
    margin-bottom:50px;
}
.funfact-one a{
color:white;
}
.funfact-one__item p{
    padding-inline :20px;
    font-size:15px;
}
.funfact-one__item:hover .funfact-one__icon {
  background-color: var(--laboix-white, #fff);
  color: #3d3289;
  border:1px solid black;
}
.funfact-one__item:hover::after {
  background-color: var(--laboix-base, #021936);
}
.funfact-one__icon {
    top:-20px;
  /*-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81 91"> <path d="M40.5 0L81 22.75V68.25L40.5 91L0 68.25V22.75L40.5 0Z"/> </svg>');*/
  /*mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81 91"> <path d="M40.5 0L81 22.75V68.25L40.5 91L0 68.25V22.75L40.5 0Z"/> </svg>');*/
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top center;
  mask-position: top center;
  -webkit-mask-size: auto;
  mask-size: auto;
  width: 81px;
  height: 81px;
  border-radius:50px;
 
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: white;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-bottom: 5px;
  transition: all 0.4s ease-in-out;
}

.funfact-one__text {
  color: var(--laboix-white, #fff);
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  background: transparent;
  margin-bottom: 0;
  padding-bottom: 0;
}
@media (max-width: 575px) {
  .funfact-one__text br {
    display: none;
  }
  .funfact-one__item::after{
      min-height:auto;
  }
/*  .funfact-card{*/
/*    margin-bottom:80px;*/
/*}*/
.digital-lab-content h2{
    font-size:32px;
}
.feature-box p{
    line-height:24px;
}
.digital-lab-intro {
    font-size:15px;
}
.funfact-one__item p{
    line-height:26px;
}
}
.gutter-x-18 {
  --bs-gutter-x: 18px;
}


/* Outpatient SECTION */
.opd-banner {
  /* background: linear-gradient(135deg, #0d6efd, #4da3ff); */
  padding-top: 90px ;
  border-radius: 30px;
  margin: 40px 20px;
  overflow: hidden;
   position: relative;
}

/* IMAGE POP-OUT */
.opd-banner-image {
 
}
.opd-container{
  position: relative;
  background: #170e2a;
  padding: 30px;
  border-radius: 50px;
}
.opd-banner-image img{
  animation: floatUpDown 4s ease-in-out infinite;
}

@keyframes floatUpDown{
  0%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-12px);
  }
  100%{
    transform: translateY(0);
  }
}
/* background image with low opacity */
.opd-container::before{
  content: "";
  position: absolute;
  inset: 0;
  background: 
    url("https://i.pinimg.com/736x/f7/2f/be/f72fbed2f5a0a8812329a3b5878cea0e.jpg") 
    center/cover no-repeat;
  opacity: 0.12; /* control image visibility */
  z-index: 1;
}

/* keep content above background image */
.opd-container > *{
  position: relative;
  z-index: 2;
}
.opd-banner-image img {
    margin-top:-100px;
  /* max-width: 360px; */
  position: relative;
  z-index: 2;
  transform: translateY(-40px);
  border-radius: 20px;
  /* box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); */
}

/* CONTENT */
.opd-banner-content {
  color: #fff;
  padding: 20px 10px;
}

.opd-banner-content h2 {
  font-size: 2.3rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.opd-banner-content h2 span {
  /* color: #ffe066; */
}

.opd-banner-content p {
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 560px;
  opacity: 0.95;
}

/* HIGHLIGHTS */
.opd-highlights {
  list-style: none;
  padding: 0;
  margin: 20px 0 30px;
}

.opd-highlights li {
  font-size: 1rem;
  margin-bottom: 10px;
}

/* BUTTON */
.opd-btn {
  background: #ff4d6d;
  color: #fff;
  padding: 12px 32px;
  border-radius: 30px;
  font-weight: 600;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
  border: none;
}

.opd-btn:hover {
  background: #e63956;
  color: #fff;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .opd-banner {
    padding: 60px 0px;
  }

  .opd-banner-image img {
    transform: translateY(0);
    max-width: 240px;
  }

  .opd-banner-content h2 {
    font-size: 1.8rem;
    text-align: center;
  }

  .opd-banner-content p,
  .opd-highlights {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .opd-btn {
    display: block;
    margin: auto;
  }
}

/* SECTION */
.opd-pin-section {
  min-height: 100svh;
    background: #f5f7fb;  /* prevents white flash */
  overflow: hidden;
}

/* LEFT IMAGE */
.opd-image-side {
  /* background: url("https://i.pinimg.com/736x/5f/a9/74/5fa974f7eb3e4c8accd82431fd87e702.jpg") center/cover no-repeat; */
  position: relative;
  overflow: hidden;
}

/* black overlay */
/* .opd-image-side::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.); 
  z-index: 1;
} */

/* keep content above overlay */
.opd-image-side > * {
  position: relative;
  z-index: 2;
}

.opd-image-side::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}

/* TEXT HOLDER */
.opd-text-holder {
  position: relative;
  z-index: 2; /* FIX */
  height: 440px;
  width: 80%;
  padding-inline: 80px;

}

/* TEXT */
.opd-text {
   
  position: absolute;
  opacity: 0;
  transform: translateY(60px);
  color: #fff;
}
.opd-text img{
    height:100px;
}
.opd-text h2{
    font-size:52px;
    margin-bottom: 3rem;
}
.opd-text.active {
  opacity: 1;
  transform: translateY(0);
}

/* RIGHT SIDE */
.opd-content-side {
  background: #130b1e;
}

.doctor-holder {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0 60px;
  overflow: hidden;
}

/* 🔥 THIS IS THE IMPORTANT FIX */
.doctor-card {
  position: absolute;
  inset: 0;

  /* ❌ REMOVE vertical centering */
  display: flex;
  flex-wrap: wrap;
 
  justify-content: center;     /* horizontal center */
  align-content: center;       /* vertical center for MULTIPLE rows */

  gap: 20px;

  opacity: 0;
  transform: translateY(60px);
}

/* active slide */
.doctor-card.active {
  opacity: 1;
  transform: translateY(0);
}


.doctor-holder .doctor-card{
    padding:0px;
}

 .ckdy-dctr{
    background:#9a87c5;
 }
 /*.chalakudy-op-bnr{*/
    
 /*   background: radial-gradient(circle at center, rgba(120,80,200,0.18), transparent 60%),*/
 /*    radial-gradient(circle at top left, rgba(168,85,247,0.35), transparent 45%), */
 /*    radial-gradient(circle at bottom right, rgba(139,92,246,0.35), transparent 45%), #737079*/
 
 /*}*/
 /* Extra doctor info wrapper */
.doctor-extra-info {
    z-index: 2;
  /* margin-top: 10px; */
  text-align: center;
}

/* Specialisation */
.doctor-specialisation {
  font-size: 15px;
  font-weight: 600;
  color: white;
  margin-bottom: 6px;
}

/* Availability row */
.doctor-availability {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  color: white;
  margin-bottom: 10px;
  
}

.doctor-availability i {
  margin-right: 4px;
  color: white;
}

/* WhatsApp button */
.doctor-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  
  
  background-color:#3b1d71;
  color: #fff;
  border-radius: 25px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;

}
/* Disable interaction everywhere */
.doctor-card {
  pointer-events: none;
}

/* Enable ONLY active slide */
.doctor-card.active {
  pointer-events: auto;
}

/* Ensure button itself is clickable */
.doctor-whatsapp-btn {
  pointer-events: auto;
  position: relative;
  z-index: 5;
}
.doctor-whatsapp-btn:hover {
  background-color: #1ebc59;
  transform: translateY(-2px);
}
/* section base */
.opd-pin-section {
  position: relative;
}

/* LEFT SIDE */
.opd-text {
  z-index: 2;
  pointer-events: none;
}

.opd-text.active {
  pointer-events: auto;
}

/* RIGHT SIDE */
.opd-content-side {
  position: relative;
  z-index: 3; /* 🔥 ABOVE LEFT */
}

/* doctor slides */
/* block ALL doctor slides by default */
.doctor-card {
  pointer-events: none;
}

/* allow interaction ONLY on active slide */
.doctor-card.active {
  pointer-events: auto;
}

/* CENTER ARROW */
.opd-center-arrow {
  z-index: 4;           /* between text & doctors */
  pointer-events: none; /* should NEVER block */
}
/* .doctor-card .team-card:hover::before {
  opacity: 0;
} */
 .team-card:hover .doctor-extra-info {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.flash-img {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.flash-img img {
  display: block;
}

/* flash light layer */
.flash-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 120%;
  height: 100%;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 100%
  );

  transform: skewX(-20deg);
  animation: flashPass 3.5s ease-in-out infinite;
}

/* animation */
@keyframes flashPass {
  0% {
    left: -150%;
  }
  45% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}
.opd-text img {
  animation: opdRotate 4s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes opdRotate {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(6deg) translateY(-6px);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}
.doctor-card .team-card p{
    margin-bottom:0px;
} 
.doctor-availability{
    margin-bottom:20px;
}
.doctor-card  .vl-btn4{
    padding:10px 16px;
    font-size:14px;
    background:#3e2577;
}
.right-content-opd {
  max-width: 413px;
  background: #170e2a;
  padding: 20px;
  border-radius:10px;
}
.title-wp h3{
    font-size:22px;
}
.timing-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--dark-color);
  /* margin-bottom: 21px; */
}

.timing-detail span.time,
.timing-detail span.day {
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
}

.timing-detail:last-child {
  margin-bottom: 0;
}

.timing-content:before {
  position: absolute;
  content: "";
  top: 50%;
  left: 430px;
  transform: translate(0, -50%);
  height: 182px;
  width: 207px;
  background-image: url(../images/heart-icon.svg);
  background-position: center;
  background-size: cover;
  opacity: 0.2;
}

@media (min-width: 990px) and (max-width: 1400px) {
.opd-text-holder{
    height:340px;
}
.opd-text p{
    font-size:13px;
}
.opd-text h2{
    font-size:32px;
}
.opd-banner-content h2{
    font-size:32px;
}
.doctor-card .img-circle{
    height:120px;
    width:120px;
}
.doctor-card{
    gap:0px;
    margin-top:60px;
}
}
@media (max-width: 990px) {
.opd-text-holder{
    height:auto;
    padding-inline:20px;
    width:90%;
}
.opd-text p{
    font-size:13px;
}
.opd-text{
    margin-top: 70px;
}
.opd-text h2{
    font-size:28px;
}
.opd-banner-content h2{
    font-size:28px;
}
.doctor-card .img-circle{    height:100px;
    width:100px;        
}
.doctor-card{   
    gap:0px;
    margin-top:40px;
}   
.opd-container{
    padding:10px;
}
.opd-banner-image img{
    margin-top:-50px;
}
.opd-text img{
    height:50px;
}
.opd-text h2{

    margin-bottom: 20px;
}
.doctor-holder{
    padding-bottom:100px;
}
.opd-pin-section{
    height:100vh;
}
}
@media (max-width: 768px) {

  .doctor-card {
      display: flex;              /* ❗ important */
      flex-wrap: nowrap;
      gap: 15px;
      overflow-x: auto;
      scroll-behavior: smooth;
      padding:20px;
 
  }
.doctor-card {

  justify-content: left;     /* horizontal center */
  align-content: center;       /* vertical center for MULTIPLE rows */

  
}
  .doctor-card::-webkit-scrollbar {
      display: none;
  }

  .doctor-card {
      -ms-overflow-style: none;
      scrollbar-width: none;
  }

  .doctor-card .team-card {
      min-width: 50%;   /* better than fixed 280px */
      flex: 0 0 auto;
  }
  .doctor-card {
    padding-left: 415px;
}
.doctor-holder{
    margin-left:30px
}

}

.opd-departments-section {
    margin-bottom:50px;
    /* background-image:url(https://w7.pngwing.com/pngs/140/632/png-transparent-blue-waves-graphic-wave-lines-thumbnail.png);
    background-repeat:no-repeat;
    background-size:cover; */
}

/* Remove default button style */
.opd-dept-buttons {
   background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  color:black;
  text-align: center;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  
  width: 100%;
  height: 100%;
  --border-width:none;
  backdrop-filter: none;
  box-shadow:none;
}
.opd-dept-buttons:hover .circle {
  background: #694da8;
}

/* Change icon color to white on hover */
.opd-dept-buttons:hover i {
  color: #fff;
}
/* Circle */
.opd-dept-buttons .circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background:#351b51;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  position: relative;
  transition: 0.4s ease;
}

/* Dotted Border */
.opd-dept-buttons .circle::before {
  content: "";
  position: absolute;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  border: 2px dotted #6c63ff;
  transition: 0.6s linear;
  
}

/* Icon */
.opd-dept-buttons i {
  font-size: 32px;
  color: white;
  transition: 0.4s ease;
}
.opd-dept-buttons img {

  transition: 0.4s ease;
}
/* Title */
.dept-title {
  margin-top: 15px;
  font-size: 16px;
  font-weight: 500;
}

/* Hover Effects */
.opd-dept-buttons:hover .circle::before {
  transform: rotate(360deg);
   
}
.opd-departments-section button:hover{
      --border-width:none;
  backdrop-filter: none;
  box-shadow:none;
}
.opd-dept-buttons:hover i , .opd-dept-buttons:hover img{
  transform: scale(1.2);
}

/* Active State */
/* .opd-dept-buttons.active .circle {
  background: #6c63ff;
} */

.opd-dept-buttons.active i {
  color: #fff;
}

/* Responsive */
@media (max-width: 576px) {
  .opd-dept-buttons .circle {
    width: 85px;
    height: 85px;
  }

  .opd-dept-buttons .circle::before {
    width: 100px;
    height: 100px;
  }

  .opd-dept-buttons i {
    font-size: 22px;
  }

  .dept-title {
    font-size: 13px;
  }
}
.diagnostic-info-box  
.opd-dept-buttons .circle::before{
    width:110px;
    height:110px;
}
.diagnostic-info-box  .opd-dept-buttons .circle{
     width:100px;
    height:100px;
}
.diagnostic-info-box .opd-dept-buttons{
    backdrop-filter:none;
    box-shadow:none;
}
@media (min-width: 990px) and (max-width: 1400px) {
 .diagnostic-info-box   .opd-dept-buttons .circle::before{
    width:90px;
    height:90px;
}
.diagnostic-info-box  .opd-dept-buttons .circle{
    
     width:80px;
    height:80px;
}
  .diagnostic-info-box {
      padding:24px;
  }
}
@keyframes floatMove {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(15px);
  }
  100% {
    transform: translateX(0px);
  }
}
.health-slogan {
  display: inline-block;
  animation: floatMove 6s ease-in-out infinite;
}
.health-bnr{
     background:
   radial-gradient(circle at center, rgba(30, 144, 255, 0.18), transparent 60%), radial-gradient(circle at top left, rgba(0, 123, 255, 0.30), transparent 45%), radial-gradient(circle at bottom right, #0E2132, transparent 45%), #0E2132

}



/* health and wellness ppackage */

.package-card{
    padding-bottom: 40px;
}
.service-health-card {
    background: #d8ac66;
    /* padding: 40px 30px; */
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    height: 100%;
 
}

/* Bottom curve */
/* .service-card::after {
    content: "";
    position: absolute;
    bottom: -40px;
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg,#1dd1a1,#10ac84);
    border-radius: 50%;
    opacity: 0;
    transition: 0.5s ease;
} */
/* .top-layer{
    background-color: whitesmoke;
       padding: 30px 30px;
    border-bottom-right-radius: 140px;
       transition: background 0.5s ease;
} */

/* without hovering */
 /* .top-layer {
    position: relative;
    padding: 30px;
    border-bottom-right-radius: 140px;
    overflow: hidden;
    height: 100%;
    background: transparent;
    z-index: 0; 
}  */

/* BG IMAGE */
 /* .top-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("https://i.pinimg.com/1200x/b0/ea/ef/b0eaefe7f6f10e7d8de02d8611212d93.jpg")
                center/cover no-repeat;
    opacity: 0.5;
    z-index: 1;
}  */

/* Purple Overlay */
 /* .top-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #0e2132;
    opacity: 0.9;
    z-index: 2;
}  */

/* Keep content on top */
 /* .top-layer > * {
    position: relative;
    z-index: 3;
}  */

/* with hovering */
.top-layer{
   position: relative;
    padding: 30px 30px;
   background: #0e2132;
   border-bottom-right-radius: 140px;
    overflow: hidden;
       transition: background 0.5s ease-in-out;
    height: 100%;
      display: flex;
  flex-direction: column;
  flex: 1;
}
.btn-area1 {
  margin-top: auto;
}
/* Background image layer */
.top-layer::before{
   content: "";
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0;                     
   pointer-events: none;            
   transition: opacity 0.6s ease-in-out;
    z-index: 0;
}

/* Content stays above the background */
/* .top-layer > *{
   position: relative;
   z-index: 2;
} */

.top-layer:hover{
   background: #0e2132;
}

.top-layer:hover::before{
   background-image: url('https://i.pinimg.com/1200x/b0/ea/ef/b0eaefe7f6f10e7d8de02d8611212d93.jpg');
   opacity: 0.1;
}
/* Hover Effect */
/* .service-card:hover { */
/*    background: #0d6efd;*/
/*    color: #fff;*/
/*    transform: translateY(-10px);*/
/*}*/

.service-health-card:hover .title,
.service-health-card:hover .desc,
.service-health-card:hover li {
    color: #fff !important;
}

.service-health-card:hover::after {
    opacity: 0.25;
}

/* Active style (third card) */
.service-health-card.active {
    background: #1d3557;
    color: #fff;
}

.service-health-card.active::after {
    opacity: 0.35;
    
}

/* Icon Box */
/* .icon-box {
    background: linear-gradient(90deg, #e874ab, #7a50a2);
    width: 40px;
    height: 40px;
    
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: 0.3s ease;
} */
.hexagon {
  width: 38.7px; /* 60px * 0.645 */
  height: 60px;
  background: linear-gradient(180deg, #d8ac66, #d8ac66 , #d8ac66); /* pink to purple */
  border-radius: 6px;
  transition: transform 400ms ease;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  margin-left:10px;
}
 .hexagon:hover {
  transform: rotate(30deg);
}
.service-health-card:hover .hexagon{
  transform: rotate(30deg);
}
.hexagon i{
    z-index: 5;
    font-size:26px;
}
.hexagon:before,
.hexagon:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: inherit;
  height: inherit;
  background-image: inherit;
  border-radius: inherit;
}

.hexagon:before {
  transform: rotate(60deg);
}

.hexagon:after {
  transform: rotate(-60deg);
}

.service-health-card:hover .icon-box {
    background: rgba(255, 255, 255, 0.2);
}

.service-health-card.active .icon-box {
    background: rgba(255, 255, 255, 0.2);
}

/* List */
.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.service-list.two-columns {
  column-count: 2;
  column-gap: 15px;
}
.service-list li {
    color: white;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px;
  break-inside: avoid;   
     text-indent: -10px;  
}
/* Button Arrow */
.arrow-btn {
    margin-top: 20px;
    width: 48px;
    height: 48px;
    background: #f7f1f3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: 0.3s ease;
}

.service-health-card:hover .arrow-btn {
    background: #fff;
    color: #0d6efd;
}
.hide-initilaly{
    display: none;
    background-color: pink;
}
.service-health-card:hover .arrow-btn {
  display: none;
}

.service-health-card:hover .btn-plus-hover {
  display: inline-block;
}
.package-name{
    color: white;
    margin-bottom: 10px;
}
.package-price{
    color: #d8ac66;
    font-size:26px;
    font-weight:600;
    margin-bottom: 35px;
}
.pack-card{
    margin-bottom: 40px;
}
.trusted-wrapper {
    background: #0e2132;
    border-radius: 80px;
    padding: 50px 40px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Left Text */
.trusted-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.trusted-title span {
    display: block;
    font-size: 42px;
}

.icon-small {
    font-size: 18px;
    margin-right: 8px;
}

/* Card Common */
.info-card {
    background: #f4f4f4;
    border-radius: 25px;
    padding: 25px;
    height: 100%;
}

/* Video Card */
.video-card {
    position: relative;
    border-radius: 80px 20px 20px 80px;
    overflow: hidden;
}
.video-card2 {
    position: relative;
    border-radius: 20px 80px 80px 20px;
    overflow: hidden;
}
.transport-right{
 animation: floatMove 6s ease-in-out infinite;
}
.video-card img {
     
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #000;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    cursor: pointer;
}

/* Stars */
.stars i {
    color: #f5a623;
    font-size: 18px;
    margin-right: 3px;
}

/* Progress Bar */
.progress {
    height: 8px;
    border-radius: 10px;
    background: #ddd;
}

.progress-bar {
    background: #8b5cf6;
    border-radius: 10px;
}

/* Responsive */
@media (max-width: 991px) {
    .trusted-wrapper img{
height:100px;
}
    .trusted-wrapper {
        border-radius: 40px;
        padding: 40px 25px;
        text-align: center;
    }

    .trusted-title {
        font-size: 30px;
    }

    .trusted-title span {
        font-size: 32px;
    }
}


    .tesla-about-section{
/* background:#f5f6f8; */
}
.tesla-about-section{
position:relative;
overflow:hidden;
}
/* background mission icon */
.tesla-about-section::after{
content:"";
position:absolute;

left:1%;
top:20%;

width:420px;
height:420px;

background:url("https://html.designingmedia.com/helixis/assets/images/vector3.png") no-repeat center;
background-size:contain;

opacity:0.9;

transform:translateY(-50%);
animation:teslaRotate 40s linear infinite;

pointer-events:none;
z-index:0;
}

/* rotation animation */
@keyframes teslaRotate{
from{
transform:translateY(-50%) rotate(0deg);
}
to{
transform:translateY(-50%) rotate(360deg);
}
}

/* keep section content above bg */
.tesla-about-section .container{
    padding-bottom:100px;
position:relative;
z-index:2;
}
.tesla-about-img img{
border-radius:6px;
  transform: translateX(-180px);
  animation:
    diagnostic-slide-in 1.2s ease-out forwards,
    diagnostic-float 4s ease-in-out infinite;
}

/* TABS */

.tesla-about-tabs{
display:flex;
flex-direction:column;
gap:15px;
}

.tesla-about-tab{
background:#fff;
padding:25px;
cursor:pointer;
border:1px solid #e6e6e6;
transition:all .3s ease;
display:flex;
align-items:center;
gap:12px;
}

.tesla-about-tab h6{
margin:0;
font-weight:600;
font-size:18px;
letter-spacing:.5px;
}

.tesla-tab-icon{
font-size:22px;
}

/* ACTIVE TAB */

.tesla-about-tab.active{
border-right:4px solid #f87db9;
background:#f8fbfb;
transform:translateX(6px);
}

/* CONTENT */

.tesla-about-content{
position:relative;
min-height:340px; /* keep stable height */


}
/* HOVER STYLE SAME AS ACTIVE */
.tesla-about-tab:hover{
border-right:4px solid #f87db9;
background:#f8fbfb;
transform:translateX(8px);
}
/* content panels */
.tesla-content{
position:absolute;
top:0;
left:0;
width:100%;

opacity:0;
transform:translateY(20px) scale(.98);

transition:
opacity .45s ease,
transform .45s cubic-bezier(.22,.61,.36,1);

pointer-events:none;
}

/* active content */
.tesla-content.active{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
z-index:2;
}
.tesla-subtitle{
font-size:13px;
letter-spacing:1px;
color:#d8ac66;
font-weight:700;
margin-bottom:16px;
text-transform:uppercase;
}

.tesla-title{
font-weight:700;
font-size:30px;
margin-bottom:15px;
}

.tesla-title span{
color:#00a6a6;
}

.tesla-readmore-btn{
display:inline-block;
margin-top:15px;
padding:12px 25px;
border:2px solid #00a6a6;
text-decoration:none;
color:#000;
font-weight:600;
transition:.3s;
}

.tesla-readmore-btn:hover{
background:#00a6a6;
color:#fff;
}

/* RESPONSIVE */

@media(max-width:991px){

.tesla-about-content{
padding-left:0;
margin-top:25px;
}

.tesla-about-tabs{
flex-direction:row;
flex-wrap:wrap;
}

.tesla-about-tab{
flex:1;
justify-content:center;
text-align:center;
}

}

.leadership-section{
    position:relative;
    background:#20156d;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 40px rgba(0,0,0,0.08);
}

.leadership-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("https://img.freepik.com/premium-vector/abstract-line-geometric-pattern_260839-655.jpg?semt=ais_hybrid&w=740&q=80") center/contain ;
    opacity:0.15;
    border-radius:20px;
}

 .slider-section{
      display:flex;
      gap:40px;
      align-items:center;
      justify-content:center;
    
     
    }

    /* LEFT SIDE CONTROLS */
    .left-controls{
      width:140px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:12px;
      position:relative;
    }

    .thumb-small{
      width:65px;
      height:65px;
      border-radius:50%;
      overflow:hidden;
      opacity:0.3;
      transform:scale(0.9);
      pointer-events:none;
    }
    .thumb-small img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .ctrl-btn{
      width:65px;
      height:65px;
      border-radius:50%;
      background:white;
      box-shadow:0 6px 22px rgba(0,0,0,0.15);
      display:flex;
      justify-content:center;
      align-items:center;
      cursor:pointer;
      z-index:5;
    }
    .ctrl-btn svg{
      width:24px;
      height:24px;
      fill:#2b6aa3;
    }

    /* CENTER IMAGE */
    .center-area{
      position:relative;
    }

    .center-circle2{
      width:350px;
      height:350px;
      border-radius:50%;
      overflow:hidden;
      box-shadow:0 20px 40px rgba(0,0,0,.15);
      border:8px solid rgba(255,255,255,0.7);
    }
    
    .center-circle2 img{
      width:100%;
      height:100%;
      object-fit:cover;
      
    }

    .quote-badge{
        padding-left:10px;
      width:75px;
      height:75px;
      border-radius:50%;
      /* background:#f7b34a; */
      background: white;
      border:6px solid #fff;
      position:absolute;
      right:-30px;
      top:45%;
      transform:translateY(-50%);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 8px 20px rgba(247,179,74,0.28);
    }
 .quote-badge p{
   margin-bottom:0px;
}
    .quote-badge svg{
      width:32px;
      height:32px;
      fill:white;
    }

    /* RIGHT CONTENT */
    .right-text{
      max-width:480px;
      
    }
    @media (max-width:900px){
         .center-circle2{
      width:250px;
      height:250px;
     
    }
    .quote-badge{
        padding-left:7px;
      width:55px;
      height:55px;
 
    }
      }
    .subhead{
      font-weight:600;
      color:#0d518a;
      font-size:14px;
      margin-bottom:10px;
    }

    .big-title{
      /* font-family:'Amatic SC', cursive; */
      font-size:30px;
      line-height:1.1;
      color:#ffc107d9;
      font-weight:700;
      margin-bottom:10px;
    }
.sub-title {
  font-size: 18px;
  font-weight: 500;
  margin-top: 8px;
  margin-bottom: 10px;
  color: #ffc107d9;
}
    .desc{
      color:white;
      line-height:1.8;
      font-size:15px;
      margin-bottom:20px;
    }

    .author{
      font-weight:600;
      color:white;
      margin-top:10px;
    }

    /* Responsive */
    @media (max-width:900px){
      .slider-section{
        flex-direction:column;
        gap:25px;
      }
      .left-controls{
        flex-direction:row;
        width:100%;
        justify-content:center;
      }
      .quote-badge{
        right:-20px;
        top:50%;
        transform:translateY(-30%);
      }
      .big-title{
        text-align:center;
      }
      .desc, .author{
        text-align:center;
      }
    }

/* fade animation for content */
.center-circle2 img,
.big-title,
.sub-title,
.desc,
.author{
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* fade out state */
.fade-out{
  opacity:0;
  transform:translateY(10px);
}

/* fade in state */
.fade-in{
  opacity:1;
  transform:translateY(0);
}


.service-locations{
    padding:80px;
    background:#f8f8fd;
/* background-image:url("https://i.pinimg.com/736x/a5/d1/9f/a5d19f05119ea0b7f8eacb22798b0b24.jpg");
background-size:cover;
background-repeat:no-repeat; */
}

.section-title{
font-size:34px;
font-weight:700;
}

.section-title span{
/* background:linear-gradient(90deg,#a445b2,#fa4299); */
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.section-subtitle{
max-width:700px;
margin:auto;
color:#666;
}
@media (max-width: 776px){
    .tesla-about-section .container{
        padding-bottom:30px;
    }
    .tesla-about-tab{
        display:block;
    }
    .tesla-tab-icon{
        height:35px;
        margin-bottom:15px;
    }
    .service-locations{
    padding:0px;
 

}
}
/* card */

.location-card1{
display:flex;
gap:18px;
padding:25px;
 border-radius:22px; 
 background:white; 
position:relative;
overflow:hidden;
transition:0.4s;

/*background-image:url("../img/mark-projects.png");*/

}

/* alternate background images */

/*.row .col-lg-4:nth-child(even) .location-card1{*/
/*background-image:url("../img/mark-projects.png");*/
/*}*/
.location-card1:hover{
background-image:url("../img/mark-projects.png");
transform:translateY(-6px);
background-size:cover;
background-position:center;
box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

/* overlay for readability */

/* .location-card::before{
content:"";
position:absolute;
inset:0;
background:rgba(255,255,255,0.1);
z-index:1;
} */

/* keep text above overlay */

.location-card1 .content,
.location-card1 .icon{
position:relative;
z-index:2;
}
.location-card1 .icon{
    background:#dddbef;
}
/* hover */

.location-card1:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

/* .location-card:hover::before{
opacity:1;
} */

/* .location-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
} */

.location-card1 .icon i{
font-size:28px;
color:#3D3289;
z-index:1;
}
/* Continuous jumping */
.location-card1:hover .icon i{
animation:jumpIcon 0.7s ease infinite;
}

@keyframes jumpIcon{
0%{transform:translateY(0);}
40%{transform:translateY(-12px);}
60%{transform:translateY(-6px);}
100%{transform:translateY(0);}
}
.location-card1 .content{
z-index:1;
}
.location-card1 .content p{
line-height:20px;
font-size:16px;
}
.location-card1 h5{
font-weight:600;
margin-bottom:10px;
}

.location-card1 p{
margin-bottom:6px;
font-size:14px;
color:#444;
}

.location-card1 a{
text-decoration:none;
color:black;
}

.location-card1 a:hover{
color:#3d3289;
}


.contact-card{
position:relative;
background:black;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
overflow:hidden;
}

.contact-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-position:right;
background:url("https://i.pinimg.com/1200x/a4/5b/03/a45b0331437b7d84c44e4a45da52fe7f.jpg") center/cover no-repeat;
opacity:0.15; /* control background transparency */
z-index:0;
}

.contact-card *{
position:relative;
z-index:1;
}


.contact-info1{
    padding:20px;
/* text-align:center; */
}

.contact-info1 i{
font-size:36px;
color:#7b61ff;
margin-bottom:8px;
animation:shake 1.5s infinite ease-in-out;
}
@keyframes shake {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(3deg); }
  40% { transform: rotate(-3deg); }
  60% { transform: rotate(3deg); }
  80% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
.contact-info1 h6{
font-weight:600;
margin-bottom:5px;
}
.contact-link{

text-decoration:none;
font-weight:500;
}

.contact-link:hover{
    color:#7b61ff;
text-decoration:underline;
}
.contact-info1 p{
font-size:18px;
margin:0;
margin-bottom:10px;
color:#555;
}
.form-wrapper{
    padding:30px;
}
.enquiry-form .form-control{
height:48px;
border-radius:8px;
border:1px solid #ddd;
}

.enquiry-form textarea{
border-radius:8px;
}

.contact-btn{
background:linear-gradient(90deg,#ff6ea8,#7b61ff);
color:#fff;
border:none;
padding:12px 30px;
border-radius:8px;
font-weight:600;
}

.contact-btn:hover{
opacity:.9;
}




.career-section {
    padding: 60px 0;
    position: relative;
    background-image:url("https://img.freepik.com/premium-vector/medical-background-with-flat-icons-symbols_120542-1057.jpg");
    background-repeat:no-repeat;
}

.career-container {
    /*max-width: 1150px;*/
    margin: 0 auto;
    padding: 0px 20px;
    /* border-radius: 20px; */
    position: relative;
    /* background: #fff;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08); */
}

.career-heading h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
}

.career-grad-text {
    background: linear-gradient(90deg, #7142A1, #B65EAD, #FA7FB9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.career-desc {
    margin: 20px 0;
    font-size: 16px;
    line-height: 1.7;
}

.career-btn-group .career-btn {
    background: #6a1b9a;
    color: #fff;
    padding: 12px 26px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: .3s;
}

.career-btn:hover {
    background: #4b146e;
}

.career-img {
    max-width: 110%;
    position: relative;
    right: -20px;
}

.career-tnc {
    margin-top: 15px;
    font-size: 14px;
    opacity: 0.7;
}



.service_contentbox1{
    margin-top:40px;
}
.service_contentbox {
    position: relative;
    overflow: hidden;
}

/* Rotating background layer */
.service_contentbox::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../../assets/images/420789122_d5190211-8d6d-4835-b6f1-dfb1e0ef458a.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: rotateBG 40s linear infinite; /* slow rotation */
    z-index: 0;
}

/* Keep your content above */
.service_contentbox > * {
    position: relative;
    z-index: 1;
}

@keyframes rotateBG {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.job-openings{
background:#110b3d;
}

.job-card{
background:#fff;
border-radius:16px;
padding:40px 30px;
position:relative;
transition:0.4s;
border:1px solid #e6e6e6;
height:100%;

}

.job-card h4{
font-weight:700;
margin-top:30px;
}

.job-card p{
color:#6c757d;
margin-top:10px;
}

.job-icon{
width:70px;
height:70px;
background:#3d3289;
color:#ffc107;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
font-size:28px;
position:absolute;
top:-30px;
left:30px;
}

.job-link{
display:inline-block;
margin-top:20px;
text-decoration:none;
font-weight:600;
color:#111;
transition:.3s;
}

/* Hover Effect */

.job-card:hover{
background:#0b0b0b;
color:#fff;
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

.job-card:hover p{
color:#d6d6d6;
}

.job-card:hover .job-link{
color:#ffc107;
}

/* Center card default style */

.job-card.active{
background:#0b0b0b;
color:#fff;
box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

.job-card.active p{
color:#d6d6d6;
}

.job-card.active .job-link{
color:#ffc107;
}
.wave-top svg,
.wave-bottom svg{
width:100%;
height:90px;
display:block;
}

.wave-top path{
    fill:white;
}
.wave-bottom path{
    transform: rotate(180deg);

fill:white;
}

.wave-top{

top:0;
left:0;
width:100%;
}

.wave-bottom{

bottom:0;
left:0;
width:100%;
}


.career-section {
    padding: 60px 0;
    position: relative;
    background-image:url("https://img.freepik.com/premium-vector/medical-background-with-flat-icons-symbols_120542-1057.jpg");
    background-repeat:no-repeat;
}

.career-container {
    /*max-width: 1150px;*/
    margin: 0 auto;
    padding: 0px 20px;
    /* border-radius: 20px; */
    position: relative;
    /* background: #fff;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08); */
}

.career-heading h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
}

.career-grad-text {
    background: linear-gradient(90deg, #7142A1, #B65EAD, #FA7FB9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.career-desc {
    margin: 20px 0;
    font-size: 16px;
    line-height: 1.7;
}

.career-btn-group .career-btn {
    background: #6a1b9a;
    color: #fff;
    padding: 12px 26px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: .3s;
}

.career-btn:hover {
    background: #4b146e;
}

.career-img {
    max-width: 110%;
    position: relative;
    right: -20px;
}

.career-tnc {
    margin-top: 15px;
    font-size: 14px;
    opacity: 0.7;
}


/* career-whychoossection */

/* .career-whychoossection {
    position: relative;
    background-image: url(/assets/images/mark/mark-analytics.png);
    background-size: cover;
    padding: 50px 0 50px;
    overflow: hidden;
} */
.career-whychoossection .service-leftlayer{
    position: absolute;
    top: 0;
    left: 116px;
}
.career-whychoossection .service-rightlayer{
    position: absolute;
    bottom: -20px;
    right: 112px;
}
.career-whychoossection .service-dotimage{
    position: absolute;
    left: 334px;
    bottom: 102px;
}
.career-whychoossection .service-box h4{
     font-family: "Chakra Petch", sans-serif;   
    padding-right: 15px;
    /* font-size: 18px; */
}
.career-whychoossection .service-box h5{
     font-family: "Chakra Petch", sans-serif;   
    padding-right: 15px;
    font-size: 18px;
}
.career-whychoossection .service-box p{
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 10px;
    color: var(--e-global-color-text);
}
.service_contentbox1{
    margin-top:40px;
}
.service_contentbox {
    position: relative;
    overflow: hidden;
}

/* Rotating background layer */
.service_contentbox::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../../assets/images/420789122_d5190211-8d6d-4835-b6f1-dfb1e0ef458a.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: rotateBG 40s linear infinite; /* slow rotation */
    z-index: 0;
}

/* Keep your content above */
.service_contentbox > * {
    position: relative;
    z-index: 1;
}

@keyframes rotateBG {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.job-openings{
background:#110b3d;
}

.job-card{
background:#fff;
border-radius:16px;
padding:40px 30px;
position:relative;
transition:0.4s;
border:1px solid #e6e6e6;
height:100%;

}

.job-card h4{
font-weight:700;
margin-top:30px;
}

.job-card p{
color:#6c757d;
margin-top:10px;
}

.job-icon{
width:70px;
height:70px;
background:#3d3289;
color:#ffc107;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
font-size:28px;
position:absolute;
top:-30px;
left:30px;
}

.job-link{
display:inline-block;
margin-top:20px;
text-decoration:none;
font-weight:600;
color:#111;
transition:.3s;
}

/* Hover Effect */

.job-card:hover{
background:#0b0b0b;
color:#fff;
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

.job-card:hover p{
color:#d6d6d6;
}

.job-card:hover .job-link{
color:#ffc107;
}

/* Center card default style */

.job-card.active{
background:#0b0b0b;
color:#fff;
box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

.job-card.active p{
color:#d6d6d6;
}

.job-card.active .job-link{
color:#ffc107;
}
.wave-top svg,
.wave-bottom svg{
width:100%;
height:90px;
display:block;
}

.wave-top path{
    fill:white;
}
.wave-bottom path{
    transform: rotate(180deg);

fill:white;
}

.wave-top{

top:0;
left:0;
width:100%;
}

.wave-bottom{

bottom:0;
left:0;
width:100%;
}
.reg-container{
padding-inline: 100px;
}
.wrapper4{
  overflow: hidden;
  max-width: 390px;
  background: #fff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
}
.wrapper4 .title-text{
  display: flex;
  width: 200%;
}
.wrapper4 .title{
     font-family: "Chakra Petch", sans-serif; 
  width: 50%;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrapper4 .slide-controls{
  position: relative;
  display: flex;
  height: 50px;
  width: 100%;
  overflow: hidden;
  margin: 30px 0 10px 0;
  justify-content: space-between;
  border: 1px solid lightgrey;
  border-radius: 5px;
}
.slide-controls .slide{
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  z-index: 1;
  transition: all 0.6s ease;
}
.slide-controls label.signup{
  color: #000;
}
.slide-controls .slider-tab{
  position: absolute;
  height: 100%;
  width: 50%;
  left: 0;
  z-index: 0;
  border-radius: 5px;
  background: -webkit-linear-gradient(left, #a445b2, #fa4299);
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
input[type="radio"]{
  display: none;
}
#signup:checked ~ .slider-tab{
  left: 50%;
}
#signup:checked ~ label.signup{
  color: #fff;
  cursor: default;
  user-select: none;
}

#signup:checked ~ label.login{
    
  color: #000;
}
#login:checked ~ label.signup{
  color: #000;
}
#login:checked ~ label.login{
  cursor: default;
  user-select: none;
}
.wrapper4 .form-container{
  width: 100%;
  overflow: hidden;
}
.form-container .form-inner{
  display: flex;
  width: 200%;
}
.form-container .form-inner form{
  width: 50%;
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.form-inner form .field{
 
  /* height: 50px; */
  width: 100%;
  margin-top: 15px;
}
.form-inner form .field input{
       background-color: white;
    padding: 8px;
  height: 100%;
  width: 100%;
  outline: none;
  padding-left: 15px;
  border-radius: 5px;
  border: 1px solid lightgrey;
  /* border-bottom-width: 2px; */
  font-size: 17px;
  transition: all 0.3s ease;
}
.form-inner form .field input:focus{
  border-color: #fc83bb;
  /* box-shadow: inset 0 0 3px #fb6aae; */
}
.form-inner form .field input::placeholder{
  color: grey;
  transition: all 0.3s ease;
}
form .field input:focus::placeholder{
  color: #b3b3b3;
}
.form-inner form .pass-link{
  margin-top: 5px;
}
.form-inner form .signup-link{
  text-align: center;
  margin-top: 30px;
}
.form-inner form .pass-link a,
.form-inner form .signup-link a{
  color: #fa4299;
  text-decoration: none;
}
.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover{
  text-decoration: underline;
}
form .btn{
  height: 50px;
  width: 100%;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
form .btn .btn-layer{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  background: -webkit-linear-gradient(right, #a445b2, #fa4299, #a445b2, #fa4299);
  border-radius: 5px;
  transition: all 0.4s ease;;
}
form .btn:hover .btn-layer{
  left: 0;
}
form .btn input[type="submit"]{
  height: 100%;
  width: 100%;
  z-index: 1;
  position: relative;
  background: none;
  border: none;
  color: #fff;
  padding-left: 0;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
}
/* Two input row */
.row-2 {
  display: flex;
  gap: 15px;
}

.row-2 .field {
  flex: 1;
}

/* Inputs */
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 15px;
  transition: .3s ease;
}

/* Focus Effect */
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #ff7a21;
  box-shadow: 0 0 5px rgba(255, 122, 33, 0.4);
}

/* Upload label */
.upload-label {
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
  color: #333;
}

/* Submit button */
.field.btn {
  position: relative;
  height: 50px;
}

.btn input[type="submit"] {
  width: 100%;
  height: 100%;
  border: none;
  background: #ff7a21;
  color: #fff;
  font-size: 17px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: .3s;
}

/* .btn input[type="submit"]:hover {
  background: #e06915;
} */

/* Mobile responsive */
@media (max-width: 768px) {
  .row-2 {
    flex-direction: column;
  }
}





.career-section-form{
/* background:#f7f7fb; */
background-repeat:no-repeat;
background-position:20% 50%;
background-image:url('https://img.freepik.com/free-vector/creative-blue-hexagon-shape-pattern-perspective-background-design_1017-55411.jpg?semt=ais_hybrid&w=740&q=80')
}

.career-title{
font-size:38px;
font-weight:700;
}

/* .grad-text{
background:linear-gradient(90deg,#6a5acd,#ff4da6);
-webkit-background-clip:text;
color:transparent;
} */

.career-desc{
color:#555;
font-size:16px;
line-height:1.7;
}

.career-img{
max-width:420px;
transition:0.4s;
  transform: translateX(-180px);
  animation:
    diagnostic-slide-in 1.2s ease-out forwards,
    diagnostic-float 4s ease-in-out infinite;
}

.career-img:hover{
transform:translateY(-10px) scale(1.05);
}

/* FORM */

.career-form{
background:#fff;
padding:35px;
border-radius:14px;
box-shadow:0 12px 35px rgba(0,0,0,0.08);
transition:0.3s;
}

.career-form:hover{
transform:translateY(-5px);
box-shadow:0 20px 45px rgba(0,0,0,0.12);
}

.form-field{
margin-bottom:15px;
border-radius:8px;
padding:12px;
transition:0.3s;
}

.form-field:focus{
border-color:#7c5cff;
box-shadow:0 0 0 0.1rem rgba(124,92,255,0.25);
}

.submit-btn{
background:linear-gradient(90deg,#6a5acd,#ff4da6);
border:none;
padding:12px;
border-radius:8px;
color:#fff;
font-weight:600;
transition:0.3s;
}

.submit-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

/* MOBILE */

@media (max-width:768px){

.career-title{
font-size:28px;
text-align:center;
}

.career-desc{
text-align:center;
}

.career-img{
margin-top:20px;
max-width:320px;
}

}


/* main slider */

.blog-slider{
width:95%;
position:relative;
max-width:900px;
margin:auto;
/*background:#231d4d;*/
box-shadow:0px 14px 80px rgba(34,35,58,0.2);
padding:25px;
border-radius:25px;
height:400px;
transition:all .3s;
}
.chalakudy-blog-slider{
    background:#231d4d;
}
.ikda-blog-slider{
    background:#9f2449;
}
.amballur-blog-slider{
    background:#684a28;
}
.kmklm-blog-slider{
    background:#233044;
}
.kdnglr-blog-slider{
    background:#14536b;
}
.mpuzha-blog-slider{
    background:#3a3a3f;
}
.mala-blog-slider{
    background:#253730;
}
/* responsive */

@media screen and (max-width:992px){
.blog-slider{
max-width:680px;
height:400px;
}
}

@media screen and (max-width:768px){
.blog-slider{
min-height:500px;
height:auto;
margin:80px auto;
}
}

@media screen and (max-height:500px) and (min-width:992px){
.blog-slider{
height:350px;
}
}

/* slider item */

.blog-slider__item{
    /* background-image:url(https://static.vecteezy.com/system/resources/previews/067/609/785/non_2x/plus-pattern-for-abstract-medical-background-with-health-symbols-and-hospital-signs-elements-and-icons-for-education-or-template-modern-white-wallpaper-vector.jpg)
; */
background-size:cover;
background-repeat:no-repeat;
background-position:right;
display:flex;
align-items:center;

}

@media screen and (max-width:768px){
.blog-slider__item{
flex-direction:column;
}
}

/* image */

.blog-slider__img{
width:300px;
flex-shrink:0;
height:300px;
/* background-image:linear-gradient(147deg,#fe8a39 0%,#fd3838 74%); */
/* box-shadow:4px 13px 30px 1px rgba(252,56,56,0.2); */
border-radius:20px;
transform:translateX(-80px);
overflow:hidden;
position:relative;
}

.blog-slider__img:after{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
/* background-image:linear-gradient(147deg,#fe8a39 0%,#fd3838 74%); */
border-radius:20px;
opacity:0.8;
}

.blog-slider__img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
opacity:0;
border-radius:20px;
transition:all .3s;
}

@media screen and (max-width:768px){
.blog-slider__img{
transform:translateY(-50%);
width:90%;
margin-top:100px;
}
}

@media screen and (max-width:576px){
.blog-slider__img{
width:95%;
}
}

@media screen and (max-height:500px) and (min-width:992px){
.blog-slider__img{
height:270px;
}
}

/* active slide image */

.blog-slider__item.swiper-slide-active .blog-slider__img img{
opacity:1;
transition-delay:.3s;
}

/* content */

.blog-slider__content{
    width:60%;
padding-right:25px;
}

@media screen and (max-width:768px){
.blog-slider__content{
margin-top:-80px;
text-align:center;
padding:0 30px;
}
}

@media screen and (max-width:576px){
.blog-slider__content{
padding:0;
}
}

.blog-slider__content > *{
opacity:0;
transform:translateY(25px);
transition:all .4s;
}

.blog-slider__item.swiper-slide-active .blog-slider__content > *{
opacity:1;
transform:none;
}

/* text styles */
.blog-slider__code{
color:#D8AC66;
margin-bottom:15px;
display:block;
font-weight:500;
}
.blog-slider__code1{
color:#ededed;
margin-bottom:15px;
display:block;
font-weight:600;
}

.blog-slider__title{
font-size:24px;
font-weight:700;
color:white;
margin-bottom:5px;
}

.blog-slider__text{
color:white;
margin-bottom:30px;
line-height:1.5em;
}

/* button */

.blog-slider__button{
display:inline-flex;
background-image:linear-gradient(147deg,#fe8a39 0%,#fd3838 74%);
padding:15px 35px;
border-radius:50px;
color:#fff;
box-shadow:0px 14px 80px rgba(252,56,56,0.4);
text-decoration:none;
font-weight:500;
justify-content:center;
text-align:center;
letter-spacing:1px;
}

@media screen and (max-width:576px){
.blog-slider__button{
width:100%;
}
}

/* pagination */

.blog-slider__pagination{
position:absolute;
z-index:21;
right:20px;
width:11px!important;
text-align:center;
left:auto!important;
top:50%;
/* bottom:auto!important; */
transform:translateY(-50%);
}

@media screen and (max-width:768px){
.blog-slider__pagination{
transform:translateX(-50%);
left:50%!important;
top:205px;
width:100%!important;
display:flex;
justify-content:center;
align-items:center;
}
}

.blog-slider__pagination .swiper-pagination-bullet{
width:11px;
height:11px;
display:block;
border-radius:10px;
background:white;
opacity:0.2;
transition:all .3s;
}

.blog-slider__pagination .swiper-pagination-bullet-active{
opacity:1;
background:#fd3838;
height:30px;
box-shadow:0px 0px 20px rgba(252,56,56,0.3);
}

@media screen and (max-width:768px){
.blog-slider__pagination .swiper-pagination-bullet-active{
height:11px;
width:30px;
}
}
.doctor-time{
font-size:14px;
color:#666;
margin-bottom:20px;
font-weight:500;
}
.doctor-hr{
    color:#c3c3c3;
}
.deptTickerWrapper{
background:#f4f6ff;
overflow:hidden;
}

.deptTickerOuter{
overflow:hidden;
}

.deptTickerTrack{
    padding:30px;
display:flex;
gap:60px;
align-items:center;
width:max-content;
animation:deptTickerMove 25s linear infinite;
}

/* card */

.deptTickerItem{
position:relative;
display:flex;
border:1px solid grey;
align-items:center;
background:white;
/* background: linear-gradient(90deg, #41397b, #9f93f1); */
padding:12px 30px 12px 50px;
border-radius:30px;
color:black;
font-size:18px;
text-decoration:none;
white-space:nowrap;
font-weight:500;
}

.deptTickerIcon{
    font-size:20px;
position:absolute;
left:-18px;
width:50px;
height:50px;
/*background:#28153f;*/
color:white;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
box-shadow:0 4px 10px rgba(0,0,0,0.15);
}
.deptTickerIcon1{
    font-size:20px;
position:absolute;
left:-18px;
width:50px;
height:50px;
background:#0e2132;
color:white;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
box-shadow:0 4px 10px rgba(0,0,0,0.15);
}


/* animation */

@keyframes deptTickerMove{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-50%);
}
}
.deptTickerTrack:hover{
animation-play-state: paused;
}



.medcut-banner{
display:flex;
height:40vh;
width:100%;
overflow:hidden;
}

/* LEFT TEXT */

.medcut-content-side{
width:60%;
/* background:#0d1b3d; */
color:#fff;
display:flex;
/*align-items:center;*/
/*justify-content:center;*/
padding:60px;

clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
position:relative;
z-index:2;
}

/* RIGHT IMAGE */
.op-doctors{
position:relative;
padding:60px;
z-index:1;
overflow:hidden;
}

.op-doctors::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url('https://t4.ftcdn.net/jpg/16/03/78/17/360_F_1603781706_KZg60mMg62oIX9ktKK2mYbBWH0l0UjCh.jpg');
background-size:cover;
background-position:center;
opacity:0.35; /* adjust opacity */
z-index:-1;
}
.medcut-image-side{
width:70%;              /* slightly bigger */
margin-left:-290px;      /* overlap to remove gap */
height:100%;

clip-path: polygon(15% 0, 100% 0, 100% 100%, 15% 100%, 0 50%);
}

.medcut-image-side img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
@media (max-width:992px){

.medcut-title{
font-size:28px;
}

.medcut-desc{
font-size:14px;
}

}

/* MOBILE */

@media (max-width:768px){
.op-doctors{

padding:20px;

}

.medcut-banner{
flex-direction:column;
height:auto;
}

.medcut-content-side,
.medcut-image-side{
width:100%;
margin-left:0;
clip-path:none;
}

.medcut-image-side{
height:220px;
}

.medcut-content-side{
padding:100px 20px;
text-align:center;
}

}
@media (min-width:768px) and (max-width:1199px){

.medcut-image-side{
margin-left:-120px;
width:60%;
}

}
@media (min-width:1199px) and (max-width:1600px){

.medcut-image-side{
margin-left:-190px;
width:60%;
}

}
@media (min-width:1600px) and (max-width:1750px){

.medcut-image-side{
margin-left:-260px;
width:60%;
}

}

.zigzag-banner{
height:60vh;
overflow:hidden;
}

.zigzag-wrapper{
height:100%;
}

.zigzag-col{
position:relative;
height:60vh;
overflow:hidden;
}

/* images */

.banner-img{
width:100%;
height:100%;
object-fit:cover;
}

/* center text */

.zigzag-center{

color:white;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding-left:40px;
}

.banner-op-text h1{
font-size:40px;
font-weight:700;
margin-bottom:15px;
}

.banner-op-text p{
font-size:16px;
line-height:1.6;
padding:10px;
}

/* ZIGZAG DIVIDERS */
.zigzag-left img{
width:100%;
height:100%;
object-fit:cover;
animation: bannerZoom 12s ease-in-out infinite;
}

/* zoom animation */

@keyframes bannerZoom{
0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}
}


/*.zigzag-left{*/
/*clip-path:polygon(*/
/*0 0,*/
/*100% 0,*/
/*98% 5%,*/
/*100% 10%,*/
/*98% 15%,*/
/*100% 20%,*/
/*98% 25%,*/
/*100% 30%,*/
/*98% 35%,*/
/*100% 40%,*/
/*98% 45%,*/
/*100% 50%,*/
/*98% 55%,*/
/*100% 60%,*/
/*98% 65%,*/
/*100% 70%,*/
/*98% 75%,*/
/*100% 80%,*/
/*98% 85%,*/
/*100% 90%,*/
/*98% 95%,*/
/*100% 100%,*/
/*0 100%*/
/*);*/
/*}*/

/*.zigzag-center{*/
/*clip-path:polygon(*/
/*3% 0,*/
/*100% 0,*/
/*97% 5%,*/
/*100% 10%,*/
/*97% 15%,*/
/*100% 20%,*/
/*97% 25%,*/
/*100% 30%,*/
/*97% 35%,*/
/*100% 40%,*/
/*97% 45%,*/
/*100% 50%,*/
/*97% 55%,*/
/*100% 60%,*/
/*97% 65%,*/
/*100% 70%,*/
/*97% 75%,*/
/*100% 80%,*/
/*97% 85%,*/
/*100% 90%,*/
/*97% 95%,*/
/*100% 100%,*/
/*3% 100%,*/
/*0 95%,*/
/*3% 90%,*/
/*0 85%,*/
/*3% 80%,*/
/*0 75%,*/
/*3% 70%,*/
/*0 65%,*/
/*3% 60%,*/
/*0 55%,*/
/*3% 50%,*/
/*0 45%,*/
/*3% 40%,*/
/*0 35%,*/
/*3% 30%,*/
/*0 25%,*/
/*3% 20%,*/
/*0 15%,*/
/*3% 10%,*/
/*0 5%*/
/*);*/
/*}*/

/*.zigzag-right{*/
/*clip-path:polygon(*/
/*3% 0,*/
/*100% 0,*/
/*100% 100%,*/
/*3% 100%,*/
/*0 95%,*/
/*3% 90%,*/
/*0 85%,*/
/*3% 80%,*/
/*0 75%,*/
/*3% 70%,*/
/*0 65%,*/
/*3% 60%,*/
/*0 55%,*/
/*3% 50%,*/
/*0 45%,*/
/*3% 40%,*/
/*0 35%,*/
/*3% 30%,*/
/*0 25%,*/
/*3% 20%,*/
/*0 15%,*/
/*3% 10%,*/
/*0 5%*/
/*);*/
/*}*/

.zigzag-right {
  height: 60vh;
  background: white;

  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 1000' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M20 0 H300 V1000 H20 Q8 820 20 650 Q32 540 20 380 Q12 260 20 120 Q24 50 20 0 Z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 1000' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M20 0 H300 V1000 H20 Q8 820 20 650 Q32 540 20 380 Q12 260 20 120 Q24 50 20 0 Z'/%3E%3C/svg%3E");

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* responsive */
@media(max-width:776px){

.zigzag-right {
      -webkit-mask: none;
    mask: none;
}
.banner-op-text h1{
    font-size:32px;
}
}

@media(max-width:992px){

.zigzag-banner{
height:auto;
}

.zigzag-col{
height:300px;
clip-path:none;
}

.zigzag-center{
height:auto;
padding:30px;
}

}
.wave-divider{
position:absolute;
top:0;
right:-1px;
width:60px;
height:100%;
background:white;
clip-path:ellipse(60% 100% at 0% 50%);
}
.chalakudy-op-bnr{
    background:#200d35;
}
.chalakudy-dia-card::after{
    background-color:#200d35;
}
.chalakudy-dia-icon{
    background: #9a87c5; 
}
.ckdy-op-hours{
    background:#200d35;
}


.ikda-dianostic-bnr{
    background:#72102d;
}
.ikda-dianostic-card::after {
   background-color:#a3143e;
}
.ikda-dia-icon{
    background:#cd5d7e;
}
.ikda-op-hours{
    background:#952044;
}


.knmklm-dianostic-bnr{
    background:#253146;
}
.knmklm-dianostic-card::after {
   background-color:#32475f;
}
.knmklm-dia-icon{
    background:#253146;
}
.knmklm-op-hours{
    background:#253146;
}


.mala-dianostic-bnr{
    background:#21322b;
}
.mala-dianostic-card::after {
   background-color:#21322b;
}
.mala-dia-icon{
    background:#869f95;
}
.mala-op-hours{
    background:#22332c;
}

.amballur-dianostic-bnr{
    background:#75542e;
}
.amballur-dianostic-card::after {
   background-color:#75542e;
}
.amballur-dia-icon{
    background:#c1915b;
}
.amballur-op-hours{
    background:#7d562a;
}


.kdnglr-dianostic-bnr{
    background:#165c76;
}
.kdnglr-dianostic-card::after {
   background-color:#165c76;
}
.kdnglr-dia-icon{
    background:#459dbd;
}
.kdnglr-op-hours{
    background:#165c76;
}

.mvpzha-dianostic-bnr{
    background:#3c3c40;
}
.mvpzha-dianostic-card::after {
   background-color:#3c3c40;
}
.mvpzha-dia-icon{
    background:#9d9d9d;
}
.mvpzha-op-hours{
    background:#272727;
}
  
    .skip-link { position: absolute; top: -100%; left: 0; background: var(--teal); color: #fff; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; z-index: 9999; text-decoration: none; border-radius: 0 0 4px 0; }
    .skip-link:focus { top: 0; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    /* =========================================================
       HERO SLIDER
    ========================================================= */
    .hero-slider-section {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 80vh;
   
  
    }

    /* Animated gradient background */
    .hero-gradient-bg {
  position: absolute;
  inset: 0;
  z-index: 0;

  /*background:*/
  /*  radial-gradient(circle at center, rgba(120,80,200,0.18), transparent 60%),*/
  /*  radial-gradient(circle at top left, rgba(168,85,247,0.35), transparent 45%),*/
  /*  radial-gradient(circle at bottom right, rgba(139,92,246,0.35), transparent 45%),*/
  /*  #0b0614;*/

  animation: gradientMove 12s ease-in-out infinite alternate;
}

@keyframes gradientMove {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

    /* Animated glow orbs for depth */
    .hero-orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      opacity: 0.18;
      filter: blur(70px);
      animation: orbFloat 8s ease-in-out infinite;
    }
    .hero-orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, #e8620a, transparent); top: -100px; left: -100px; animation-delay: 0s; }
    .hero-orb-2 { width: 400px; height: 400px; background: radial-gradient(circle, #00b5b8, transparent); bottom: -120px; right: 10%; animation-delay: -4s; }
    .hero-orb-3 { width: 300px; height: 300px; background: radial-gradient(circle, #e8620a, transparent); top: 50%; right: 25%; animation-delay: -2s; opacity: 0.1; }
    @keyframes orbFloat {
      0%,100% { transform: translate(0,0) scale(1); }
      50%      { transform: translate(30px, -20px) scale(1.1); }
    }

    /* Slides wrapper */
    .hero-slides-wrapper {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
    }

    .hero-slide {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: none;
    }
    .hero-slide.active {
      opacity: 1;
      pointer-events: auto;
      position: relative;
    }

    /* Slide inner layout */
    .hero-slide-inner {
      display: flex;
      align-items: center;
      width: 100%;
  
    }

    /* Left content */
    .hero-left {
      flex: 0 0 45%;
      max-width: 45%;
      padding: 0 40px 0 60px;
    }

    .hero-tag {
      display: inline-block;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--yellow);
      margin-bottom: 1rem;
      opacity: 0;
      transform: translateY(16px);
    }

    .hero-heading {
      font-size: clamp(1.6rem, 2.7vw, 2.6rem);
      font-weight: 700;
      color: #ffffff;
      line-height: 1.15;
      letter-spacing: -0.1px;
      margin-bottom: 1.25rem;
      /* padding-left: 1.25rem; */
      /* border-left: 4px solid var(--orange); */
      opacity: 0;
      transform: translateY(20px);
    }

    .hero-sub {
      font-size: 16px;
      color: rgba(255,255,255,0.65);
      line-height: 1.7;
      margin-bottom: 2rem;
      /* padding-left: 1.25rem; */
      opacity: 0;
      transform: translateY(16px);
    }

    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      background: transparent;
      border: 2px solid var(--yellow);
      color: #fff;
      font-family: var(--font-stack);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      padding: 0.75rem 1.75rem;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.28s ease, box-shadow 0.28s ease;
      border-radius: 2px;
      opacity: 0;
      transform: translateY(14px);
    }
    .hero-cta:hover, .hero-cta:focus-visible {
      background: var(--yellow);
      box-shadow: 0 6px 24px rgba(232,98,10,0.5);
      color: #fff;
    }
    .hero-cta .cta-arrow {
      width: 28px; height: 28px;
      background: var(--yellow);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.25s ease;
    }
    .hero-cta:hover .cta-arrow { transform: translateX(4px); }

    /* Right side */
    .hero-right {
      flex: 0 0 55%;
      max-width: 55%;
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      padding-right: 40px;
      overflow: hidden;
      padding:20px;
    }

    .hero-big-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: clamp(3rem, 8vw, 7rem);
      font-weight: 900;
      color: rgba(255,255,255,0.08);
      white-space: nowrap;
      letter-spacing: -2px;
      pointer-events: none;
      line-height: 1;
      user-select: none;
      opacity: 0;
    }

    .hero-image-wrap {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 600px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0;
      transform: translateX(30px);
    }

    /* Dark circle behind image */
    @keyframes heroCircleMorph {
      0%   { border-radius: 50%; transform: scale(1) rotate(0deg); }
      25%  { border-radius: 48% 52% 55% 45% / 45% 48% 52% 55%; transform: scale(1.02) rotate(5deg); }
      50%  { border-radius: 55% 45% 48% 52% / 52% 55% 45% 48%; transform: scale(0.98) rotate(0deg); }
      75%  { border-radius: 45% 55% 52% 48% / 55% 45% 48% 52%; transform: scale(1.01) rotate(-5deg); }
      100% { border-radius: 50%; transform: scale(1) rotate(0deg); }
    }
    @keyframes heroRipple {
      0%   { transform: translate(-50%, 50%) scale(0.8); opacity: 0.35; }
      70%  { opacity: 0.1; }
      100% { transform: translate(-50%, 50%) scale(1.6); opacity: 0; }
    }
    @keyframes heroRipple2 {
      0%   { transform: translate(-50%, 50%) scale(0.8); opacity: 0.25; }
      70%  { opacity: 0.07; }
      100% { transform: translate(-50%, 50%) scale(1.8); opacity: 0; }
    }
    @keyframes heroRipple3 {
      0%   { transform: translate(-50%, 50%) scale(0.8); opacity: 0.15; }
      70%  { opacity: 0.04; }
      100% { transform: translate(-50%, 50%) scale(2.0); opacity: 0; }
    }
    .hero-circle {
      position: absolute;
      bottom: 0;
      right: 8%;
      width: 80%;
      padding-bottom: 80%;
      background: rgba(255,255,255,0.06);
      border-radius: 50%;
      z-index: 1;
      animation: heroCircleMorph 8s ease-in-out infinite;
    }
    .hero-circle::before,
    .hero-circle::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,0.18);
      transform: translate(-50%, 50%) scale(0.8);
      animation: heroRipple 3.6s ease-out infinite;
    }
    .hero-circle::after {
      border-color: rgba(230,130,50,0.22);
      animation: heroRipple2 3.6s ease-out 1.2s infinite;
    }
    .hero-circle-wave {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 1.5px solid rgba(0,180,180,0.18);
      transform: translate(-50%, 50%) scale(0.8);
      animation: heroRipple3 3.6s ease-out 2.4s infinite;
      pointer-events: none;
    }

    .hero-img {
      position: relative;
      z-index: 2;
      width: 100%;
      /* max-height: 460px; */
      min-height:590px;
      object-fit: contain;
      object-position: center bottom;
      display: block;
      /* filter: drop-shadow(0 20px 60px rgba(0,0,0,0.6)); */
    }

    /* Badges */
    .hero-badge {
      position: absolute;
      z-index: 3;
      background: #fff;
      border: 1px solid rgba(0,0,0,0.1);
      padding: 0.4rem 0.6rem;
      border-radius: 4px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
      opacity: 0;
      transform: translateY(-10px);
    }
    .hero-badge img { display: block; }
    .hero-badge-1 { top: 20px; right: 20px; }
    .hero-badge-2 { top: 140px; right: 20px; }

    /* Slide dots */
    .hero-dots {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 10;
    }
    .hero-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,0.35);
      border: none;
      cursor: pointer;
      transition: background 0.3s, transform 0.3s;
      padding: 0;
    }
    .hero-dot.active {
      background: var(--yellow);
      transform: scale(1.35);
    }

    /* Arrows */
    .hero-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      color: #fff;
      width: 44px; height: 44px;
      border-radius: 50%;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.25s;
      backdrop-filter: blur(6px);
    }
    .hero-arrow:hover { background: var(--yellow); border-color: var(--yellow); }
    .hero-arrow-prev { left: 16px; }
    .hero-arrow-next { right: 16px; }

    /* =========================================================
       QUICK LINKS BAR (orange bar below slider)
    ========================================================= */
    .quick-links-bar {
      /*background: #1f0f2b;*/
      position: relative;
      z-index: 20;
    }

    .quick-links-inner {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      border-left: 1px solid rgba(255,255,255,0.15);
    }

    .ql-item {
      position: relative;
    }

    .ql-btn {
        border-radius:0px;
        box-shadow:none;
            backdrop-filter:none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      padding: 1.25rem 0.75rem;
      border: none;
      background: var(--yellow-dark);
      /*color: #3d3289;*/
      /* font-family: var(--font-stack); */
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.5px;
      cursor: pointer;
      width: 100%;
      border-right: 1px solid rgba(255,255,255,0.55);
      transition: background 0.22s ease;
      position: relative;
      text-decoration: none;
      border-width:none;
      /* all:none; */
    }
    .ql-btn:hover {
         background: transparent; 
         color: #fff;
          box-shadow:none;
            backdrop-filter:none;
          transform: none !important;
                --border-width:none;
         }
         
         

  .ql-links-bar-ckdy {
     background:#2b1532;
 }
 .ql-btn-ckdy {
     background:var(--yellow-dark);
     color:#3d3289 ;
 }

 .ql-icon-ckdy svg{
     stroke:#3d3289 ;
 }
 

  .ql-links-bar-ikda {
     background:#811a39;
     color:#811a39;
 }
 .ql-btn-ikda {
     background:var(--yellow-dark);
 }

  .ql-icon-ikda svg{
     stroke:#811a39;
 }
 
 
   .ql-links-bar-amballur {
     background:#52381c;
 }
 .ql-btn-amballur {
     background:var(--yellow-dark);
     color:#52381c;
 }

  .ql-icon-amballur svg{
     stroke:#52381c;
 }


    .ql-links-bar-mala {
     background:#283932;
 }
 .ql-btn-mala {
     background:var(--yellow-dark);
     color:#283932;
 }

  .ql-icon-mala svg{
     stroke:#283932;
 }
 
     .ql-links-bar-knmklm {
     background:#384a5e;
 }
 .ql-btn-knmklm {
     background:var(--yellow-dark);
     color:#384a5e;
 }

  .ql-icon-knmklm svg{
     stroke:#384a5e;
 }
 
      .ql-links-bar-kdnglr {
     background:#174f67;
 }
 .ql-btn-kdnglr {
     background:var(--yellow-dark);
     color:#174f67;
 }

  .ql-icon-kdnglr svg{
     stroke:#174f67;
 }
 
       .ql-links-bar-mpuzha {
     background:#504f54;
 }
 .ql-btn-mpuzha  {
     background:var(--yellow-dark);
     color:#504f54;
 }

  .ql-icon-mpuzha  svg{
     stroke:#504f54;
 }
 
 
    .ql-icon {
      width: 38px; height: 38px;
      display: flex; align-items: center; justify-content: center;
    }
    .ql-icon svg { width: 34px;
    height: 34px; fill: none;  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
 .ql-btn:hover .ql-icon svg{
     stroke:white; 
 }
    /* Submenu */
    .ql-submenu {
      position: absolute;
      bottom: 90px;
      top: auto;
      left: 50%;
      transform: translateX(-50%) translateY(-8px);
      min-width: 200px;
      background:#1b1023;
      border-bottom: 3px solid var(--yellow);
      border-top: none;
      box-shadow: 0 -8px 32px rgba(0,0,0,0.16);
      border-radius: 6px 6px 0 0;
      z-index: 100;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.22s ease, transform 0.22s ease;
      list-style: none;
      padding: 0.5rem 0;
    }
    .ql-item:hover .ql-submenu,
    .ql-item:focus-within .ql-submenu {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    .ql-submenu li a {
      display: block;
      padding: 0.55rem 1.25rem;
      font-size: 0.82rem;
      color:white;
      text-decoration: none;
      font-weight: 500;
      transition: background 0.18s, color 0.18s;
      white-space: nowrap;
    }
    .ql-submenu li a:hover { background: #fff5f0; color: #140c23; }
    .ql-submenu li + li { border-top: 1px solid #4b4b4b; }

    /* Caret indicator on ql-btn when has submenu */
    .ql-btn[aria-haspopup="true"]::after {
      content: '';
      position: absolute;
      bottom: 6px;
      left: 50%;
      transform: translateX(-50%);
      width: 0; height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid rgba(255,255,255,0.5);
      transition: border-top-color 0.2s;
    }
    .ql-item:hover .ql-btn[aria-haspopup="true"]::after { border-top-color: #fff; }

  
    /* =========================================================
       HERO RESPONSIVE
    ========================================================= */
    @media (max-width: 991.98px) {
      .hero-slide-inner { flex-direction: column; padding: 40px 0 20px; min-height: auto; }
      .hero-left { flex: none; max-width: 100%; width: 100%; padding: 0 24px; text-align: center; }
      .hero-heading { border-left: none; border-bottom: 3px solid var(--yellow); padding-left: 0; padding-bottom: 0.6rem; margin-bottom: 1rem; }
      .hero-sub { padding-left: 0; }
      .hero-right { flex: none; max-width: 100%; width: 100%; padding: 0; justify-content: center; }
      .hero-image-wrap { max-width: 420px; }
      .hero-img { max-height: 360px; min-height:290px;}
      .hero-badge { display: none; }
      .quick-links-inner { grid-template-columns: repeat(3, 1fr); }
      .ql-submenu { left: 0; transform: translateX(0) translateY(-8px); }
      .ql-item:hover .ql-submenu, .ql-item:focus-within .ql-submenu { transform: translateX(0) translateY(0); }
      .hero-slider-section {
     
      height: auto;
   
  
    }

    }
    @media (min-width: 991.98px) and (max-width: 1400px) {
         .hero-img {
      
      min-height:390px;

    }

    }
    @media (max-width: 575.98px) {
      .hero-heading { font-size: 32px; }
      .hero-sub { font-size: 0.88rem; }
      .quick-links-inner { grid-template-columns: repeat(2, 1fr); }
      .ql-btn { font-size: 14px; padding: 1rem 0.5rem; }
      .ql-icon { width: 30px; height: 30px; }
      .ql-icon svg { width: 26px; height: 26px; }
    }
    /* contactpage  */
     @keyframes tesla-cntct-slide-left  { from{opacity:0;transform:translateX(-60px)} to{opacity:1;transform:translateX(0)} }
    @keyframes tesla-cntct-slide-right { from{opacity:0;transform:translateX(60px)}  to{opacity:1;transform:translateX(0)} }
    @keyframes tesla-cntct-fade-up     { from{opacity:0;transform:translateY(40px)}  to{opacity:1;transform:translateY(0)} }
    @keyframes tesla-cntct-pulse {
      0%,100% { box-shadow:0 0 0 0 rgba(124,58,237,.4); }
      70%      { box-shadow:0 0 0 14px rgba(124,58,237,0); }
    }
    @keyframes tesla-cntct-shimmer {
      0%   { background-position:-200% center; }
      100% { background-position:200% center; }
    }
    @keyframes tesla-cntct-dot-blink {
      0%,100% { opacity:1; }
      50%      { opacity:.3; }
    }

    /* ===== SCROLL REVEAL ===== */
    .tesla-cntct-reveal {
      /* opacity:0; */
      transform:translateY(30px);
      transition:opacity .7s ease, transform .7s ease;
    }
    .tesla-cntct-reveal.tesla-cntct-visible {
      opacity:1;
      transform:translateY(0);
    }

    /* ===== NAVBAR ===== */
    .tesla-cntct-nav {
      background: rgba(255,255,255,.97) !important;
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--tc-purple-light);
      box-shadow: 0 2px 20px rgba(124,58,237,.08);
      padding: 0 1rem !important;
      min-height: 70px;
    }
    .tesla-cntct-nav .navbar-brand {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--tc-purple) !important;
      letter-spacing: -.5px;
      text-decoration: none;
    }
    .tesla-cntct-nav .navbar-brand span { color: var(--tc-dark); }
    .tesla-cntct-nav .nav-link {
      color: var(--tc-gray-600) !important;
      font-weight: 500;
      font-size: .9rem;
      transition: color .2s;
      padding: .5rem .85rem !important;
    }
    .tesla-cntct-nav .nav-link:hover,
    .tesla-cntct-nav .nav-link.active { color: var(--tc-purple) !important; }
    .tesla-cntct-nav .navbar-toggler {
      border-color: rgba(124,58,237,.35);
      padding: .35rem .6rem;
    }
    .tesla-cntct-nav .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%237c3aed' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    .tesla-cntct-nav__cta {
      background: var(--tc-purple);
      color: #fff !important;
      border: none;
      padding: .5rem 1.3rem !important;
      border-radius: 50px !important;
      font-family: inherit;
      font-weight: 600;
      font-size: .88rem;
      cursor: pointer;
      transition: transform .2s, box-shadow .2s, background .2s;
    }
    .tesla-cntct-nav__cta:hover {
      transform: scale(1.05);
      background: var(--tc-purple-dark) !important;
      box-shadow: 0 8px 24px rgba(124,58,237,.35);
    }

    /* ===== HERO ===== */
    .tesla-cntct-hero {
      height: 60vh;
      background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 40%, #c4b5fd 100%);
      padding: 120px 0 160px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .tesla-cntct-hero::before {
      content:''; position:absolute; top:-100px; right:-100px;
      width:500px; height:500px;
      background:radial-gradient(circle,rgba(124,58,237,.15) 0%,transparent 70%);
      border-radius:50%; pointer-events:none;
    }
    .tesla-cntct-hero::after {
      content:''; position:absolute; bottom:-80px; left:-80px;
      width:400px; height:400px;
      background:radial-gradient(circle,rgba(167,139,250,.2) 0%,transparent 70%);
      border-radius:50%; pointer-events:none;
    }
    .tesla-cntct-hero .container { position:relative; z-index:1; }

    .tesla-cntct-hero__content {
      animation: tesla-cntct-slide-left .9s ease both;
    }
    .tesla-cntct-hero__badge {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: rgba(124,58,237,.12);
      color: var(--tc-purple);
      border: 1px solid rgba(124,58,237,.25);
      padding: .4rem 1rem;
      border-radius: 50px;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .tesla-cntct-hero__badge-dot {
      width:8px; height:8px; background:var(--tc-purple); border-radius:50%;
      flex-shrink:0;
      animation: tesla-cntct-dot-blink 2s infinite;
    }
    .tesla-cntct-hero__title {
      font-size: clamp(2.4rem, 5vw, 44px);
      font-weight: 700;
      line-height: 1.1;
      color: var(--tc-dark);
      letter-spacing: -1px;
    }
    .tesla-cntct-hero__title-accent {
      color: var(--tc-purple);
      position: relative;
      display: inline-block;
    }
    .tesla-cntct-hero__title-accent::after {
      content:''; position:absolute; bottom:2px; left:0; right:0; height:4px;
      /*background: linear-gradient(90deg, var(--tc-purple), var(--tc-purple-accent));*/
      border-radius:2px; opacity:.4;
    }
    .tesla-cntct-hero__subtitle {
      font-size: 1.05rem;
      color: #3d3289;
      line-height: 1.7;
    }

    /* Hero buttons */
    .tesla-cntct-btn {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-family: inherit !important;
      font-weight: 600;
      font-size: .9rem;
      cursor: pointer;
      transition: transform .25s, box-shadow .25s, background .25s;
      text-decoration: none;
    }
    .tesla-cntct-btn:hover { transform: scale(1.05); }
    .tesla-cntct-btn--primary {
      background: var(--tc-purple) !important;
      color: #fff !important;
      padding: .8rem 1.8rem !important;
      border-radius: 50px !important;
      border: none !important;
      box-shadow: 0 8px 25px rgba(124,58,237,.35);
    }
    .tesla-cntct-btn--primary:hover {
      background: var(--tc-purple-dark) !important;
      box-shadow: 0 12px 35px rgba(124,58,237,.5);
    }
    .tesla-cntct-btn--outline {
      background: transparent !important;
      color: var(--tc-purple) !important;
      border: 2px solid var(--tc-purple) !important;
      padding: .75rem 1.6rem !important;
      border-radius: 50px !important;
    }
    .tesla-cntct-btn--outline:hover { background: var(--tc-purple-light) !important; }

    /* Hero image side */
    .tesla-cntct-hero__image-wrap {
      position: relative;
      display: flex;
      justify-content: center;
      animation: tesla-cntct-slide-right .9s ease .2s both;
    }
    .tesla-cntct-hero__img-bg {
      width: 420px; height: 480px;
      background: linear-gradient(180deg, rgba(124,58,237,.18) 0%, rgba(167,139,250,.25) 100%);
      border-radius: 50% 50% 48% 52% / 55% 55% 45% 45%;
      overflow: hidden;
      display: flex; align-items: flex-end; justify-content: center;
    }
    .tesla-cntct-hero__doctor-img { width:100%; height:100%; object-fit:cover; object-position:center top; }

    .tesla-cntct-hero__card {
      position: absolute;
      background: #fff;
      border-radius: 16px;
      padding: .85rem 1.1rem;
      box-shadow: 0 10px 40px rgba(76,29,149,.18);
      display: flex; align-items: center; gap: .75rem;
      min-width: 200px; z-index: 10;
    }
    .tesla-cntct-hero__card--doc  { top:10%; left:-60px; animation:tesla-cntct-slide-left .9s ease .5s both; }
    .tesla-cntct-hero__card--pats { bottom:12%; right:-40px; animation:tesla-cntct-slide-right .9s ease .7s both; }
    .tesla-cntct-hero__card-icon {
      width:48px; height:48px; flex-shrink:0; border-radius:12px;
      background: linear-gradient(135deg, var(--tc-purple), var(--tc-purple-accent));
      display:flex; align-items:center; justify-content:center; font-size:1.3rem;
    }
    .tesla-cntct-hero__card-info h4 { font-size:.82rem; font-weight:700; color:var(--tc-dark); line-height:1.3; margin:0; }
    .tesla-cntct-hero__card-info p  { font-size:.72rem; color:var(--tc-gray-400); margin:1px 0 0; line-height:1.4; }
    .tesla-cntct-hero__card-stat { font-size:1.1rem; font-weight:800; color:var(--tc-purple); }

    /* ===== APPOINTMENT ===== */
    .tesla-cntct-appointment {
      position: relative;
      z-index: 10;
      margin-top: -80px;
      padding-bottom: 5rem;
      margin-bottom:120px;
    }
    .tesla-cntct-appointment__card {
      background: #fff;
      border-radius: 24px;
      padding: 2.5rem;
      box-shadow: 0 20px 80px rgba(76,29,149,.15);
      animation: tesla-cntct-fade-up .8s ease .3s both;
    }
    .tesla-cntct-appointment__badge {
      display: inline-block;
      background: linear-gradient(135deg, #d8ac66, #f3ad3e);
      color: #fff;
      font-size: .75rem; font-weight:700;
      letter-spacing:.08em; text-transform:uppercase;
      padding:.35rem 1.2rem;
       border-radius:5px;
    }
    .tesla-cntct-appointment__title { font-size:1.6rem; font-weight:700; color:var(--tc-dark); }

    /* Appointment input-group icon styling */
    .tesla-cntct-field__label {
      font-size:.78rem; font-weight:600; color:var(--tc-gray-600);
      text-transform:uppercase; letter-spacing:.06em;
    }
    .tesla-cntct-field .input-group-text {
      background: var(--tc-gray-50);
      border: 1.5px solid var(--tc-gray-200);
      border-right: none;
      color: var(--tc-purple);
      border-radius: 12px 0 0 12px;
    }
    .tesla-cntct-field .form-control,
    .tesla-cntct-field .form-select {
      border: 1.5px solid var(--tc-gray-200) !important;
      border-left: none !important;
      border-radius: 0 12px 12px 0 !important;
      background: var(--tc-gray-50) !important;
      font-family: inherit;
      font-size: .88rem;
      color: var(--tc-dark);
      padding: .75rem .85rem;
    }
    .tesla-cntct-field .form-control:focus,
    .tesla-cntct-field .form-select:focus {
      border-color: var(--tc-purple) !important;
      box-shadow: 0 0 0 3px rgba(124,58,237,.12) !important;
      background: #fff !important;
    }
    .tesla-cntct-field .input-group:focus-within .input-group-text {
      border-color: var(--tc-purple);
    }
    .tesla-cntct-appt-btn {
      background: linear-gradient(135deg, var(--tc-purple), var(--tc-purple-dark));
      color: #fff;
      border: none;
      padding: .85rem 1.6rem;
      border-radius: 12px !important;
      font-family: inherit;
      font-weight: 700;
      font-size: .88rem;
      cursor: pointer;
      white-space: nowrap;
      display: inline-flex; align-items:center; gap:.5rem;
      box-shadow: 0 8px 24px rgba(124,58,237,.35);
      transition: transform .25s, box-shadow .25s;
      letter-spacing: .05em;
      height: fit-content;
      align-self: flex-end;
    }
    .tesla-cntct-appt-btn:hover { transform:scale(1.05); box-shadow:0 12px 35px rgba(124,58,237,.5); }
.feedback-img{
    background-repeat:no-repeat; 
    background-size:contain; 
     background-position:bottom;
    background-image: url('../img/feddback-img.png');
}
    /* ===== MIDDLE SECTION ===== */
 .tesla-cntct-middle {
    padding-top:70px;
  background: var(--tc-dark);
  position: relative;
  overflow: hidden;
}

/* glow effect */
.tesla-cntct-middle::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124,58,237,.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* background image */
.tesla-cntct-middle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("https://media.istockphoto.com/id/1197622090/photo/smiling-medical-customer-service-rep.jpg?s=612x612&w=0&k=20&c=h7k4wFcZzn3eYOQ8pIYLF1X_wl9fmwM8gsGgre4epjw=") center/cover no-repeat;
  opacity: 0.15; /* control image visibility */
  z-index: 0;
}
    .tesla-cntct-middle .container { position:relative; z-index:1; }
    .tesla-cntct-middle__card {
      background: #fff;
      border-radius: 4px;
      padding: 2.5rem;
      box-shadow: 0 20px 60px rgba(0,0,0,.3);
    }
    .tesla-cntct-middle__badge {
      display:inline-block; background:var(--tc-purple-light); color:var(--tc-purple);
      font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
      padding:.35rem 1rem; border-radius:50px;
    }
    .tesla-cntct-middle__title { font-size:1.55rem; font-weight:700; color:var(--tc-dark); line-height:1.3; }
    .tesla-cntct-middle__desc { font-size:.88rem; color:var(--tc-gray-600); line-height:1.7; }
    .tesla-cntct-middle__feature {
      display:flex; align-items:center; gap:.75rem;
      font-size:.88rem; font-weight:600; color:var(--tc-dark);
    }
    .tesla-cntct-middle__feature-icon {
      width:36px; height:36px; background:var(--tc-purple-light); border-radius:10px;
      display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
    }
    .tesla-cntct-middle__form-title {
      font-size:1.1rem; 
      font-weight:700;
       color:var(--tc-dark);
      /* padding-top:1.2rem;
       border-top:1px solid var(--tc-gray-200); */
    }

    /* ===== FORM CONTROLS - purple theme override ===== */
    .tesla-cntct-form .form-label,
    .tesla-cntct-final-form .form-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--tc-gray-600);
      margin-bottom: .3rem;
    }
    .tesla-cntct-form .form-control,
    .tesla-cntct-form .form-select,
    .tesla-cntct-final-form .form-control,
    .tesla-cntct-final-form .form-select {
      border: 1.5px solid var(--tc-gray-200);
      border-radius: 10px;
      font-family: inherit;
      font-size: .88rem;
      color: var(--tc-dark);
      background: var(--tc-gray-50);
      transition: border-color .2s, box-shadow .2s, background .2s;
      padding: .75rem 1rem;
    }
    .tesla-cntct-form .form-control:focus,
    .tesla-cntct-form .form-select:focus,
    .tesla-cntct-final-form .form-control:focus,
    .tesla-cntct-final-form .form-select:focus {
      border-color: var(--tc-purple);
      box-shadow: 0 0 0 3px rgba(124,58,237,.12);
      background: #fff;
    }
    .tesla-cntct-form .form-control.tesla-cntct-error,
    .tesla-cntct-form textarea.tesla-cntct-error,
    .tesla-cntct-final-form .form-control.tesla-cntct-error,
    .tesla-cntct-final-form textarea.tesla-cntct-error {
      border-color: #ef4444 !important;
    }
    .tesla-cntct-form__error-text {
      font-size: .72rem;
      color: #ef4444;
      min-height: 1em;
      display: block;
    }
    .tesla-cntct-form__submit,
    .tesla-cntct-final-submit {
      background: linear-gradient(135deg, var(--tc-purple), var(--tc-purple-dark));
      color: #fff;
      border: none;
      border-radius: 12px !important;
      font-family: inherit;
      font-weight: 700;
      font-size: .9rem;
      cursor: pointer;
      width: 100%;
      transition: transform .25s, box-shadow .25s;
      letter-spacing: .04em;
      box-shadow: 0 8px 24px rgba(124,58,237,.3);
      display: flex; align-items:center; justify-content:center; gap:.5rem;
      padding: .9rem 1rem;
    }
    .tesla-cntct-form__submit:hover,
    .tesla-cntct-final-submit:hover {
      transform: scale(1.02);
      box-shadow: 0 12px 35px rgba(124,58,237,.5);
    }
    .tesla-cntct-form__success {
      display:none;
      background:#d1fae5; border:1px solid #10b981;
      color:#065f46; padding:1rem; border-radius:10px;
      font-size:.88rem; font-weight:600; text-align:center;
    }
    .tesla-cntct-form__success.tesla-cntct-show { display:block; animation:tesla-cntct-fade-up .4s ease; }

    /* ===== SKILLS / PROGRESS ===== */
    .tesla-cntct-middle__right { color:#fff; }
    .tesla-cntct-middle__right-title { font-size:2rem; font-weight:700; line-height:1.25; }
    .tesla-cntct-middle__right-desc { font-size:.9rem; color:rgba(255,255,255,.65); line-height:1.7; }
    .tesla-cntct-skill__header { display:flex; justify-content:space-between; align-items:center; }
    .tesla-cntct-skill__name { font-size:.9rem; font-weight:600; color:rgba(255,255,255,.9); }
    .tesla-cntct-skill__pct  { font-size:.85rem; font-weight:700; color:var(--tc-purple-accent); }
    .tesla-cntct-skill__track {
      height:8px; background:rgba(255,255,255,.12); border-radius:100px; overflow:hidden;
    }
    .tesla-cntct-skill__bar {
      height:100%; width:0%;
      background: linear-gradient(90deg, var(--tc-purple), var(--tc-purple-accent));
      border-radius:100px;
      transition:width 1.4s cubic-bezier(.25,.46,.45,.94);
    }
    .tesla-cntct-play {
      width:72px; height:72px;
      background:var(--tc-purple); border:none; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; color:#fff;
      box-shadow:0 0 0 12px rgba(124,58,237,.2),0 0 0 24px rgba(124,58,237,.08);
      animation:tesla-cntct-pulse 2.5s infinite;
      transition:transform .25s;
    }
    .tesla-cntct-play:hover { transform:scale(1.1); }

    /* ===== FINAL ENQUIRY ===== */
    .tesla-cntct-final-enquiry {
      /*background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 40%, #c4b5fd 100%);*/
      position: relative; overflow: hidden;
    }
    .tesla-cntct-final-enquiry::before {
      content:''; position:absolute; top:0; left:0; width:100%; height:4px;
      /*background:linear-gradient(90deg,var(--tc-purple),var(--tc-purple-accent),var(--tc-purple));*/
      background-size:200% auto;
      animation:tesla-cntct-shimmer 3s linear infinite;
    }
    .tesla-cntct-final-enquiry__badge {
      display:inline-block; background:rgba(124,58,237,.1); color:var(--tc-purple);
      font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
      padding:.4rem 1.1rem; border-radius:50px;
      border:1px solid rgba(124,58,237,.2);
    }
    .tesla-cntct-final-enquiry__title {
      font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; color:var(--tc-dark); line-height:1.2;
    }
    .tesla-cntct-final-enquiry__subtitle { font-size:.95rem; color:var(--tc-gray-600); line-height:1.7; }
    .tesla-cntct-final-enquiry__card {
      background:#ecdaff; border-radius:24px; padding:3rem;
      box-shadow:0 20px 70px rgba(76,29,149,.12);
    }

    /* ===== FOOTER ===== */
    .tesla-cntct-footer {
      background:var(--tc-dark); color:rgba(255,255,255,.5);
      text-align:center; padding:2rem; font-size:.85rem;
    }
    .tesla-cntct-footer a { color:var(--tc-purple-accent); text-decoration:none; font-weight:600; }
    .tesla-cntct-footer a:hover { text-decoration:underline; }

    /* ===== RESPONSIVE TWEAKS ===== */
  
      .tesla-cntct-hero { padding:110px 0 140px; }
      .tesla-cntct-hero .col-lg-6:last-child { order:-1; }
      .tesla-cntct-hero__content { text-align:center; }
      .tesla-cntct-hero__subtitle { margin-left:auto; margin-right:auto; max-width:440px; }
      .tesla-cntct-hero__actions { justify-content:center; }
      .tesla-cntct-hero__img-bg { width:300px; height:340px; }
      .tesla-cntct-hero__card--doc  { left:-10px; }
      .tesla-cntct-hero__card--pats { right:-10px; }
      .tesla-cntct-appointment { margin-top:-50px; }
      .tesla-cntct-appointment__card { padding:1.8rem; }
      .tesla-cntct-appt-btn { width:100%; justify-content:center; margin-top:.5rem; }
      .tesla-cntct-middle__right { order:-1; }
      .tesla-cntct-final-enquiry__card { padding:2rem 1.5rem; }
    }
    @media(max-width:575.98px){
      .tesla-cntct-hero__img-bg { width:260px; height:300px; }
      .tesla-cntct-hero__card { flex-direction:column; text-align:center; min-width:120px; gap:.4rem; }
      .tesla-cntct-hero__card--doc  { left:-5px; }
      .tesla-cntct-hero__card--pats { right:-5px; }
      .tesla-cntct-appointment__card { border-radius:16px; padding:1.4rem; }
      .tesla-cntct-middle__card { padding:1.5rem; }
    }
    
      @media(max-width:1400px){
       .tesla-cntct-hero{
    height:80vh;
}
        }
    .tesla-career-hero {
      background: linear-gradient(135deg, #212129 0%, #969fad 60%, #011738 100%);
      position: relative; overflow: hidden;
       /* padding: 80px 0 120px; */
    }
    .tesla-career-hero::before {
      content: ''; position: absolute; top: -40%; right: -10%;
      width: 600px; height: 600px;
      background: radial-gradient(circle, oklch(35% 0.1 145 / .3) 0%, transparent 70%);
      pointer-events: none;
    }
    .tesla-career-hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: oklch(100% 0 0 / .12); border: 1px solid oklch(100% 0 0 / .2);
      color: var(--tc-text-light); padding: 6px 16px; border-radius: 100px;
      font-size: .72rem; font-weight: 600; letter-spacing: .08em;
      text-transform: uppercase; margin-bottom: 24px; backdrop-filter: blur(8px);
    }
    .tesla-career-hero-title {
      font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800;
      color: var(--tc-text-light); line-height: 1.1; margin-bottom: 20px; letter-spacing: -.02em;
    }
    .tesla-career-hero-title span { color: var(--tc-amber); }
    .tesla-career-hero-subtitle {
      color: oklch(85% 0.01 145); font-size: 1.05rem; line-height: 1.7;
      margin-bottom: 36px; max-width: 480px;
    }
    .tesla-career-cta-btn {
      display: inline-flex; align-items: center; gap: 10px;
      background: var(--tc-amber); color: var(--tc-navy-deep);
      font-weight: 700; font-size: .92rem; letter-spacing: .06em;
      text-transform: uppercase; padding: 14px 32px; border-radius: 6px;
      border: none; cursor: pointer;
      transition: background .25s, transform .2s, box-shadow .2s;
    }
    .tesla-career-cta-btn:hover {
      background: var(--tc-amber-hover); transform: translateY(-2px);
      box-shadow: 0 8px 24px oklch(78% .17 80 / .4); color: var(--tc-navy-deep);
    }
    .tesla-career-hero-img-circle {
      width: min(420px, 90vw); height: min(420px, 90vw);
      border-radius: 50%; overflow: hidden;
      border: 5px solid oklch(100% 0 0 / .15);
      box-shadow: 0 0 0 15px oklch(100% 0 0 / .06), 0 0 0 30px oklch(100% 0 0 / .03), 0 32px 80px oklch(0 0 0 / .35);
      animation: tesla-career-float 6s ease-in-out infinite;
      margin: 0 auto;
    }
    .tesla-career-hero-img-circle img { width: 100%; height: 100%; object-fit: cover; }
    @keyframes tesla-career-float {
      0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); }
    }
    .tesla-career-hero-wave {
      position: absolute; bottom: -2px; left: 0; width: 100%; overflow: hidden; line-height: 0;
    }
    .tesla-career-hero-wave svg { display: block; width: 100%; height: 70px; }

    /* JOBS */
    .tesla-career-jobs { 
        background: oklch(96% 0.008 100);
         padding: 40px 0; 
        }
    .tesla-career-section-title {
      font-size: clamp(1.7rem, 3.5vw, 2.6rem); font-weight: 800;
      color: var(--tc-navy-deep); letter-spacing: -.02em; margin-bottom: 8px;
    }
    .tesla-career-section-sub { color: oklch(55% 0.015 260); font-size: .95rem; margin-bottom: 52px; }
    .tesla-career-job-card {
      background: #fff; border: 1px solid oklch(88% 0.01 260);
      border-radius: 14px; padding: 22px 20px;
      display: flex; align-items: flex-start; gap: 16px;
      cursor: pointer; width: 100%; height: 100%; text-align: left;
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
      transition: transform .25s, box-shadow .25s, border-color .25s;
      background-color: #fff;
    }
    .tesla-career-job-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 40px oklch(0 0 0 / .1);
      border-color: oklch(78% .17 80 / .5);
    }
    .tesla-career-job-icon-wrap {
      flex-shrink: 0; width: 54px; height: 54px; border-radius: 12px;
      background: oklch(94% 0.008 100); display: flex; align-items: center;
      justify-content: center; border: 1px solid oklch(88% 0.01 260);
      transition: background .25s, border-color .25s;
    }
    .tesla-career-job-card:hover .tesla-career-job-icon-wrap {
      background: oklch(78% .17 80 / .12); border-color: oklch(78% .17 80 / .3);
    }
    .tesla-career-job-icon-wrap svg {
      width: 26px; height: 26px; color: var(--tc-forest); transition: color .25s;
    }
    .tesla-career-job-card:hover .tesla-career-job-icon-wrap svg { color: var(--tc-amber-hover); }
    .tesla-career-job-title {
font-size: 1rem;
      font-weight: 700; color: var(--tc-navy-deep); margin-bottom: 6px; line-height: 1.3;
    }
    .tesla-career-job-meta { display: flex; flex-direction: column; gap: 3px; }
    .tesla-career-job-meta-item {
      display: flex; align-items: center; gap: 6px;
      font-size: .78rem; color: oklch(52% 0.015 260);
    }
    .tesla-career-job-meta-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--tc-amber-hover); flex-shrink: 0; display: inline-block;
    }

    /* UPLOAD */
    .tesla-career-upload { 
        overflow: hidden;
     }
    .tesla-career-upload-img-col {
        background-image: url(https://i.pinimg.com/736x/0a/eb/a9/0aeba9e3020c6c7b5faa350d241877b8.jpg);
      background-repeat: no-repeat; background-size:cover
         position: relative; 
        height: auto; 
         overflow: hidden; 
        }
    .tesla-career-upload-img-col img { 
        width: 100%;
         height: 100%; 
         object-fit: contain;
          position: absolute; 
          top: 0; 
          left: 0; 
        }
    .tesla-career-upload-form-col {
        border-radius:20px;
      background: #6c757d;
       padding: 60px 48px;
      display: flex; 
      flex-direction: column; 
      justify-content: center; 
      min-height: 600px;
    }
    .tesla-career-form-heading {
     
      font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 600;
      color: var(--tc-text-light); margin-bottom: 6px; letter-spacing: -.02em;
    }
    .tesla-career-form-sub { color: var(--tc-text-muted); font-size: .9rem; margin-bottom: 28px; }
    .tesla-career-form-label {
      color: white;
       font-size: 14px; font-weight: 600;
      letter-spacing: .04em;  margin-bottom: 6px; display: block;
    }
    .tesla-career-form-input {
      background: oklch(100% 0 0 / .06); border: 1px solid oklch(100% 0 0 / .15);
      border-radius: 8px; color: var(--tc-text-light); padding: 12px 16px;
      font-size: .9rem; width: 100%;
      transition: border-color .2s, box-shadow .2s, background .2s;
      font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .tesla-career-form-input:focus {
      outline: none; border-color: oklch(78% .17 80 / .7);
      box-shadow: 0 0 0 3px oklch(78% .17 80 / .15); background: oklch(100% 0 0 / .1);
    }
    .tesla-career-form-input::placeholder { color: oklch(65% 0.01 260); }
    .tesla-career-form-select {
      background: oklch(100% 0 0 / .06); border: 1px solid oklch(100% 0 0 / .15);
      border-radius: 8px; color: var(--tc-text-light); padding: 12px 16px;
      font-size: 14px; width: 100%; cursor: pointer;
      font-weight:600;
      transition: border-color .2s, box-shadow .2s;
      font-family: 'Plus Jakarta Sans', sans-serif; appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath stroke='%23a0aec0' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
    }
    .tesla-career-form-select:focus {
      outline: none; border-color: oklch(78% .17 80 / .7);
      box-shadow: 0 0 0 3px oklch(78% .17 80 / .15);
    }
    .tesla-career-form-select option { background: var(--tc-navy-deep); color: var(--tc-text-light); }
    .tesla-career-file-input-wrap { position: relative; }
    .tesla-career-file-label {
      display: flex; align-items: center; gap: 12px;
      background: oklch(100% 0 0 / .06); border: 1.5px dashed oklch(100% 0 0 / .25);
      border-radius: 8px; padding: 14px 16px; cursor: pointer;
      transition: border-color .2s, background .2s;
      color: oklch(65% 0.01 260); font-size: .88rem;
    }
    .tesla-career-file-label:hover {
      border-color: oklch(78% .17 80 / .5); background: oklch(100% 0 0 / .09);
      color: oklch(80% 0.01 260);
    }
    .tesla-career-file-label svg { color: var(--tc-amber); flex-shrink: 0; }
    .tesla-career-file-input-wrap input[type="file"] {
      position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
    }
    .tesla-career-submit-btn {
      background: var(--tc-amber); color: var(--tc-navy-deep);
      font-weight: 800; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
      padding: 14px 24px; border-radius: 8px; border: none; cursor: pointer; width: 100%;
      transition: background .25s, transform .2s, box-shadow .2s;
      font-family: 'Plus Jakarta Sans', sans-serif;
      display: flex; align-items: center; justify-content: center; gap: 10px;
    }
    .tesla-career-submit-btn:hover {
      background: var(--tc-amber-hover); transform: translateY(-2px);
      box-shadow: 0 8px 24px oklch(78% .17 80 / .35);
    }

    /* SUCCESS */
    .tesla-career-success {
      text-align: center; padding: 48px 24px;
      color: oklch(85% 0.01 260); display: none;
      animation: tesla-career-fade-up .6s ease forwards;
    }
    .tesla-career-success.show { display: block; }
    .tesla-career-form-inner.hidden { display: none; }

    /* FOOTER */
    .tesla-career-footer {
      background: var(--tc-navy-deep); padding: 24px 0;
      text-align: center; border-top: 1px solid oklch(100% 0 0 / .07);
    }
    .tesla-career-footer-text { color: oklch(55% 0.01 260); font-size: .83rem; margin: 0; }
    .tesla-career-footer-text a { color: var(--tc-amber); text-decoration: none; transition: color .2s; }
    .tesla-career-footer-text a:hover { color: var(--tc-amber-hover); }

    /* TOAST */
    .tesla-career-toast {
      position: fixed; bottom: 32px; right: 32px;
      background: var(--tc-forest); color: var(--tc-text-light);
      padding: 16px 24px; border-radius: 12px;
      box-shadow: 0 8px 32px oklch(0 0 0 / .2);
      z-index: 9999; display: flex; align-items: center; gap: 12px;
      font-weight: 600; font-size: .92rem;
      transform: translateY(100px); opacity: 0;
      transition: transform .4s ease, opacity .4s ease;
    }
    .tesla-career-toast.show { transform: translateY(0); opacity: 1; }

    /* ANIMATIONS */
    @keyframes tesla-career-fade-up {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .tesla-career-animate-fade-up { animation: tesla-career-fade-up .7s ease forwards; opacity: 0; }
    .tesla-career-animate-delay-1 { animation-delay: .1s; }
    .tesla-career-animate-delay-2 { animation-delay: .2s; }
    .tesla-career-animate-delay-3 { animation-delay: .3s; }
    .tesla-career-reveal { opacity: 1; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
    .tesla-career-reveal.tesla-career-visible { opacity: 1; transform: translateY(0); }
    .tesla-career-reveal-left  { opacity: 1; transform: translateX(-30px); transition: opacity .6s ease, transform .6s ease; }
    .tesla-career-reveal-left.tesla-career-visible  { opacity: 1; transform: translateX(0); }
    /*.tesla-career-reveal-right { opacity: 1; transform: translateX(30px);  transition: opacity .6s ease, transform .6s ease; }*/
    .tesla-career-reveal-right.tesla-career-visible { opacity: 1; transform: translateX(0); }

    /* RESPONSIVE */
    @media (max-width: 991px) {
      .tesla-career-hero { padding: 60px 0 100px; }
      .tesla-career-hero-img-wrap { margin-top: 48px; }
      .tesla-career-upload-img-col { min-height: 300px; }
      .tesla-career-upload-img-col img { position: relative; height: 300px; }
      .tesla-career-upload-form-col { padding: 40px 32px; min-height: auto; }
    }
    @media (max-width: 575px) {
      .tesla-career-upload-form-col { padding: 40px; }
      .tesla-career-toast { bottom: 16px; right: 16px; left: 16px; }
    }


    .pack-card .top-layer{
    transition: all .4s ease;
}

/* when highlighted */
.pack-card.package-highlight .top-layer{
    background:#305174; /* your highlight color */
    transform:scale(1.03);
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
}



.op-hours-sticky{
  position: fixed;
  bottom: 0;
  left: 0;
  width: auto;
 /*background:#200d35;*/
  color: #fff;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  z-index: 9999;
  overflow: hidden;
}

.op-hours-label{
  font-weight: bold;
  margin-right: 20px;
  white-space: nowrap;
}

.op-hours-roll{
  height: 30px; /* height of one item */
  overflow: hidden;
  position: relative;
}

.op-hours-items{
  display: flex;
  flex-direction: column;
  animation: rollHours 4s infinite linear; /* faster loop for 2 items */
}

.op-hour{
  height: 30px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Rolling animation for 2 items */
@keyframes rollHours{
  0% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

#cards {
	padding-bottom: calc(var(--numcards) * var(--card-top-offset)); /* Make place at bottom, as items will slide to that position*/
	margin-bottom: var(--card-margin); /* Don't include the --card-margin in padding, as that will affect the scroll-timeline*/
}

#card_1 {
	--index: 1;
}

#card_2 {
	--index: 2;
}

#card_3 {
	--index: 3;
}

#card_4 {
	--index: 4;
}

.card3 {
	position: sticky;
	top: 0;
	padding-top: calc(var(--index) * var(--card-top-offset));
}

@supports (animation-timeline: works) {

	@scroll-timeline cards-element-scrolls-in-body {
		source: selector(body);
		scroll-offsets:
			/* Start when the start edge touches the top of the scrollport */
			selector(#cards) start 1,
			/* End when the start edge touches the start of the scrollport */
			selector(#cards) start 0
		;
		start: selector(#cards) start 1; /* Start when the start edge touches the top of the scrollport */
		end: selector(#cards) start 0; /* End when the start edge touches the start of the scrollport */
		time-range: 4s;
	}

	.card {
		--index0: calc(var(--index) - 1); /* 0-based index */
		--reverse-index: calc(var(--numcards) - var(--index0)); /* reverse index */
		--reverse-index0: calc(var(--reverse-index) - 1); /* 0-based reverse index */
	}
	
	.card__content {
	  
		transform-origin: 50% 0%;
		will-change: transform;

		--duration: calc(var(--reverse-index0) * 1s);
		--delay: calc(var(--index0) * 1s);

		animation: var(--duration) linear scale var(--delay) forwards;
		animation-timeline: cards-element-scrolls-in-body;
	}

	@keyframes scale {
		to {
			transform:
				scale(calc(
					1.1
					-
					calc(0.1 * var(--reverse-index))
				));
		}
	}
}

/** DEBUG **/

#debug {
  position: fixed;
  top: 1em;
  left: 1em;
}
#debug::after {
  content: " Show Debug";
  margin-left: 1.5em;
  color: white;
  white-space: nowrap;
}

#debug:checked ~ main {
  --outline-width: 1px;
}


/** PAGE STYLING **/


.stack-heading {
  position: sticky;
  top: 0;
  z-index: 0;
  padding: 80px 0;
}
#cards {
   width:90%;
  margin: 0 auto;
	list-style: none;
	outline: calc(var(--outline-width) * 10) solid blue;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(var(--numcards), var(--card-height));
	gap: var(--card-margin);
}

.card3 {
  position: sticky;
  top: 290px; /* adjust based on heading height */
}
.card3 {
	outline: var(--outline-width) solid hotpink;
    /* height:50vh; */
    margin-bottom:190px;
    margin-top:100px;
}
.card__content {
	/* box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1); */
	/* background: rgb(255, 255, 255); */
	color: rgb(10, 5, 7);
	border-radius: 1em;
	overflow: hidden;

	display: grid;
	grid-template-areas: "img text";
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;

	align-items: stretch;
	outline: var(--outline-width) solid lime;
}

.card__content > div {
    min-height:450px;
	grid-area: text;

	place-self: center;
	text-align: left;

	display: grid;
	gap: 1em;
	place-items: start;
}

.card__content > figure {
	grid-area: img;
	overflow: hidden;
	margin:0px;
}

.card__content > figure > img {
	width: 100%;
	height: 100%;
	
	object-fit: cover;
}
@media (max-width: 767px) {
    #cards {
padding-bottom:50px;
}
   .card__content {
	display: block;

}
.stack-heading {
padding-bottom:10px;
}
.card3{
    margin-bottom:0px;
    margin-top:40px;
}
    }
    .tesla-blog-hero {
      height: 40vh;
      background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 40%, #c4b5fd 100%);
      padding: 120px 0 160px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    @media (max-width: 767px) {
   
 .tesla-blog-hero {
      height: auto;
      padding: 60px 0 ;
  
    }
}
@media (min-width: 767px) and (max-width: 1400px) {
.tesla-blog-hero{
        padding:150px;
}
}
    :root {
  --ts-blue: #0057b8;
  --ts-blue-lt: #0078e8;
  --ts-cyan: #ebad3bd3;
  --ts-dark: #060d1a;
  --ts-dark-2: #0b1629;
  --ts-card-dark: #0f1e38;
  --ts-light: #f0f6ff;
  --ts-light-2: #e4eeff;
  --ts-card-light: #ffffff;


  --ts-radius: 12px;
  --ts-radius-lg: 20px;
  --ts-glow: 0 0 40px rgba(0, 200, 240, 0.22);
    --tmri-primary: #d8ac66;
  --tmri-accent: #0066cc;
  --tmri-accent-2: #00aadd;
  --tmri-dark: #060b14;
  --tmri-dark-2: #080f1c;
  --tmri-card: #0d1526;
  --tmri-card-2: #111d33;
  --tmri-border: rgba(0, 212, 255, 0.18);
  --tmri-border-hover: rgba(0, 212, 255, 0.55);
  --tmri-text: #e8f4fc;
 
  --tmri-glow: 0 0 40px rgba(0, 212, 255, 0.25);
  --tmri-glow-strong: 0 0 80px rgba(0, 212, 255, 0.45);
 

  --tmri-radius: 12px;
  --tmri-radius-lg: 20px;
}
  /* HERO */
  .ts-hero-mri{
      height: 50vh; min-height: 500px;
  }
    .ts-hero { position: relative; 
    /*height: 50vh; min-height: 500px;  */
    overflow: hidden; display: flex; align-items: center; }
   .ts-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    rgba(1, 4, 10, 0.99) 0%,
    rgba(2, 6, 18, 0.95) 50%,
    rgba(3, 10, 25, 0.85) 100%
  );
  z-index: 1;
}
    .ts-hero__geo { position: absolute; z-index: 2; pointer-events: none; }
    .ts-hero__geo--c1 { width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(0,200,240,.12); top: -60px; right: 12%; animation: ts-spin 35s linear infinite; }
    .ts-hero__geo--c2 { width: 160px; height: 160px; border-radius: 50%; border: 1px solid rgba(0,200,240,.2); bottom: -20px; right: 20%; animation: ts-spin 20s linear infinite reverse; }
    .ts-hero__geo--line { width: 180px; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,200,240,.45), transparent); top: 28%; right: 6%; transform: rotate(-28deg); animation: ts-pulse 3s ease-in-out infinite; }
    .ts-hero__geo--dots { width: 110px; height: 110px; background-image: radial-gradient(circle, rgba(0,200,240,.2) 1px, transparent 1px); background-size: 15px 15px; bottom: 14%; right: 42%; opacity: .45; }
    .ts-hero__content { position: relative; z-index: 10; padding: 2rem 0; }
    .ts-hero__bc { margin-bottom: 1rem; }
    .ts-hero__bc .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: .78rem; }
    .ts-hero__bc .breadcrumb-item+.breadcrumb-item::before { color: var(--ts-text-dark-muted); }
    .ts-hero__bc .breadcrumb-item.active { color: var(--ts-cyan); }
    .ts-bc-link { color: var(--ts-text-dark-muted); text-decoration: none; transition: color .2s; }
    .ts-bc-link:hover { color: var(--ts-cyan); }
    .ts-hero__pill { display: inline-flex; align-items: center; gap: .45rem; background: rgba(0,200,240,.08); border: 1px solid rgba(0,200,240,.28); border-radius: 100px; padding: .32rem .95rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-cyan); margin-bottom: 1.1rem; }
    .ts-hero__pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ts-cyan); animation: ts-blink 1.8s ease-in-out infinite; }
    .ts-hero__h1 { font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: .9rem; }
    .ts-hero__h1 span { color: var(--ts-cyan); text-shadow: 0 0 28px rgba(0,200,240,.55); }
    .ts-hero__model { display: inline-block; background: rgba(0,87,184,.25); border: 1px solid rgba(0,200,240,.3); border-radius: 8px; padding: .3rem .85rem; font-size: .8rem; font-weight: 600; color: var(--ts-cyan); margin-bottom: 1rem; letter-spacing: .04em; }
    .ts-hero__tagline { font-size: clamp(.88rem, 1.5vw, 1.02rem); color: rgba(224,240,255,.75); max-width: 500px; margin-bottom: 1.8rem; line-height: 1.65; }
    .ts-hero__btns { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
    .ts-btn-primary { display: inline-flex; align-items: center; gap: .5rem; background: var(--ts-cyan); color: var(--ts-dark); border: none; border-radius: var(--ts-radius); padding: .75rem 1.7rem; font-family: var(--ts-font-body); font-size: .9rem; font-weight: 700; cursor: pointer; transition: transform .25s, box-shadow .25s; text-decoration: none; position: relative; overflow: hidden; }
    .ts-btn-primary::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.15); opacity: 0; transition: opacity .25s; }
    .ts-btn-primary:hover::before { opacity: 1; }
    .ts-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,200,240,.45); }
    .ts-btn-outline { display: inline-flex; align-items: center; gap: .5rem; background: transparent; color: var(--ts-cyan); border: 1.5px solid rgba(0,200,240,.5); border-radius: var(--ts-radius); padding: .75rem 1.7rem; font-family: var(--ts-font-body); font-size: .9rem; font-weight: 600; cursor: pointer; transition: transform .25s, background .25s, border-color .25s; }
    .ts-btn-outline:hover { background: rgba(0,200,240,.08); border-color: var(--ts-cyan); transform: translateY(-2px); }
    .ts-hero__img-col { position: relative; z-index: 10; display: flex; justify-content: center; }
    .ts-hero__img-wrap { position: relative; display: inline-block; }
    .ts-hero__img-glow { position: absolute; inset: -20%; background: radial-gradient(ellipse, rgba(0,200,240,.18) 0%, transparent 70%); pointer-events: none; animation: ts-glow-pulse 4s ease-in-out infinite; }
    .ts-hero__img { max-width: 100%;
    /*max-height: 42vh; */
    object-fit: contain; filter: drop-shadow(0 20px 55px rgba(0,200,240,.28)); animation: ts-float 6s ease-in-out infinite; }
    .ts-hero__square { display: inline-flex; align-items: center; gap: .45rem;
    background: #6457c3; border: 1px solid rgba(0,200,240,.28); border-radius: 10px; 
    padding: 15px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: white; margin-bottom: 1.1rem; }

@keyframes ts-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes ts-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@keyframes ts-glow-pulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
@keyframes ts-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.9;
  }
}
@keyframes ts-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

@media (max-width: 991.98px) {
  .ts-hero {
    height: auto;
    min-height: 50vh;
    padding: 4rem 0;
    background-attachment: scroll;
  }
  .ts-hero__img-col {
    margin-top: 2rem;
  }
  .ts-hero__img {
    max-height: 250px;
  }
}
@media (max-width: 575.98px) {
  .ts-hero__h1 {
    font-size: 2rem;
  }
  .ts-heading {
    font-size: 1.6rem;
  }
  .ts-cta-heading {
    font-size: 1.7rem;
  }
   .ts-hero__content {  padding: 0; 
       padding-left:15px;
   }

}
@media (min-width: 767px) and (max-width: 1400px) {
     .ts-hero__content h1 {
    font-size: 38px;
  }
}


.tmri-overview__section {
 
  padding: 5rem 0;
  background: white;
}
.tmri-overview__img-wrapper {
  position: relative;
  border-radius: var(--tmri-radius-lg);
  overflow: hidden;
}
.tmri-overview__img-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 212, 255, 0.15) 0%,
    transparent 70%
  );
  z-index: 0;
  pointer-events: none;
}
.tmri-overview__img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--tmri-radius-lg);
  border: 1px solid var(--tmri-border);
  position: relative;
  z-index: 1;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}
.tmri-overview__img:hover {
  transform: scale(1.02);
  box-shadow: var(--tmri-glow);
}
.tmri-overview__heading {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: black;
  line-height: 1.25;
  margin-bottom: 1.2rem;
}
.tmri-overview__body {
  color: black;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.tmri-overview__highlights {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.tmri-overview__highlights li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: black;
}
.tmri-overview__check {
  color: #d8ac66;
  font-weight: 700;
  flex-shrink: 0;
}
/* ── FEATURES ── */
.tmri-features__section {
  padding: 5rem 0;
  background: var(--tmri-dark);
}
.tmri-features__card {
  background: var(--tmri-card);
  border: 1px solid var(--tmri-border);
  border-radius: var(--tmri-radius-lg);
  padding: 2rem 1.6rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    border-color 0.3s;
}
.tmri-features__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--tmri-primary),
    transparent
  );
  opacity: 0;
  transition: opacity 0.3s;
}
.tmri-features__card:hover::before {
  opacity: 1;
}
.tmri-features__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 50px rgba(0, 212, 255, 0.2);
  border-color: var(--tmri-border-hover);
}
.tmri-features__card-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}
.tmri-features__card-title {

  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tmri-text);
  margin-bottom: 0.75rem;
}
.tmri-features__card-desc {
  font-size: 0.875rem;
  color:white;
  line-height: 1.65;
  margin: 0;
}
.tmri-features__card-line {
  position: absolute;
  bottom: 0;
  left: 1.6rem;
  width: 40px;
  height: 2px;
  background: var(--tmri-primary);
  opacity: 0.4;
  border-radius: 2px;
}
/* ── CLINICAL ── */
.tmri-clinical__section {
  padding: 5rem 0;
  background: white;
}
.tmri-clinical__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin: 2rem 0;
}
.tmri-clinical__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  color:black;
  border: 1px solid var(--tmri-border);
  border-radius: 10px;
  padding: 0.6rem 1.4rem;
  font-family: var(--tmri-font-body);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s;
}
.tmri-clinical__tab:hover {
  border-color: rgba(0, 212, 255, 0.4);
  color: #3730a3;
}
.tmri-clinical__tab.active {
  background: #3d3289;
  border-color: var(--tmri-primary);
  color: var(--tmri-primary);
  font-weight: 600;
}
.tmri-clinical__panel {
  background: var(--tmri-card);
  border: 1px solid var(--tmri-border);
  border-radius: var(--tmri-radius-lg);
  overflow: hidden;
}
.tmri-clinical__content {
  padding: 3rem 2.5rem;
  text-align: center;
  animation: tmri-fade-in 0.4s ease;
  display: none;
}
.tmri-clinical__content.active {
  display: block;
}
.tmri-clinical__content-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}
.tmri-clinical__content-title {

  font-size: 1.6rem;
  font-weight: 700;
  color: var(--tmri-primary);
  margin-bottom: 1rem;
}
.tmri-clinical__content-desc {
  color: white;
  max-width: 680px;
  margin: 0 auto;
  font-size: 0.975rem;
  line-height: 1.7;
}

/* FAQ */
.ts-faq-item {
  border-bottom: 1px solid var(--ts-border-light);
  padding: 1.4rem 0;
}
.ts-faq-item:last-child {
  border-bottom: none;
}
.ts-faq-q {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ts-text-light);
  margin-bottom: 0.55rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
}
.ts-faq-q-icon {
  color: var(--ts-blue);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
  transition: transform 0.3s;
}
.ts-faq-item.open .ts-faq-q-icon {
  transform: rotate(45deg);
}
.ts-faq-a {
  font-size: 0.9rem;
  color: var(--ts-text-light-muted);
  line-height: 1.7;
  display: none;
  padding-right: 2rem;
}
.ts-faq-item.open .ts-faq-a {
  display: block;
}

/* ── RELATED MRI SECTION ── */
.tmri-related__section {
  padding: 5rem 0;
  /*background: var(--tmri-dark);*/
  background:white;
}
.tmri-related__card {
  background: var(--tmri-card);
  border: 1px solid #d8ac6669;
  border-radius: var(--tmri-radius-lg);
  overflow: hidden;
  transition:
    transform 0.35s,
    box-shadow 0.35s,
    border-color 0.35s;
  cursor: pointer;
  text-decoration: none;
  display: block;
  height: 100%;
}
.tmri-related__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 212, 255, 0.25);
  border-color: var(--tmri-border-hover);
}
.tmri-related__img-wrap {
  position: relative;
  overflow: hidden;
}
.tmri-related__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.45s ease;
  display: block;
}
.tmri-related__card:hover .tmri-related__img {
  transform: scale(1.07);
}
.tmri-related__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(6, 11, 20, 0.85) 100%
  );
}
.tmri-related__badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: #3d3289;
  border-radius: 100px;
  padding: 0.25rem 0.85rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--tmri-primary);
  text-transform: uppercase;
}
.tmri-related__body {
  padding: 1.4rem 1.5rem 1.6rem;
}
.tmri-related__title {

  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tmri-text);
  margin-bottom: 0.5rem;
  line-height: 1.3;
  transition: color 0.2s;
}
.tmri-related__card:hover .tmri-related__title {
  color: var(--tmri-primary);
}
.tmri-related__desc {
  font-size: 0.82rem;
  color: white;
  margin-bottom: 1rem;
  line-height: 1.55;
}
.tmri-related__arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tmri-primary);
  transition: gap 0.2s;
}
.tmri-related__card:hover .tmri-related__arrow {
  gap: 0.7rem;
}

/* ── CTA ── */
.tmri-cta__section {
  padding: 5rem 0;
  background: white;
  position: relative;
  overflow: hidden;
}
.tmri-cta__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(
    ellipse,
    rgba(0, 212, 255, 0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.tmri-cta__heading {

  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  color: #212529;
  line-height: 1.2;
  margin-bottom: 1.2rem;
}
.tmri-cta__sub {
  color: white;
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto 2rem;
}
.tmri-cta__btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.faq-section {
    padding-top:70px;
    padding-bottom:70px;
  background: linear-gradient(90deg, #f4f6f9, #d7ebe5);
}

.faq-tag {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #3d3289;
  border-radius: 6px;
  color: #3d3289;
  font-size: 14px;
  margin-bottom: 15px;
}

.faq-title {
  font-size: 38px;
  font-weight: 700;
}

.faq-desc {
  color: #666;
  line-height: 1.6;
}

.btn-contact {
  background: #1abc9c;
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  transition: 0.3s;
}

.btn-contact:hover {
  background: #16a085;
}

/* ACCORDION STYLE */
.custom-accordion .accordion-item {
  border: none;
  margin-bottom: 15px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.custom-accordion .accordion-button {
  background: #ffffff;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.custom-accordion .accordion-button:not(.collapsed) {
  background: #e8f8f5;
  color: #3d3289;
}

.custom-accordion .accordion-body {
  background: #f9f9f9;
  color: #555;
  line-height: 1.7;
  animation: fadeIn 0.4s ease;
}

/* SMOOTH ANIMATION */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mri-hero-section {
      /*background: linear-gradient(135deg, #e0d7f8 0%, #cce4ff 50%, #d4f0ff 100%);*/
      padding: 80px 0;
      overflow: hidden;
      position: relative;
    }

    .mri-section-tag {
      display: inline-block;
      background: rgba(109, 76, 255, 0.12);
      color: #6d4cff;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: 50px;
      margin-bottom: 14px;
    }
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes floatLeftRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-10px); }
}

@keyframes floatDiagonal1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-8px, -8px); }
}

@keyframes floatDiagonal2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(8px, -8px); }
}
.mri-card-top-left {
  animation: floatDiagonal1 4s ease-in-out infinite;
}

.mri-card-top-right {
  animation: floatDiagonal2 4s ease-in-out infinite;
}

.mri-card-bot-left {
  animation: floatLeftRight 4s ease-in-out infinite;
}

.mri-card-bot-right {
  animation: floatUpDown 4s ease-in-out infinite;
}
.mri-card-top-left { animation-delay: 0s; }
.mri-card-top-right { animation-delay: 0.5s; }
.mri-card-bot-left { animation-delay: 1s; }
.mri-card-bot-right { animation-delay: 1.5s; }
    .mri-section-title {
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 800;
      color: #1a1340;
      line-height: 1.25;
      margin-bottom: 16px;
    }

    .mri-section-title span {
      color: #6457c3;
    }

    .mri-section-desc {
      color: #5a5a7a;
      font-size: 1rem;
      line-height: 1.7;
      max-width: 420px;
    }

    /* ===== Center Image ===== */
    .mri-image-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 480px;
    }

    .mri-oval-frame {
      width: 400px;
      height: 400px;
      border-radius: 50%;
      overflow: hidden;
      border: 5px solid rgba(255, 255, 255, 0.85);
      box-shadow: 0 20px 60px rgba(109, 76, 255, 0.15);
      z-index: 2;
      position: relative;
    }

    .mri-oval-frame img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform 0.6s ease;
    }

    .mri-oval-frame:hover img {
      transform: scale(1.05);
    }

    /* ===== Feature Cards ===== */
    .mri-feat-card {
      background:#060b14;
      border-radius: 18px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: 0 8px 32px rgba(109, 76, 255, 0.14);
      position: absolute;
      min-width: 200px;
      color:white;
      max-width: 230px;
      z-index: 10;
      transition: transform 0.35s ease, box-shadow 0.35s ease;
      cursor: default;
    }

    .mri-feat-card:hover {
      transform: translateY(-6px) scale(1.03);
      box-shadow: 0 16px 40px rgba(109, 76, 255, 0.22);
    }

    .mri-feat-icon {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      flex-shrink: 0;
    }

    .mri-feat-icon-purple { background: #ede9ff; color: #6d4cff; }
    .mri-feat-icon-blue   { background: #e0f0ff; color: #1a7cff; }
    .mri-feat-icon-teal   { background: #d6f5f0; color: #0bbfa3; }
    .mri-feat-icon-pink   { background: #ffe4f0; color: #f0479a; }

    .mri-feat-value {
      font-size: 1.05rem;
      font-weight: 800;
      color:white;
      line-height: 1.1;
    }

    .mri-feat-label {
      font-size: 0.78rem;
      color: white;
      margin-top: 2px;
    }

    /* Card Positions */
    .mri-card-top-left    { top: 8%;  left: -10%; }
    .mri-card-top-right   { top: 8%;  right: -10%; }
    .mri-card-bot-left    { bottom: 8%; left: -10%; }
    .mri-card-bot-right   { bottom: 8%; right: -10%; }

    /* ===== Floating dots decoration ===== */
    .mri-dot {
      position: absolute;
      border-radius: 50%;
      opacity: 0.18;
      animation: mri-float 5s ease-in-out infinite;
    }
    .mri-dot-1 { width: 90px; height: 90px; background: #6d4cff; top: 5%; left: 5%; animation-delay: 0s; }
    .mri-dot-2 { width: 55px; height: 55px; background: #1a7cff; bottom: 10%; right: 8%; animation-delay: 1.5s; }
    .mri-dot-3 { width: 35px; height: 35px; background: #0bbfa3; top: 55%; left: 2%; animation-delay: 3s; }

    @keyframes mri-float {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-14px); }
    }

    /* ===== Responsive ===== */
    @media (max-width: 991px) {
      .mri-image-wrapper {
        min-height: 520px;
        margin-top: 40px;
      }

      .mri-card-top-left  { top: 2%;  left: 0; }
      .mri-card-top-right { top: 2%;  right: 0; }
      .mri-card-bot-left  { bottom: 2%; left: 0; }
      .mri-card-bot-right { bottom: 2%; right: 0; }

      .mri-feat-card { min-width: 160px; max-width: 175px; padding: 10px 12px; }
      .mri-feat-icon { width: 38px; height: 38px; font-size: 1.1rem; }
      .mri-feat-value { font-size: 0.92rem; }
    }

    @media (max-width: 575px) {
      .mri-image-wrapper {
        min-height: 440px;
      }
      .mri-oval-frame { width: 230px; height: 295px; }
      .mri-feat-card { min-width: 140px; max-width: 150px; gap: 8px; padding: 9px 10px; }
      .mri-feat-value { font-size: 0.82rem; }
      .mri-feat-label { font-size: 0.7rem; }
    }
    
    /*testimonial*/
    .hema-banner .tesla-cntct-hero__content {
        text-align:left;
    }
    .hema-testi-section {
  padding: 72px 0;
  background: var(--hema-bg);
  transition: background-color 0.4s ease;
  overflow: hidden;
}
.hema-testi-track-wrap {
  overflow: hidden;
  margin-top: 44px;
  position: relative;
}
.hema-testi-track-wrap::before,
.hema-testi-track-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.hema-testi-track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--hema-bg), transparent);
}
.hema-testi-track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--hema-bg), transparent);
}
.hema-testi-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: hemaScrollTrack 40s linear infinite;
}
.hema-testi-track:hover {
  animation-play-state: paused;
}
@keyframes hemaScrollTrack {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.hema-testi-card {
  background: #efedff;
  border: 1.5px solid #c8c5dd;
  border-radius:20px;
  padding: 28px 26px;
  width: 320px;
  flex-shrink: 0;
  transition: var(--hema-transition);
  position: relative;
}
.hema-testi-card:hover {
  border-color: var(--hema-accent);
  box-shadow: var(--hema-shadow-lg);
  transform: translateY(-4px);
}
.hema-testi-card::before {
  content: "\201C";
  position: absolute;
  top: 14px;
  right: 20px;
  font-family: var(--hema-font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--hema-accent);
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.hema-testi-card:hover::before {
  opacity: 0.22;
}
.hema-testi-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}
.hema-testi-stars i {
  color: #f59e0b;
  font-size: 0.9rem;
}
.hema-testi-quote {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--hema-text-secondary);
  margin-bottom: 20px;
  font-style: italic;
  transition: color 0.4s ease;
}
.hema-testi-divider {
  width: 36px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--hema-accent),
    var(--hema-accent-light)
  );
  border-radius: 2px;
  margin-bottom: 16px;
  transition: width 0.4s ease;
}
.hema-testi-card:hover .hema-testi-divider {
  width: 56px;
}
.hema-testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hema-testi-avatar img{
    border-radius:50px;
}
.hema-testi-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  transition: transform 0.35s ease;
}
.hema-testi-card:hover .hema-testi-avatar {
  transform: scale(1.08);
}
.hema-testi-avatar-1 {
  background: linear-gradient(135deg, #a78bfa, #f472b6);
}

.hema-testi-avatar-2 {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.hema-testi-avatar-3 {
  background: linear-gradient(135deg, #9333ea, #db2777);
}

.hema-testi-avatar-4 {
  background: linear-gradient(135deg, #c084fc, #f9a8d4);
}

.hema-testi-avatar-5 {
  background: linear-gradient(135deg, #7c3aed, #f472b6);
}

.hema-testi-avatar-6 {
  background: linear-gradient(135deg, #a855f7, #ec4899);
}
.hema-testi-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--hema-text-primary);
  transition: color 0.3s ease;
}
.hema-testi-card:hover .hema-testi-name {
  color: var(--hema-accent);
}
.hema-testi-role {
  font-size: 0.76rem;
  color: var(--hema-text-muted);
  margin-top: 2px;
}
.hema-testi-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--hema-bg-secondary);
  border: 1px solid var(--hema-border-strong);
  border-radius: 50px;
  padding: 2px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--hema-accent);
  margin-top: 4px;
}
[data-hema-theme="dark"] .hema-testi-tag {
  background: #0d2421;
}
.hema-testi-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding: 28px 32px;
  background: var(--hema-surface);
  border: 1.5px solid var(--hema-border);
  border-radius: var(--hema-radius);
  transition: var(--hema-transition);
}
.hema-testi-summary:hover {
  border-color: var(--hema-accent);
  box-shadow: var(--hema-shadow);
}
.hema-testi-summary-item {
  text-align: center;
}
.hema-testi-summary-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--hema-accent);
  line-height: 1;
}
.hema-testi-summary-label {
  font-size: 0.78rem;
  color: var(--hema-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.hema-testi-summary-divider {
  width: 1px;
  height: 40px;
  background: var(--hema-border-strong);
}
@media (max-width: 576px) {
  .hema-testi-summary-divider {
    display: none;
  }
}
.tmri-glass-btn {
  width: 100%;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);

  background: rgba(255, 255, 255, 0.12); /* increased visibility */

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color: #fff;
  font-size: 14px;
  font-weight: 500;

  transition: all 0.3s ease;
}

/* Hover */
.tmri-glass-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
/* Hover Effect */
.tmri-glass-btn:hover {
  transform: translateY(-5px) scale(1.03);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.tmri-glass-btn:hover::before {
  opacity: 1;
}

/* Active / Click */
.tmri-glass-btn:active {
  transform: scale(0.96);
}

/* Dark background support */
.tmri-clinical__content {
  position: relative;
}
.tmri-clinical__content::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(59,130,246,0.25);
  filter: blur(100px);
  top: -50px;
  left: -50px;
}

     /* ===== BANNER ===== */
    .mct-banner {
      height: calc(100vh - 70px);
      width: 100vw;
      overflow: hidden;
      background:#221b53;
      /*background: radial-gradient(ellipse at 65% 35%, #1a1a1a 0%, #121212 55%, #050505 100%);*/
      position: relative;
      display: flex;
      align-items: center;
    }

    /* subtle grid */
    .mct-banner::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
      z-index: 0;
    }

    /* glow orbs */
    .mct-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
      z-index: 0;
    }
    .mct-orb--red  { width:520px; height:520px; background:rgba(220,38,38,0.13);  top:-120px; right:-100px; animation: mct-orb 9s ease-in-out infinite; }
    .mct-orb--blue { width:400px; height:400px; background:rgba(37,99,235,0.07);  bottom:60px; left:-80px;  animation: mct-orb 11s ease-in-out infinite 4s; }
    @keyframes mct-orb { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.12)} }

    /* ===== PLAIN STATIC ROAD STRIP (no dashes, no animation) ===== */
    .mct-road {
      position: absolute;
      bottom: 0; left: 0;
      width: 100%; height: 68px;
      background: #0c0c0c;
      border-top: 2px solid #1e1e1e;
      z-index: 1;
    }

    /* ===== AMBULANCE TRACK ===== */
    .mct-amb-track {
      position: absolute;
      bottom: -40px; left: 0;
      width: 100%;
      z-index: 2;
      pointer-events: none;
    }

    .mct-amb-wrap {
      position: absolute;
      bottom: 0;
      animation: mct-drive 18s linear infinite;
    }
    .mct-amb-wrap--two {
      animation-duration: 26s;
      animation-delay: 11s;
      bottom: 2px;
    }
    @keyframes mct-drive {
      0%   { transform: translateX(-120px); }
      100% { transform: translateX(calc(100vw + 120px)); }
    }

    .mct-amb-svg {
      width: 200px;
      height: auto;
      filter: drop-shadow(0 6px 20px rgba(220,38,38,0.25));
      animation: mct-bounce 0.55s ease-in-out infinite alternate;
    }
    .mct-amb-svg--sm { width: 230px; opacity: 0.85; }
    @keyframes mct-bounce {
      from { transform: translateY(0); }
      to   { transform: translateY(-4px); }
    }

    /* wheel spin */
    .mct-whl { animation: mct-spin 0.7s linear infinite; }
    @keyframes mct-spin { to { transform: rotate(360deg); } }

    /* light flash */
    .mct-lr { animation: mct-flash 0.7s step-start infinite; }
    .mct-lb { animation: mct-flash 0.7s step-start infinite 0.35s; }
    @keyframes mct-flash { 0%,100%{opacity:1} 50%{opacity:0.08} }

    /* ===== CONTENT ===== */
    .mct-content {
      position: relative;
      z-index: 10;
      width: 100%;
      padding-bottom: 80px;
    }

    .mct-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      /* background: rgba(220,38,38,0.12); */
      border: 1px solid #3d328985;
      color: white;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      padding: 5px 16px;
      border-radius: 50px;
      animation: mct-fadein 0.8s ease both;
    }
    .mct-dot {
      width: 7px; height: 7px;
      background: #ef4444;
      border-radius: 50%;
      animation: mct-blink 1.2s ease-in-out infinite;
    }
    @keyframes mct-blink { 0%,100%{opacity:1} 50%{opacity:0.15} }

    .mct-h1 {
      font-size: clamp(1.9rem, 2.7rem, 4rem);
      font-weight: 800;
      color: #f8fafc;
      line-height: 1.12;
      letter-spacing: -0.5px;
      animation: mct-fadeup 0.9s ease 0.2s both;
    }
    .mct-h1 em { 
      font-style:normal; 
      color:#3d3289;
       }

    .mct-sub {
      font-size: clamp(0.85rem, 1.5vw, 1rem);
      color: #94a3b8;
      line-height: 1.8;
      max-width: 520px;
      animation: mct-fadeup 0.9s ease 0.38s both;
    }

    .mct-feature {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 14px;
      padding: 20px 22px;
      animation: mct-fadeup 0.9s ease 0.52s both;
      transition: background .3s, border-color .3s;
    }
    .mct-feature:hover {
      background: rgba(255,255,255,0.055);
      border-color: rgba(239,68,68,0.28);
    }
    .mct-feature-icon { font-size: 2.2rem; flex-shrink:0; line-height:1; }
    .mct-feature-title { font-size:.95rem; font-weight:700; color:#f1f5f9; margin-bottom:5px; }
    .mct-feature-desc  { font-size:.82rem; color:white; line-height:1.65; }

    .mct-cta { animation: mct-fadeup 0.9s ease 0.66s both; }



    /* right panel */
    .mct-panel {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 20px;
      padding: 34px 26px;
      text-align: center;
      animation: mct-faderight 1s ease 0.3s both;
    }
    .mct-panel-icon  { font-size:4.2rem; display:block; animation: mct-float 5s ease-in-out infinite; }
    @keyframes mct-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-13px)} }
    .mct-panel-stat  { font-size:3rem; font-weight:800;  line-height:1; }
    .mct-panel-lbl   { font-size:.82rem; color:white; margin-top:4px; }
    .mct-sep { width:34px; height:2px; background:rgba(239,68,68,0.35); border-radius:2px; margin:16px auto; }
    .mct-pill {
      display:inline-block;
      background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09);
      color:#cbd5e1; font-size:.72rem; font-weight:600;
      padding:4px 11px; border-radius:50px; margin:3px;
      transition:background .25s;
    }
    .mct-pill:hover { background:rgba(239,68,68,0.14); border-color:rgba(239,68,68,0.32); }
    .mct-info-line { font-size:.76rem; color:#475569; line-height:2.1; }
    .mct-info-line strong { color:#f59e0b; }

    @keyframes mct-fadein    { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }
    @keyframes mct-fadeup    { from{opacity:0;transform:translateY(24px)}  to{opacity:1;transform:translateY(0)} }
    @keyframes mct-faderight { from{opacity:0;transform:translateX(30px)}  to{opacity:1;transform:translateX(0)} }

    @media(max-width:991px){
      .mct-panel{display:none}
      .mct-content{text-align:center}
      .mct-sub{max-width:100%;margin:0 auto}
      .mct-feature{text-align:left}
      .mct-cta{justify-content:center!important}
    }
    @media(max-height:640px){
      .mct-h1{font-size:1.7rem}
      .mct-sub{font-size:.8rem}
      .mct-feature{padding:12px 14px}
    }
       .scs-section-wrapper {
      background-color: #ebedf5;
    }

    /* ---- Sticky Heading Block ---- */
    .scs-heading-block {
      position: sticky;
      top: 5%;
      z-index: 100;
      background-color: #ebedf5;
      padding: 48px 20px 28px;
      text-align: center;
    }

    .scs-main-title {
      font-size: clamp(1.5rem, 3vw, 38px);
      font-weight:bold;
      color: var(--ztc-text-text-2);
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: 0.5rem;
    }

    .scs-main-subtitle {
      font-size: clamp(0.875rem, 1.5vw, 1.0625rem);
      color: #4b5680;
      max-width: 560px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* ---- Card Slot ---- */
    .scs-card-slot {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
    }

    /* ---- Card Item (sticky within slot) ---- */
    .scs-card-item {
      position: sticky;
      top: 270px;
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
    }

    /* ---- Card ---- */
    .scs-card {
      display: flex;
      flex-direction: row;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(13, 27, 62, 0.16), 0 2px 8px rgba(13, 27, 62, 0.08);
      min-height: 380px;
    }

    /* ---- Left Panel ---- */
    .scs-left-panel {
      background-color: #0d1b3e;
      flex: 0 0 42%;
      max-width: 42%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 32px 20px 32px 48px;
      overflow: hidden;
    }

    .scs-vertical-label {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%) rotate(180deg);
      writing-mode: vertical-rl;
      text-orientation: mixed;
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.45);
      white-space: nowrap;
      user-select: none;
    }

    .scs-location-text {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 0.8125rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.85);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 14px;
      align-self: flex-start;
      margin-left: 4px;
    }

    .scs-pin-icon {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      color: #a78bfa;
    }

    .scs-img-wrapper {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 280px;
    }

    .scs-mri-img {
      width: 100%;
      max-width: 240px;
      height: auto;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 4px 24px rgba(167, 139, 250, 0.25));
    }

    /* ---- Right Panel ---- */
    .scs-right-panel {
      flex: 1;
      background-color: #ffffff;
      padding: 40px 44px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .scs-badge-wrap {
      margin-bottom: 16px;
    }

    .scs-badge {
      display: inline-block;
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #6d28d9;
      border: 1.5px solid #a78bfa;
      border-radius: 100px;
      padding: 4px 14px;
      background: #f5f3ff;
    }

    .scs-card-heading {
      font-size: clamp(1.125rem, 2vw, 1.5rem);
      font-weight: 700;
      color: #0d1b3e;
      line-height: 1.25;
      /*letter-spacing: -0.02em;*/
      margin-bottom: 14px;
    }

    .scs-card-desc {
      font-size: 0.9375rem;
      color: #6b7280;
      line-height: 1.65;
      margin-bottom: 22px;
    }

    .scs-features-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 24px;
    }

    .scs-feature-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.875rem;
      font-weight: 600;
      color: #374151;
    }

    .scs-feat-dot {
      width: 8px;
      height: 8px;
      min-width: 8px;
      border-radius: 50%;
      background-color: #f59e0b;
      display: inline-block;
    }

    /* ---- Footer ---- */
    .scs-footer {
      text-align: center;
      padding: 32px 20px;
      color: #8390b0;
      font-size: 0.875rem;
    }

    .scs-footer a {
      color: #6d28d9;
      text-decoration: none;
      font-weight: 600;
    }

    .scs-footer a:hover {
      text-decoration: underline;
    }

    /* =============================================
       Z-index per card — later cards stack on top
       ============================================= */
    .scs-card-slot:nth-child(2) .scs-card-item { z-index: 1; }
    .scs-card-slot:nth-child(3) .scs-card-item { z-index: 2; }
    .scs-card-slot:nth-child(4) .scs-card-item { z-index: 3; }
    .scs-card-slot:nth-child(5) .scs-card-item { z-index: 4; }

    /* =============================================
       Responsive — Mobile (<768px)
       ============================================= */
    @media (max-width: 767.98px) {
      .scs-heading-block {
        position: static;
        padding: 40px 16px 20px;
      }

      .scs-card-slot {
        height: auto;
        padding: 0 12px 24px;
      }

      .scs-card-item {
        position: static;
      }

      .scs-card {
        flex-direction: column;
        min-height: unset;
      }

      .scs-left-panel {
        flex: unset;
        max-width: 100%;
        width: 100%;
        padding: 28px 20px;
        min-height: 240px;
      }

      .scs-vertical-label {
        left: 8px;
      }

      .scs-right-panel {
        padding: 28px 24px;
      }

      .scs-img-wrapper {
        max-width: 200px;
      }
    }

    /* =============================================
       Responsive — Tablet (768px–1024px)
       ============================================= */
    @media (min-width: 768px) and (max-width: 1023.98px) {
      .scs-card-item {
        top: 155px;
      }

      .scs-left-panel {
        flex: 0 0 44%;
        max-width: 44%;
        padding: 28px 16px 28px 40px;
      }

      .scs-right-panel {
        padding: 32px 28px;
      }

      .scs-img-wrapper {
        max-width: 220px;
      }
    }
    
    .tmri-related__badge--right {
  position: absolute;
  top: 16px;
  right: 10px;
}
.tmri-related__badge1 {
  position: absolute;
width:120px;
text-align: center  ;
  background: #3d3289;
  border-radius: 100px;
  padding: 0.25rem 0.85rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: white;
  text-transform: uppercase;
}
/* whysection */
.why-section {
  /* background: #f7f7f7; */
   animation: fadeIn 1s ease forwards;
}
/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.why-section h2 {
  margin-bottom: 40px;
}


/* Testimonial */
.testimonial-card {
    padding: 20px;
    border-radius: 15px;
  /* background: #dff4c8; */
  background: #edfaed;
  background-image: url(/assets/images/mark/mark-icon.png);
    transition: transform .3s ease, box-shadow .3s ease;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}
.quote-icon {
  font-size: 30px;
  opacity: 0.7;
  line-height: 0.7;
}
.nav-btn {
  background: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
  transition: background .3s ease, transform .3s ease;
}
.nav-btn:hover {
  background: #eef0ee;
  transform: scale(1.1);
}

/* Right Grid Layout */
.right-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  animation: slideUp .8s ease forwards;
}

/* Slide-up animation */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(25px); }
  to   { opacity: 1; transform: translateY(0); }
}

.grid-item {
  border-radius: 16px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}

/* Floating effect on hover */
.grid-item:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

.big-img img,
.small-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
   transition: transform .5s ease;
}
.big-img:hover img,
.small-img:hover img {
  transform: scale(1.08);
}

/* Colored Cards */
.pink-card {
  background: #dfdbff;
  padding: 25px 10px;
}
.pinklt-card {
  background:#ecdcef;
  padding: 25px 10px;
}
.blue-card {
  background: #d3e2ff;
  padding: 25px 10px;
}
.pink-card,
.blue-card {
  transition: transform .35s ease, box-shadow .35s ease;
}
.pink-card:hover {
  box-shadow: 0 8px 20px rgba(255, 100, 200, 0.25);
}
.blue-card:hover {
  box-shadow: 0 8px 20px rgba(80, 120, 255, 0.25);
}

.emoji {
  font-size: 32px;
}

/* Responsive */
@media (max-width: 768px) {
  .right-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 576px) {
  .right-grid {
    grid-template-columns: 1fr;
  }
}
.equal-row {
  display: flex;
  align-items: stretch; /* Make columns equal height */
}

.equal-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.testimonial-card {
  flex: 1; /* Expands inside left column */
}

.right-grid {
  flex: 1; /* Expands inside right column */
}
.testimonial-list {
  list-style: none;
  padding-left: 0;
}

.testimonial-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  line-height: 1.6;
  font-weight: 500;
}

.testimonial-list li::before {
  content: "➤";
  position: absolute;
  left: 0;
  top: 2px;
  color: #ffc107;
  font-size: 14px;
}
@media (min-width: 767px) and (max-width: 1400px) {
 .service-card h3 {
       
      font-size: 22px;
     
    }
    .service-card{
        padding:20px;
    }
    .partner-title{
        font-size:34px;
    }
    .card-figure img{
        height:150px;
    }
    .card-figure{
        height:150px;
    }
    .card3 {
  position: sticky;
  top: 190px; /* adjust based on heading height */
}

.card__content > div {
    min-height:350px;

}
.benefites-widget-boxarea .icons p{
    font-size:34px;
}
.service-benefites-section-area .benefites-box .benefites-widget-boxarea .icons{
    height:70px;
    width:70px;
    line-height:70px;
}
.banner-op-text h1{
    font-size:38px;
}
.funfact-one__item h3{
    font-size:20px;
}
.digital-lab-content h2{
   
    font-size:34px;
}

}

  /* ============================
       ROOT & BASE
    ============================ */
    :root {
      --mri-primary: #1a5f9e;
      --mri-primary-dark: #0f3d6b;
      --mri-teal: #0d9488;
      --mri-teal-light: #ccfbf1;
      --mri-gold: #f59e0b;
      --mri-gold-hover: #d97706;
      --mri-light-bg: #f0f6ff;
      --mri-border: #dee2e6;
      --mri-text: #1e293b;
      --mri-muted: #64748b;
      --mri-white: #ffffff;
    }

  
    /* ============================
       TOP BAR
    ============================ */
    .mri-blog-topbar {
      background: #0f172a;
      color: #cbd5e1;
      font-size: 0.82rem;
      padding: 7px 0;
    }

    .mri-blog-topbar a {
      color: #94a3b8;
      transition: color 0.2s;
    }

    .mri-blog-topbar a:hover { color: var(--mri-gold); }

    .mri-blog-topbar .mri-blog-topbar-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-right: 20px;
    }

    /* ============================
       NAVBAR
    ============================ */
    .mri-blog-navbar {
      background: var(--mri-white);
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      padding: 14px 0;
      transition: box-shadow 0.3s ease;
    }

    .mri-blog-navbar.mri-blog-scrolled {
      box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    }

    .mri-blog-brand {
      font-size: 1.45rem;
      font-weight: 800;
      color: var(--mri-primary) !important;
      letter-spacing: -0.5px;
    }

    .mri-blog-brand span {
      color: var(--mri-teal);
    }

    .mri-blog-navbar .nav-link {
      color: var(--mri-text) !important;
      font-weight: 500;
      font-size: 0.92rem;
      padding: 8px 14px !important;
      border-radius: 6px;
      transition: background 0.2s, color 0.2s;
    }

    .mri-blog-navbar .nav-link:hover,
    .mri-blog-navbar .nav-link.active {
      background: var(--mri-light-bg);
      color: var(--mri-primary) !important;
    }

    .mri-blog-navbar .mri-blog-nav-cta {
      background: var(--mri-primary);
      color: var(--mri-white) !important;
      border-radius: 6px;
      padding: 8px 20px !important;
    }

    .mri-blog-navbar .mri-blog-nav-cta:hover {
      background: var(--mri-primary-dark);
      color: var(--mri-white) !important;
    }

    

    /* ============================
       MAIN LAYOUT
    ============================ */
    .mri-blog-main-wrapper {
      background: #f8fafc;
      padding: 48px 0 64px;
    }

    /* ============================
       ARTICLE META
    ============================ */
    .mri-blog-article-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
      padding: 16px 0;
      border-bottom: 1px solid var(--mri-border);
      margin-bottom: 24px;
      font-size: 0.85rem;
      color: var(--mri-muted);
    }

    .mri-blog-author-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--mri-primary);
    }

    .mri-blog-author-name {
      font-weight: 600;
      color: var(--mri-text);
    }

    .mri-blog-meta-divider {
      width: 4px;
      height: 4px;
      background: var(--mri-border);
      border-radius: 50%;
    }

    .mri-blog-category-badge {
 color: var(--ztc-text-text-11);
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s14);
    font-style: normal;
    font-weight: var(--ztc-weight-medium);
    line-height: 14px;
    display: inline-block;
    transition: all 0.4s;
    border-radius: 50px;
    background: rgba(68, 22, 255, 0.1);
    box-shadow: 0px 3px 8px 0px rgba(68, 22, 255, 0.05);
    padding: 8px;
    text-transform: uppercase;
    }

    /* ============================
       ARTICLE BODY
    ============================ */
    .mri-blog-article-image {
      width: 100%;
      height: 380px;
      object-fit: cover;
      border-radius: 12px;
      margin-bottom: 28px;
    }

    .mri-blog-article-title {
      font-size: clamp(1.5rem, 3vw, 2rem);
      color: var(--ztc-text-text-11);
      line-height: 1.3;
      margin-bottom: 16px;
    }

    .mri-blog-intro {
      font-size: 1.05rem;
      color: var(--mri-muted);
      line-height: 1.8;
      border-left: 4px solid var(--mri-teal);
      padding-left: 18px;
      margin-bottom: 36px;
      font-style: italic;
    }

    .mri-blog-section-heading {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--ztc-text-text-11);
      border-left: 4px solid var(--ztc-text-text-11);
      padding-left: 14px;
      margin: 36px 0 18px;
    }

    .mri-blog-sub-heading {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--mri-text);
      margin: 24px 0 10px;
    }

    .mri-blog-body-text {
      font-size: 0.96rem;
      line-height: 1.85;
      color: #374151;
      margin-bottom: 16px;
    }

    /* ============================
       CHECKLIST
    ============================ */
    .mri-blog-checklist {
      list-style: none;
      padding: 0;
      margin: 0 0 20px;
    }

    .mri-blog-checklist li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 16px;
      border-radius: 8px;
      margin-bottom: 8px;
      background: var(--mri-white);
      border: 1px solid #e2e8f0;
      font-size: 0.93rem;
      line-height: 1.6;
      transition: background 0.2s, border-color 0.2s;
    }

    .mri-blog-checklist li:hover {
      background: var(--mri-light-bg);
      border-color: rgba(26, 95, 158, 0.25);
    }

    .mri-blog-checklist li .mri-blog-check-icon {
      color: #16a34a;
      font-size: 1.1rem;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .mri-blog-info-box {
      background: #eff6ff;
      border-left: 4px solid var(--mri-primary);
      border-radius: 0 8px 8px 0;
      padding: 16px 20px;
      margin: 20px 0;
      font-size: 0.93rem;
      color: #1e40af;
    }

    .mri-blog-info-box strong { color: var(--mri-primary-dark); }

    .mri-blog-warning-box {
      background: #fffbeb;
      border-left: 4px solid var(--mri-gold);
      border-radius: 0 8px 8px 0;
      padding: 16px 20px;
      margin: 20px 0;
      font-size: 0.93rem;
      color: #92400e;
    }

    .mri-blog-step-list {
      list-style: none;
      padding: 0;
      counter-reset: mri-step;
    }

    .mri-blog-step-list li {
      position: relative;
      padding: 12px 16px 12px 60px;
      margin-bottom: 10px;
      background: var(--mri-white);
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-size: 0.93rem;
      line-height: 1.6;
      counter-increment: mri-step;
    }

    .mri-blog-step-list li::before {
      content: counter(mri-step);
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      background: var(--ztc-text-text-11);
      color: var(--mri-white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      font-weight: 700;
    }

    /* ============================
       FEATURE CARDS
    ============================ */
    .mri-blog-feature-card {
      background: var(--mri-white);
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 30px 24px;
      text-align: center;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      height: 100%;
    }

    .mri-blog-feature-card:hover {
      box-shadow: 0 12px 30px rgba(26, 95, 158, 0.15);
      transform: translateY(-4px);
    }

    .mri-blog-feature-icon {
      width: 64px;
      height: 64px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      margin: 0 auto 16px;
    }

    .mri-blog-feature-icon.mri-blue {
      background: var(--mri-light-bg);
      color: var(--mri-primary);
    }

    .mri-blog-feature-icon.mri-teal {
      background: var(--mri-teal-light);
      color: var(--mri-teal);
    }

    .mri-blog-feature-card h5 {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--mri-primary-dark);
      margin-bottom: 10px;
    }

    .mri-blog-feature-card p {
      font-size: 0.88rem;
      color: var(--mri-muted);
      line-height: 1.7;
      margin-bottom: 20px;
    }

    .mri-blog-btn-primary {
      background: var(--mri-primary);
      color: var(--mri-white);
      border: 2px solid var(--mri-primary);
      padding: 9px 24px;
      border-radius: 8px;
      font-size: 0.88rem;
      font-weight: 600;
      transition: background 0.2s, color 0.2s;
      display: inline-block;
    }

    .mri-blog-btn-primary:hover {
      background: var(--mri-primary-dark);
      border-color: var(--mri-primary-dark);
      color: var(--mri-white);
    }

    .mri-blog-btn-outline {
      background: transparent;
      color: var(--mri-teal);
      border: 2px solid var(--mri-teal);
      padding: 9px 24px;
      border-radius: 8px;
      font-size: 0.88rem;
      font-weight: 600;
      transition: background 0.2s, color 0.2s;
      display: inline-block;
    }

    .mri-blog-btn-outline:hover {
      background: var(--mri-teal);
      color: var(--mri-white);
    }

    /* ============================
       CALLOUT BAR
    ============================ */
    .mri-blog-callout-bar {
      background: linear-gradient(135deg, var(--mri-primary) 0%, var(--mri-teal) 100%);
      border-radius: 14px;
      padding: 36px 40px;
      margin: 40px 0;
      position: relative;
      overflow: hidden;
    }

    .mri-blog-callout-bar::before {
      content: '';
      position: absolute;
      top: -30px;
      right: -30px;
      width: 160px;
      height: 160px;
      background: rgba(255,255,255,0.06);
      border-radius: 50%;
    }

    .mri-blog-callout-bar::after {
      content: '';
      position: absolute;
      bottom: -50px;
      right: 80px;
      width: 220px;
      height: 220px;
      background: rgba(255,255,255,0.04);
      border-radius: 50%;
    }

    .mri-blog-callout-bar h4 {
      color: var(--mri-white);
      font-size: 1.3rem;
      margin-bottom: 8px;
    }

    .mri-blog-callout-bar p {
      color: rgba(255,255,255,0.82);
      font-size: 0.93rem;
      margin-bottom: 0;
    }

    .mri-blog-btn-gold {
      background: var(--mri-gold);
      color: #000;
      border: none;
      padding: 11px 28px;
      border-radius: 8px;
      font-size: 0.9rem;
      font-weight: 700;
      transition: background 0.2s, transform 0.2s;
      display: inline-block;
      white-space: nowrap;
    }

    .mri-blog-btn-gold:hover {
      background: var(--mri-gold-hover);
      color: #000;
      transform: translateY(-2px);
    }

    /* ============================
       TAGS
    ============================ */
    .mri-blog-tags {
      margin: 32px 0 24px;
    }

    .mri-blog-tags-label {
      font-weight: 600;
      font-size: 0.88rem;
      color: var(--mri-muted);
      margin-bottom: 10px;
      display: block;
    }

    .mri-blog-tag-pill {
      display: inline-block;
      background: var(--mri-white);
      border: 1px solid var(--mri-border);
      color: var(--mri-text);
      font-size: 0.8rem;
      font-weight: 500;
      padding: 5px 14px;
      border-radius: 50px;
      margin: 4px 4px 4px 0;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .mri-blog-tag-pill:hover {
      background: var(--mri-primary);
      border-color: var(--mri-primary);
      color: var(--mri-white);
    }

    /* ============================
       SHARE SECTION
    ============================ */
    .mri-blog-share {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      padding: 24px 0;
      border-top: 1px solid var(--mri-border);
    }

    .mri-blog-share-label {
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--mri-muted);
    }

    .mri-blog-share-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 0.82rem;
      font-weight: 600;
      transition: opacity 0.2s, transform 0.2s;
      color: var(--mri-white);
    }

    .mri-blog-share-btn:hover {
      opacity: 0.88;
      transform: translateY(-2px);
      color: var(--mri-white);
    }

    .mri-blog-share-fb { background: #1877f2; }
    .mri-blog-share-tw { background: #1da1f2; }
    .mri-blog-share-li { background: #0077b5; }
    .mri-blog-share-wa { background: #25d366; }

    /* ============================
       SIDEBAR
    ============================ */
    .mri-blog-sidebar-card {
      background: var(--mri-white);
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 28px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .mri-blog-sidebar-card-title {
      background:var(--ztc-text-text-11);
      color: var(--mri-white);
      font-size: 0.92rem;
      font-weight: 700;
      padding: 14px 20px;
      letter-spacing: 0.3px;
    }

    .mri-blog-sidebar-body {
      padding: 18px 20px;
    }

    /* Search */
    .mri-blog-search-form {
      position: relative;
    }

    .mri-blog-search-input {
      width: 100%;
      padding: 10px 46px 10px 14px;
      border: 1px solid var(--mri-border);
      border-radius: 8px;
      font-size: 0.88rem;
      outline: none;
      transition: border-color 0.2s;
      font-family: inherit;
    }

    .mri-blog-search-input:focus { border-color: var(--mri-primary); }

    .mri-blog-search-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      background: var(--mri-primary);
      color: var(--mri-white);
      border: none;
      width: 32px;
      height: 32px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s;
    }

    .mri-blog-search-btn:hover { background: var(--mri-primary-dark); }

    /* Categories */
    .mri-blog-categories {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .mri-blog-categories li a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #f1f5f9;
      color: var(--mri-text);
      font-size: 0.9rem;
      font-weight: 500;
      transition: color 0.2s, padding-left 0.2s;
    }

    .mri-blog-categories li:last-child a { border-bottom: none; }

    .mri-blog-categories li a:hover {
      color: var(--mri-primary);
      padding-left: 6px;
    }

    .mri-blog-cat-count {
      background: var(--mri-light-bg);
      color: var(--mri-primary);
      font-size: 0.75rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 50px;
    }

    /* Recent Posts */
    .mri-blog-recent-post {
      display: flex;
      gap: 14px;
      padding: 12px 0;
      border-bottom: 1px solid #f1f5f9;
    }

    .mri-blog-recent-post:last-child { border-bottom: none; }

    .mri-blog-recent-thumb {
      width: 68px;
      height: 60px;
      object-fit: cover;
      border-radius: 8px;
      flex-shrink: 0;
    }

    .mri-blog-recent-meta {
      flex: 1;
    }

    .mri-blog-recent-date {
      font-size: 0.75rem;
      color: var(--mri-muted);
      margin-bottom: 4px;
    }

    .mri-blog-recent-title {
      font-size: 0.86rem;
      font-weight: 600;
      color: var(--mri-text);
      line-height: 1.4;
      transition: color 0.2s;
    }

    .mri-blog-recent-title:hover { color: var(--mri-primary); }

    /* Downloads */
    .mri-blog-downloads {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .mri-blog-downloads li a {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      margin-bottom: 10px;
      color: var(--mri-text);
      font-size: 0.88rem;
      font-weight: 500;
      transition: background 0.2s, border-color 0.2s;
    }

    .mri-blog-downloads li a:hover {
      background: var(--mri-light-bg);
      border-color: rgba(26, 95, 158, 0.3);
      color: var(--mri-primary);
    }

    .mri-blog-download-icon {
      width: 38px;
      height: 38px;
      background: #fef3c7;
      color: #d97706;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
    }

    .mri-blog-dl-label {
      font-size: 0.75rem;
      color: var(--mri-muted);
      display: block;
    }

    /* Contact Card */
    .mri-blog-contact-card {
      list-style: none;
      padding: 0;
      margin: 0 0 16px;
    }

    .mri-blog-contact-card li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid #f1f5f9;
      font-size: 0.9rem;
      color: var(--mri-text);
    }

    .mri-blog-contact-card li:last-child { border-bottom: none; }

    .mri-blog-contact-icon {
      width: 36px;
      height: 36px;
      background: #cfbffd;
      color: white;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
    }

    /* Promo Card */
    .mri-blog-promo-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      height: 200px;
    }

    .mri-blog-promo-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .mri-blog-promo-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(15,61,107,0.92) 0%, rgba(15,61,107,0.4) 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 20px;
    }

    .mri-blog-promo-overlay h6 {
      color: var(--mri-white);
      font-weight: 700;
      margin-bottom: 6px;
    }

    .mri-blog-promo-overlay p {
      color: rgba(255,255,255,0.8);
      font-size: 0.8rem;
      margin-bottom: 12px;
    }

    .mri-blog-btn-gold-sm {
      background: var(--mri-gold);
      color: #000;
      border: none;
      padding: 7px 18px;
      border-radius: 6px;
      font-size: 0.8rem;
      font-weight: 700;
      display: inline-block;
      transition: background 0.2s;
    }

    .mri-blog-btn-gold-sm:hover {
      background: var(--mri-gold-hover);
      color: #000;
    }

    /* ============================
       FOOTER
    ============================ */
    .mri-blog-footer {
      background: #0f172a;
      color: #94a3b8;
      padding: 60px 0 32px;
    }

    .mri-blog-footer-logo {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--mri-white);
      margin-bottom: 14px;
    }

    .mri-blog-footer-logo span { color: var(--mri-teal); }

    .mri-blog-footer p {
      font-size: 0.88rem;
      line-height: 1.75;
      color: #64748b;
    }

    .mri-blog-footer-heading {
      color: var(--mri-white);
      font-size: 0.95rem;
      font-weight: 700;
      margin-bottom: 18px;
      padding-bottom: 10px;
      border-bottom: 2px solid rgba(255,255,255,0.08);
    }

    .mri-blog-footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .mri-blog-footer-links li { margin-bottom: 9px; }

    .mri-blog-footer-links li a {
      color: #64748b;
      font-size: 0.88rem;
      transition: color 0.2s, padding-left 0.2s;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .mri-blog-footer-links li a::before {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--mri-teal);
      border-radius: 50%;
      flex-shrink: 0;
    }

    .mri-blog-footer-links li a:hover {
      color: var(--mri-white);
      padding-left: 4px;
    }

    .mri-blog-footer-contact-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 12px;
      font-size: 0.88rem;
      color: #64748b;
    }

    .mri-blog-footer-contact-item i {
      color: var(--mri-teal);
      font-size: 1rem;
      margin-top: 2px;
    }

    .mri-blog-footer-bottom {
      background: #0a0f1e;
      color: #475569;
      font-size: 0.82rem;
      padding: 16px 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }

    .mri-blog-social-icons a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      background: rgba(255,255,255,0.08);
      color: #94a3b8;
      border-radius: 8px;
      font-size: 0.95rem;
      margin-left: 6px;
      transition: background 0.2s, color 0.2s;
    }

    .mri-blog-social-icons a:hover {
      background: var(--mri-primary);
      color: var(--mri-white);
    }

    /* ============================
       MRI REPORT TERM CARDS
    ============================ */
    .mri-blog-term-card {
      padding: 12px 16px;
      background: var(--mri-white);
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      height: 100%;
    }

    /* ============================
       UTILITIES / RESPONSIVE
    ============================ */
    @media (max-width: 991.98px) {
      .mri-blog-hero-banner { height: 240px; }
      .mri-blog-article-image { height: 260px; }
      .mri-blog-callout-bar { padding: 28px 24px; }
      .mri-blog-callout-bar h4 { font-size: 1.1rem; }
    }

    @media (max-width: 575.98px) {
      .mri-blog-topbar .mri-blog-topbar-item:last-child { display: none; }
      .mri-blog-hero-banner { height: 200px; }
      .mri-blog-hero-content h1 { font-size: 1.25rem; }
      .mri-blog-callout-bar { text-align: center; }
      .mri-blog-callout-bar .d-flex { flex-direction: column; gap: 16px !important; }
    }
    
    
    
@media (max-width: 768px) {

  #cards{
      width:100%;
  }
  .footer-container{
      width:90%;
  }
}

header.homepage4-body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999999;
}