/* ------------------------------------------------
  Project:   Nexify - Multipurpose HTML5 Template
  Author:    ThemeHt
------------------------------------------------ */

/* ------------------------
    Table of Contents

  1. General
  2. Typography
  3. Text color
  4. Background color
  5. Banner Slider
  6. List Icon
  7. Contact Form
  8. Extra
  9. Responsive Css
------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
    --themeht-primary-color: #c93357;
    --themeht-secondary-color: #005fba;
    --themeht-text-color: #233050;
    --themeht-body-color: #4f4f4f;
    --themeht-white-color: #FFFFFF;
    --themeht-bg-dark-color: #000229;
    --themeht-bg-light-color: #F7F9FE;
    --themeht-border-light-color: #E5E5E5;
    --themeht-rgba-color: rgba(255, 255, 255, 0.9);
    --themeht-typography-body-font-family: "Valley Sans", sans-serif;
}

/* ------------------------
    General
------------------------*/

body {
    scroll-behavior: smooth;
    font-family: var(--themeht-typography-body-font-family);
    font-weight: 600;
    font-style: normal;
    font-size: 17px;
    line-height: 30px;
    color: var(--themeht-body-color);
    overflow-x: hidden;
}

.page-wrapper {
    overflow-x: hidden;
}

/* ------------------------
    Typography
------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    margin-top: 0px;
    text-transform: capitalize;
    font-style: normal;
    margin-bottom: 20px;
    color: var(--themeht-text-color);
    font-family: "Bricolage Grotesque", sans-serif;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
}

.h1,
h1 {
    font-size: 70px;
    line-height: 80px;
    font-weight: 700;
}

.h2,
h2 {
    font-size: 44px;
    line-height: 54px;
    font-weight: 700;
}

.h3,
h3 {
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
}

.h4,
h4 {
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
}

.h5,
h5 {
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
}

.h6,
h6 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
}

ul {
    margin-left: 0;
}


label {
    display: inline-block;
    font-weight: 700;
    color: var(--themeht-text-color);
    font-size: 16px;
    margin-bottom: 7px;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1320px;
    }
}

/* ------------------------
    Helper class
------------------------*/
p {
    line-height: 1.7;
}

.lead {
    font-weight: normal;
    font-size: 17px;
    line-height: 30px;
}

.z-index-0 {
    z-index: 0;
    position: relative;
}

.z-index-1 {
    z-index: 1;
    position: relative;
}

section {
    padding: 50px 0 35px;
    position: relative;
}

.rounded {
    border-radius: 24px !important;
}


/* ------------------------
    Text color
------------------------*/
.text-theme {
    color: var(--themeht-primary-color);
}

.text-black {
    color: var(--themeht-text-color) !important;
}

.text-grey {
    color: var(--themeht-body-color);
}

.text-muted {
    color: #979797 !important;
}


/* ------------------------
    Background color
------------------------*/
.white-bg {
    background-color: var(--themeht-white-color) !important;
}

.dark-bg {
    background-color: #093a9a;
}

.light-bg {
    background-color: var(--themeht-bg-light-color);
}

.primary-bg {
    background-color: var(--themeht-primary-color);
}

.secondary-bg {
    background-color: var(--themeht-secondary-color);
}

.transparent-bg {
    background-color: inherit !important;
}

.grediant-bg {
    background-image: linear-gradient(180deg, #EBE5FF6B 0%, #EBE5FF1A 100%);
}

.border-light {
    border-color: var(--themeht-border-light-color) !important
}

/* ------------------------
    Banner
------------------------*/
[data-bg-img] {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.banner {
    padding: 180px 0 158px;
    position: relative;
    z-index: 9;
}

.banner p {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0;
    max-width: 90%;
}

.text-white h1,
.text-white p {
    color: var(--themeht-white-color)
}

.banner-1 h1 span {
    text-decoration: underline;
    color: var(--themeht-primary-color);
}

.banner h6 {
    font-size: 16px;
    color: #0060ba;
    margin-bottom: 10px;
}

.banner-1 {
    background-image: url(../images/bg/5.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.banner-1:before {
    background-image: url(../images/bg/03.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto;
    opacity: .58;
    transition: background .3s, border-radius .3s, opacity .3s;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 110%;
    height: 100%;
    z-index: -9;
    animation: zoom-fade 5s infinite linear;
}

.banner-1 .banner-img .img1 {
    position: absolute;
    left: -66px;
    top: -62px;
    z-index: 9;
    margin-right: 0;
    width: 100%;
}

.banner-shape-bottom {
    position: absolute;
    bottom: -45px;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: -1;
}

.banner-shape-bottom svg {
    width: 100%;
}

.banner-shape-bottom svg path {
    fill: var(--themeht-white-color);
}

.topBottom {
    animation: topBottom 5s infinite;
}

.themeht-btn+.themeht-btn {
    margin-left: 20px;
}

.banner-2 {
    background-image: linear-gradient(180deg, #fff 10.18%, #FFEFEF85 100%);
    padding: 200px 0 120px;
}

.banner-2 h6 {
    color: var(--themeht-text-color);
}

.banner-2 h6 span {
    background: var(--themeht-primary-color);
    display: inline-block;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    color: var(--themeht-white-color);
    margin-right: 10px;
}

.banner-2 h1 span {
    font-weight: 700;
    margin-bottom: 0;
    background: linear-gradient(90deg, var(--themeht-primary-color) 20%, var(--themeht-secondary-color) 100%);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.banner-2 .banner-img2 {
    position: absolute;
    right: 0;
    bottom: 0
}

.banner-2 .banner-img {
    margin-right: -5vw;
}

.banner-3 {
    padding: 200px 0 120px;
}

.banner-3 h6 {
    color: var(--themeht-text-color);
    border: 1px solid var(--themeht-border-light-color);
    display: inline-block;
    padding: 6px 12px 6px 6px;
    border-radius: 4px
}

.banner-3 h6 span {
    background: var(--themeht-primary-color);
    display: inline-block;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    color: var(--themeht-white-color);
    margin-right: 10px;
}

.banner-3 h1 span {
    font-weight: 700;
    margin-bottom: 0;
    background: linear-gradient(90deg, var(--themeht-primary-color) 20%, var(--themeht-secondary-color) 100%);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.banner-3 .banner-img {
    width: 600px;
    height: 600px;
    background-size: cover;
    clip-path: polygon(94.33013% 47.5%, 94.69846% 48.2899%, 94.92404% 49.13176%, 95% 50%, 94.92404% 50.86824%, 94.69846% 51.7101%, 94.33013% 52.5%, 74.33013% 87.14102%, 73.83022% 87.85495%, 73.21394% 88.47124%, 72.5% 88.97114%, 71.7101% 89.33948%, 70.86824% 89.56505%, 70% 89.64102%, 30% 89.64102%, 29.13176% 89.56505%, 28.2899% 89.33948%, 27.5% 88.97114%, 26.78606% 88.47124%, 26.16978% 87.85495%, 25.66987% 87.14102%, 5.66987% 52.5%, 5.30154% 51.7101%, 5.07596% 50.86824%, 5% 50%, 5.07596% 49.13176%, 5.30154% 48.2899%, 5.66987% 47.5%, 25.66987% 12.85898%, 26.16978% 12.14505%, 26.78606% 11.52876%, 27.5% 11.02886%, 28.2899% 10.66052%, 29.13176% 10.43495%, 30% 10.35898%, 70% 10.35898%, 70.86824% 10.43495%, 71.7101% 10.66052%, 72.5% 11.02886%, 73.21394% 11.52876%, 73.83022% 12.14505%, 74.33013% 12.85898%);
}

.banner-3 .banner-img2 {
    animation: rotate 10s infinite linear;
    position: absolute;
    left: 0;
    top: 0;
    background: red;
    z-index: -1;
    width: 600px;
    height: 600px;
    background-size: cover;
    clip-path: polygon(50% 1.25%, 9.9% 20.56%, 0% 63.95%, 27.75% 98.75%, 72.25% 98.75%, 100% 63.95%, 90.1% 20.56%);
}

.banner-4 h1 {
    text-transform: inherit;
}


/* ------------------------
    Error
------------------------*/
.error-path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: dash 5s linear alternate infinite;
}

.error-path path {
    stroke: var(--themeht-primary-color)
}

.error-path path:nth-child(2) {
    stroke: var(--themeht-primary-color)
}

.error-path path:nth-child(3) {
    stroke: var(--themeht-secondary-color)
}


/* ------------------------
    Timeline
------------------------*/
.main-timeline:before {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background: var(--themeht-border-light-color);
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
}

.timeline_item {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
}

.timeline-order-1 {
    order: 3;
}

.timeline-order-2 {
    order: 2;
    left: 20px;
}

.timeline-order-3 {
    order: 1;
}

.main-timeline .timeline-icon {
    width: 40px;
    height: 40px;
    position: relative;
    right: 20px;
    font-size: 30px;
    background: var(--themeht-white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--themeht-primary-color);
    border-radius: 50%;
    z-index: 9;
}

.main-timeline .date-content {
    width: 50%;
    position: relative;
}

.main-timeline .date-content:before {
    content: "";
    width: 50%;
    height: 1px;
    background: var(--themeht-border-light-color);
    margin: auto 0;
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
}

.main-timeline .timeline-order-1:before {
    content: "";
    width: 50%;
    height: 1px;
    background: var(--themeht-border-light-color);
    position: absolute;
    padding-right: 30px;
    margin-right: 50% !important;
}

.main-timeline .date {
    display: flex;
    line-height: 1;
    font-weight: 700;
    font-size: 30px;
    color: var(--themeht-white-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    align-items: center;
    justify-content: center;
    background: var(--themeht-primary-color);
    border-radius: 50%;
    width: 125px;
    height: 125px;
    z-index: 1;
}

.main-timeline .timeline-content {
    padding: 20px 20px;
}


@media (max-width:640px) {
    .timeline {
        flex-direction: column !important;
    }

    .main-timeline:before {
        margin-left: 1px;
    }

    .main-timeline .timeline-icon {
        margin: auto 2px;
    }

    .main-timeline .timeline-content {
        padding: 40px 30px;
    }

    .timeline-order-1 {
        order: 2;
    }

    .timeline-order-2 {
        order: 1;
        left: -1em;
    }

    .timeline-order-3 {
        order: 3;
    }

    .timeline-order-1b {
        order: 2;
    }

    .timeline-order-2b {
        order: 1;
        left: -1em;
    }

    .timeline-order-3b {
        order: 3;
    }

    .main-timeline .timeline-order-1:before {
        width: 100%;
    }

    .main-timeline .timeline-order-1b:before {
        width: 100%;
    }

    .main-timeline .timeline-order-1b:before {
        content: "";
        width: 100%;
        height: 2px;
        background: var(--themeht-border-light-color);
        position: absolute;
        top: 0;
        padding-right: 30px;
        bottom: 0;
        margin-right: 50% !important;
    }

    .main-timeline .date {
        width: 70px;
        height: 70px;
    }
}

@media (max-width:350px) {
    .timeline-icon {
        visibility: hidden;
    }

    .main-timeline .date-content:before {
        visibility: hidden;
    }

    .date-content {
        left: -15px;
    }
}


/* ------------------------
    Video
------------------------*/
.video-btn {
    display: flex;
    align-items: center;
}

.video-btn-icon {
    position: relative;
    display: inline-block;
    z-index: 9;
}

.video-btn-icon>i {
    color: var(--themeht-primary-color);
    font-size: 30px;
}

.video-btn span {
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    color: var(--themeht-text-color);
    margin-left: 10px;
    flex-shrink: 0
}

.video-btn.style-2 {
    position: relative;
    display: inline-block;
}

.video-btn.style-2 .play-btn {
    animation: ripple-white 1s linear infinite;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    position: relative;
}

.video-btn.style-2 .play-btn i {
    font-size: 34px;
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--themeht-white-color);
    -webkit-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.2s ease-out !important;
    transform: translate3d(-50%, -50%, 0);
}


/* ------------------------
    List Icon
------------------------*/
.list-icon.style-1 li {
    position: relative;
    display: flex;
    margin-bottom: 11px;
    align-items: center;
}

.list-icon.style-1 li:last-child {
    margin-bottom: 0
}

.list-icon.style-1 li i {
    color: #0a3a99;
    font-size: 20px;
    line-height: 1;
    margin-right: 10px;
    flex-shrink: 0;
}

.list-icon.style-2 li {
    position: relative;
    display: flex;
    margin-bottom: 15px;
    align-items: center;
}

.list-icon.style-2 li:last-child {
    margin-bottom: 0
}

.list-icon.style-2 li i {
    color: var(--themeht-primary-color);
    font-size: 20px;
    line-height: 1;
    margin-right: 10px;
}


/* ------------------------
 Marquee Text
------------------------*/
.marquee-wrap {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: block;
}

.marquee-text {
    animation: marquee 40s linear infinite;
    position: relative;
    width: 100%;
    white-space: nowrap;
}

.marquee-text span {
    font-size: 200px;
    line-height: 200px;
    margin: 0 30px;
    color: var(--themeht-text-color);
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 13.36px 8.896px #c4b59d, 0 -2px 1px #fff;
}

.marquee-text span:nth-child(2n+2) {
    color: var(--themeht-white-color);
    text-shadow: -1px -1px 0 var(--themeht-text-color), 1px -1px 0 var(--themeht-text-color), -1px 1px 0 var(--themeht-text-color), 1px 1px 0 var(--themeht-text-color);
}

.marquee-wrap:before {
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
    height: 100%;
    content: "";
    z-index: 9;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 98%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c4ef17', endColorstr='#c4ef17', GradientType=1);
}

.marquee-wrap:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 30%;
    height: 100%;
    content: "";
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c4ef17', endColorstr='#c4ef17', GradientType=1);
}


/* ------------------------
    Countdown
------------------------*/
.countdown {
    margin: 50px 0;
    padding: 50px 0;
    display: table;
    width: 100%;
    border-top: 2px dashed var(--themeht-border-light-color);
    border-bottom: 2px dashed var(--themeht-border-light-color);
}

.countdown>li {
    font-weight: 700;
    text-align: center;
    list-style-type: none;
    display: table-cell;
    width: auto;
}

.countdown>li span {
    font-size: 70px;
    font-weight: 700;
    line-height: 60px;
    display: inline-block;
}

.countdown>li p {
    font-size: 20px;
    display: inline-block;
    line-height: 30px;
    margin-bottom: 0;
    color: var(--themeht-text-color);
}

.coming-soon .subscribe-form {
    margin: 0 auto;
}


/* ------------------------
 Shape & Animation
------------------------*/
.dash-img-box {
    background: var(--themeht-white-color);
    padding: 20px;
    border-radius: 24px;
    position: relative;
    margin-left: 5%;
    margin-right: 5%;
}

.dash-img-box::before {
    content: "";
    height: 20px;
    width: 110%;
    position: absolute;
    bottom: -1px;
    background: var(--themeht-white-color);
    left: -5%;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.dash-box {
    margin-left: -250px
}

.dash-box.right {
    margin-left: inherit;
    margin-right: -250px
}

.animated-icon-shape {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: -1;
}

.small-circle-animation {
    animation: small-animation 2s infinite linear;
    position: absolute;
}

.animated-icon-shape img:nth-child(1) {
    left: 6%;
    top: 10%;
}

.animated-icon-shape img:nth-child(2) {
    left: 2%;
    bottom: 15%;
    animation: small-animation2 2s infinite linear;
}

.animated-icon-shape img:nth-child(3) {
    right: 6%;
    top: 5%;
    animation: small-animation2 2s infinite linear;
}

.animated-icon-shape img:nth-child(4) {
    right: 2%;
    bottom: 20%;
}

.animated-icon-shape.style-2 img:nth-child(2) {
    left: auto;
    right: 2%;
    bottom: 20%;
}

#particles-js {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.link-about {
    border: 1px solid var(--themeht-border-light-color);
    border-radius: 4px;
    padding: 20px 30px 20px 20px;
}

.link-about span {
    padding: 5px 15px;
    background-color: var(--themeht-bg-dark-color);
    border-radius: 4px;
    color: var(--themeht-white-color);
    margin-right: 10px
}

.link-about a {
    color: var(--themeht-primary-color);
    margin-left: 10px;
    font-weight: 700;
    text-decoration: underline !important;
}

.lg-title-wrap {
    text-align: center;
}

.text-large {
    font-size: 250px;
    font-weight: 900;
    line-height: 1;
    color: #ebe5ff;
}

.image-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.testimonial-sec-bg {
    background-image: url("../images/bg/05.webp");
    background-position: 66% 87%;
    background-repeat: no-repeat;
    background-size: 1460px 1260px;
}

.testimonial-sec-bg.style-2 {
    background-position: 96% 70%;
    background-size: 1170px 1260px;
}

.sonar-wrapper {
    z-index: 0;
    position: absolute;
    right: 70px;
    bottom: 20%;
}

.sonar-emitter {
    position: relative;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 9999px;
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}

.sonar-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

.sonar-wave {
    animation: sonarWave 2s linear infinite;
}

.spinner {
    position: absolute;
    left: 100px;
    top: 30%;
}

.spinner::after,
.spinner::before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    width: 50px;
    height: 50px;
    top: 50%;
    animation: up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
    left: 50%;
    background: var(--themeht-primary-color);
}

.spinner::after {
    background: var(--themeht-secondary-color);
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    animation: down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}

.image-video-sec {
    padding: 400px 0 120px;
}

.bg-dark-gradient-overlay {
    position: relative;
    overflow: hidden;
    z-index: 9;
}

.bg-dark-gradient-overlay:before {
    background: -webkit-gradient(linear, left bottom, left top, color-stop(7%, #141622), to(transparent));
    background: linear-gradient(to top, #141622 7%, transparent 100%);
    opacity: .75;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    content: "";
    z-index: -1;
}

.ht-first-letter::first-letter {
    font-size: 30px;
    line-height: 30px;
    padding: 8px;
    margin-top: 5px;
    border-radius: 5px;
    display: inline-block;
    float: left;
    font-weight: 700;
    margin-right: 8px;
    background: #0a3a99;
    color: var(--themeht-white-color);
}


/* ------------------------
 Clients Logo
------------------------*/

.clients-logo {
    text-align: center;
}

.clients-logo img {
    width: 100px;
    -webkit-filter: contrast(0%);
    filter: contrast(0%);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
    cursor: pointer;
}

.clients-logo:hover img {
    -webkit-filter: none;
    filter: none;
    opacity: 1;
}

.client-text {
    text-align: center;
    position: relative;
}

.client-text:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
    background: var(--themeht-border-light-color);
    width: 70%;
    height: 1px;
}

.client-text span {
    background: var(--themeht-white-color);
    padding: 5px 40px;
}

.client-swiper .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
    position: relative;
}

.client-swiper .swiper-slide {
    display: flex;
    align-items: center;
    width: auto !important;
    padding: 0 50px;
}


/* ------------------------
Extra
------------------------*/
.contact-info {
    padding: 30px;
}

.contact-info li {
    padding-left: 50px;
    padding-top: 5px;
    position: relative;
    margin-bottom: 20px;
}

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

.contact-info li i {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 50px;
    font-size: 36px;
    color: #0a3a99;
    display: inline-block;
}

.contact-info li span {
    font-size: 12px;
    line-height: 1;
    color: var(--themeht-body-color);
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.contact-info li p {
    margin-bottom: 0;
    line-height: 24px;
    color: var(--themeht-text-color);
}

.contact-info li a {
    color: var(--themeht-text-color);
}

.contact-info li a:hover {
    color: var(--themeht-primary-color);
}


.form-group {
    margin-bottom: 15px;
    position: relative;
}

label {
    font-size: 14px;
    line-height: 1;
    color: var(--themeht-text-color)
}

.form-control {
    height: 55px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--themeht-text-color);
    background-color: var(--themeht-white-color);
    border: 1px solid var(--themeht-border-light-color);
}

textarea.form-control {
    height: 120px;
    border-radius: 4px;
}

.form-control:focus {
    box-shadow: none;
    background: none;
    border-color: var(--themeht-primary-color);
}

select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    height: 50px !important;
    color: var(--themeht-body-color);
}

iframe {
    width: 100%;
    border: none;
    pointer-events: auto;
}

.iframe-h {
    height: 500px !important;
}

.iframe-h-2 {
    height: 600px !important;
}

.map iframe {
    border: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-filter: brightness(100%) contrast(100%) saturate(50%) blur(0px) hue-rotate(0deg);
    -moz-filter: brightness(100%) contrast(100%) saturate(50%) blur(0px) hue-rotate(0deg);
    -ms-filter: brightness(100%) contrast(100%) saturate(50%) blur(0px) hue-rotate(0deg);
    -o-filter: brightness(100%) contrast(100%) saturate(50%) blur(0px) hue-rotate(0deg);
    filter: brightness(100%) contrast(100%) saturate(50%) blur(0px) hue-rotate(0deg);
}

.help-block.with-errors {
    position: absolute;
    color: red;
    right: 15px;
    font-size: 10px;
    line-height: 14px;
}

.form-control::-webkit-input-placeholder {
    color: var(--themeht-body-color);
}

.form-control::-moz-placeholder {
    color: var(--themeht-body-color);
}

.form-control:-ms-input-placeholder {
    color: var(--themeht-body-color);
}

.form-control:-moz-placeholder {
    color: var(--themeht-body-color);
}

.bg-dark-blue {
    background: #10287e;
}

.counter-sec {
    padding: 45px 0 25px;
}

.yellow-bg {
    background-color: #f5b03a;
}

:root {
    --primary-dark: #0a3a99;
    --primary-green: #fbbc05;
    --text-light: #e5e7eb;
    --text-gray: #9ca3af;
    --bg-light: #f3f4f6;
}

/* Main Container */
.services-section {
    background-color: var(--primary-dark);
    /* width: 90%; */
    max-width: 1320px;
    margin: 2rem auto;
    padding: 2rem 4rem;
    border-radius: 2rem;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    position: relative;
    overflow: hidden;
    /* Ensures animations and pseudo-elements don't overflow */
}

/* Background decorative shape */
.services-section::before {
    content: '';
    position: absolute;
    top: -150px;
    left: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.1), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: pulseGlow 8s infinite ease-in-out;
}

/* Second background decorative shape */
.services-section::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 250px;
    height: 250px;
    border: 30px solid rgba(52, 211, 153, 0.05);
    border-radius: 50%;
    pointer-events: none;
}


/* Left Side - Content */
.services-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: fadeInContent 1s ease-out forwards;
}

.services-content .tagline {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-gray);
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.services-content h1 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #fff;
}

.services-content h1 span {
    background: linear-gradient(90deg, #34d399, #a7f3d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.services-content p {
    color: var(--text-gray);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.services-btn {
    background-color: var(--primary-green);
    color: var(--primary-dark);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    align-self: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(52, 211, 153, 0.2);
}

.services-btn .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    margin-left: 0.5rem;
}

.services-btn:hover .arrow {
    transform: rotate(-45deg);
}

/* Right Side - Grid of Services */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.service-card {
    padding: 1.5rem;
    border-radius: 1rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: scale(0.9);
    transform-origin: center;
    animation: scaleInCard 0.6s ease-out forwards;
}

/* Staggering card animations */
.service-card:nth-child(1) {
    animation-delay: 0.2s;
}

.service-card:nth-child(2) {
    animation-delay: 0.4s;
}

.service-card:nth-child(3) {
    animation-delay: 0.6s;
}

.service-card:nth-child(4) {
    animation-delay: 0.8s;
}

.service-card:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateY(-5px) scale(1.02);
}

.service-card .icon {
    background-color: var(--primary-green);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover .icon {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
}

.service-card .icon svg {
    width: 30px;
    height: 30px;
    stroke: var(--primary-dark);
}

.service-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.service-card p {
    color: var(--text-gray);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Animations */
@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes scaleInCard {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .services-section {
        grid-template-columns: 1fr;
        padding: 3rem;
        gap: 3rem;
    }

    .services-content h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .services-section {
        padding: 2.5rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 0rem;
    }

    .services-content h1 {
        font-size: 2.2rem;
    }
}

@media (max-width: 480px) {
    .services-section {
        padding: 2rem 1.5rem;
        border-radius: 1.5rem;
    }

    .services-content h1 {
        font-size: 1.8rem;
    }

    .services-btn {
        width: 100%;
        text-align: center;
    }
}

.text-justify {
    text-align: justify;
}

/* --- Main Container --- */
.services-features-wrapper {
    width: 100%;
    /* padding: 5rem 2rem; */
    position: relative;
    text-align: center;
}

/* --- Header Section --- */
.services-header-content {
    margin-bottom: 5rem;
    /* Increased margin */
}

.services-title {
    font-size: 2.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0;
    line-height: 66px;
}

.services-description {
    font-size: 1rem;
    color: #64748b;
    max-width: 550px;
    margin: 0 auto 2rem auto;
    line-height: 1.6;
}

.cta-button {
    background-color: #fff;
    color: #4338ca;
    /* Darker purple text */
    border: 1px solid #e2e8f0;
    padding: 0.8rem 1.6rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cta-button:hover {
    background-color: #4f46e5;
    color: #fff;
    border-color: #4f46e5;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(79, 70, 229, 0.2);
}

/* --- Features Grid --- */
.features-grid-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2.5rem 4rem;
}

.features-column {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    /* Increased space between items */
}

/* --- Central Robot Image --- */
.central-robot-figure {
    grid-column: 2 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: float-robot 4s ease-in-out infinite;
}

.robot-image {
    max-width: 280px;
    width: 100%;
    height: auto;
}

.robot-shadow-glow {
    width: 150px;
    height: 25px;
    /* Updated to a cyan glow to match the new image */
    background: radial-gradient(ellipse at center, rgba(3, 227, 252, 0.3) 0%, rgba(3, 227, 252, 0) 70%);
    border-radius: 50%;
    margin-top: 1rem;
    animation: shrink-shadow 4s ease-in-out infinite;
}


/* --- Feature Card Styles --- */
.feature-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    text-align: left;
    opacity: 0;
    transform: translateY(20px);
    animation: fade-in-up 0.6s ease-out forwards;
}

/* Staggered animation delays */
.features-column.left-col .feature-item:nth-child(1) {
    animation-delay: 0.2s;
}

.features-column.left-col .feature-item:nth-child(2) {
    animation-delay: 0.4s;
}

.features-column.left-col .feature-item:nth-child(3) {
    animation-delay: 0.6s;
}

.features-column.right-col .feature-item:nth-child(1) {
    animation-delay: 0.2s;
}

.features-column.right-col .feature-item:nth-child(2) {
    animation-delay: 0.4s;
}

.features-column.right-col .feature-item:nth-child(3) {
    animation-delay: 0.6s;
}

.feature-icon-wrapper {
    background: #0a3a99;
    color: #fff;
    border-radius: 10px;
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 5px 10px rgba(79, 70, 229, 0.2);
    transition: transform 0.3s ease;
}

.feature-item:hover .feature-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
}

.feature-icon-wrapper svg {
    width: 28px;
    height: 28px;
}

.feature-content h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 0.3rem 0;
    color: #1e293b;
}

