/* =========================
   GLOBAL CSS
========================= */
* {
    box-sizing: border-box;
}

:root {
    /* color */
    --primary-color: #2A5AA4;
    --primary--hover-color: #346ab9;
    --black-color: #000;
    --sky-blue-color: #27A8E0;
    --carbon-black: #101010;
    --deep-blue: #1A305A;
    --deep-orange: #702C14;
    --tech-blue: #2A5AA4;
    --warm-orange: #F69220;

    /* text */
    --text-white: #fff;
    --text-gray: #B3B3B3;
    --link-color: #27A8E0;

    /* border */
    --border-color: #B3B3B3;

    /* card animation */
    --card-height: 35vw;
    --card-margin: 0.5vw;
    --card-top-offset: 2em;
    --numcards: 3;
    --outline-width: 0px;

}

body {
    font-family: "Instrument Sans", sans-serif;
    background: #000;
    color: var(--text-white);
    overflow-x: hidden;
}

img {
    display: inline-block;
}

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

a {
    text-decoration: none;
}

.section-space {
    padding: 100px 0;
}

/* sub page common */
.sub-hero {
    min-height: 460px;
    align-items: center;
    background-position: center top;
}

.sub-hero .container {
    position: relative;
    z-index: 2;
}

.sub-hero .hero-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, #000 94%);
}

.sub-hero-content h1 {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-white);
}

.dropdown-item.active,
.dropdown-item:active { background-color: #ffffff17;}
.news-card-wrapper .nav-tabs .nav-item.show .nav-link,  .news-card-wrapper .nav-tabs .nav-link.active { background-color: var(--tech-blue); px 0;}
.news-card-wrapper .nav-tabs .nav-link {
    border: none;
    color: var(--white-color);
    background-color: var(--carbon-black);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 0;
    font-weight: bold;
    font-size: 18px;
}

/* =============================================================================
      ========================= HOME PAGE  ==========================
============================================================================== */

/* =========================
   HEADER
========================= */

.main-header {
    position: absolute;
    width: 100%;
    top: 20px;
    left: 0;
    z-index: 999;
}

.main-header .custom-navbar {
    box-shadow: inset 0 0 2px var(--border-color);
    border-radius: 16px;
    padding: 8px 0 8px 16px;
    backdrop-filter: blur(10px);
}

.main-header .dropdown-menu {
    text-align: center;
    border: none;
    background: rgba(18, 31, 38, 0.72);
}

.main-header .dropdown-menu li a:hover {
    background: rgba(255, 255, 255, 0.08);
}

.main-header .dropdown-menu .dropdown-item {
    color: var(--text-white);
    font-size: 16px;
    padding: 10px 20px;
}

.main-header .navbar-brand img {
    height: 48px;
}

.main-header .navbar-nav .nav-link {
    color: var(--text-white);
    font-weight: 500;
    font-size: 16px;
    line-height: 34px;
    letter-spacing: 0;
    text-align: center;
    padding: 10px 16px;
    border-right: 1px solid var(--border-color);
}

.main-header .navbar-nav .nav-link.dropdown-toggle::after {
    display: none;
}

.main-header .navbar-nav .nav-link.dropdown-toggle i {
    font-size: 12px;
    margin-left: 4px;
}

.main-header .navbar-nav .nav-link:hover,
.main-header .navbar-nav .nav-link.active {
    color: var(--link-color);
}

.main-header .navbar-nav .nav-item:last-child .nav-link {
    border-right: none;
}

/* Dropdown hover styles */
/* .main-header .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    animation: slideDown 0.2s ease-out;
} */


@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* =========================
   HERO SECTION
========================= */

.hero-section {
    position: relative;
    background: url('../images/hero/hero-bg.jpg') center center/cover no-repeat;

}

.hero-section .carousel-indicators {
    justify-content: flex-end;
    align-items: center;
}

.carousel-indicators .slide-indicator {
    width: 10px;
    height: 10px;
    transform: rotate(0deg);
    opacity: 1;
    margin: 4px 2px;
    border-radius: 100%;
    padding: 2px;
    border: none;
}

.carousel-indicators [data-bs-target].carousel-control-next,
.carousel-indicators [data-bs-target].carousel-control-prev {
    position: initial;
    width: inherit;
    left: initial;
    right: initial;
    text-indent: initial;
    background: transparent;
    color: var(--text-white);
    opacity: 1;
    font-size: 20px;
}


.carousel-indicators .slide-indicator[aria-current="true"] {
    width: 45px;
    background: var(--link-color);
    border-radius: 12px;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.2),
            var(--black-color));
}

