:root {
     --navy: #0e1f4b;
     --deep: #061823;
     --green: #41a766;
     --blue: #1c79cb;
     --light-blue: #00bbff;
     --white: #fff;
     --mint: #effaff;
     --text: #19313e;
     --muted: #60737c;
     --border: #dce8e3
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     color: var(--text);
     font-family: "Inter", sans-serif;
     line-height: 1.65
 }

 a {
     text-decoration: none
 }

 .site-header {
     position: sticky;
     top: 0;
     z-index: 1000;
     background: rgba(255, 255, 255, .95);
     backdrop-filter: blur(14px);
     border-bottom: 1px solid #e5ece9
 }

 .navbar {
     padding: 14px 0
 }

 .navbar-brand {
     display: flex;
     align-items: center;
     gap: 10px;
     color: var(--navy)
 }

 .navbar-brand strong,
 .navbar-brand small {
     display: block;
     line-height: 1.1
 }

 .navbar-brand strong {
     font-size: 17px
 }

 .navbar-brand small {
     font-size: 10px;
     color: var(--blue);
     letter-spacing: 1.5px;
     text-transform: uppercase
 }

 .brand-mark {
     width: 42px;
     height: 42px;
     display: grid;
     place-items: center;
     background: var(--blue);
     color: #fff;
     border-radius: 12px
 }

 .nav-link {
     font-size: 13px;
     font-weight: 600;
     color: #40535d;
     padding: 9px !important
 }

 .nav-link:hover,
 .nav-link.active {
     color: var(--blue) !important
 }

 .navbar-toggler {
     border: 1px solid var(--border)
 }

 .btn-brand {
     background: var(--blue);
     border-color: var(--blue);
     color: #fff;
     border-radius: 5px;
     padding: 10px 15px;
 }

 .btn-brand:hover {
    background: var(--white);
    border-color: var(--blue);
    color: var(--blue);
 }

 .btn-outline-brand {
     border: 1px solid #a8cfc1;
     color: var(--white);
     border-radius: 5px;
     padding: 10px 15px;
 }

 .btn-outline-brand:hover {
     background: var(--mint);
     color: var(--navy)
 }

 .hero-section {
     overflow: hidden;
     background: center/cover no-repeat url(../images/hero-bg.jpg), radial-gradient(circle at 82% 28%, rgb(19 89 138 / 12%), transparent 32%), linear-gradient(135deg, #f4faff, #fff 55%, #f4faff)
 }

 .hero-row {
    padding: 90px 0;
 }

 .eyebrow,
 .section-label {
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding: 2px 15px;
    border-radius: 30px;
    color: var(--white);
    font-size: 14px;
    background: var(--green);
    margin-bottom: 20px;
 }

 .eyebrow span {
     width: 28px;
     height: 2px;
     background: var(--blue)
 }

 h1,
 h2 {
     color: var(--navy)
 }

 .hero-section h1 {
     font-size: clamp(48px, 6vw, 82px);
     line-height: 1.02;
     letter-spacing: -2px;
     margin: 18px 0;
     font-weight: 600;
 }

 .hero-section h1 em {
     color: var(--light-blue);
     font-style: normal
 }

 .hero-copy {
     max-width: 700px;
     color: #5b7079;
     font-size: 18px
 }

 .hero-points {
     display: flex;
     flex-wrap: wrap;
     gap: 12px 24px;
     color: #526770;
     font-size: 12px;
     font-weight: 600
 }

 .hero-points span {
    position: relative;
    background: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    box-shadow: 0 15px 40px rgba(11, 36, 53, 0.1);
 }

 .hero-points i {
     color: var(--blue)
 }

 .hero-visual {
     position: relative;
     width: min(100%, 470px);
     aspect-ratio: 1;
     margin: auto
 }

 .orbit {
     position: absolute;
     inset: 10%;
     border: 1px dashed rgba(19, 138, 104, .25);
     border-radius: 50%
 }

 .orbit-two {
     inset: 25%;
     border-style: solid;
     opacity: .6
 }

 .hero-core {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 165px;
     height: 165px;
     border-radius: 50%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background: var(--navy);
     color: #fff;
     box-shadow: 0 25px 70px rgba(7, 27, 42, .22)
 }

 .hero-core img {
    position: absolute;
    width: 100%;
 }

 .hero-core span {
    font-size: 12px;
    text-align: center;
    font-weight: 800;
    position: relative;
    z-index: 1;
    background: var(--blue);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 9px;
    width: 100%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
 }

 /* =========================
    FLOATING CARDS
 ========================= */
 
 .floating-card {
     position: absolute;
     left: 50%;
     top: 50%;
     padding: 13px 17px;
     background: #fff;
     border: none;
     border-radius: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     white-space: nowrap;
     font-size: 12px;
     box-shadow: 0 15px 40px rgba(11, 36, 53, 0.1);
     z-index: 10;
     width: 130px;
     height: 130px;
     justify-content: center;
 }

 .floating-card i {
     color: var(--blue);
     font-size: 30px;
 }

 .section-space {
     padding: 105px 0;
     overflow: hidden;
 }

 .section-space h2 {
     font-size: clamp(36px, 4vw, 45px);
     line-height: 1.08;
     margin: 10px 0 20px;
     font-weight: 700;
 }

 .section-space h2 em{
    font-style: normal;
    color: var(--blue);
 }

 .lead-text {
     font-size: 17px;
     color: var(--muted)
 }

 .text-link {
     color: var(--blue);
     font-weight: 800;
     font-size: 13px
 }

 .architecture,
 .contact-section {
     background: #f6fbff
 }

 .section-heading p {
     color: var(--muted)
 }

 .dimension-card,
 .service-card {
     height: 100%;
     padding: 30px;
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 15px;
     position: relative;
     transition: .25s
 }

 .dimension-card:hover,
 .service-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 18px 45px rgba(11, 36, 53, .08)
 }

 .dimension-card>i,
 .service-card>i {
     display: grid;
     width: 52px;
     height: 52px;
     place-items: center;
     margin-bottom: 22px;
     border-radius: 12px;
     background: var(--mint);
     color: var(--blue);
     font-size: 20px
 }

 .dimension-card small {
     position: absolute;
     right: 20px;
     top: 18px;
     color: #9db7ad;
     font-weight: 800
 }

 .dimension-card h3,
 .service-card h3 {
     font-size: 19px;
     color: var(--navy);
     margin-bottom: 8px
 }

 .dimension-card p,
 .service-card p,
 .initiative-card p {
     font-size: 14px;
     color: var(--muted);
     margin: 0
 }

 .eee-section h2 span {
     color: var(--blue)
 }

 .eee-item {
     display: flex;
     gap: 20px;
     padding: 25px 0;
     border-bottom: 1px solid var(--border)
 }
 .eee-item:last-child {
    border-bottom: none;
 }

 .eee-item>i {
     flex: 0 0 52px;
     width: 52px;
     height: 52px;
     display: grid;
     place-items: center;
     border-radius: 50%;
     background: var(--mint);
     color: var(--blue)
 }

 .eee-item small {
    color: var(--blue);
    font-weight: 600;
    font-size: 14px;
 }

 .eee-item h3 {
     font-size: 19px;
     margin: 3px 0;
     color: var(--navy)
 }

 .eee-item p {
     font-size: 14px;
     color: var(--muted);
     margin: 0
 }

 .dark-section {
     background: var(--navy);
     color: #fff
 }

 .dark-section h2 {
     color: #fff
 }

 .dark-section p {
     color: #b6c8cf
 }

 .dark-section .section-label {
     color: var(--white)
 }

 .network-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     border-top: 1px solid rgba(255, 255, 255, .15);
     border-left: 1px solid rgba(255, 255, 255, .15)
 }

 .network-grid div {
     min-height: 140px;
     padding: 25px;
     display: flex;
     gap: 15px;
     flex-direction: column;
     justify-content: space-between;
     border-right: 1px solid rgba(255, 255, 255, .15);
     border-bottom: 1px solid rgba(255, 255, 255, .15);
     font-size: 14px;
     font-weight: 300;
     text-align: center;
 }

 .network-grid > div.light{
    background: rgb(255 255 255 / 5%);
 }

 .network-grid i {
     color: var(--blue);
 }

 .initiative-card {
     height: 100%;
     display: flex;
     gap: 24px;
     padding: 32px;
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 15px
 }

 .initiative-card>i {
     flex: 0 0 58px;
     height: 58px;
     display: grid;
     place-items: center;
     background: var(--mint);
     color: var(--blue);
     border-radius: 13px;
 }

 .initiative-card small {
    color: var(--blue);
    font-weight: 600;
 }

 .initiative-card h3 {
     font-size: 19px;
     color: var(--navy)
 }

 .initiative-card a {
     display: inline-block;
     margin-top: 16px;
     font-size: 13px
 }

 .insight-panel {
     display: grid;
     grid-template-columns: 1fr 1fr;
     border: 1px solid var(--border);
     border-radius: 15px;
     overflow: hidden
 }

 .insight-panel div {
    min-height: 95px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 18px;
    font-weight: 700;
 }

 .insight-panel i {
     color: var(--blue);
 }

 .membership {
     padding-top: 0
 }

 .membership-box {
     padding: 55px;
     border-radius: 22px;
     background: center/cover no-repeat url(../images/membership-bg.jpg);
     color: #fff
 }

 .membership-box h2 {
     color: #fff
 }

 .membership-box p {
     color: #bdd0d5
 }

 .contact-form {
     padding: 35px;
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 15px
 }

 .contact-form label {
     font-size: 12px;
     font-weight: 700;
     margin-bottom: 6px
 }

 .site-footer {
     padding: 70px 0 25px;
     background: var(--navy);
     color: #9eb2ba;
     overflow: hidden;
 }

 .footer-brand {
     font-family: "Playfair Display", serif;
     color: #fff;
     font-size: 27px
 }

 .footer-tagline {
     color: #4bdcff;
     font-size: 12px;
     font-weight: 800;
     letter-spacing: 1px
 }

 .site-footer h6 {
     color: #fff;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin-bottom: 30px;
 }

 .site-footer a:not(.footer-brand) {
     display: block;
     color: #9eb2ba;
     font-size: 14px;
     margin: 7px 0
 }

 .footer-bottom {
     display: flex;
     justify-content: space-between;
     gap: 20px;
     border-top: 1px solid rgba(255, 255, 255, .1);
     margin-top: 50px;
     padding-top: 20px;
     font-size: 10px
 }

 .hero-visual {
    position: relative;
    width: 100%;
    height: 470px;
}