.feature-content p {
    font-size: 0.9rem;
    /* Slightly smaller */
    /* color: #94a3b8; */
    /* Lighter text color */
    margin: 0;
    line-height: 1.6;
}

.features-column.left-col .feature-item {
    text-align: right;
    flex-direction: row-reverse;
}


/* --- Decorative Elements & Animations --- */
.decorative-circle {
    position: absolute;
    background-color: #c7d2fe;
    /* Updated color */
    border-radius: 50%;
    animation: bobbing-bubble 8s ease-in-out infinite;
}

.circle-1 {
    top: 10%;
    left: 8%;
    width: 15px;
    height: 15px;
    animation-delay: 0s;
}

.circle-2 {
    top: 35%;
    left: 22%;
    width: 9px;
    height: 9px;
    animation-delay: 1.5s;
}

.circle-3 {
    top: 50%;
    right: 20%;
    width: 12px;
    height: 12px;
    animation-delay: 2.5s;
}

.circle-4 {
    bottom: 15%;
    right: 12%;
    width: 16px;
    height: 16px;
    animation-delay: 3.5s;
}

/* --- Keyframe Animations --- */
@keyframes float-robot {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-25px);
    }
}

@keyframes shrink-shadow {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.8);
        opacity: 0.7;
    }
}

@keyframes bobbing-bubble {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-30px) scale(1.1);
    }
}