.carousel-item {
    position: relative;
    height: 100vh;
}

.carousel-item img,
.carousel-item video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
}

.hero-content h1 {
    font-weight: 700;
    font-size: 52px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin-bottom: 25px;
    overflow: hidden;
    -webkit-animation: text-focus-in 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: text-focus-in 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

.hero-content p {
    font-weight: 400;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 0;
    margin-bottom: 37px;
    -webkit-animation: text-focus-in 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: text-focus-in 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.btn-primary-custom {
    background: var(--primary-color);
    color: #fff;
    padding: 10px 28px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    line-height: 34px;
    transition: 0.3s;
    gap: 4px;

}

.btn-primary-custom:hover {
    background: var(--primary--hover-color);
    color: #fff;
}

/* =========================
   ABOUT SECTION
========================= */

.about-box {
    border: 1px solid #0d6efd;
    border-radius: 20px;
    padding: 40px;
    background: #101010;
}

.about-box p {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
}

/* =========================
        JOINT VENTURE SECTION
==========================  */

.venture-circle-wrapper {
    position: relative;
    min-height: 60vh;
}

.venture-section {
    background-image: url("../images/Joint-venture.png");
    background-size: cover;
    background-position: center;
    height: 100vh;

}

.venture-content p {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
}

.venture-content p b {
    font-weight: 700;
}

.venture-logos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 27px;
}

.venture-logos .divider {
    width: 1px;
    height: 40px;
    background: var(--border-color);
}

.circle-card {
    height: 270px;
    width: 270px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    transition: 0.3s ease;
}
.circle-card.white-circle {
    transform: translateY(80%);
}

.circle-card.blue-circle {
    transform: translateY(-80%);
}
.about-vision-grid .vision-card {
    transform: translateY(-40%);
}
.about-value-card.mission-card {
    transform: translateY(40%);
}
.circle-card.white-circle:hover {
    box-shadow: 0 0 10px var(--sky-blue-color);
}

.circle-card.blue-circle:hover {
    box-shadow: 0 0 10px var(--text-white);
}

.circle-card p {
    text-align: left;
    color: var(--black-color);
    padding-left: 16px;
    font-size: 18px;
    line-height: 24px;
}

.circle-card.white-circle p {
    border-left: 5px solid var(--primary-color);
}

.circle-card.blue-circle {
    position: absolute;
    right: 0;
    top: 10%; 
}

.circle-card.white-circle {
    background: #fff;
    color: #000;
    position: absolute;
    left: 10%;
    top: 50%; 
}

 

.circle-card.blue-circle {
    background: var(--primary-color);
}

.circle-card.blue-circle p {
    color: #fff;
    border-left: 5px solid var(--text-white);
}

/* =========================
    SERVICES SECTION
========================== */
.news-details-page .news-card-wrapper .news-card-grid {display: none;}
.services-section {
    overflow: hidden;
}


.service-content {
    padding-left: 18px;
    border-left: 2px solid var(--border-color);
}



.service-content h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 120%;
    color: #fff;
    margin-bottom: 18px;
}


.service-content p {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 28px;
}

.service-content a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    transition: 0.3s ease;
}

.service-card:hover .service-content a {
    color: var(--sky-blue-color);
}

.service-card .service-content a:hover {
    transform: translateX(5px);
}

.service-card:hover .service-content h3,
.service-card:hover .service-content,
.service-card:hover .service-content p {
    color: var(--sky-blue-color);
}


/* =========================
    SECTION HEADING
========================== */
.section-heading {
    margin-bottom: 60px;
}

.section-heading h2 {
    font-size: 52px;
    font-weight: 600;
    line-height: 100%;
    color: var(--text-white);
    margin-bottom: 22px;
}

.section-heading p {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: var(--text-white);
}



.service-card {
    height: 100%;
    transition: 0.5s ease-in-out;
}

.service-card:hover .service-image {
    border-color: var(--text-white);
    transition: 0.5s ease-in-out;
}

.service-image {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 10px;
    background: var(--carbon-black);
    border: 1px solid transparent;
    margin-bottom: 28px;
}

.service-image img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: 12px;
    transition: 0.5s ease-in-out;
}

/* =========================
   STATS
========================= */
.stats-section {
    position: relative;
    overflow: hidden;
}

