:root {

    --primary: #199FB1;

    --primary-light: #f0f9fa;

    --secondary: #A5F3FC;

    --text-dark: #0F172A;

    --slate: #64748B;

}

.inter-sans {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* --- HERO BASE --- */

.hero-section {

    

    width: 100%;

    position: relative;

    display: none;

    align-items: center;

    overflow: hidden;

}



.hero-section.active {

    display: flex;

}



.btn-custom {

    padding: 16px 36px;

    border-radius: 100px;

    font-weight: 700;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



/* --- DIVIDER LINE STYLE --- */

.mission-divider {

    height: 1px;

    width: 320px;

    background: rgba(255, 255, 255, 0.3);

    margin: 18px auto;

    border-radius: 2px;

    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);

}



/* --- TEXT HIGHLIGHTING REIMAGINED (V12) --- */



/* High-Impact Highlight Container */

.hl-container {

    display: inline-block;

    position: relative;

    padding: 0 4px;

}



/* Style A: Marker Swipe (Confidential) */

.hl-marker {

    position: relative;

    z-index: 1;

    font-weight: 800;

}

.hl-marker::before {

    content: '';

    position: absolute;

    left: -2px;

    bottom: 2px;

    width: 0;

    height: 100%;

    background: var(--secondary);

    z-index: -1;

    transform: rotate(-1deg);

    transition: width 0.8s cubic-bezier(0.65, 0, 0.35, 1);

    animation: swipeIn 1.5s forwards 1.2s;

    border-radius: 2px;

}



/* Style B: Floating Glow (Connect) */

.hl-glow {

    color: #fff;

    text-shadow: 0 0 15px rgba(165, 243, 252, 0.8);

    font-weight: 800;

    animation: softPulse 3s infinite;

}



/* Style C: Brush Underline (Anytime) */

.hl-brush {

    position: relative;

    display: inline-block;

    font-weight: 700;

}

.hl-brush svg {

    position: absolute;

    bottom: -8px;

    left: 0;

    width: 100%;

    height: 12px;

    stroke-dasharray: 400;

    stroke-dashoffset: 400;

    /* animation: drawLine 1.5s forwards 1.5s infinite; */
    animation: drawLine 5s forwards 1.5s infinite;

}

.hl-brush svg path {
    /* stroke: #ff6262; */
    stroke: #ff7272;
}

/* BRUSH EFFECT */
.brush-stroke-svg {
    width: 110%;
    height: auto;
    overflow: visible;
    pointer-events: none;
    transform: rotate(-1deg); 
    transform-origin: left center;
}

.logo-underline {
    margin-top: -15px;
}

.anim-path {
    /* stroke: #ff7272; */
    /* stroke: #E27D60; */
    stroke: #00FFFF;
    /* stroke: #1A365D; */
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    /* animation: drawStroke 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite; */
    animation: drawStroke 2.5s cubic-bezier(0.45, 0.03, 1, 0.47) infinite;
}

.delay-path {
    /* stroke: #ff7272;  */
    /* stroke: #E27D60;  */
    stroke: #00FFFF; 
    /* stroke: #1A365D; */
    /* animation-delay: 0.1s; */
}

.stroke-1 {
    bottom: -14px !important;
}

.stroke-1 .anim-path {
    transform: scale(2);
}

.stroke-2 .anim-path{
    stroke: #ff7272;
}
.stroke-2 .delay-path{
    stroke: #ff7272;
}

@keyframes drawStroke {
    to { stroke-dashoffset: 0; }
}

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

.highlight-wrapper {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-weight: 800;
}

.inline-brush {
    position: absolute;
    left: -2%;
    bottom: -22px;
    width: 104%;
    height: 54px;
    z-index: -1;
    transform: rotate(-1.5deg);
    transform-origin: left center;
    opacity: 1;
}

.stroke-3 {
    height: 51px;
}

/* .stroke-1 .anim-path { animation-delay: 1.8s; }
.stroke-2 .anim-path { animation-delay: 2.3s; }
.stroke-3 .anim-path { animation-delay: 2.8s; } */

@media (max-width: 768px) {
    .text-confidential { font-size: 4rem; }
    .description-para { font-size: 1.1rem; }
}


@keyframes swipeIn {

    to { width: 105%; }

}



@keyframes drawLine {

    to { stroke-dashoffset: 0; }

}



@keyframes softPulse {

    0%, 100% { text-shadow: 0 0 10px rgba(165, 243, 252, 0.4); }

    50% { text-shadow: 0 0 25px rgba(165, 243, 252, 1); transform: scale(1.05); }

}



/* --- OPTION 9 & 12: BRAND WAVE --- */

#opt-9, #opt-12 {

    background: var(--primary);
    /* height: 798px; */
    height: 946px;
    color: white;

}