@keyframes fade-in-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Responsive Design --- */
@media (max-width: 1024px) {
    .features-grid-container {
        display: block;
    }

    .central-robot-figure {
        order: 2;
        margin: 2rem 0;
    }

    .features-column {
        order: 1;
        gap: 2.5rem;
    }

    .features-column.right-col {
        order: 3;
    }

    .features-column .feature-item,
    .features-column.left-col .feature-item {
        flex-direction: row;
        text-align: left;
        max-width: 450px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {

    .services-title {
        font-size: 2.25rem;
    }

    .features-column .feature-item,
    .features-column.left-col .feature-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

:root {
    --primary-green-dark: #128271;
    --primary-green-light: #32d6a5;
    --neutral-dark: #2d3748;
    --neutral-medium: #4a5568;
    --neutral-light: #f7fafc;
    --background-color: #ffffff;
    --text-light: #ffffff;
}


/* Main Section Container */
.empowerment-section-container {
    /* max-width: 1200px;
    margin: auto; */
    overflow: hidden;
    /* Contains floats and margins */
}

/* Section Header Styles */
.empowerment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    animation: fadeInDown 0.8s ease-out;
}

.empowerment-approach-tag {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-green-dark);
    letter-spacing: 1px;
}

/* --- Call-to-Action Button --- */
.empowerment-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-image: linear-gradient(to right, var(--primary-green-dark), var(--primary-green-light));
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.empowerment-contact-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.empowerment-contact-btn svg {
    transition: transform 0.3s ease;
}

.empowerment-contact-btn:hover svg {
    transform: rotate(-45deg);
}

/* Main Content Grid */
.empowerment-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* --- Left Column: Text Content --- */
.empowerment-text-content {
    animation: slideInLeft 1s ease-out;
}

.empowerment-main-heading {
    /* font-size: 3rem;
    font-weight: 600;
    line-height: 1.2; */
    margin-top: 0;
    margin-bottom: 1rem;
}

.empowerment-highlight-text {
    background: linear-gradient(to right, #0a3a99, #13385b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.empowerment-description {
    color: var(--neutral-medium);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Features Layout */
.empowerment-features-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.empowerment-features-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.empowerment-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.empowerment-feature-icon-wrapper {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #0a3a99;
    flex-shrink: 0;
    /* Prevents icon from shrinking */
}

.empowerment-feature-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.empowerment-feature-description {
    color: var(--neutral-medium);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
    text-align: justify;
}

/* --- Right Column: Image --- */
.empowerment-image-wrapper {
    animation: slideInRight 1s ease-out;
}

.empowerment-showcase-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* --- Animation Keyframes --- */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .empowerment-content-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .empowerment-main-heading {
        font-size: 2.5rem;
    }

    .empowerment-image-wrapper {
        order: -1;
        /* Move image to the top on smaller screens */
    }
}

@media (max-width: 768px) {
    .empowerment-features-top-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .empowerment-main-heading {
        font-size: 2rem;
    }

    .empowerment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* Testimonials Section Container */
.video-testimonials-section {
    width: 100%;
    /* max-width: 1200px; */
    text-align: center;
}

.video-testimonials-section h2 {
    font-size: 2.5rem;
    color: #1a202c;
    margin-bottom: 1rem;
}

.video-testimonials-section .section-subtitle {
    font-size: 1.1rem;
    color: #4a5568;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Grid for Testimonial Cards */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Testimonial Card Styles */
.testimonial-card {
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Video Container and Custom Controls */
.video-wrapper {
    position: relative;
    cursor: pointer;
}

.testimonial-video {
    width: 100%;
    height: auto;
    display: block;
}

.custom-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background-color: #dc3545;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    pointer-events: none;
    /* Allows clicks to pass through to the wrapper */
}

.video-wrapper:hover .custom-play-button {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: rgba(255, 107, 53, 1);
}

.custom-play-button svg {
    width: 30px;
    height: 30px;
    margin-left: 5px;
}

/* Hide play button when video is playing */
.video-wrapper.playing .custom-play-button {
    opacity: 0;
    visibility: hidden;
}

/* Card Details Section */
.card-details {
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.author-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
    line-height: 11px;
    text-align: left;
}

.star-rating svg {
    width: 14px;
    height: 14px;
    color: #ffc107;
}

.verified-badge {
    background-color: #edf2f7;
    color: #2d3748;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.verified-badge svg {
    width: 16px;
    height: 16px;
    color: #3182ce;
}

/* Responsive Design: Tablet and Mobile */
@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .video-testimonials-section h2 {
        font-size: 2rem;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

.founder-1 {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    padding: 17px;
    margin-bottom: 40px;
    border-radius: 35px;
    border-left: 4px solid #0a3a99;
    border-bottom: 5px solid #0a3a99;
}

.founder-2 {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    padding: 17px;
    border-radius: 35px;
    border-right: 4px solid #0a3a99;
    border-bottom: 5px solid #0a3a99;
}

@media (max-width: 991px) {
    .header {
        left: 0;
    }

    .banner-text h1 {
        font-size: 31px;
        line-height: 39px;
    }

    .post-card .post-title h4 {
        font-size: 23px;
        line-height: 30px;
    }

    .list-icon.style-1 li {
        margin-bottom: 1px;
        font-size: 14px;
        align-items: center;
    }

    .why-choose-des {
        font-size: 14px;
        text-align: justify;
    }

    .d-mob-none {
        display: none;
    }

    .sm-mt-0 {
        margin-top: 0 !important;
    }

    .testimonial.style-2 {
        margin: 15px;
    }

    .theme-title p {
        text-align: justify;
        font-size: 15px;
        line-height: 1.5;
    }

    .theme-title {
        margin-bottom: 21px;
    }

    .accordion .accordion-button {
        font-weight: 600;
        font-size: 16px;
    }

    .accordion .accordion-body {
        padding: 15px 0 0;
    }

    .theme-title h6 {
        font-size: 11px;
        font-weight: 700;
    }

    .media-icon li {
        margin-bottom: 10px;
    }

    .footer-menu li {
        margin-bottom: 4px;
    }

    .secondary-footer {
        margin-top: 6px;
        padding-top: 10px;
    }

    .services-section {
        margin: 0;
    }

    .service-card {
        padding: 1rem;
    }

    .services-features-wrapper {
        padding: 1rem 0rem;
    }

    .founder-1 {
        border-left: 2px solid #0a3a99;
        border-right: 2px solid #0a3a99;
    }

    .founder-heading {
        font-size: 24px;
        line-height: 34px;
    }

    .founder-2 {
        border-left: 2px solid #0a3a99;
        border-right: 2px solid #0a3a99;
    }

    #contact-form .themeht-btn.primary-btn {
        text-align: center;
        display: block;
        margin: auto;
        width: 100%;
    }
}

:root {
    --brand-color: #ff8c00;
    --background-color: #f8f9fa;
    --text-color: #212529;
    --card-background: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

/* --- Main Container --- */
.testimonial-video-container {
    width: 100%;
    /* max-width: 1200px;
    padding: 4rem 1rem; */
    box-sizing: border-box;
    padding-top: 50px;
}

.testimonial-header {
    text-align: left;
    margin-bottom: 2.5rem;
}

.testimonial-header .title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    display: inline-block;
    vertical-align: middle;
}

.testimonial-header .tag {
    display: inline-block;
    background-color: var(--brand-color);
    color: white;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 6px;
    margin-left: 1rem;
    vertical-align: middle;
}

.testimonial-header .subtitle {
    font-size: 1.1rem;
    color: #6c757d;
    margin: 0;
}

/* --- Slider Navigation Wrapper --- */
.slider-navigation-wrapper {
    position: relative;
}

/* --- Slider Styling --- */
.custom-video-slider-wrapper {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.custom-video-slider-track {
    display: flex;
    /* JS will handle transform */
    transition: transform 0.5s ease-in-out;
}

/* --- Video Slide Styling --- */
.video-card {
    flex-shrink: 0;
    width: 230px;
    margin: 0 10px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--shadow-color);
}

.video-player {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

.learner-name {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--brand-color);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* --- Play Button Overlay --- */
.play-button-overlay {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.video-card:hover .play-button-overlay {
    transform: scale(1.1);
}

.play-button-overlay svg {
    width: 20px;
    height: 20px;
    color: var(--text-color);
    margin-left: 2px;
}

.video-card.is-playing .play-button-overlay {
    opacity: 0;
    visibility: hidden;
}

/* --- Navigation Buttons --- */
.slider-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
    opacity: 0;
    /* Hide by default, show on hover */
}

.slider-navigation-wrapper:hover .slider-nav-button {
    opacity: 1;
}

.slider-nav-button:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.slider-nav-button.prev-button {
    left: -22px;
}

.slider-nav-button.next-button {
    right: -22px;
}

.slider-nav-button svg {
    width: 24px;
    height: 24px;
    color: var(--text-color);
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .testimonial-header .title {
        font-size: 2rem;
    }

    .testimonial-header {
        text-align: center;
    }

    .video-card {
        width: 200px;
    }

    .video-player {
        height: 350px;
    }
}

@media (max-width: 480px) {
    .testimonial-video-container {
        padding: 2rem 0.5rem;
    }

    .video-card {
        width: 180px;
    }

    .video-player {
        height: 320px;
    }

    .slider-nav-button.prev-button {
        left: 10px;
    }

    .slider-nav-button.next-button {
        right: 10px;
    }
}

/* whatsapp icon */
.whatsapp-container {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 1000;
    width: 65px;
    height: 65px;
    /* Container ab float karega jisse waves bhi sath float honge */
    animation: float-3d 3s ease-in-out infinite;
}

.whatsapp-container:hover {
    animation-play-state: paused;
}

.pulse-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(37, 211, 102, 0.8);
    border-radius: 50%;
    z-index: -1;
    animation: waves 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
    pointer-events: none;
}

.whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-radius: 50%;
    text-decoration: none;
    position: relative;

    /* 3D Shadows - Outer shadow and Inner highlights */
    box-shadow:
        0px 8px 15px rgba(0, 0, 0, 0.3),
        inset 0px -4px 6px rgba(0, 0, 0, 0.2),
        inset 0px 4px 6px rgba(255, 255, 255, 0.4);

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.whatsapp-btn:hover {
    transform: translateY(-5px) scale(1.05);
    /* Lifts up */
    box-shadow:
        0px 12px 20px rgba(0, 0, 0, 0.4),
        inset 0px -4px 6px rgba(0, 0, 0, 0.2),
        inset 0px 5px 8px rgba(255, 255, 255, 0.5);
}

.whatsapp-btn:active {
    transform: translateY(2px) scale(0.95);
    /* Presses down */
    box-shadow:
        0px 4px 8px rgba(0, 0, 0, 0.3),
        inset 0px 4px 8px rgba(0, 0, 0, 0.4);
}

.whatsapp-icon {
    width: 38px;
    height: 38px;
    fill: #ffffff;
    display: block;
    margin: auto;
    /* Drop shadow on the icon itself for extra depth */
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2));
}

.tooltip {
    position: absolute;
    left: 80px;
    /* Positioned to the Right of the button */
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffffff;
    color: #128C7E;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    /* Prevents tooltip from blocking clicks */
}

/* Tooltip Arrow */
.tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    /* Pointing left towards the button */
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent #ffffff transparent transparent;
}

.whatsapp-btn:hover .tooltip {
    opacity: 1;
    visibility: visible;
    left: 85px;
    /* Slight slide effect on hover */
}

@keyframes float-3d {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes waves {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .whatsapp-container {
        left: 20px;
        bottom: 20px;
        width: 55px;
        /* Container size adjusted for mobile */
        height: 55px;
    }

    .whatsapp-icon {
        width: 30px;
        /* Smaller icon */
        height: 30px;
    }

    .tooltip {
        display: none;
        /* Hide tooltip on mobile */
    }
}

/* hero section */
:root {
    --tgi-blue: #0a3a99;
    /* From logo/image */
    --tgi-yellow: #fbbb06;
    /* From logo/image */
    --tgi-white: #ffffff;
    --tgi-light-bg: #f8f9fa;
    --tgi-text-dark: #333333;
}

.tgi-hero-wrapper {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(240, 248, 255, 0.6) 100%);
    overflow: hidden;
    text-align: center;
    padding: 4rem 1rem 0rem;
    /* font-family: 'Montserrat', sans-serif; */
    /* background-image: url(../images/bg/3.png); */
}

/* Background Animated Shapes */
.tgi-shape {
    position: absolute;
    z-index: 1;
    opacity: 0.6;
    animation: tgi-float 15s infinite linear;
}

.tgi-shape-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 34, 121, 0.1) 0%, rgba(0, 34, 121, 0) 70%);
    top: -10%;
    left: -10%;
    animation-duration: 25s;
}

.tgi-shape-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(251, 187, 6, 0.15) 0%, rgba(251, 187, 6, 0) 70%);
    bottom: -20%;
    right: -10%;
    animation-duration: 30s;
    animation-direction: reverse;
}

.tgi-shape-3 {
    width: 150px;
    height: 150px;
    border: 2px dashed rgba(0, 34, 121, 0.2);
    border-radius: 50%;
    top: 20%;
    right: 15%;
    animation: tgi-spin 20s infinite linear;
}

.tgi-shape-4 {
    width: 80px;
    height: 80px;
    background-color: rgba(251, 187, 6, 0.2);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    bottom: 30%;
    left: 10%;
    animation: tgi-morph 10s infinite ease-in-out alternate;
}

.tgi-shape-5 {
    width: 120px;
    height: 120px;
    border: 3px solid rgba(0, 34, 121, 0.1);
    top: 60%;
    left: 20%;
    transform: rotate(45deg);
    animation: tgi-float-rotate 18s infinite linear;
}

/* NEW SHAPES FOR CONCEPT */
.tgi-shape-6 {
    position: absolute;
    font-size: 3rem;
    color: rgba(251, 187, 6, 0.15);
    /* Yellow */
    top: 15%;
    left: 25%;
    animation: tgi-float 12s infinite ease-in-out;
    z-index: 1;
}

.tgi-shape-7 {
    position: absolute;
    font-size: 4rem;
    color: rgba(0, 34, 121, 0.08);
    /* Blue */
    bottom: 25%;
    right: 25%;
    animation: tgi-float-rotate 20s infinite linear reverse;
    z-index: 1;
}

.tgi-shape-8 {
    position: absolute;
    font-size: 2.5rem;
    color: rgba(0, 34, 121, 0.1);
    top: 40%;
    right: 5%;
    animation: tgi-spin 25s infinite linear;
    z-index: 1;
}

/* NEW CORNER SHAPES */
.tgi-shape-9 {
    position: absolute;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, rgba(251, 187, 6, 0.2) 0%, rgba(251, 187, 6, 0) 100%);
    border-radius: 50%;
    top: -50px;
    left: -50px;
    animation: tgi-pulse-corner 8s infinite alternate;
    z-index: 0;
}

.tgi-shape-10 {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 4px solid rgba(0, 34, 121, 0.05);
    border-radius: 30% 70% 50% 50% / 50% 50% 70% 30%;
    bottom: -80px;
    left: -30px;
    animation: tgi-morph 15s infinite ease-in-out;
    z-index: 0;
}

.tgi-shape-11 {
    position: absolute;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(0, 34, 121, 0.15) 0%, rgba(0, 34, 121, 0) 70%);
    top: -20px;
    right: -20px;
    animation: tgi-float 10s infinite reverse;
    z-index: 0;
}

.tgi-shape-12 {
    position: absolute;
    width: 250px;
    height: 250px;
    border: 2px dashed rgba(251, 187, 6, 0.15);
    border-radius: 50%;
    bottom: -100px;
    right: -50px;
    animation: tgi-spin 30s infinite linear reverse;
    z-index: 0;
}

@keyframes tgi-pulse-corner {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

@keyframes tgi-float {
    0% {
        transform: translateY(0) translateX(0);
    }

    33% {
        transform: translateY(-30px) translateX(20px);
    }

    66% {
        transform: translateY(20px) translateX(-20px);
    }

    100% {
        transform: translateY(0) translateX(0);
    }
}

@keyframes tgi-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes tgi-morph {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }

    50% {
        border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
    }

    100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
}

@keyframes tgi-float-rotate {
    0% {
        transform: translateY(0) rotate(45deg);
    }

    50% {
        transform: translateY(-40px) rotate(90deg);
    }

    100% {
        transform: translateY(0) rotate(45deg);
    }
}

.tgi-hero-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
    margin: 0 auto;
}

.tgi-main-heading {
    color: var(--tgi-blue);
    font-size: 4.5rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    animation: tgi-slideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(30px);
}

.tgi-main-heading span {
    color: var(--tgi-yellow);
    position: relative;
    display: inline-block;
}

.tgi-main-heading span::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 8px;
    background-color: var(--tgi-yellow);
    bottom: 5px;
    left: 0;
    z-index: -1;
    opacity: 0.3;
    border-radius: 4px;
}

.tgi-sub-heading {
    font-size: 1.25rem;
    color: var(--tgi-text-dark);
    margin-bottom: 2rem;
    font-weight: 600;
    animation: tgi-slideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
    opacity: 0;
    transform: translateY(30px);
}

.tgi-skills-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
    animation: tgi-slideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
    opacity: 0;
    transform: translateY(30px);
}

.tgi-skill-tag {
    background-color: white;
    color: var(--tgi-blue);
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(0, 34, 121, 0.08);
    border: 1px solid rgba(0, 34, 121, 0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tgi-skill-tag:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 34, 121, 0.12);
    border-color: var(--tgi-yellow);
}

.tgi-skill-tag i {
    color: var(--tgi-yellow);
}

.tgi-hero-actions {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    animation: tgi-slideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
    opacity: 0;
    transform: translateY(30px);
}

.tgi-btn-primary {
    background-color: var(--tgi-blue);
    color: var(--tgi-white);
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid var(--tgi-blue);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.tgi-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
    z-index: -1;
}

.tgi-btn-primary:hover::before {
    left: 0;
}

.tgi-btn-primary:hover {
    color: var(--tgi-white);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 34, 121, 0.2);
}

.tgi-btn-primary i {
    margin-right: 8px;
}