.stats-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../images/gradiant-bg.png) center center / cover no-repeat;
    width: 50%;
    left: 50%;
    bottom: -100%;
    transform: translateX(-50%);
    z-index: -1;
}

.section-title h2 {
    font-size: 51px;
    font-weight: 600;
    line-height: 100%;
    color: var(--text-white);
    margin-bottom: 22px;
}

.stats-card {
    background: var(--carbon-black);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    border-bottom: 2px solid var(--primary-color);
    transition: 0.3s ease;
}

.stats-card:hover {
    box-shadow: 0 0 10px var(--sky-blue-color);
    border-bottom-color: var(--sky-blue-color);
}

.stats-card:hover h3 {
    color: var(--sky-blue-color);
}

.stats-card h3 {
    font-size: 48px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    margin-bottom: 12px;
}

.stats-card p {
    text-align: left;
}

/* =========================
   CTA SECTION
========================= */
.cta-section {
    background-image: url("../images/cta-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 107px 0;
    position: relative;
}

.cta-content p {
    color: var(--text-gray);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
}

.cta-content p b {
    color: var(--text-white);
}

/* =========================
    FOOTER
========================== */

.main-footer {
    background: #e9e9e9;
    overflow: hidden;
}


.footer-top {
    padding: 50px 0;
}


.footer-logo img {
    max-width: 140px;
}

.footer-address h4 {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;

    color: #4a4a4a;

    margin-bottom: 5px;
}

.footer-address p {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;

    color: #6a6a6a;

    margin: 0;
}

.footer-links-wrapper {
    display: flex;
    gap: 22px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    position: relative;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: var(--carbon-black);
    display: block;
    transition: 0.3s ease;
       padding: 6px 16px;
    border-left: 1px solid var(--border-color);
}

.footer-links a:hover {
    color: var(--link-color);
    border-left-color: var(--link-color);
}


.footer-social h5 {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--carbon-black);
    margin-bottom: 20px;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.social-icons a {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #b8b8b8;
    border-radius: 4px;
    color: #fff;
    font-size: 20px;
    transition: 0.3s ease;
}

.social-icons a:hover {
    background: var(--link-color);
    transform: translateY(-4px);
}

.footer-bottom {
    background: #000;
    padding: 24px 0;
}

.footer-bottom-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    flex-wrap: wrap;

    text-align: center;
}

.footer-bottom-content p,
.footer-bottom-content a,
.footer-bottom-content span {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;

    color: rgba(255, 255, 255, 0.8);

    margin: 0;
}

.footer-bottom-content a:hover {
    color: var(--link-color);
}











/* =============================================================================
      ========================= ABOUT PAGE  ==========================
============================================================================== */

.about-page {
    background: #000;
}


.about-page .sub-hero .hero-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 60%, #000 94%);
}

.sub-hero {
    background: url('../images/about-us-hero-bg.png') center center/cover no-repeat;
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;

}


.about-page .india-chip-section {
    padding: 100px 0 85px;
    position: relative;
}


.about-page .india-chip-section::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10%;
    width: 80%;
    height: 740px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(0, 157, 195, 0.4) 11%, rgba(0, 0, 0, 0) 44%);
    pointer-events: none;
}



.about-page .chip-content p {
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    font-weight: 400;
}



.about-page .item {
    max-width: 553px;
    max-height: 290px;
    border-radius: 18px;
    overflow: hidden;
    margin: 0 auto;
}
.owl-carousel .owl-item img{
    height: 100%;
}

.about-page .chip-image {
    object-fit: cover;
}

#about-us-page.about-page .chip-slider .owl-nav {
    margin-top: 8px;
}

#about-us-page.about-page .chip-slider .owl-nav button {
    width: auto;
    height: auto;
    background: transparent;
    color: #Fff;
    font-size: 13px;
}

#about-us-page.about-page .chip-slider .owl-nav button span:hover,
#about-us-page.about-page .chip-slider .owl-nav button:hover span {
    background: var(--link-color);
}

#about-us-page.about-page .chip-slider .owl-nav button[role="presentation"]:hover span {
    background: transparent;
}

#about-us-page.about-page .chip-slider .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 3px;
}

#about-us-page.about-page .chip-slider .owl-nav button.active span {
    width: 24px;
}

.about-page .chip-slider .owl-dot.active span {
    width: 24px;
    background: var(--link-color);
}

.about-page .owl-nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-page .owl-nav .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
}


.about-page .owl-nav .owl-dots,
.about-page .owl-nav .owl-dots:hover {
    background-color: transparent;
    margin: 0;
    padding: 0;
}