@media screen and (max-width:991px) {
    #opt-12 {
        /* height: 860px; */
        height: 1018px;
  }
}
@media screen and (max-width:872px) {
    #opt-12 {
        /* height: 814px; */
        height: 976px;
  }
}
@media screen and (max-width:515px) {
    #opt-12 {
        /* height: 814px; */
        height: 1018px;
  }
}
@media screen and (max-width:475px) {
    #opt-12 {
        /* height: 838px; */
        height: 1051px;
  }
}
@media screen and (max-width:407px) {
    #opt-12 {
        /* height: 838px; */
        height: 1103px;
  }
}


.wave-container {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    overflow: hidden;

    z-index: 1;

}



.wave-svg {

    position: absolute;

    width: 300%;

    height: 100%;

    left: -100%;

    animation: waveMove 25s infinite linear;

    opacity: 0.25;

    pointer-events: none;

}



.wave-svg.delayed {

    animation-duration: 35s;

    animation-delay: -5s;

    opacity: 0.15;

}



@keyframes waveMove {

    0% { transform: translateX(0); }

    100% { transform: translateX(33.33%); }

}



/* --- OPTION 10: GLASS FLOAT --- */

#opt-10 {

    background: linear-gradient(45deg, #199FB1, #0d6e7a);

    color: white;

}



.glass-orb {

    position: absolute;

    background: radial-gradient(circle, rgba(165,243,252,0.3) 0%, transparent 70%);

    border-radius: 50%;

    filter: blur(40px);

    z-index: 1;

    animation: orbMove 15s infinite alternate ease-in-out;

}



@keyframes orbMove {

    from { transform: translate(-10%, -10%); }

    to { transform: translate(20%, 20%); }

}



/* --- OPTION 11: KINETIC MESH --- */

#opt-11 {

    background: #0F172A;

    color: white;

}



.mesh-bg {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(at 0% 0%, rgba(25, 159, 177, 0.4) 0px, transparent 50%),

        radial-gradient(at 100% 0%, rgba(165, 243, 252, 0.3) 0px, transparent 50%),

        radial-gradient(at 100% 100%, rgba(25, 159, 177, 0.4) 0px, transparent 50%),

        radial-gradient(at 0% 100%, rgba(165, 243, 252, 0.3) 0px, transparent 50%);

    z-index: 1;

    animation: meshPulse 8s infinite alternate;

}



@keyframes meshPulse {

    0% { opacity: 0.6; }

    100% { opacity: 1; }

}



.kinetic-text {

    position: relative;
    padding: 20px 0 0 0;

    z-index: 10;

}

.title-heading {
    font-size: 48px !important;
}
.title-two-heading {
    font-size: 44px;
}
.title-message {
    font-size: 16px;
    font-family: Inter, sans-serif;
}

/* Index 1 CSS*/

.font-bold{
    font-weight: 600;
}

.confidential-text {
    font-family: Inter, sans-serif !important;
    background-color: #6affe81a; 
    /* background-color: var(--primaryColor / 0.1);  */
    border-color: #6affe833 !important; 
    /* border-color: var(--primaryColor / 0.2) !important;  */
    letter-spacing: 1px; 
    /* color: #5eead4;  */
    color: #6affe8; 
    /* color: var(--primaryColor); */
    font-size: 0.75rem; 
  
  }
  
  .pulse-round {
    width: 8px; 
    min-width: 8px;
    height: 8px; 
    animation: pulse 1.5s infinite; 
    /* background-color: #6affe8; */
    background-color: #ffcb46;
  }
  
  .header-message {
    font-family: Inter, sans-serif !important;
    max-width: 700px; 
    background-color : #ffffff0d; 
    backdrop-filter: blur(4px); 
    border-color: #ffffff1a !important;
  }
  
  .header-message-title i {
    color: #6affe8;
  }

  .header-message-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
  }

  .alex-brush-regular {
    font-family: "Alex Brush", cursive;
    font-weight: 400;
    font-style: normal;
  }
  
  
  @keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.6;
    }
  }