.tgi-btn-secondary {
    background-color: var(--tgi-yellow);
    color: var(--tgi-blue);
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid var(--tgi-yellow);
    box-shadow: 0 4px 15px rgba(251, 187, 6, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Added animation to the secondary button */
.tgi-btn-secondary {
    animation: tgi-wobble 3s infinite ease-in-out;
}

.tgi-btn-secondary:hover {
    background-color: transparent;
    color: var(--tgi-blue);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(251, 187, 6, 0.4);
}

.tgi-btn-secondary i {
    animation: tgi-pulse 2s infinite;
}

@keyframes tgi-slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tgi-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* Keyframes for button wobble */
@keyframes tgi-wobble {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    5% {
        transform: translateY(-2px) rotate(1deg);
    }

    10% {
        transform: translateY(1px) rotate(-1deg);
    }

    15% {
        transform: translateY(-1px) rotate(0.5deg);
    }

    20% {
        transform: translateY(0) rotate(0);
    }
}

/* SVG Icon Helpers */
.tgi-icon {
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
    display: inline-block;
    vertical-align: middle;
}

.tgi-bg-icon {
    width: 3em;
    height: 3em;
    fill: rgba(0, 34, 121, 0.08);
    /* Default blue faint */
}

.tgi-bg-icon-yellow {
    fill: rgba(251, 187, 6, 0.15);
    /* Yellow faint */
}

/* Responsive Design */
@media (max-width: 768px) {
    .tgi-main-heading {
        font-size: 2.2rem;
    }

    .tgi-sub-heading {
        font-size: 1rem;
    }

    .tgi-hero-actions {
        flex-direction: column;
        gap: 1rem;
    }

    .tgi-btn-primary,
    .tgi-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .tgi-skills-tags {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .tgi-skill-tag {
        width: 100%;
        justify-content: center;
    }
}

/* Image gallery section */

:root {
    /* Updated to match the bright royal blue from the new image */
    --tgi-dark-bg: #0a3a99;
    --tgi-blue: #0a3a99;
    --tgi-yellow: #fbbb06;
    --tgi-light: #f3f4f6;
}

.tgi-collage-section {
    background-color: var(--tgi-dark-bg);
    padding: 6rem 1rem;
    overflow: hidden;
    position: relative;
}

.tgi-collage-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
}

@media (min-width: 768px) {
    .tgi-collage-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
}

/* Base styles for all items */
.tgi-collage-item {
    position: relative;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    /* Will be animated in via JS */
}

.tgi-collage-item.is-visible {
    opacity: 1;
    /* The specific transforms are set via style attributes or specific classes below */
}

.tgi-collage-item:hover {
    z-index: 10 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
    /* We reset the rotation on hover for a cool effect */
    transform: translateY(-10px) scale(1.05) rotate(0deg) !important;
}

.tgi-collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}


/* 1. Large Top Left Image */
.item-1 {
    width: 100%;
    max-width: 450px;
    height: 250px;
    transform: rotate(-3deg);
    z-index: 2;
}

.item-1.is-visible {
    transform: rotate(-3deg) translateY(0) scale(1);
}

/* 2. Text Box (Blue) */
.item-2 {
    width: 100%;
    max-width: 250px;
    height: 300px;
    background-color: #031540;
    /* Updated to a very dark navy to contrast with the royal blue background */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    color: white;
    /* font-family: 'Kalam', cursive; */
    font-size: 1.5rem;
    line-height: 1.4;
    transform: rotate(2deg);
    z-index: 3;
    margin-top: -30px;
}

.item-2.is-visible {
    transform: rotate(2deg) translateY(0) scale(1);
}

.item-2 svg {
    width: 40px;
    height: 40px;
    fill: var(--tgi-yellow);
    margin-bottom: 1rem;
}

/* 3. Small Polaroid Style Top Right */
.item-3 {
    width: 100%;
    max-width: 200px;
    height: 200px;
    background: white;
    padding: 10px 10px 40px 10px;
    /* Polaroid look */
    transform: rotate(6deg);
    z-index: 1;
    margin-top: -50px;
}

.item-3 img {
    border-radius: 4px;
}

.item-3.is-visible {
    transform: rotate(6deg) translateY(0) scale(1);
}

/* 4. Text Box (Yellow) Bottom Left */
.item-4 {
    width: 100%;
    max-width: 280px;
    height: 280px;
    background-color: #fef08a;
    /* Soft yellow */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    color: var(--tgi-blue);
    transform: rotate(-4deg);
    z-index: 4;
    margin-top: -20px;
    margin-right: -40px;
    /* Overlap effect */
}

.item-4.is-visible {
    transform: rotate(-4deg) translateY(0) scale(1);
}

.item-4 h3 {
    /* font-family: 'Montserrat', sans-serif; */
    font-weight: 700;
    font-size: 2rem;
    margin: 0;
    line-height: 1.6;
    text-align: center;
}

.item-4 span {
    /* font-family: 'Kalam', cursive; */
    color: #d97706;
    font-size: 2.8rem;
    font-weight: 700;
    display: block;
}

/* 5. Large Wide Bottom Center */
.item-5 {
    width: 100%;
    max-width: 550px;
    height: 320px;
    transform: rotate(1deg);
    z-index: 5;
}

.item-5.is-visible {
    transform: rotate(1deg) translateY(0) scale(1);
}

/* 6. Medium Bottom Right */
.item-6 {
    width: 100%;
    max-width: 350px;
    height: 220px;
    transform: rotate(-5deg);
    z-index: 2;
    margin-top: 40px;
    margin-left: -20px;
}

.item-6.is-visible {
    transform: rotate(-5deg) translateY(0) scale(1);
}


.tape {
    position: absolute;
    background-color: rgba(255, 235, 150, 0.85);
    /* Yellowish translucent tape */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 20;
}

.tape-top-center {
    width: 80px;
    height: 25px;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
}

.tape-top-left {
    width: 70px;
    height: 20px;
    top: -5px;
    left: -15px;
    transform: rotate(-45deg);
}

.tape-top-right {
    width: 70px;
    height: 20px;
    top: -5px;
    right: -15px;
    transform: rotate(45deg);
}

/* Decorative squiggles for the background */
.bg-squiggle {
    position: absolute;
    z-index: 0;
    opacity: 0.3;
}

.squiggle-1 {
    top: 10%;
    left: 5%;
    width: 80px;
}

.squiggle-2 {
    bottom: 10%;
    right: 5%;
    width: 120px;
}

/* Responsive adjustments for Mobile & Tablets */
@media (max-width: 991px) {
    .tgi-collage-container {
        align-items: center;
        gap: 2.5rem;
        /* Better spacing on mobile */
        padding: 0 15px;
    }

    /* Remove overlapping margins on smaller screens to ensure it doesn't look messy */
    .item-2,
    .item-3,
    .item-4,
    .item-5,
    .item-6 {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Adjust sizes for mobile so they fit nicely */
    .item-1,
    .item-5,
    .item-6 {
        height: 220px;
    }
}

/* How it works section */
.tgi-hiw-section {
    --tgi-blue: #0a3a99;
    --tgi-blue-dark: #072a70;
    --tgi-blue-light: #4d78e8;
    --tgi-yellow: #fbbb06;
    --tgi-yellow-soft: #ffe9a8;
    --tgi-ink: #12172b;
    --tgi-muted: #8890a1;
    --tgi-line: #1140a07d;
    --tgi-bg-soft: #f5f7fc;
    --tgi-ring: clamp(230px, 40vw, 440px);
    --tgi-node: clamp(64px, calc(var(--tgi-ring) * 0.27), 120px);
    /* font-family: 'Poppins', 'Segoe UI', Arial, sans-serif; */
    position: relative;
    background:
        radial-gradient(ellipse 700px 500px at 8% 8%, rgba(10, 58, 153, .07), transparent 60%),
        radial-gradient(ellipse 600px 500px at 96% 18%, rgba(251, 187, 6, .10), transparent 60%),
        radial-gradient(ellipse 800px 600px at 50% 100%, rgba(10, 58, 153, .06), transparent 60%),
        var(--tgi-bg-soft);
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
    isolation: isolate;
    /* IMPORTANT: do NOT add overflow:hidden or transform on this section
       or on any of its parents — it breaks position:sticky below */
}

.tgi-hiw-section * {
    box-sizing: border-box;
}

.tgi-hiw-section img {
    max-width: 100%;
}

/* ---------- decorative background: dot grid + floating glow orbs ---------- */
.tgi-hiw-bgfx {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: clip;
}

.tgi-hiw-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(10, 58, 153, .14) 1.3px, transparent 1.3px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 85%);
    mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 85%);
}

.tgi-hiw-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(52px);
    opacity: .55;
    will-change: transform;
}

.tgi-hiw-orb-a {
    width: 320px;
    height: 320px;
    left: -80px;
    top: 6%;
    background: radial-gradient(circle, rgba(10, 58, 153, .45), transparent 70%);
    animation: tgi-hiw-float-a 16s ease-in-out infinite;
}

.tgi-hiw-orb-b {
    width: 260px;
    height: 260px;
    right: -60px;
    top: 38%;
    background: radial-gradient(circle, rgba(251, 187, 6, .55), transparent 70%);
    animation: tgi-hiw-float-b 13s ease-in-out infinite;
}

.tgi-hiw-orb-c {
    width: 300px;
    height: 300px;
    left: 22%;
    bottom: -100px;
    background: radial-gradient(circle, rgba(10, 58, 153, .35), transparent 70%);
    animation: tgi-hiw-float-c 19s ease-in-out infinite;
}

@keyframes tgi-hiw-float-a {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, 40px);
    }
}

@keyframes tgi-hiw-float-b {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-35px, -25px);
    }
}

@keyframes tgi-hiw-float-c {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(20px, -30px) scale(1.08);
    }
}

.tgi-hiw-head {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    /* padding: clamp(50px, 8vw, 90px) 20px 10px; */
}

.tgi-hiw-eyebrow {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--tgi-blue);
    letter-spacing: .02em;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 8px;
}

.tgi-hiw-eyebrow::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: var(--tgi-yellow);
}

.tgi-hiw-title {
    font-size: clamp(22px, 4.2vw, 45px);
    font-weight: 700;
    line-height: 1.28;
    color: var(--tgi-ink);
    margin: 0;
}

.tgi-hiw-title em {
    color: var(--tgi-blue);
    font-style: normal;
}

.tgi-hiw-track {
    position: relative;
    z-index: 1;
    height: 400vh;
}

.tgi-hiw-sticky {
    /* NOTE: position is now controlled by JS (manual pin), not CSS sticky,
       because sticky breaks if any parent has overflow/transform set.
       position:relative here is just the default/fallback state. */
    position: relative;
    top: 0;
    height: 100vh;
    min-height: 520px;
    max-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 16px 20px;
    z-index: 5;
}

.tgi-hiw-wrap {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: clamp(20px, 4vw, 50px);
    align-items: center;
}

/* ---------- Left: circular ring ---------- */
.tgi-hiw-ring-col {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.tgi-hiw-ring {
    position: relative;
    width: var(--tgi-ring);
    height: var(--tgi-ring);
    max-width: 100%;
    --node-badge: calc(var(--tgi-node) * 0.26);
    --node-icon: calc(var(--tgi-node) * 0.4);
    --node-label: clamp(11px, calc(var(--tgi-node) * 0.135), 16px);
}

/* timeline line — only rendered on the mobile list layout (see media query below) */
.tgi-hiw-ring-line {
    display: none;
}

/* slow rotating aura behind the ring for depth */
.tgi-hiw-aura {
    position: absolute;
    inset: -8%;
    border-radius: 50%;
    z-index: 0;
    background: conic-gradient(from 0deg, rgba(10, 58, 153, .16), rgba(251, 187, 6, .20), rgba(10, 58, 153, .16), transparent 60%);
    filter: blur(22px);
    animation: tgi-hiw-spin 14s linear infinite;
}

@keyframes tgi-hiw-spin {
    to {
        transform: rotate(360deg);
    }
}

.tgi-hiw-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 1;
}

.tgi-hiw-ring-track {
    fill: none;
    stroke: var(--tgi-line);
    stroke-width: 1;
    stroke-dasharray: 2 6;
    stroke-linecap: round;
}

.tgi-hiw-arc {
    fill: none;
    stroke: var(--tgi-yellow);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .05s linear;
    filter: drop-shadow(0 0 6px rgba(251, 187, 6, .65));
}

.tgi-hiw-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: clamp(42px, calc(var(--tgi-ring) * 0.18), 80px);
    height: clamp(42px, calc(var(--tgi-ring) * 0.18), 80px);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #fffdf3, var(--tgi-yellow-soft) 55%, var(--tgi-yellow) 100%);
    box-shadow:
        inset -3px -3px 6px rgba(184, 124, 0, .35),
        inset 3px 3px 7px rgba(255, 255, 255, .85),
        0 8px 18px rgba(251, 187, 6, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: tgi-hiw-pulse 2.6s ease-in-out infinite;
}

.tgi-hiw-center svg {
    width: 52%;
    height: 52%;
    color: var(--tgi-blue-dark);
}

@keyframes tgi-hiw-pulse {

    0%,
    100% {
        box-shadow: inset -3px -3px 6px rgba(184, 124, 0, .35), inset 3px 3px 7px rgba(255, 255, 255, .85), 0 0 0 0 rgba(251, 187, 6, .45), 0 8px 18px rgba(251, 187, 6, .4);
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        box-shadow: inset -3px -3px 6px rgba(184, 124, 0, .35), inset 3px 3px 7px rgba(255, 255, 255, .85), 0 0 0 12px rgba(251, 187, 6, 0), 0 8px 18px rgba(251, 187, 6, .4);
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.tgi-hiw-node-pos {
    position: absolute;
    width: var(--tgi-node);
    height: var(--tgi-node);
    z-index: 2;
}

.tgi-hiw-node-pos.pos-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tgi-hiw-node-pos.pos-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    left: auto;
}

.tgi-hiw-node-pos.pos-bottom {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    top: auto;
}

.tgi-hiw-node-pos.pos-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
}

.tgi-hiw-node {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffffff;
    border: 2.5px solid transparent;
    box-shadow: 0 6px 18px rgba(20, 30, 70, .08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.tgi-hiw-node:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 14px 26px rgba(20, 30, 70, .16);
}

.tgi-hiw-node:focus-visible {
    outline: 2px solid var(--tgi-blue);
    outline-offset: 4px;
}

.tgi-hiw-node-badge {
    position: absolute;
    top: -6px;
    right: 2%;
    width: var(--node-badge);
    height: var(--node-badge);
    border-radius: 50%;
    background: var(--tgi-bg-soft);
    color: var(--tgi-muted);
    font-size: calc(var(--node-badge) * 0.44);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    transition: background .35s ease, color .35s ease, transform .35s ease;
}

.tgi-hiw-node-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* ---------- 3D glossy icon chip ---------- */
.tgi-hiw-node-icon {
    position: relative;
    width: var(--node-icon);
    height: var(--node-icon);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 28%, #eef2fb, #c3cee8 60%, #a4b3da 100%);
    box-shadow:
        inset -3px -3px 6px rgba(30, 45, 90, .22),
        inset 3px 3px 6px rgba(255, 255, 255, .75),
        0 5px 10px rgba(20, 30, 70, .14);
    color: #3a4b7a;
    transition: background .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1), color .35s ease;
}

.tgi-hiw-node-icon svg {
    width: 52%;
    height: 52%;
}

.tgi-hiw-node:hover .tgi-hiw-node-icon {
    transform: translateY(-2px) rotate(-8deg) scale(1.08);
}

.tgi-hiw-node-chevron {
    display: none;
}

.tgi-hiw-node-desc-wrap {
    display: none;
}

.tgi-hiw-node-label {
    font-size: var(--node-label);
    font-weight: 700;
    color: var(--tgi-ink);
    transition: color .35s ease;
    white-space: nowrap;
}

.tgi-hiw-node.is-done .tgi-hiw-node-badge {
    background: var(--tgi-blue);
    color: #fff;
}

.tgi-hiw-node.is-done .tgi-hiw-node-icon {
    background: radial-gradient(circle at 30% 28%, #6f92ea, var(--tgi-blue) 60%, var(--tgi-blue-dark) 100%);
    box-shadow:
        inset -3px -3px 7px rgba(0, 0, 0, .28),
        inset 3px 3px 7px rgba(255, 255, 255, .35),
        0 6px 14px rgba(10, 58, 153, .35);
    color: #fff;
}

.tgi-hiw-node.is-done .tgi-hiw-node-icon::after {
    content: "\2713";
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tgi-yellow);
    color: var(--tgi-blue-dark);
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0, 0, 0, .2);
}

.tgi-hiw-node.is-active {
    border-color: var(--tgi-yellow);
    transform: scale(1.08);
    box-shadow: 0 14px 30px rgba(251, 187, 6, .4);
    animation: tgi-hiw-node-ring 1.8s ease-out infinite;
}

.tgi-hiw-node.is-active .tgi-hiw-node-badge {
    background: var(--tgi-yellow);
    color: var(--tgi-blue-dark);
    transform: scale(1.1);
}

.tgi-hiw-node.is-active .tgi-hiw-node-icon {
    background: radial-gradient(circle at 30% 28%, #fffaea, var(--tgi-yellow) 62%, #e0a300 100%);
    box-shadow:
        inset -3px -3px 7px rgba(150, 100, 0, .3),
        inset 3px 3px 7px rgba(255, 255, 255, .85),
        0 8px 16px rgba(251, 187, 6, .5);
    color: var(--tgi-blue-dark);
}

.tgi-hiw-node.is-active .tgi-hiw-node-label {
    color: var(--tgi-blue);
}

@keyframes tgi-hiw-node-ring {
    0% {
        box-shadow: 0 14px 30px rgba(251, 187, 6, .4), 0 0 0 0 rgba(251, 187, 6, .35);
    }

    70% {
        box-shadow: 0 14px 30px rgba(251, 187, 6, .4), 0 0 0 14px rgba(251, 187, 6, 0);
    }

    100% {
        box-shadow: 0 14px 30px rgba(251, 187, 6, .4), 0 0 0 0 rgba(251, 187, 6, 0);
    }
}

/* ---------- Right: premium glass detail panel ---------- */
.tgi-hiw-panel {
    position: relative;
    background:
        radial-gradient(ellipse 240px 200px at 100% 0%, rgba(255, 255, 255, .14), transparent 70%),
        linear-gradient(155deg, var(--tgi-blue-light) 0%, var(--tgi-blue) 45%, var(--tgi-blue-dark) 100%);
    border-radius: 26px;
    padding: clamp(28px, 4vw, 46px) clamp(24px, 3.6vw, 40px);
    color: #fff;
    overflow: hidden;
    min-height: clamp(260px, 34vw, 320px);
    box-shadow: 0 24px 60px -18px rgba(7, 42, 112, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .12);
}

.tgi-hiw-panel::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    background: radial-gradient(circle, rgba(251, 187, 6, .32), transparent 70%);
    top: -75px;
    right: -75px;
    border-radius: 50%;
    animation: tgi-hiw-float-b 11s ease-in-out infinite;
}

.tgi-hiw-panel::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    left: -60px;
    bottom: -70px;
    background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 70%);
    border-radius: 50%;
}

.tgi-hiw-panel-sparkle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    pointer-events: none;
}

.tgi-hiw-panel-sparkle.s1 {
    width: 5px;
    height: 5px;
    top: 18%;
    right: 22%;
    animation: tgi-hiw-twinkle 2.4s ease-in-out infinite;
}

.tgi-hiw-panel-sparkle.s2 {
    width: 3px;
    height: 3px;
    top: 32%;
    right: 14%;
    animation: tgi-hiw-twinkle 2.4s ease-in-out .6s infinite;
}

.tgi-hiw-panel-sparkle.s3 {
    width: 4px;
    height: 4px;
    top: 12%;
    right: 34%;
    animation: tgi-hiw-twinkle 2.4s ease-in-out 1.2s infinite;
}