.about-page .owl-nav .owl-dots button {
    margin: 0;
}

 


/* About Vision Mission */

.about-vision-section {
    position: relative;
    padding: 140px 0 90px;
    overflow: hidden;
}


.about-vision-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(230px, 1fr) 280px minmax(230px, 1fr);
    align-items: center;
    gap: 34px;
}

.about-vision-grid .mission-card {
    margin-top: auto;
    max-width: 359px;
    border-left: 1px solid var(--sky-blue-color);
}

.about-vision-grid .vision-card {
    margin-bottom: auto;
    max-width: 360px;
    border-right: 1px solid var(--sky-blue-color);
}

.about-value-card {
    padding: 30px 35px;
    border-radius: 12px;
    background: var(--carbon-black);
    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.22);
}

.about-value-card.mission-card {
    align-self: end;
    justify-self: end;
}

.about-value-icon {
    color: var(--sky-blue-color);

    line-height: 1;
    margin-bottom: 14px;
}

.about-value-icon img {
    height: 70px;
    width: 70px;
    object-fit: contain;
}

.about-value-card h3 {
    color: var(--text-white);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 34px;
}

.about-value-card p {
    color: var(--text-white);
    font-size: 18px;
    line-height: 24px;
}

.about-vision-image {
    width: 360px;
    height: 593px;
    overflow: hidden;
    border-radius: 160px;
    justify-self: center;
    margin: 50px;
}

.about-vision-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Facility At A Glance */
.facility-glance-section {
    padding: 45px 0 90px;
}

.facility-glance-section .section-title h2 {
    margin-bottom: 37px;
}






.facility-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 52px 78px;
}

.facility-item img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 18px;
    margin-left: 22px;
}

.facility-content {
    min-height: 78px;
    padding-left: 27px;
    border-left: 3px solid rgba(255, 255, 255, 0.9);
}

.facility-content h3 {
    color: var(--text-white);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.facility-content p {
    color: var(--text-white);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
}

/* Partnership */

.about-partnership-section .section-title h2 {
    margin-bottom: 33px;
}

.partnership-content {
    background-image: url(../images/the-partnership-bg.png);
    display: flex;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 65px 60px;
    min-height: 600px;
}

.partner-copy {
    position: relative;
    z-index: 2;
}

.partnership-content .partner-copy:nth-child(2) {
    margin-top: auto;
}

.partner-copy img {
    height: 24px;
    width: auto;
    margin-bottom: 24px;
}

.partner-copy p {
    color: var(--text-white);
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 16px;
}

.about-bottom-cta-content {
    margin-top: 54px;

}

.about-bottom-cta-content p {
    color: var(--text-gray);
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}








/* =============================================================================
      =========================    SERVICES PAGE  ==========================
============================================================================== */

/* HERO SECTION */
.services-page .sub-hero {
    background-image: url(../images/our-services-hero-bg.png);
}

.services-page .sub-hero .hero-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 60%, #000 94%);
}


/* SERVICES DETAILS SECTION */

.services-details-section {
    padding: 100px 0 0 0;
    position: relative;
}

.services-details-section .section-title h2 {
    line-height: 115%;
}

.services-details-content p {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
}

.service-bottom-text {
    color: var(--text-gray);
}

.services-details-video {
    position: absolute;
    bottom: 0;
    height: 60%;
    width: 70%;
    right: 0;
    z-index: -1;
}




/*   SERVICES CARD SECTION   */




#services-card-wrapper {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(var(--numcards), var(--card-height));
    gap: var(--card-margin);
    padding-bottom: calc(var(--numcards) * var(--card-top-offset));
    margin-bottom: var(--card-margin);
    background: transparent !important;
}

#card-1 {
    --index: 1;
}

#card-2 {
    --index: 2;
}

#card-3 {
    --index: 3;
}

#card-4 {
    --index: 4;
}

.services-card-box {
    position: sticky;
    top: 0;
    padding-top: calc(var(--index) * var(--card-top-offset));
    background: transparent;
    border: none;
}

.services-card-image {
    width: 100%;
    height: 456px;
}

.services-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}



.service-card-details {
    padding: 30px;
    background: var(--carbon-black);
    border-radius: 18px;
    border: 1px solid var(--sky-blue-color);
    width: 90%;
    margin: 0 auto;
    transition: 0.3s ease-in-out;
    margin-top: -12%;
    position: relative;
    z-index: 2;
}