/* Orbit lines */
.orbit {
    position: absolute;
    border: 1px dashed rgba(19, 138, 104, 0.25);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.orbit-one {
    width: 380px;
    height: 380px;
}

.orbit-two {
    width: 280px;
    height: 280px;
}

/* Center */
.hero-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 165px;
    height: 165px;
    border-radius: 50%;
    background: #0b2435;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.floating-image {
    animation: floatUpDown 4s ease-in-out infinite;
}

.risk-card .card{
    position: relative;
    display: block;
    padding:clamp(20px, 4vw, 50px);
    border-radius: clamp(15px, 4vw, 30px);
    background: var(--white);
    filter:drop-shadow(0px 0px 20px rgba(0,0,0,0.1));
}

.swiper-slide{
    transition: transform 0.4s ease;
    filter:blur(5px)
}

.swiper-slide.custom-active-scale{
    z-index: 2;
    filter:blur(0px)
}

.risk-navigation {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 100%;
    max-width: 120px;
    font-size: 35px;
}

.text-theme{
    color: var(--blue);
}

.text-lightblue{
    color: var(--light-blue) !important;
}

.br-10{
    border-radius: 10px;
}

@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }

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

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

.about{
    background: center / cover no-repeat url(../images/about.jpg);
}

.form-control {
    min-height: 48px;
    border: 1px solid #d5e1e5;
    border-radius: 3px;
    font-size: 14px;
    padding: 10px 14px;
}
.form-control:focus{
    box-shadow: none;
    outline: none;
}