@keyframes tgi-hiw-twinkle {

    0%,
    100% {
        opacity: 0;
        transform: scale(.6);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.tgi-hiw-panel-icon {
    width: clamp(54px, 6vw, 64px);
    height: clamp(54px, 6vw, 64px);
    background: radial-gradient(circle at 32% 28%, #fffaea, var(--tgi-yellow) 60%, #e0a300 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 42% 58% 55% 45% / 45% 45% 58% 52%;
    position: relative;
    z-index: 1;
    box-shadow:
        inset -3px -3px 7px rgba(150, 100, 0, .32),
        inset 3px 3px 7px rgba(255, 255, 255, .85),
        0 10px 20px rgba(0, 0, 0, .25);
    animation: tgi-hiw-icon-float 3.4s ease-in-out infinite;
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

.tgi-hiw-panel-icon.is-swapping {
    transform: scale(.7) rotate(-25deg);
}

@keyframes tgi-hiw-icon-float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-6px) rotate(3deg);
    }
}

.tgi-hiw-panel-icon svg {
    width: 46%;
    height: 46%;
    stroke: var(--tgi-blue-dark);
}

.tgi-hiw-panel-step {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--tgi-yellow);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.tgi-hiw-panel-title {
    font-size: clamp(22px, 3.6vw, 35px);
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
    color: #fff;
}

.tgi-hiw-panel-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #dbe4f7;
    margin: 0;
    max-width: 50ch;
    position: relative;
    text-align: justify;
    z-index: 1;
    font-weight: 500;
}

.tgi-hiw-dots {
    display: flex;
    gap: 8px;
    margin-top: 30px;
    position: relative;
    z-index: 1;
}

.tgi-hiw-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    transition: all .35s cubic-bezier(.34, 1.56, .64, 1);
}

.tgi-hiw-dot.is-active {
    width: 26px;
    border-radius: 4px;
    background: var(--tgi-yellow);
    box-shadow: 0 0 10px rgba(251, 187, 6, .7);
}

.tgi-hiw-panel-content {
    transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.tgi-hiw-panel-content.is-fading {
    opacity: 0;
    transform: translateY(10px) scale(.98);
}

@media (max-width:1024px) and (min-width:821px) {
    .tgi-hiw-wrap {
        gap: 24px;
    }
}

@media (max-width:820px) {
    .tgi-hiw-sticky {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
        padding: 0 18px 50px;
    }

    .tgi-hiw-track {
        height: auto;
    }

    .tgi-hiw-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tgi-hiw-panel-col {
        order: -1;
    }

    .tgi-hiw-ring {
        width: auto;
        height: auto;
        --node-badge: 24px;
        --node-icon: 44px;
        --node-label: 16px;
    }

    .tgi-hiw-ring-svg,
    .tgi-hiw-center,
    .tgi-hiw-aura {
        display: none;
    }

    .tgi-hiw-ring {
        display: flex;
        flex-direction: column;
        gap: 14px;
        position: relative;
        padding-left: 26px;
    }

    /* timeline track + animated progress fill, replacing the plain dashed line */
    .tgi-hiw-ring-line {
        display: block;
        position: absolute;
        left: 9px;
        top: 6px;
        bottom: 6px;
        width: 3px;
        background: var(--tgi-line);
        border-radius: 3px;
        overflow: hidden;
    }

    .tgi-hiw-ring-line-fill {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 0%;
        background: linear-gradient(180deg, var(--tgi-yellow), var(--tgi-blue));
        border-radius: 3px;
        transition: height .5s cubic-bezier(.4, 0, .2, 1);
    }

    .tgi-hiw-node-pos {
        position: static;
        width: auto;
        height: auto;
        transform: none !important;
    }

    .tgi-hiw-node {
        width: 100%;
        height: auto;
        border-radius: 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 14px 16px;
        background: #fff;
        border: 1.5px solid rgba(20, 30, 70, .06);
        box-shadow: 0 3px 10px rgba(20, 30, 70, .05);
        transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .2s ease;
    }

    .tgi-hiw-node:active {
        transform: scale(.98);
    }

    .tgi-hiw-node:hover {
        transform: none;
        box-shadow: 0 3px 10px rgba(20, 30, 70, .05);
    }

    .tgi-hiw-node:hover .tgi-hiw-node-icon {
        transform: none;
    }

    .tgi-hiw-node-head {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        width: 100%;
    }

    .tgi-hiw-node-badge {
        position: relative;
        top: auto;
        right: auto;
        flex: 0 0 auto;
        border: none;
        width: var(--node-badge);
        height: var(--node-badge);
        font-size: 12px;
    }

    .tgi-hiw-node-icon {
        flex: 0 0 auto;
    }

    .tgi-hiw-node-label {
        flex: 1 1 auto;
        text-align: left;
        white-space: normal;
        font-size: var(--node-label);
    }

    .tgi-hiw-node.is-active {
        transform: none;
        animation: none;
    }

    /* card tint per state */
    .tgi-hiw-node.is-done {
        background: linear-gradient(135deg, #eef3ff, #ffffff 60%);
        border-color: rgba(10, 58, 153, .12);
    }

    .tgi-hiw-node.is-active {
        background: linear-gradient(135deg, #fff9e9, #ffffff 55%);
        border-color: var(--tgi-yellow);
        box-shadow: 0 10px 24px rgba(251, 187, 6, .22);
    }

    /* chevron indicator, rotates when a step is open */
    .tgi-hiw-node-chevron {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        color: var(--tgi-muted);
        transition: transform .35s ease, color .35s ease;
    }

    .tgi-hiw-node-chevron svg {
        width: 100%;
        height: 100%;
    }

    .tgi-hiw-node.is-active .tgi-hiw-node-chevron {
        transform: rotate(180deg);
        color: var(--tgi-blue);
    }

    /* expandable description — accordion reveal */
    .tgi-hiw-node-desc-wrap {
        display: block;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, margin-top .4s ease;
        margin-top: 0;
    }

    .tgi-hiw-node.is-active .tgi-hiw-node-desc-wrap {
        max-height: 90px;
        opacity: 1;
        margin-top: 10px;
    }

    .tgi-hiw-node-desc {
        display: block;
        padding-left: calc(var(--node-icon) + 14px);
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--tgi-muted);
        text-align: left;
        font-weight: 400;
    }
}

@media (max-width:380px) {
    .tgi-hiw-panel {
        padding: 24px 18px;
    }

    .tgi-hiw-panel-title {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tgi-hiw-node,
    .tgi-hiw-node-badge,
    .tgi-hiw-node-icon,
    .tgi-hiw-node-label,
    .tgi-hiw-panel-content,
    .tgi-hiw-dot,
    .tgi-hiw-center,
    .tgi-hiw-aura,
    .tgi-hiw-orb,
    .tgi-hiw-panel-icon,
    .tgi-hiw-panel::before,
    .tgi-hiw-panel-sparkle,
    .tgi-hiw-node-chevron,
    .tgi-hiw-node-desc-wrap,
    .tgi-hiw-ring-line-fill {
        transition: none !important;
        animation: none !important;
    }
}

/* Courses */
:root {
    --primary-blue: #0b318f;
    --secondary-blue: #1545bb;
    --accent-yellow: #fbbc05;
    --text-dark: #202124;
    --text-light: #5f6368;
    --bg-light: #f8f9fa;
    --white: #ffffff;
    --border-light: #dbe4f3;
    --card-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
    --hover-shadow: 0 20px 45px rgba(11, 49, 143, 0.15);
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.programs-section {
    padding: 45px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 70px;
    animation: fadeInDown 0.8s ease-out forwards;
    max-width: 800px;
    margin: 0 auto 65px;
}

.section-header h2 {
    font-size: 50px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 12px;
    line-height: 1.2;
    letter-spacing: -1px;
}

.section-header h2 span {
    color: var(--primary-blue);
    position: relative;
}

.section-header p {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 10px;
}

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.divider-line {
    width: 50px;
    height: 3px;
    background-color: var(--primary-blue);
    border-radius: 2px;
}

.divider-dot {
    width: 10px;
    height: 10px;
    background-color: var(--accent-yellow);
    border-radius: 50%;
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 30px;
    /* Space for the bottom banner */
}

.program-card {
    background: var(--white);
    border-radius: 20px;
    position: relative;
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    border: 2px solid var(--border-light);
    display: flex;
    flex-direction: column;
    /* overflow: hidden is REMOVED to let the top right badge pop out */
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
    z-index: 1;
}

/* Staggered animation delays for loading */
.program-card:nth-child(1) {
    animation-delay: 0.2s;
}

.program-card:nth-child(2) {
    animation-delay: 0.4s;
}

.program-card:nth-child(3) {
    animation-delay: 0.6s;
}

.program-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--hover-shadow);
}

/* Border colors based on reference */
.card-elite {
    border-color: var(--accent-yellow);
}

.program-card:hover.card-launch,
.program-card:hover.card-accel {
    border-color: var(--primary-blue);
}

.card-badge {
    position: absolute;
    top: -25px;
    right: 25px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 28px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: var(--transition);
    z-index: 10;
}

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

.badge-yellow {
    background-color: var(--accent-yellow);
    color: var(--primary-blue);
}

.program-card:hover .card-badge {
    transform: scale(1.1) translateY(-5px) rotate(5deg);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.card-content {
    padding: 25px 30px 130px 30px;
    /* Bottom padding badha di taaki text button se na takraye */
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 2;
}

.card-logo {
    font-size: 26px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    line-height: 1;
    letter-spacing: -0.5px;
}

.card-logo span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    margin-top: 4px;
}

.logo-i {
    color: var(--accent-yellow);
}

.card-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 3px;
    line-height: 1.4;
    text-transform: uppercase;
}

.card-title .duration {
    font-size: 16px;
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
    color: #e7ab02;
}

.card-desc {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 5px;
    min-height: 60px;
    line-height: 1.6;
}

.features-list {
    list-style: none;
    margin-bottom: 0;
    flex-grow: 1;
    padding-left: 7px;
}

.features-list li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 500;
}

/* SVG icons ki styling */
.features-list li svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--primary-blue);
    margin-right: 12px;
}

.btn-explore {
    display: inline-block;
    width: 80%;
    /* Button thoda lamba aur proper pill shape */
    padding: 13px 20px;
    background-color: var(--primary-blue);
    color: var(--white);
    text-align: center;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
    transition: var(--transition);
    border: none;
    position: absolute;
    bottom: 58px;
    /* Button ko wave ke upar, white space me shift kar diya */
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    box-shadow: 0 4px 10px rgba(11, 49, 143, 0.12);
}

.btn-explore:hover {
    background-color: var(--secondary-blue);
    color: var(--white);
    box-shadow: 0 8px 22px rgba(11, 49, 143, 0.3);
    transform: translateX(-50%) translateY(-3px);
}

.card-elite .btn-explore:hover {
    background-color: var(--accent-yellow);
    color: var(--primary-blue);
}

/* New separate container just for waves to keep border-radius clean */
.wave-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    /* Wave ki height kam kar di bilkul reference image jaisi */
    overflow: hidden;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    z-index: 1;
    pointer-events: none;
}

.wave-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
}

.bottom-banner {
    background-color: var(--primary-blue);
    border-radius: 12px;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 50px;
    box-shadow: 0 15px 30px rgba(11, 49, 143, 0.2);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.8s;
    opacity: 0;
    flex-wrap: wrap;
    gap: 20px;
}

.banner-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

.banner-logo {
    font-size: 28px;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
    display: flex;
    flex-direction: column;
}

.banner-logo span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    margin-top: 4px;
}

.banner-separator {
    width: 2px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
}

.banner-text {
    color: var(--white);
    font-size: 22px;
    font-weight: 600;
}

.banner-text .highlight {
    color: var(--accent-yellow);
}

.btn-contact {
    background-color: var(--accent-yellow);
    color: var(--primary-blue);
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(251, 188, 5, 0.3);
}

.btn-contact svg {
    width: 20px;
    height: 20px;
}

.btn-contact:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(251, 188, 5, 0.5);
    background-color: #fff;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    .programs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .program-card:last-child {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }

    .bottom-banner {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }

    .banner-left {
        flex-direction: column;
        gap: 15px;
    }

    .banner-separator {
        width: 60px;
        height: 2px;
    }
}

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

    .program-card:last-child {
        grid-column: span 1;
        max-width: 100%;
    }

    .section-header h2 {
        font-size: 30px;
        letter-spacing: -0.5px;
    }

    .section-header p {
        font-size: 16px;
    }

    .banner-text {
        font-size: 18px;
    }
}

/* who can join this course */
:root {
    --primary-blue: #0b318f;
    --secondary-blue: #1545bb;
    --accent-yellow: #fbbc05;
    --accent-yellow-dark: #e5a800;
    --text-dark: #1f2937;
    --text-light: #64748b;
    --bg-body: #f4f7f6;
    --white: #ffffff;
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.who-can-join-section {
    padding: 65px 20px;
    background-color: #0b318f;
    /* Deep Navy Dark Background */
    overflow: hidden;
}

.wcj-container {
    max-width: 1200px;
    margin: 0 auto;
}

.wcj-header {
    text-align: center;
    margin-bottom: 55px;
    animation: fadeInDown 0.8s ease-out forwards;
}

.wcj-eyebrow {
    display: inline-block;
    background-color: rgba(251, 188, 5, 0.15);
    color: var(--accent-yellow);
    /* Yellow pops on dark */
    padding: 6px 18px;
    border-radius: 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 13px;
    margin-bottom: 16px;
}

.wcj-header h2 {
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    /* White heading for dark theme */
    margin-bottom: 20px;
    line-height: 1.2;
    letter-spacing: -1px;
}

.wcj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    /* Thoda zyada vertical gap icons overlap ke liye */
}

.wcj-card {
    background: #dfeaff;
    /* Dark Slate card background */
    border-radius: 24px;
    padding: 55px 30px 25px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    /* Stronger dark shadow */
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Subtle light border */
    margin-top: 35px;
    z-index: 1;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.wcj-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(145deg, transparent 50%, rgba(251, 188, 5, 0.03) 100%);
    z-index: -1;
    pointer-events: none;
}

/* Staggered loading */
.wcj-card:nth-child(1) {
    animation-delay: 0.1s;
}

.wcj-card:nth-child(2) {
    animation-delay: 0.2s;
}

.wcj-card:nth-child(3) {
    animation-delay: 0.3s;
}

.wcj-card:nth-child(4) {
    animation-delay: 0.4s;
}

.wcj-card:nth-child(5) {
    animation-delay: 0.5s;
}

.wcj-card:nth-child(6) {
    animation-delay: 0.6s;
}

.wcj-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
    border-color: rgba(251, 188, 5, 0.3);
    /* Yellow glow on border hover */
}

.wcj-icon-3d {
    position: absolute;
    top: -35px;
    left: 30px;
    width: 75px;
    height: 75px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

/* Blue Theme 3D Icon (Odd Cards) */
/* Blue Theme 3D Icon (Odd Cards) - Adjusted for Dark Mode */
.wcj-card:nth-child(odd) .wcj-icon-3d {
    background: linear-gradient(135deg, var(--secondary-blue), var(--primary-blue));
    box-shadow:
        -4px -4px 10px rgba(255, 255, 255, 0.1),
        6px 8px 16px rgba(0, 0, 0, 0.6),
        inset 2px 2px 4px rgba(255, 255, 255, 0.2),
        inset -2px -2px 4px rgba(0, 0, 0, 0.4);
}

/* Yellow Theme 3D Icon (Even Cards) - Adjusted for Dark Mode */
.wcj-card:nth-child(even) .wcj-icon-3d {
    background: linear-gradient(135deg, #ffd940, var(--accent-yellow));
    box-shadow:
        -4px -4px 10px rgba(255, 255, 255, 0.1),
        6px 8px 16px rgba(0, 0, 0, 0.6),
        inset 2px 2px 4px rgba(255, 255, 255, 0.5),
        inset -2px -2px 4px rgba(0, 0, 0, 0.2);
}

/* 3D icon pop hover effect */
.wcj-card:hover .wcj-icon-3d {
    transform: translateY(-8px) scale(1.05) rotate(5deg);
}

.wcj-card:nth-child(odd):hover .wcj-icon-3d {
    box-shadow:
        -6px -6px 12px rgba(255, 255, 255, 0.15),
        10px 15px 25px rgba(0, 0, 0, 0.8),
        inset 2px 2px 5px rgba(255, 255, 255, 0.3),
        inset -2px -2px 5px rgba(0, 0, 0, 0.5);
}

.wcj-card:nth-child(even):hover .wcj-icon-3d {
    box-shadow:
        -6px -6px 12px rgba(255, 255, 255, 0.15),
        10px 15px 25px rgba(0, 0, 0, 0.8),
        inset 2px 2px 5px rgba(255, 255, 255, 0.6),
        inset -2px -2px 5px rgba(0, 0, 0, 0.3);
}

/* SVGs styling inside the 3D box */
.wcj-icon-3d svg {
    width: 34px;
    height: 34px;
    transition: var(--transition);
}

/* Drop shadow on SVG itself gives inner depth */
.wcj-card:nth-child(odd) .wcj-icon-3d svg {
    color: var(--white);
    filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.5));
}

.wcj-card:nth-child(even) .wcj-icon-3d svg {
    color: var(--primary-blue);
    filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.3));
}