#card-1 .service-card-details {
    background-color: #4D4E4E;
    border-color: var(--white-color);
}

#card-1 .service-card-details {}

#card-1 .service-card-details h3 {
    color: var(--white-color);
}

#card-2 .service-card-details {
    background-color: var(--deep-blue);
}

#card-3 .service-card-details {
    background-color: var(--deep-orange);
    border-color: var(--warm-orange);
}

#card-3 .service-card-details h3 {
    color: var(--warm-orange);
}

.service-card-details h3 {
    color: var(--sky-blue-color);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
}

.service-card-details p {
    color: var(--text-white);
    font-size: 18px;
    line-height: 24px;
}

/* Animation */
@supports (animation-timeline: works) {
    @scroll-timeline cards-element-scrolls-in-body {
        source: selector(body);
        scroll-offsets: selector(#services-card-wrapper) start 1, selector(#services-card-wrapper) start 0;
        start: selector(#services-card-wrapper) start 1;
        end: selector(#services-card-wrapper) start 0;
        time-range: 4s;
    }

    .services-card-box {
        --index0: calc(var(--index) - 1);
        --reverse-index: calc(var(--numcards) - var(--index0));
        --reverse-index0: calc(var(--reverse-index) - 1);
    }

    .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))));
        }
    }
}



/* =============================================================================
      =========================    CAREERS PAGE  ==========================
============================================================================== */


/* HERO SECTION */
.careers-page .sub-hero {
    background-image: url('../images/career-hero.png');
}

.careers-page .sub-hero .hero-overlay {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 60%, #000 94%);
}

/* CAREERS ABOUT SECTION */
.careers-about-content {
    padding-top: 100px;
}

.careers-about-content-card {
    display: flex;
    align-items: center;
    background: var(--deep-blue);
    border-radius: 18px;
    border: 1px solid var(--sky-blue-color);
    overflow: hidden;
    gap: 57px;
    padding-right: 54px;
}

.careers-about-content-card p {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0%;
    position: relative;
}

.careers-about-content-card::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/careers-about-bg.png);
    top: 40%;
    right: 50%;
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    left: 0;
    z-index: -1;
}

/* EXPERTISE SECTION */

.expect-section {
    position: relative;
    overflow: hidden;
    background-image: url('../images/expect-bg.png');
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;

}

.who-we-are-section {
    background-image: url('../images/who-we-are-bg.png');
    background-position-x: 80%;
    background-repeat: no-repeat;
    background-position-y: 20%;
}

.who-we-are-section .who-we-are-image img {
    width: 100%;
}

.expect-section .section-title {
    margin-bottom: 48px;
}

.section-title {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 16px;
}

.section-subtitle {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}

.expect-card {
    border-radius: 18px;
    padding: 36px 38px;
    min-height: 458px;
    transition: 0.4s ease;
    position: relative;
    overflow: hidden;
}

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

.expect-card img {
    width: 74px;
    margin-bottom: 28px;
}

.expect-card h3 {
    margin-bottom: 24px;
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
}

.expect-card p {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0%;
}

/* Card Colors */
.gray-card {
    background: #666667;
}

.orange-card {
    background: var(--deep-orange);
    margin-top: 40px;
}

.blue-card {
    background: var(--tech-blue);
    margin-top: 80px;
}



/* WHO WE ARE SECTION */
.who-we-are-content {
    padding-bottom: 100px;
}

.who-we-are-section .container .row {
    align-items: end;
}

.who-we-are-content h2 {
    font-weight: 600;
    font-size: 52px;
    line-height: 100%;
    margin-bottom: 16px;
}
.who-we-are-content p{
    font-size: 18px;
    line-height: 24px;
}



/* =============================================================================
      =========================    CONTACT US PAGE  ==========================
============================================================================== */