/* =================================
   ORBIT ANIMATION
================================= */

.card-law {
    animation: orbitLaw 14s linear infinite;
}

.card-finance {
    animation: orbitFinance 14s linear infinite;
}

.card-policy {
    animation: orbitPolicy 14s linear infinite;
}

.card-tech {
    animation: orbitTech 14s linear infinite;
}

.director-pic{
    position:relative;
    display: inline-block;
    width: 220px;
    height: 220px;
    border-radius: 100%;
    object-fit: cover;
}


/* =================================
   CARD 1
   Orbit radius = 190px
================================= */

@keyframes orbitLaw {

    0% {
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            translateX(190px)
            rotate(0deg);
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotate(360deg)
            translateX(190px)
            rotate(-360deg);
    }

}


/* =================================
   CARD 2
================================= */

@keyframes orbitFinance {

    0% {
        transform:
            translate(-50%, -50%)
            rotate(90deg)
            translateX(190px)
            rotate(-90deg);
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotate(450deg)
            translateX(190px)
            rotate(-450deg);
    }

}


/* =================================
   CARD 3
================================= */

@keyframes orbitPolicy {

    0% {
        transform:
            translate(-50%, -50%)
            rotate(180deg)
            translateX(190px)
            rotate(-180deg);
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotate(540deg)
            translateX(190px)
            rotate(-540deg);
    }

}