.wcj-card h3 {
    font-size: 22px;
    font-weight: 800;
    color: #00205e;
    /* White text for headings */
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

.wcj-card h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 40px;
    height: 3px;
    background-color: var(--accent-yellow);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.wcj-card:hover h3::after {
    width: 100%;
}

.wcj-card p {
    font-size: 15px;
    color: #424852;
    /* Light slate grey for paragraphs */
    line-height: 1.7;
    margin-bottom: 0;
    font-weight: 500;
}

/* Decorative background number/watermark */
.card-watermark {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 80px;
    font-weight: 800;
    color: rgb(10 44 129 / 12%);
    /* White transparent */
    line-height: 1;
    z-index: 0;
    pointer-events: none;
    transition: var(--transition);
}

.wcj-card:hover .card-watermark {
    color: rgba(251, 188, 5, 0.08);
    /* Yellow transparent glow on hover */
    transform: scale(1.1) rotate(-5deg);
}

.wcj-card-content {
    position: relative;
    z-index: 2;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 992px) {
    .wcj-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .wcj-grid {
        grid-template-columns: 1fr;
        gap: 50px 0;
        /* Aur space mobile par */
    }

    .wcj-header h2 {
        font-size: 32px;
    }

    .who-can-join-section {
        padding: 70px 20px;
    }
}

/* about us */
:root {
    --primary-blue: #0b318f;
    --secondary-blue: #1545bb;
    --accent-yellow: #fbbc05;
    --accent-yellow-dark: #e5a800;
    --text-dark: #1f2937;
    --text-light: #64748b;
    --bg-body: #f4f7f6;
    --white: #ffffff;
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* --- Premium About Us Section (Light Theme) --- */
.about-tgi-section {
    padding: 60px 20px;
    background-color: #f8fafc;
    /* Subtle dotted grid for premium look */
    background-image: radial-gradient(rgba(11, 49, 143, 0.08) 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    position: relative;
    overflow: hidden;
}

/* Glowing Background Orbs */
.about-tgi-section::before,
.about-tgi-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
}

.about-tgi-section::before {
    top: -10%;
    left: -5%;
    width: 500px;
    height: 500px;
    background: rgba(11, 49, 143, 0.12);
    /* Soft Blue Glow */
}

.about-tgi-section::after {
    bottom: 0;
    right: -10%;
    width: 600px;
    height: 600px;
    background: rgba(251, 188, 5, 0.08);
    /* Soft Yellow Glow */
}

.about-container {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    /* Content slightly larger */
    gap: 80px;
    align-items: center;
}

/* --- Left Side: 3D Visuals --- */
.about-visuals {
    position: relative;
    padding-right: 40px;
    padding-bottom: 40px;
}

.about-image-wrapper {
    position: relative;
    border-radius: 24px;
    background-color: #fff;
}

.about-image-wrapper.main-img {
    box-shadow: 0 30px 60px rgba(11, 49, 143, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    border: 8px solid #ffffff;
    z-index: 1;
    overflow: hidden;
}

.about-image-wrapper.main-img img,
.about-image-wrapper.small-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.about-image-wrapper.main-img:hover img {
    transform: scale(1.05);
}

/* Overlapping smaller image */
.about-image-wrapper.small-img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
    border: 6px solid #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    z-index: 3;
    overflow: hidden;
    animation: floatImg 6s ease-in-out infinite;
}

@keyframes floatImg {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* 3D Glassmorphism Badges */
.floating-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 16px 24px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 20px 40px rgba(11, 49, 143, 0.12),
        inset 2px 2px 4px rgba(255, 255, 255, 1);
    z-index: 4;
}

.badge-1 {
    top: -18px;
    left: -78px;
    animation: floatBadge 4s ease-in-out infinite;
}

.badge-2 {
    bottom: 80px;
    left: -40px;
    animation: floatBadge 5s ease-in-out infinite reverse;
}

@keyframes floatBadge {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

.badge-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* Premium 3D Bevel effect for badges */
.badge-icon.yellow-3d {
    background: linear-gradient(135deg, #fbbc05, #e5a800);
    box-shadow: 3px 3px 8px rgba(251, 188, 5, 0.4),
        inset 2px 2px 4px rgba(255, 255, 255, 0.6),
        inset -2px -2px 4px rgba(0, 0, 0, 0.1);
    color: #060d1f;
}

.badge-icon.blue-3d {
    background: linear-gradient(135deg, #1545bb, #0b318f);
    box-shadow: 3px 3px 8px rgba(11, 49, 143, 0.4),
        inset 2px 2px 4px rgba(255, 255, 255, 0.4),
        inset -2px -2px 4px rgba(0, 0, 0, 0.2);
}

.badge-icon svg {
    width: 24px;
    height: 24px;
}

.badge-text h4 {
    color: #0f172a;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 2px;
    line-height: 1;
}

.badge-text span {
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Right Side: Content & 3D Cards --- */
.about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(11, 49, 143, 0.1), rgba(11, 49, 143, 0.05));
    color: var(--primary-blue);
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    margin-bottom: 13px;
    border: 1px solid rgba(11, 49, 143, 0.15);
}

.about-content h2 {
    font-size: 46px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 5px;
    line-height: 1.15;
    letter-spacing: -1px;
}

.about-content h2 .highlight {
    background: linear-gradient(120deg, var(--primary-blue), #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    position: relative;
}

.about-content h2 .highlight::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: rgba(251, 188, 5, 0.3);
    z-index: -1;
    border-radius: 4px;
}

.about-content p.lead-text {
    font-size: 18px;
    color: #475569;
    font-size: 17px;
    text-align: justify;
    line-height: 1.7;
    margin-bottom: 10px;
    font-weight: 400;
}

/* 2x2 Feature Grid Layout */
.about-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    /* margin-bottom: 45px; */
}

.feature-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 15px 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03),
        inset 0 0 0 1px rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.4));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(11, 49, 143, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 1);
    border-color: rgba(11, 49, 143, 0.1);
}

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

/* Pure CSS 3D Icons */
.feature-icon-3d {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.4s ease;

    /* Default Blue 3D Box */
    background: linear-gradient(145deg, #184ee6, #0b318f);
    box-shadow: 4px 4px 10px rgba(11, 49, 143, 0.3),
        inset 2px 2px 5px rgba(255, 255, 255, 0.4),
        inset -2px -2px 5px rgba(0, 0, 0, 0.2);
}

.feature-card:nth-child(2) .feature-icon-3d,
.feature-card:nth-child(3) .feature-icon-3d {
    /* Alternate Yellow 3D Box for contrast */
    background: linear-gradient(145deg, #fbbc05, #d99f00);
    box-shadow: 4px 4px 10px rgba(251, 188, 5, 0.3),
        inset 2px 2px 5px rgba(255, 255, 255, 0.6),
        inset -2px -2px 5px rgba(0, 0, 0, 0.15);
    color: #060d1f;
}

.feature-card:hover .feature-icon-3d {
    transform: scale(1.1) rotate(5deg);
}

.feature-icon-3d svg {
    width: 26px;
    height: 26px;
}

.feature-text h5 {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0px;
}

.feature-text p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 0;
    font-weight: 500;
}

/* Premium 3D CTA Button */
.btn-primary-3d {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--accent-yellow), #f59e0b);
    color: #0f172a;
    padding: 18px 40px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px rgba(251, 188, 5, 0.3),
        inset 2px 2px 4px rgba(255, 255, 255, 0.6),
        inset -2px -10px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: none;
}

.btn-primary-3d svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.btn-primary-3d:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 30px rgba(251, 188, 5, 0.4),
        inset 2px 2px 4px rgba(255, 255, 255, 0.7),
        inset -2px -10px 10px rgba(0, 0, 0, 0.05);
}

.btn-primary-3d:hover svg {
    transform: translateX(4px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-visuals {
        max-width: 700px;
        margin: 0 auto;
        padding-right: 20px;
    }

    .about-image-wrapper.small-img {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .about-tgi-section {
        padding: 80px 20px;
    }

    .about-content h2 {
        font-size: 36px;
    }

    .about-feature-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .floating-badge {
        display: none;
    }

    .about-visuals {
        padding-right: 0;
        padding-bottom: 20px;
    }

    .about-image-wrapper.small-img {
        display: none;
    }
}

/* why choose tgi */
.tgi-wcu-section {
    --tgi-wcu-blue: #0b318f;
    --tgi-wcu-light-blue: #2563eb;
    --tgi-wcu-yellow: #fbbc05;
    --tgi-wcu-dark: #1e293b;
    --tgi-wcu-gray: #64748b;
    --tgi-wcu-bg: #f0f4f8;
    --tgi-wcu-white: #ffffff;

    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    background-color: var(--tgi-wcu-bg);
    padding: 42px 20px 90px;
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tgi-wcu-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.tgi-wcu-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: -1;
    animation: tgiWcuFloat 10s ease-in-out infinite alternate;
}

.tgi-wcu-orb-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.4), rgba(11, 49, 143, 0.1));
    top: -100px;
    left: -100px;
}

.tgi-wcu-orb-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, rgba(251, 188, 5, 0.4), rgba(245, 158, 11, 0.1));
    bottom: 50px;
    right: -50px;
    animation-delay: -5s;
}

@keyframes tgiWcuFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(50px, 50px) scale(1.1);
    }
}

.tgi-wcu-container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.tgi-wcu-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
    position: relative;
}

.tgi-wcu-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--tgi-wcu-white);
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    color: var(--tgi-wcu-blue);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 10px 20px rgba(11, 49, 143, 0.05),
        inset 0 0 0 1px rgba(11, 49, 143, 0.1);
    margin-bottom: 24px;
}

.tgi-wcu-dot {
    width: 8px;
    height: 8px;
    background: var(--tgi-wcu-yellow);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--tgi-wcu-yellow);
    animation: tgiWcuPulse 2s infinite;
}

@keyframes tgiWcuPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(251, 188, 5, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(251, 188, 5, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(251, 188, 5, 0);
    }
}

.tgi-wcu-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--tgi-wcu-dark);
    margin-bottom: 20px;
}

.tgi-wcu-highlight {
    background: linear-gradient(135deg, var(--tgi-wcu-blue), #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
}

.tgi-wcu-desc {
    font-size: 18px;
    color: var(--tgi-wcu-gray);
    line-height: 1.7;
}

.tgi-wcu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    perspective: 1500px;
}

.tgi-wcu-wrapper:nth-child(even) {
    transform: translateY(60px);
}

.tgi-wcu-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 32px;
    padding: 20px 25px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease;
    box-shadow:
        20px 20px 50px rgba(11, 49, 143, 0.05),
        -10px -10px 30px rgba(255, 255, 255, 0.9),
        inset 2px 2px 5px rgba(255, 255, 255, 1),
        inset -3px -3px 10px rgba(0, 0, 0, 0.02);
    cursor: pointer;
    height: 100%;
}

.tgi-wcu-wrapper:hover .tgi-wcu-card {
    transform: rotateX(5deg) rotateY(-5deg) translateY(-10px);
    box-shadow:
        30px 30px 60px rgba(11, 49, 143, 0.08),
        -15px -15px 40px rgba(255, 255, 255, 1),
        inset 2px 2px 5px rgba(255, 255, 255, 1),
        inset -3px -3px 10px rgba(0, 0, 0, 0.02);
}

.tgi-wcu-icon-box {
    width: 90px;
    height: 90px;
    margin-bottom: 13px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transform: translateZ(50px);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    background: linear-gradient(135deg, #ffffff, #f0f4f8);
    box-shadow:
        15px 15px 30px rgba(11, 49, 143, 0.1),
        -10px -10px 20px rgba(255, 255, 255, 1),
        inset 1px 1px 2px rgba(255, 255, 255, 1);
}

.tgi-wcu-wrapper:hover .tgi-wcu-icon-box {
    transform: translateZ(80px) scale(1.1);
}

.tgi-wcu-icon-box svg {
    width: 45px;
    height: 45px;
    filter: drop-shadow(3px 5px 4px rgba(0, 0, 0, 0.15));
}

.tgi-wcu-number {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 80px;
    font-weight: 800;
    color: rgba(11, 49, 143, 0.03);
    line-height: 1;
    transform: translateZ(10px);
    pointer-events: none;
    transition: color 0.4s ease;
}

.tgi-wcu-wrapper:hover .tgi-wcu-number {
    color: rgba(251, 188, 5, 0.1);
}

.tgi-wcu-content {
    transform: translateZ(30px);
}

.tgi-wcu-card-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--tgi-wcu-dark);
    margin-bottom: 0px;
}

.tgi-wcu-card-text {
    font-size: 16px;
    color: var(--tgi-wcu-gray);
    line-height: 1.6;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .tgi-wcu-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .tgi-wcu-wrapper:nth-child(even) {
        transform: translateY(0);
    }

    .tgi-wcu-title {
        font-size: 40px;
    }
}

@media (max-width: 768px) {
    .tgi-wcu-section {
        padding: 80px 20px;
    }

    .tgi-wcu-title {
        font-size: 32px;
    }

    .tgi-wcu-card {
        padding: 30px;
    }
}

/* Team Section */

.tgi-team-section {
    --team-bg: #0a3a99;
    --team-card-bg: rgba(255, 255, 255, 0.08);
    /* White Glass effect */
    --team-card-border: rgba(255, 255, 255, 0.2);
    --team-blue: #0a3a99;
    --team-yellow: #fbbc05;
    --team-text-muted: #e2e8f0;

    position: relative;
    padding: 50px 20px 40px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--team-bg);
}

/* Ambient glowing backgrounds */
.tgi-team-glow-1 {
    position: absolute;
    top: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(10, 58, 153, 0) 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.tgi-team-glow-2 {
    position: absolute;
    bottom: -200px;
    right: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(251, 188, 5, 0.25) 0%, rgba(10, 58, 153, 0) 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.tgi-team-container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.tgi-team-header {
    text-align: center;
    margin-bottom: 50px;
}

.tgi-team-eyebrow {
    display: inline-block;
    color: var(--team-yellow);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    position: relative;
}

.tgi-team-eyebrow::before,
.tgi-team-eyebrow::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: var(--team-yellow);
}

.tgi-team-eyebrow::before {
    left: -45px;
}

.tgi-team-eyebrow::after {
    right: -45px;
}

.tgi-team-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
}

.tgi-team-title span {
    color: var(--team-yellow);
    /* Changed to yellow so it pops on blue bg */
    text-shadow: 0 0 20px rgba(251, 188, 5, 0.4);
}

.tgi-team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    perspective: 1500px;
}

.tgi-team-card {
    background: var(--team-card-bg);
    border: 1px solid var(--team-card-border);
    border-radius: 32px;
    padding: 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.tgi-team-card:hover {
    border-color: rgba(251, 188, 5, 0.6);
    /* Yellow border on hover */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(251, 188, 5, 0.15);
    /* Yellow glow shadow */
}

.tgi-team-img-wrapper {
    position: relative;
    width: 100%;
    height: 395px;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 15px;
    transform: translateZ(40px);
    background: #ffffff;
}

.tgi-team-img-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    pointer-events: none;
    z-index: 2;
}

.tgi-team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    filter: grayscale(10%) contrast(110%);
    object-position: top;
}

.tgi-team-card:hover .tgi-team-img {
    transform: scale(1.08);
    filter: grayscale(0%) contrast(100%);
}