.contact-us-page .sub-hero {
    background-image: url('../images/contact-us-hero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.contact-us-page .sub-hero .hero-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 80%, #000 94%);
}


/* CONTACT FORM */
.contact-form-section {
    padding: 100px 0;
    background-image: url('../images/contact-us-form-bg-gradiant.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.contact-card {
    background-color: color-mix(in srgb, var(--deep-blue) 60%, transparent);
    border: 1px solid var(--sky-blue-color);
    border-radius: 12px;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Form Heading */
.contact-title {
    color: #ffffff;
    margin-bottom: 2rem;
    font-weight: 600;
    font-size: 52px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* Custom Input Styling */
.custom-input {
    background-color: var(--deep-blue);
    /* Darker blue-gray for inputs */
    border: 1px solid transparent;
    color: #e2e8f0;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.custom-input::placeholder {
    color: var(--text-white);
}

.custom-input:focus {
    background-color: var(--carbon-black);
    border-color: var(--sky-blue-color);
    color: var(--text-white);
    box-shadow: none;
}

/* Select styling override */
select.custom-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}

/* Checkbox and Label Styling */
.form-check-label {
    color: #e2e8f0;
    font-size: 0.9rem;
}

.form-check-input {
    background-color: #D9D9D9;
    border-color: var(--sky-blue-color);
    cursor: pointer;
}

.privacy-link {
    color: #cbd5e1;
    text-decoration: underline;
}

.privacy-link:hover {
    color: var(--white-color);
}

/* Submit Button Styling */
.submit-btn {
    background-color: var(--tech-blue);
    border: none;
    padding: 0.6rem 1.5rem;
    display: flex;
    align-items: center;
    border-radius: 6px;
    font-weight: 400;
    transition: background 0.3s ease, transform 0.3s ease;
}

.submit-btn:hover {
    background: var(--primary--hover-color);
    color: var(--text-white);
    transform: translateY(-2px);
}

/* =============================================================================
      ========================= NEWSROOM ==========================
============================================================================== */

/* NEWSROOM CARD SECTION */

.newsroom-page .sub-hero {
    background-image: url("../images/our-services-hero-bg.png");
    background-size: cover;
    background-position: center;
    display: flex;
}

.news-card-wrapper {
    position: relative;
    overflow: hidden;
    background: #000;
}

.news-card-wrapper::before,
.news-card-wrapper::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -50%;
    width: 60%;
    height: 60%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0, 172, 222, 0.32) 0%, rgba(0, 0, 0, 0) 68%);
    pointer-events: none;
}

.news-card-wrapper::after {
    top: 20%;
    width: 40%;
    height: 40%;
    left: 40%;
}

.news-card-wrapper .container {
    position: relative;
    z-index: 1;
}

.news-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 30px;
    max-width: 100%;
    margin: 0 auto;
}

.news-card {
    position: relative;
    min-height: 214px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 10px;
    background: var(--carbon-black);
    color: var(--text-white);
    isolation: isolate;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card::before,
.news-card::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.news-card:hover:before, .news-card:hover:after {inset: 0; transition: opacity 0.3s ease; opacity: 0!important;}



.news-card::before {
    z-index: -2;
    background: url("../images/news-card-hover.png") center center / cover no-repeat;
}

.news-card::after {
    z-index: -1;
    background: rgba(42, 90, 164, 0.82);
}

.news-card:hover,
.news-card:focus-visible {
    color: var(--text-white);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.news-card:hover::before,
.news-card:hover::after,
.news-card:focus-visible::before,
.news-card:focus-visible::after {
    opacity: 1;
}

.news-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-height: 214px;
    padding: 28px 28px 24px;
}


.news-card-title {
    color: var(--text-white);
    font-weight: 400;
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 28px;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-content:hover .news-card-title {
    font-weight: 500;
}

.news-card-link {
    color: var(--text-white);
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}

.news-load-more-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

.news-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 11px 25px;
    border-radius: 5px;
    background: var(--primary-color);
    color: var(--text-white);
    transition: background 0.3s ease, transform 0.3s ease;
    font-family: Instrument Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 34px;
    letter-spacing: 0%;
    text-align: center;
}

.news-load-more:hover {
    background: var(--primary--hover-color);
    color: var(--text-white);
    transform: translateY(-2px);
}



/* Mock reCAPTCHA Box Styling */
.recaptcha-mock {
    background-color: #f9f9f9;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    width: 250px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.08);
}

.recaptcha-mock input[type="checkbox"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
}


/* CONTACT DETAILS SECTION */
.map-section {
    min-height: 450px;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #e5e3df;
    /* Fallback color while iframe loads */
    overflow: hidden;
}

/* Full-width interactive map */
.map-section iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 1;
    /* Puts iframe behind the card */
}

/* Overlay Information Card */
.map-info-card {
    position: relative;
    z-index: 2;
    /* Keeps card above the map */
    background-color: #345c9f;
    /* Blue matching the design */
    color: #ffffff;
    border-radius: 8px;
    padding: 1.5rem;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    /* Push to the right on desktop */
    margin-left: auto;
    margin-right: 5%;
}