/* =================================
   CARD 4
================================= */

@keyframes orbitTech {

    0% {
        transform:
            translate(-50%, -50%)
            rotate(270deg)
            translateX(190px)
            rotate(-270deg);
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotate(630deg)
            translateX(190px)
            rotate(-630deg);
    }

}

 @media(max-width:991px) {
     .hero-row {
         padding: 75px 0
     }

     .network-grid {
         grid-template-columns: 1fr 1fr
     }
 }

 @media(max-width:575px) {
     .hero-section h1 {
         font-size: 44px
     }

     .hero-core {
         width: 135px;
         height: 135px
     }

     .network-grid,
     .insight-panel {
         grid-template-columns: 1fr 1fr
     }

     .network-grid div {
         min-height: 115px;
         padding: 18px
     }

     .initiative-card {
         flex-direction: column
     }

     .membership-box {
         padding: 35px 25px
     }

     .contact-form {
         padding: 24px
     }

     .footer-bottom {
         flex-direction: column
     }

     .orbit-one {
        width: 300px;
        height: 300px;
    }

    .orbit-two {
        width: 215px;
        height: 215px;
    }

    .floating-card{
        width: 110px;
        height: 110px;
    }


    /* =================================
       CARD 1
       Orbit radius = 190px
    ================================= */
    
    @keyframes orbitLaw {
    
        0% {
            transform:
                translate(-50%, -50%)
                rotate(0deg)
                translateX(140px)
                rotate(0deg);
        }
    
        100% {
            transform:
                translate(-50%, -50%)
                rotate(360deg)
                translateX(140px)
                rotate(-360deg);
        }
    
    }
    
    
    /* =================================
       CARD 2
    ================================= */
    
    @keyframes orbitFinance {
    
        0% {
            transform:
                translate(-50%, -50%)
                rotate(90deg)
                translateX(140px)
                rotate(-90deg);
        }
    
        100% {
            transform:
                translate(-50%, -50%)
                rotate(450deg)
                translateX(140px)
                rotate(-450deg);
        }
    
    }
    
    
    /* =================================
       CARD 3
    ================================= */
    
    @keyframes orbitPolicy {
    
        0% {
            transform:
                translate(-50%, -50%)
                rotate(180deg)
                translateX(140px)
                rotate(-180deg);
        }
    
        100% {
            transform:
                translate(-50%, -50%)
                rotate(540deg)
                translateX(140px)
                rotate(-540deg);
        }
    
    }
    
    
    /* =================================
       CARD 4
    ================================= */
    
    @keyframes orbitTech {
    
        0% {
            transform:
                translate(-50%, -50%)
                rotate(270deg)
                translateX(140px)
                rotate(-270deg);
        }
    
        100% {
            transform:
                translate(-50%, -50%)
                rotate(630deg)
                translateX(140px)
                rotate(-630deg);
        }
    
    }

    .section-space, .hero-row {
        padding: 50px 0;
    }

    p, .lead-text, .hero-copy, .dimension-card p, .service-card p, .initiative-card p{
        font-size: 12px;
    }

    .dimension-card, .service-card{
        padding: 15px;
    }

    .section-space h2 {
        font-size: x-large;
    }

    .insight-panel div {
        padding: 20px;
        gap: 15px;
        font-size: 12px;
        line-height: normal;
    }
    .btn-outline-brand, .btn-brand {
        padding: 8px 15px;
        font-size: 14px;
    }
 }