/* 3D Floating Icon overlay */
.tgi-team-float-icon {
    position: absolute;
    bottom: -20px;
    right: 20px;
    width: 70px;
    height: 70px;
    background: #ffffff;
    /* White bg makes the blue SVG pop */
    border: 2px solid var(--team-yellow);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transform: translateZ(60px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    animation: teamFloatAnim 4s ease-in-out infinite;
}

.tgi-team-card:nth-child(2) .tgi-team-float-icon {
    animation-delay: -2s;
    right: auto;
    left: 20px;
}

@keyframes teamFloatAnim {

    0%,
    100% {
        transform: translateZ(60px) translateY(0px);
    }

    50% {
        transform: translateZ(60px) translateY(-10px);
    }
}

.tgi-team-info {
    text-align: center;
    transform: translateZ(30px);
    padding: 0 10px;
}

.tgi-team-name {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0px;
    letter-spacing: -0.5px;
}

.tgi-team-role {
    font-size: 16px;
    font-weight: 700;
    color: var(--team-yellow);
    /* Yellow role text on blue background */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.tgi-team-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 0;
}

.tgi-team-tag {
    background: rgba(0, 0, 0, 0.15);
    /* Dark translucent tags */
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    transition: all 0.3s ease;
}

.tgi-team-card:hover .tgi-team-tag {
    background: var(--team-yellow);
    /* Turn yellow on card hover */
    color: #030712;
    /* Dark text on yellow tag */
    border-color: var(--team-yellow);
}

@media (max-width: 992px) {
    .tgi-team-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .tgi-team-title {
        font-size: 40px;
    }

    .tgi-team-img-wrapper {
        height: 350px;
    }
}

@media (max-width: 576px) {
    .tgi-team-section {
        padding: 80px 20px;
    }

    .tgi-team-title {
        font-size: 32px;
    }

    .tgi-team-img-wrapper {
        height: 300px;
    }

    .tgi-team-card {
        padding: 15px;
    }

    .tgi-team-float-icon {
        width: 55px;
        height: 55px;
    }

    .tgi-team-float-icon svg {
        width: 30px;
        height: 30px;
    }
}

/* Counters */

.tgi-fc-wrapper {
    /* TGI Brand Colors */
    --tgi-brand-blue: #093a9a;
    --tgi-brand-yellow: #fbbc05;

    /* Theme Colors */
    --tgi-bg-dark: #093a9a;
    --tgi-card-bg: rgba(9, 58, 154, 0.1);
    --tgi-text-main: #ffffff;
    --tgi-text-muted: #94a3b8;

    /* Base Styling applied ONLY to this wrapper */
    background-color: var(--tgi-bg-dark);
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    color: var(--tgi-text-main);
    position: relative;
    padding: 40px 20px;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at center, #002876 0%, var(--tgi-bg-dark) 100%);
}

/* Scoped Box-Sizing to prevent layout issues */
.tgi-fc-wrapper *,
.tgi-fc-wrapper *::before,
.tgi-fc-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.tgi-fc-ambient-light {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    opacity: 0.4;
    animation: tgiBreathe 8s infinite alternate ease-in-out;
    pointer-events: none;
}

.tgi-fc-light-blue {
    width: 500px;
    height: 500px;
    background: var(--tgi-brand-blue);
    top: -150px;
    left: -100px;
    opacity: 0.7;
    /* Strong presence of #093a9a */
}

.tgi-fc-light-yellow {
    width: 400px;
    height: 400px;
    background: var(--tgi-brand-yellow);
    bottom: -100px;
    right: -100px;
    opacity: 0.15;
    animation-delay: -4s;
}

@keyframes tgiBreathe {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 0.3;
    }

    100% {
        transform: scale(1.2) translate(30px, 30px);
        opacity: 0.5;
    }
}

.tgi-fc-container {
    position: relative;
    z-index: 10;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.tgi-fc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    perspective: 1500px;
}

.tgi-fc-card {
    background: var(--tgi-card-bg);
    border-radius: 24px;
    padding: 20px 25px;
    text-align: center;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    transform-style: preserve-3d;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease;
    cursor: default;
}

.tgi-fc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg, var(--tgi-brand-blue), var(--tgi-brand-yellow));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.3;
    transition: opacity 0.5s ease;
}

.tgi-fc-card:hover {
    transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
    /* Stronger glow using exact brand blue #093a9a */
    box-shadow: 0 30px 60px rgba(9, 58, 154, 0.5), inset 0 0 20px rgba(9, 58, 154, 0.3);
}

.tgi-fc-card:hover::before {
    opacity: 1;
}

.tgi-fc-icon-stage {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 10px auto;
    transform-style: preserve-3d;
    transform: translateZ(40px);
}

.tgi-fc-gyro-ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    border: 1px solid rgba(251, 188, 5, 0.4);
    box-shadow: 0 0 20px rgba(9, 58, 154, 0.6);
}

.tgi-fc-ring-1 {
    width: 100px;
    height: 100px;
    animation: tgiRotate3D_X 6s linear infinite;
}

.tgi-fc-ring-2 {
    width: 80px;
    height: 80px;
    border-color: var(--tgi-brand-blue);
    /* Exact Brand Blue */
    border-width: 2px;
    animation: tgiRotate3D_Y 8s linear infinite reverse;
}

.tgi-fc-ring-3 {
    width: 60px;
    height: 60px;
    border: 1px dashed var(--tgi-brand-yellow);
    animation: tgiRotate3D_Z 10s linear infinite;
}

.tgi-fc-icon-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--tgi-brand-yellow), #d49e00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(251, 188, 5, 0.5));
    animation: tgiFloat 4s ease-in-out infinite;
}

.tgi-fc-icon-core svg {
    width: 100%;
    height: 100%;
}

@keyframes tgiRotate3D_X {
    0% {
        transform: rotateX(0deg) rotateY(45deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(45deg);
    }
}

@keyframes tgiRotate3D_Y {
    0% {
        transform: rotateX(45deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(45deg) rotateY(360deg);
    }
}

@keyframes tgiRotate3D_Z {
    0% {
        transform: rotateX(60deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(60deg) rotateZ(360deg);
    }
}

@keyframes tgiFloat {

    0%,
    100% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-50%, -60%);
    }
}

.tgi-fc-content {
    transform: translateZ(30px);
}

.tgi-fc-number-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    /* margin-bottom: 15px; */
}

.tgi-fc-number {
    /* font-family: 'Space Grotesk', sans-serif; */
    font-size: 64px;
    font-weight: 700;
    background: linear-gradient(to right, #ffffff, var(--tgi-brand-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    text-shadow: 0 10px 20px rgba(251, 188, 5, 0.2);
}

.tgi-fc-suffix {
    /* font-family: 'Space Grotesk', sans-serif; */
    font-size: 36px;
    font-weight: 600;
    color: var(--tgi-brand-yellow);
    margin-left: 2px;
}

.tgi-fc-title {
    /* font-family: 'Space Grotesk', sans-serif; */
    font-size: 17px;
    line-height: 24px;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: #ffffff;
    font-weight: 600;
}

.tgi-fc-desc {
    font-size: 14px;
    color: var(--tgi-text-muted);
    line-height: 1.2;
    font-weight: 300;
}

@media (max-width: 768px) {
    .tgi-fc-wrapper {
        padding: 80px 20px;
    }

    .tgi-fc-card {
        padding: 40px 20px;
    }

    .tgi-fc-number {
        font-size: 52px;
    }

    .tgi-fc-suffix {
        font-size: 28px;
    }

    .tgi-fc-icon-stage {
        width: 80px;
        height: 80px;
    }

    .tgi-fc-ring-1 {
        width: 80px;
        height: 80px;
    }

    .tgi-fc-ring-2 {
        width: 60px;
        height: 60px;
    }

    .tgi-fc-ring-3 {
        width: 45px;
        height: 45px;
    }

    .tgi-fc-icon-core {
        width: 30px;
        height: 30px;
    }
}

/* Footer */
.tgi-ftr-wrapper {
    --ftr-bg: #0a3a99;
    --ftr-yellow: #fbbc05;
    --ftr-text: #ffffff;
    --ftr-muted: rgb(255 255 255 / 84%);

    background-color: var(--ftr-bg);
    color: var(--ftr-text);
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-top: 4px solid var(--ftr-yellow);
    padding-top: 40px;
}

.tgi-ftr-wrapper * {
    box-sizing: border-box;
}

.tgi-ftr-shape {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.tgi-ftr-shape-1 {
    top: -100px;
    left: -100px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 188, 5, 0.08) 0%, transparent 70%);
    animation: tgiFtrFloat1 15s infinite ease-in-out alternate;
}

.tgi-ftr-shape-2 {
    bottom: 50px;
    right: 5%;
    width: 100px;
    height: 100px;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    animation: tgiFtrFloat2 25s infinite linear;
}

.tgi-ftr-shape-3 {
    top: 20%;
    right: 25%;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 86.6px solid rgba(251, 188, 5, 0.05);
    animation: tgiFtrFloat3 20s infinite ease-in-out;
}

@keyframes tgiFtrFloat1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(80px, 80px) scale(1.1);
    }
}

@keyframes tgiFtrFloat2 {
    0% {
        transform: rotate(0deg) translateY(0);
    }

    50% {
        transform: rotate(180deg) translateY(-60px);
    }

    100% {
        transform: rotate(360deg) translateY(0);
    }
}

@keyframes tgiFtrFloat3 {
    0% {
        transform: translateY(0) rotate(0deg) scale(0.8);
    }

    50% {
        transform: translateY(-40px) rotate(45deg) scale(1.1);
    }

    100% {
        transform: translateY(0) rotate(0deg) scale(0.8);
    }
}

.tgi-ftr-logo-link {
    display: inline-block;
    margin-bottom: 15px;
    transition: transform 0.4s ease;
}

.tgi-ftr-logo-link img {
    max-width: 130px;
    height: auto;
}

.tgi-ftr-logo-link:hover {
    transform: scale(1.03);
}

.tgi-ftr-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tgi-ftr-contact-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ftr-text);
}

.tgi-ftr-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(251, 188, 5, 0.5);
    color: var(--ftr-yellow);
    font-size: 18px;
    transition: all 0.3s ease;
}

.tgi-ftr-contact-list li:hover .tgi-ftr-icon-wrap {
    background: var(--ftr-yellow);
    color: var(--ftr-bg);
    border-style: solid;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(251, 188, 5, 0.4);
}

.tgi-ftr-text-wrap a {
    color: var(--ftr-text);
    text-decoration: none;
    transition: color 0.3s ease;
    word-break: break-word;
    font-weight: 500;
}

.tgi-ftr-text-wrap p {
    margin: 0;
    font-weight: 500;
}

.tgi-ftr-text-wrap a:hover {
    color: var(--ftr-yellow);
}

.tgi-ftr-heading {
    /* font-family: 'Space Grotesk', sans-serif; */
    color: var(--ftr-yellow);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
}

.tgi-ftr-heading::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.tgi-ftr-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tgi-ftr-menu li {
    margin-bottom: 10px;
}

.tgi-ftr-menu a {
    color: var(--ftr-muted);
    text-decoration: none;
    font-size: 15px;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    font-weight: 500;
}

.tgi-ftr-menu a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--ftr-yellow);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
}

.tgi-ftr-menu a:hover {
    color: #fff;
    padding-left: 20px;
}

.tgi-ftr-menu a:hover::before {
    opacity: 1;
    width: 12px;
    border-radius: 4px;
}

.tgi-ftr-desc {
    color: var(--ftr-muted);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.tgi-ftr-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 5px 5px 5px 20px;
    transition: all 0.3s ease;
}

.tgi-ftr-form:focus-within {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--ftr-yellow);
    box-shadow: 0 0 20px rgba(251, 188, 5, 0.2);
}

.tgi-ftr-form input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    outline: none;
    width: 100%;
}

.tgi-ftr-form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.tgi-ftr-form-btn {
    background: var(--ftr-yellow);
    color: var(--ftr-bg);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.tgi-ftr-form-btn:hover {
    transform: scale(1.08);
    background: #fff;
    color: var(--ftr-bg);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.tgi-ftr-socials {
    list-style: none;
    padding: 0;
    margin: 25px 0 0 0;
    display: flex;
    gap: 12px;
}

.tgi-ftr-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
}

.tgi-ftr-socials a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--ftr-yellow);
    transition: height 0.3s ease;
    z-index: -1;
}

.tgi-ftr-socials a:hover {
    color: var(--ftr-bg);
    border-color: var(--ftr-yellow);
    transform: translateY(-5px);
}

.tgi-ftr-socials a:hover::before {
    height: 100%;
}

.tgi-ftr-bottom {
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
    margin-top: 10px;
    padding: 15px 0;
    text-align: center;
    /* Ensures center alignment */
}

.tgi-ftr-copyright {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
}

.tgi-ftr-copyright a {
    color: var(--ftr-yellow);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.tgi-ftr-copyright a:hover {
    color: #fff;
}

@media (max-width: 991px) {
    .tgi-ftr-widget {
        margin-bottom: 40px;
    }
}

/* hero section 2 */
:root {
    --tgi-v2-bg: #f8fafc;
    --tgi-v2-brand-blue: #093a9a;
    --tgi-v2-brand-yellow: #fbbc05;
    --tgi-v2-text-dark: #0f172a;
    --tgi-v2-text-muted: #475569;
    --tgi-v2-glass-bg: rgba(255, 255, 255, 0.7);
    --tgi-v2-glass-border: rgba(255, 255, 255, 0.5);
    --tgi-v2-cyan: #00f0ff;
    --tgi-v2-purple: #8b5cf6;
}

.tgi-hero-v2-main-wrapper {
    position: relative;
    background-color: var(--tgi-v2-bg);
    /* font-family: 'Plus Jakarta Sans', sans-serif; */
    overflow: hidden;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 145px 20px 52px;
    z-index: 1;
    perspective: 1200px;
}

.tgi-hero-v2-main-wrapper *,
.tgi-hero-v2-main-wrapper *::before,
.tgi-hero-v2-main-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Animated Ambient Background Blobs */
.tgi-hero-v2-ambient-blobs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.tgi-hero-v2-blob-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: tgiHeroV2Float 15s infinite alternate ease-in-out;
}

.tgi-hero-v2-blob-1 {
    background: var(--tgi-v2-brand-blue);
    width: 500px;
    height: 500px;
    top: -100px;
    right: -100px;
}

.tgi-hero-v2-blob-2 {
    background: var(--tgi-v2-brand-yellow);
    width: 400px;
    height: 400px;
    bottom: -50px;
    left: -100px;
    animation-delay: -5s;
    opacity: 0.25;
}

.tgi-hero-v2-blob-3 {
    background: #00f0ff;
    width: 300px;
    height: 300px;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.15;
    animation-duration: 20s;
}

@keyframes tgiHeroV2Float {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(50px, 80px) scale(1.1);
    }
}

/* Subtle Grid Pattern Overlay */
.tgi-hero-v2-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(9, 58, 154, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(9, 58, 154, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -1;
    mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
}

.tgi-hero-v2-content-container {
    max-width: 950px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 10;
}

/* Top Badge */
.tgi-hero-v2-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(9, 58, 154, 0.06);
    border: 1px solid rgba(9, 58, 154, 0.18);
    padding: 10px 24px;
    border-radius: 60px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tgi-v2-brand-blue);
    margin-bottom: 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.tgi-hero-v2-status-indicator {
    width: 10px;
    height: 10px;
    background-color: var(--tgi-v2-brand-blue);
    border-radius: 50%;
    animation: tgiHeroV2Pulse 2.5s infinite;
}

@keyframes tgiHeroV2Pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(9, 58, 154, 0.5);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(9, 58, 154, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(9, 58, 154, 0);
    }
}

.tgi-hero-v2-main-heading {
    /* font-family: 'Space Grotesk', sans-serif; */
    font-size: 80px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--tgi-v2-text-dark);
    margin-bottom: 12px;
    letter-spacing: -1.5px;
}

.tgi-hero-v2-heading-highlight {
    background: linear-gradient(135deg, var(--tgi-v2-brand-blue) 0%, #1a56cc 40%, var(--tgi-v2-brand-yellow) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.tgi-hero-v2-subtext-desc {
    font-size: 22px;
    line-height: 1.6;
    color: var(--tgi-v2-text-muted);
    margin-bottom: 15px;
    font-weight: 400;
    max-width: 800px;
}

.tgi-hero-v2-feature-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 35px;
}

.tgi-hero-v2-tag-item {
    background: var(--tgi-v2-glass-bg);
    border: 1px solid var(--tgi-v2-glass-border);
    padding: 12px 24px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 16px;
    color: var(--tgi-v2-brand-blue);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    cursor: default;
}

.tgi-hero-v2-tag-item:hover {
    transform: translateY(-4px);
    border-color: var(--tgi-v2-brand-blue);
    box-shadow: 0 10px 30px rgba(9, 58, 154, 0.18);
}

.tgi-hero-v2-tag-item i {
    color: var(--tgi-v2-brand-yellow);
    font-size: 20px;
}

.tgi-hero-v2-cta-group {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.tgi-hero-v2-action-btn {
    padding: 18px 40px;
    border-radius: 60px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.tgi-hero-v2-btn-solid {
    background: var(--tgi-v2-brand-blue);
    color: #ffffff;
    border: none;
    box-shadow: 0 12px 30px rgba(9, 58, 154, 0.35);
}

.tgi-hero-v2-btn-solid::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.6s ease;
    z-index: -1;
}

.tgi-hero-v2-btn-solid:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 18px 40px rgba(9, 58, 154, 0.45);
    color: #ffffff;
}

.tgi-hero-v2-btn-solid:hover::before {
    left: 100%;
}

.tgi-hero-v2-btn-outline {
    background: var(--tgi-v2-glass-bg);
    color: var(--tgi-v2-text-dark);
    border: 2px solid rgba(9, 58, 154, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.tgi-hero-v2-btn-outline:hover {
    border-color: var(--tgi-v2-brand-yellow);
    background: var(--tgi-v2-brand-yellow);
    color: var(--tgi-v2-brand-blue);
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(251, 188, 5, 0.35);
}

/* 3D Visuals & Floating Shapes Layer */
.tgi-hero-v2-kinetic-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Allows clicking on text/buttons beneath */
    z-index: 2;
}

/* Floating 3D Cards */
.tgi-hero-v2-floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--tgi-v2-glass-border);
    border-radius: 24px;
    padding: 18px 28px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    gap: 18px;
    transition: transform 0.15s ease-out;
    white-space: nowrap;
}