.map-info-card h5 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 1.25rem;
    letter-spacing: 0.2px;
}

.info-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    font-size: 18px;
    line-height: 24px;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-row i {
    font-size: 1.1rem;
    margin-right: 12px;
    margin-top: 2px;
    opacity: 0.9;
}

/* =============================================================================
      ========================= NEWS DETAILS PAGE ==========================
============================================================================== */

.news-details-page .news-card-wrapper::after {
    display: none;
}

.news-details-page .news-card-wrapper::before {
    width: 40%;
    height: 70%;
}

.news-details-page .section-title {
    margin-bottom: 38px;
}


.news-details-page .sub-hero {
    background-image: url(../images/news-room-bg.png);
}

.news-details-wrapper {
    min-height: 100vh;
    padding: 100px 0 0 0;
    background: var(--black-color);
    color: var(--text-white);
}


.news-details-back-wrap {
    margin-bottom: 42px;
}

.news-details-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 22px;
    border: 1px solid color-mix(in srgb, var(--text-white) 22%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--carbon-black) 88%, var(--text-white));
    color: var(--text-white);
    font-size: 14px;
    line-height: 1;
    transition: background 0.3s ease, transform 0.3s ease;
}

.news-details-back-btn:hover {
    background: color-mix(in srgb, var(--carbon-black) 76%, var(--text-white));
    color: var(--text-white);
    transform: translateX(-2px);
}



.news-details-title {
    color: var(--text-gray);
    margin-bottom: 45px;
    font-weight: 600;
    font-size: 52px;
    line-height: 100%;
}

.news-details-date {
    color: var(--warm-orange);
    margin-bottom: 25px;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}

.news-details-content {
    color: var(--text-white);
}

.news-details-content p,
.news-details-source a {
    color: var(--text-white);
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0%;
}

.news-details-content strong {
    color: var(--text-white);
    font-weight: 700;
}

.news-details-contact,
.news-details-contact-link {
    color: var(--warm-orange);
}

.news-details-contact-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.news-details-source {
    margin-top: 42px;
}

.news-details-source p {
    margin-bottom: 16px;
    font-style: italic;
}

.news-details-source a {
    display: inline-block;
    overflow-wrap: anywhere;
}

.news-details-recent {
    position: relative;
    margin-top: 115px;
    padding-bottom: 20px;
}

.news-details-recent::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 145px;
    width: 620px;
    height: 440px;
    transform: translateX(-50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--sky-blue-color) 32%, transparent) 0%, transparent 68%);
    pointer-events: none;
}

.news-details-recent-title {
    position: relative;
    z-index: 1;
    color: var(--text-white);
    font-size: 52px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 38px;
}

.news-details-recent-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 32px;
}

.news-details-recent-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 210px;
    padding: 34px 36px 26px;
    border-radius: 10px;
    background: var(--carbon-black);
    color: var(--text-white);
    transition: background 0.3s ease, transform 0.3s ease;
}

.news-details-recent-card:hover,
.news-details-recent-card:focus-visible,
.news-details-recent-card-active {
    background: var(--primary-color);
    color: var(--text-white);
    transform: translateY(-2px);
}

.news-details-recent-card-title {
    color: var(--text-white);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.16;
}

.news-details-recent-card-active .news-details-recent-card-title {
    font-weight: 700;
}

.news-details-recent-card-link {
    color: var(--text-white);
    font-size: 14px;
    line-height: 1;
    margin-top: 30px;
}

/* =============================================================================
      ========================= LEADERSHIP DETAILS PAGE ==========================
============================================================================== */
.leadership-card-wreapper {
    overflow: hidden;
    padding: 100px 0;
    background-image: url("../images/leader-card-bg.png");
    background-position: top, left;
    background-repeat: no-repeat;

}

.leadership-page .sub-hero {
    background-image: url("../images/Leaders-hero-bg.png");
}

.leadership-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    margin: 0 auto 58px;
    border-bottom: 1px solid var(--tech-blue);
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    width: 100%;
    margin-bottom: 55px;
    gap: 8px;
}

.leadership-tabs .nav-item .leadership-tab {
    width: 100%;
}

.leadership-tabs .nav-item {
    width: 100%;
}

.leadership-tabs .nav-item .nav-link {
    width: 100%;
}

.leadership-card-wrapper .leadership-tab {
    min-height: 46px;
    border: 0;
    font-size: 13px;
    line-height: 1;
    transition: background 0.3s ease;
}