.tgi-hero-v2-card-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.tgi-hero-v2-card-text h4 {
    /* font-family: 'Space Grotesk', sans-serif; */
    font-size: 16px;
    font-weight: 700;
    color: var(--tgi-v2-text-dark);
    margin-bottom: 3px;
}

.tgi-hero-v2-card-text p {
    font-size: 13px;
    color: var(--tgi-v2-text-muted);
    margin: 0;
}

/* Positioning the Cards around the center */
.tgi-v2-pos-1 {
    top: 22%;
    left: 6%;
    animation: tgiHeroV2HoverA 7s infinite ease-in-out;
}

.tgi-v2-pos-1 .tgi-hero-v2-card-icon-box {
    background: rgba(9, 58, 154, 0.12);
    color: var(--tgi-v2-brand-blue);
}

.tgi-v2-pos-2 {
    top: 24%;
    right: 2%;
    animation: tgiHeroV2HoverB 8s infinite ease-in-out reverse;
}

.tgi-v2-pos-2 .tgi-hero-v2-card-icon-box {
    background: rgba(251, 188, 5, 0.18);
    color: #d49e00;
}

.tgi-v2-pos-3 {
    bottom: 18%;
    left: 14%;
    animation: tgiHeroV2HoverC 9s infinite ease-in-out;
}

.tgi-v2-pos-3 .tgi-hero-v2-card-icon-box {
    background: rgba(0, 240, 255, 0.18);
    color: #0099b3;
}

.tgi-v2-pos-4 {
    bottom: 22%;
    right: 14%;
    animation: tgiHeroV2HoverA 8.5s infinite ease-in-out reverse;
}

.tgi-v2-pos-4 .tgi-hero-v2-card-icon-box {
    background: rgba(139, 92, 246, 0.18);
    color: var(--tgi-v2-purple);
}

/* Geometric Floating Shapes */
.tgi-hero-v2-geo-shape {
    position: absolute;
    transition: transform 0.15s ease-out;
}

.tgi-v2-shape-orbit {
    width: 100px;
    height: 100px;
    border: 3px solid rgba(9, 58, 154, 0.25);
    border-radius: 50%;
    top: 16%;
    right: 17%;
    animation: tgiV2SpinRight 18s linear infinite;
}

.tgi-v2-shape-orbit::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--tgi-v2-brand-yellow);
    border-radius: 50%;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 15px var(--tgi-v2-brand-yellow);
}

.tgi-v2-shape-nexus {
    width: 50px;
    height: 50px;
    bottom: 19%;
    left: 9%;
    animation: tgiV2SpinLeft 12s linear infinite reverse;
}

.tgi-v2-shape-nexus::before,
.tgi-v2-shape-nexus::after {
    content: '';
    position: absolute;
    background: rgba(0, 240, 255, 0.5);
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.tgi-v2-shape-nexus::before {
    top: 22px;
    left: 0;
    width: 50px;
    height: 6px;
}

.tgi-v2-shape-nexus::after {
    top: 0;
    left: 22px;
    width: 6px;
    height: 50px;
}

.tgi-v2-shape-matrix {
    width: 80px;
    height: 80px;
    background-image: radial-gradient(rgba(139, 92, 246, 0.5) 3px, transparent 3px);
    background-size: 20px 20px;
    top: 84%;
    right: 2%;
    animation: tgiHeroV2HoverB 6s infinite ease-in-out;
}

.tgi-v2-shape-triangle {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 45px solid rgba(251, 188, 5, 0.4);
    top: 39%;
    left: 5%;
    animation: tgiHeroV2HoverC 10s infinite ease-in-out, tgiV2SpinRight 25s linear infinite;
}

@keyframes tgiHeroV2HoverA {

    0%,
    100% {
        transform: translateY(0) translateZ(40px);
    }

    50% {
        transform: translateY(-30px) translateZ(40px);
    }
}

@keyframes tgiHeroV2HoverB {

    0%,
    100% {
        transform: translateY(0) translateZ(60px);
    }

    50% {
        transform: translateY(35px) translateZ(60px);
    }
}

@keyframes tgiHeroV2HoverC {

    0%,
    100% {
        transform: translateY(0) translateZ(50px);
    }

    50% {
        transform: translateY(-25px) translateZ(50px);
    }
}

@keyframes tgiV2SpinRight {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes tgiV2SpinLeft {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

/* Initial state for JS entry animation */
.tgi-hero-v2-reveal-start {
    opacity: 0;
    transform: translateY(40px) scale(0.92);
    transition: all 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tgi-hero-v2-reveal-end {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (max-width: 1200px) {
    .tgi-hero-v2-main-heading {
        font-size: 68px;
    }

    .tgi-v2-pos-1 {
        top: 10%;
        left: 2%;
        transform: scale(0.85);
    }

    .tgi-v2-pos-2 {
        top: 15%;
        right: 2%;
        transform: scale(0.85);
    }

    .tgi-v2-pos-3 {
        bottom: 10%;
        left: 2%;
        transform: scale(0.85);
    }

    .tgi-v2-pos-4 {
        bottom: 15%;
        right: 2%;
        transform: scale(0.85);
    }
}

@media (max-width: 992px) {
    .tgi-hero-v2-main-heading {
        font-size: 56px;
    }

    .tgi-hero-v2-subtext-desc {
        font-size: 18px;
    }

    .tgi-v2-shape-orbit,
    .tgi-v2-shape-nexus,
    .tgi-v2-shape-matrix,
    .tgi-v2-shape-triangle {
        display: none;
    }
}

@media (max-width: 768px) {
    .tgi-hero-v2-main-wrapper {
        padding: 100px 15px 80px;
    }

    .tgi-hero-v2-main-heading {
        font-size: 46px;
    }

    .tgi-hero-v2-subtext-desc {
        font-size: 16px;
        margin-bottom: 35px;
    }

    .tgi-hero-v2-action-btn {
        width: 100%;
        justify-content: center;
    }

    .tgi-hero-v2-kinetic-layer {
        display: none;
    }

    /* Hide complex 3D on small mobile */
}

@media (max-width: 480px) {
    .tgi-hero-v2-main-heading {
        font-size: 38px;
    }

    .tgi-hero-v2-feature-tags {
        gap: 10px;
    }

    .tgi-hero-v2-tag-item {
        font-size: 14px;
        padding: 10px 16px;
    }
}

@media (max-width: 991px) {
    .tgi-hero-v2-main-wrapper {
        padding: 117px 15px 23px;
    }

    .tgi-hero-v2-status-badge {
        padding: 1px 16px;
        font-size: 13px;
    }

    .tgi-hero-v2-subtext-desc {
        font-size: 15px;
        margin-bottom: 19px;
    }

    .tgi-hero-v2-cta-group {
        gap: 15px;
    }

    .tgi-hero-v2-main-heading {
        font-size: 46px;
    }

    .tgi-collage-section {
        padding: 3rem 1rem;
    }

    .programs-section {
        padding: 31px 20px;
    }

    .bottom-banner {
        margin-top: 25px;
    }

    .about-grid {
        gap: 30px;
    }

    .about-tgi-section {
        padding: 38px 20px;
    }

    .who-can-join-section {
        padding: 35px 20px;
    }

    .wcj-grid {
        gap: 20px 0;
    }

    .wcj-header h2 {
        margin-bottom: 0px;
    }

    .wcj-header {
        margin-bottom: 25px;
    }

    .wcj-header h2 {
        font-size: 39px;
    }

    .tgi-wcu-section {
        padding: 45px 20px;
    }

    .tgi-wcu-eyebrow {
        font-size: 9px;
        margin-bottom: 18px;
        padding: 5px 16px;
    }

    .tgi-wcu-header {
        margin: 0 auto 35px auto;
    }

    .tgi-wcu-desc {
        font-size: 12px;
    }

    .tgi-wcu-title {
        margin-bottom: 8px;
    }

    .tgi-wcu-card {
        padding: 20px;
    }

    .tgi-wcu-icon-box {
        margin-bottom: 7px;
    }

    .tgi-wcu-card-text {
        font-size: 13px;
    }

    .tgi-wcu-card-title {
        font-size: 21px;
    }

    .tgi-team-section {
        padding: 35px 20px;
    }

    .tgi-team-title {
        font-size: 30px;
    }

    .tgi-team-eyebrow {
        margin-bottom: 5px;
    }

    .tgi-team-grid {
        gap: 30px;
    }

    .tgi-fc-wrapper {
        padding: 30px 20px;
    }

    .tgi-fc-card {
        padding: 30px 20px;
    }

    .tgi-ftr-widget {
        margin-bottom: 20px;
    }

    .whatsapp-container {
        bottom: 44px;
    }

    .tgi-ftr-heading {
        margin-bottom: 5px;
    }

    .tgi-hiw-sticky {
        padding: 0 18px 15px;
    }

    .section-header {
        margin: 0 auto 40px;
    }

    .services-header-content {
        margin-bottom: 3rem;
    }
}

/* Tools section */
:root {
    /* Colors extracted from the second reference image */
    --nxg-primary-blue: #093a9a;
    /* Deep professional blue */
    --nxg-accent-yellow: #fca311;
    /* Golden yellow */
    --nxg-bg-light: #f4f7fb;
    /* Very soft light blue/gray background */
    --nxg-text-muted: #5a6a85;

    /* The specific leaf-like border radius from the first image */
    --nxg-leaf-radius: 40px 12px 40px 12px;

    /* Glassmorphism shadows */
    --nxg-shadow-glass: 0 8px 32px 0 rgba(2, 26, 79, 0.08);
    --nxg-shadow-glass-hover: 0 15px 45px 0 rgba(2, 26, 79, 0.15);
    --nxg-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.nxg-tools-section {
    background-color: var(--nxg-bg-light);
    padding: 55px 20px;
    position: relative;
    overflow: hidden;

    /* Custom SVG Wave Line Pattern Background (subtle dark lines) */
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 1440 800' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-100 200 C 300 50, 600 450, 1000 250 S 1500 100, 1600 300' stroke='rgba(2,26,79,0.05)' fill='none' stroke-width='2'/%3E%3Cpath d='M-100 350 C 200 150, 500 600, 900 400 S 1400 200, 1600 450' stroke='rgba(2,26,79,0.03)' fill='none' stroke-width='1.5'/%3E%3Cpath d='M-100 500 C 400 350, 700 700, 1200 500 S 1500 300, 1600 600' stroke='rgba(252,163,17,0.06)' fill='none' stroke-width='2'/%3E%3Cpath d='M-100 650 C 300 550, 600 800, 1000 700 S 1400 550, 1600 800' stroke='rgba(2,26,79,0.04)' fill='none' stroke-width='1'/%3E%3Cpath d='M-100 100 C 400 300, 800 -50, 1200 150 S 1500 400, 1600 200' stroke='rgba(2,26,79,0.02)' fill='none' stroke-width='3'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
}

/* Decorative glowing orbs to enhance Glassmorphism blur */
.nxg-tools-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -50px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(252, 163, 17, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    filter: blur(40px);
}

.nxg-tools-section::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(2, 26, 79, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    filter: blur(50px);
}

/* Middle subtle orb to make glass pop */
.nxg-tools-section .nxg-bg-orb {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(0, 196, 204, 0.05) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
    filter: blur(30px);
}

.nxg-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.nxg-header-block {
    text-align: center;
    margin-bottom: 50px;
}

.nxg-top-badge {
    display: inline-block;
    color: var(--nxg-primary-blue);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: rgba(252, 163, 17, 0.15);
    border: 1px solid rgba(252, 163, 17, 0.4);
    padding: 8px 24px;
    border-radius: 50px;
    margin-bottom: 20px;
    /* Animation hidden state */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
    backdrop-filter: blur(5px);
}

.nxg-main-title {
    color: var(--nxg-primary-blue);
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    /* Animation hidden state */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease 0.2s;
}

.nxg-main-title span.nxg-highlight {
    color: var(--nxg-accent-yellow);
    position: relative;
    display: inline-block;
}

/* The yellow swoosh underline effect */
.nxg-main-title span.nxg-highlight::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 12px;
    background-color: var(--nxg-primary-blue);
    opacity: 0.1;
    z-index: -1;
    border-radius: 4px;
    transform: skewX(-15deg);
}

.nxg-tools-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* This automatically centers the last row */
    gap: 16px;
    /* Mobile gap */
}

.nxg-tool-card {
    /* Glassmorphism Background & Blur */
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Glass Borders to simulate realistic edges */
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.9);
    border-left: 1px solid rgba(255, 255, 255, 0.9);

    border-radius: var(--nxg-leaf-radius);
    padding: 35px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--nxg-shadow-glass);
    cursor: pointer;
    position: relative;
    overflow: hidden;

    /* Responsive Sizing Logic */
    /* Mobile: 2 per row */
    width: calc((100% - 16px) / 2);

    /* Animation hidden state */
    opacity: 0;
    transform: translateY(40px);
    transition: var(--nxg-transition);
}

/* Tablet Sizing */
@media (min-width: 600px) {
    .nxg-tools-flex {
        gap: 20px;
    }

    .nxg-tool-card {
        width: calc((100% - 40px) / 3);
        padding: 40px 20px;
    }

    /* 3 per row */
}

/* Small Desktop Sizing */
@media (min-width: 992px) {
    .nxg-tools-flex {
        gap: 24px;
    }

    .nxg-tool-card {
        width: calc((100% - 96px) / 5);
    }

    /* 5 per row */
}

/* Large Desktop Sizing */
@media (min-width: 1200px) {
    .nxg-tool-card {
        width: calc((100% - 120px) / 6);
    }

    /* 6 per row */
}

/* Glassmorphism Hover Effects */
.nxg-tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(252, 163, 17, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    pointer-events: none;
}

.nxg-tool-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.65);
    box-shadow: var(--nxg-shadow-glass-hover);
    border-color: rgba(252, 163, 17, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 1);
    border-left: 1px solid rgba(255, 255, 255, 1);
}

.nxg-tool-card:hover::before {
    opacity: 1;
}

.nxg-tool-icon-box {
    width: 75px;
    height: 75px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Giving icons a slight shadow to pop off the glass */
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.1));
}

.nxg-tool-card:hover .nxg-tool-icon-box {
    transform: scale(1.12) rotate(4deg);
}

.nxg-tool-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    transition: all 0.3s ease;
}

.nxg-tool-card:hover .nxg-tool-logo-img {
    /* Slight brightness boost on hover for the image */
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.15)) brightness(1.1);
}

.nxg-tool-name {
    color: var(--nxg-primary-blue);
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    margin: 0;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.nxg-tool-card:hover .nxg-tool-name {
    color: var(--nxg-accent-yellow);
}

/* These classes are added by JS when elements scroll into view */
.nxg-is-visible .nxg-top-badge,
.nxg-is-visible .nxg-main-title {
    opacity: 1;
    transform: translateY(0);
}

.nxg-tool-card.nxg-card-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Adjustments for Headings */
@media (max-width: 768px) {
    .nxg-main-title {
        font-size: 2.2rem;
    }

    .nxg-tools-section {
        padding: 70px 15px;
    }
}

@media (max-width: 480px) {
    .nxg-main-title {
        font-size: 1.8rem;
    }

    .nxg-top-badge {
        font-size: 0.8rem;
        padding: 6px 16px;
    }

    .nxg-tool-icon-box {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }

    .nxg-tool-name {
        font-size: 0.95rem;
        /* slightly larger for readability on small screens */
    }
}

.tgi-hero-v2-btn-solid:visited {
    color: #ffc107;
}

.btn-explore:visited {
    color: #ffc107;
}

@media (max-width: 991px) {
    .tgi-hero-v2-feature-tags {
        margin-bottom: 22px;
    }

    .tgi-hiw-panel-icon {
        margin-bottom: 5px;
    }

    .tgi-hiw-panel-step {
        margin-bottom: 0;
    }

    .tgi-hiw-panel-title {
        margin: 0 0 2px;
    }

    .tgi-hiw-panel-desc {
        font-size: 13px;
        line-height: 1.5;
    }

    .tgi-hiw-title {
        margin-bottom: 11px;
    }

    .bottom-banner {
        gap: 8px;
        padding: 20px 20px;
    }

    .about-grid {
        gap: 3px;
    }

    .tgi-team-title {
        font-size: 27px;
    }

    .tgi-team-header {
        margin-bottom: 20px;
    }

    .nxg-top-badge {
        font-size: 0.4rem;
        padding: 0px 13px;
        margin-bottom: 8px;
    }

    .nxg-header-block {
        margin-bottom: 23px;
    }

    .testimonial-video-container {
        padding: 1rem 0.5rem 0rem;
    }

    .item-2.is-visible {
        display: none;
    }

    .item-3.is-visible {
        display: none;
    }

    .item-4 {
        max-width: 260px;
        height: 230px;
    }

    .tgi-collage-container {
        gap: 1.5rem;
    }
    .tgi-hiw-node-desc{
        font-size: 9.5px;
        text-align: justify;
        line-height: 1.4;
        padding-left: 2px;
    }
}