.leadership-page .nav-tabs .nav-link {
    border: none;
    color: var(--white-color);
    background-color: var(--carbon-black);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

   /* abhishek*/
    padding: 20px 0;
    font-weight: bold;
    font-size: 18px;
    /* abhishek*/
}

.leadership-page .nav-tabs .nav-item.show .nav-link,
.leadership-page .nav-tabs .nav-link.active {
    background-color: var(--tech-blue);
}

.leadership-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 55px 20px;
}

.leadership-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--tech-blue);
    color: var(--white-color);
    text-align: left;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.leadership-card:hover,
.leadership-card:focus-visible {
    transform: translateY(-4px);
    filter: brightness(1.06);
}

.leadership-card-image {
    display: block;
    height: 292px;
    background: var(--text-white);
    padding-top: 28px;
}

.leadership-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
}

.leadership-card-content {
    display: block;
    min-height: 92px;
    padding: 19px 26px 20px;
    background: var(--tech-blue);
}

.leadership-card-title,
.leadership-card-text {
    display: block;
    color: var(--text-white);
}

.leadership-card-title {
    font-size: 24px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 8px;
}

.leadership-card-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}
.leadership-modal-profile  {    display: flex;  gap: 20px;  align-items: center;}
.leadership-modal-profile .profile-image {
    width: 200px;
    height: 200px;
    margin-bottom: 32px;
/*    border-radius: 18px;*/
    overflow: hidden;
        margin-bottom: 0;
    border-radius: 100%;
    flex-shrink: 0;
}

.leadership-modal-profile .profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leadership-modal-person h2 {
    font-size: 24px;
    color: var(--text-white);
    margin-bottom: 6px;
}

.leadership-modal-person p {
    color: var(--text-white);
    font-size: 18px;
    line-height: 24px;  
}

#leadershipModel .modal-body {
    display: flex;
    padding: 20px;
    gap: 0px;
    position: relative;flex-direction: column;
}

#leadershipModel .modal-body .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--text-white);
    filter: invert(1);
    outline: none;
    box-shadow: none;
}

#leadershipModel .modal-content {
    background-color: #2e2e2e99;
    backdrop-filter: blur(29.6px);
    border: 1px solid var(--tech-blue);
}

.leadership-modal-copy {
    margin-top: 30px;
}

.leadership-modal-copy p {
    color: var(--text-white);
    font-size: 18px;
    line-height: 24px;
}

.leadership-page .modal-backdrop.show {
    opacity: 1;
    background-color: rgb(45 45 45 / 77%);
    backdrop-filter: blur(11px);
}



/* =============================================================================
      ========================= THANK YOU PAGE  ==========================
============================================================================== */
.thank-you-wrapper {
    background-image: url("../images/thank-you-bg.png");
    background-position: top, center;
    background-repeat: no-repeat;
    padding: 166px 0;
    overflow: hidden;
}

.thank-you-wrapper::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/thank-youbottom-bg.png);
    top: 40%;
    right: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    left: 0;
    z-index: -1;
}

.thankyou-box {
    text-align: center;
}

h2.thankyou-text {
    font-size: 52px;
    font-weight: bold;
    line-height: 160%;
}

.thankyou-badge {
    margin: 7px 0 37px 0;
}

.thankyou-contant p {
    font-size: 18px;
    line-height: 24px;
}

.thankyou-contant {
    margin-bottom: 47px;
}

.btn-back {
    background-color: var(--carbon-black);
    color: var(--text-white);
    border: 1px solid #4D4E4E;
    padding: 10px 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 auto;
}

.thankyou-badge {
    max-width: 300px;
    margin: 7px auto 37px auto;
}

.thankyou-badge img {
    width: 100%;
    height: 100%;
}

/* =============================================================================
      ========================= 404 PAGE  ==========================
============================================================================== */
section.error-wrapper {
    padding: 150px 0;
    background-image: url("../images/404-bg.png");
    background-position: center;
    background-repeat: no-repeat;
}

.error-box {
    text-align: center;
}

.error-image {
    max-width: 400px;
    margin: 0 auto 58px auto;
}

.error-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.error-card {
    padding: 50px;
    background-color: #ffffff26;
    margin: 0 auto;
    width: fit-content;
    border-radius: 18px;
    border: 1px solid var(--sky-blue-color);
}

.error-card h6 {
    margin-bottom: 20px;
    font-size: 24px;
}

.error-wrapper .error-card .btn-back {
    margin-top: 28px;

}