:root{
    --bg:#ffffff;
    --card:#ffffff;
    --text:#222;
    --input:#f5f7fb;
    --border:#dcdcdc;
}

body.dark{
    --bg:#0d1117;
    --card:#161b22;
    --text:#f5f5f5;
    --input:#21262d;
    --border:#30363d;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI,sans-serif;
}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}

.dropdown button{
      background-color:rgba(0, 0, 255, 0.568);
    color: rgb(151, 148, 148);
    padding: 7px 8uacpx; 
    border: none;
    cursor: pointer;
}
.dropdown{
    display: inline-block;
}
.dropdown a{
    display: block;
    color: black;
    text-decoration: none;
    padding: 10px 10px;
}
.dropdown .content{
    display: none;
    background-color: hsl(0, 0%, 95%);
    position: absolute;
    min-width: 100px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.589);
}

.main-nav{
     background-color:rgba(0, 0, 255, 0.568);
    align-content: center;
    justify-content: center;
    border-radius: 15px;
    padding: 20px;
}

  .main-nav a{
    color:rgb(238, 233, 233);
    text-decoration: none;
   padding: 20px;
   font-weight: bolder;
   border-radius:9px;
   transition:
    color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
  }

  .main-nav a:hover{
    background:rgba(255,255,255,.12);
  }

  .main-nav a.active-page{
    color:#fff;
    background:rgba(255,255,255,.2);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.2),
        0 5px 14px rgba(0,0,0,.16);
    transform:translateY(-1px);
  }

.dropdown:hover .content{
    display: block;
}
.dropdown:hover button{
    background-color: hsl(0, 0%, 70%);
}
.dropdown a:hover{
    background-color: hsl(0, 0%, 90%);
}
body{
    background:linear-gradient(135deg,#0640f0,#02163d);
    min-height:100vh;
    color:white;
    transition:0.4s;
    background-image: url(Wtdcmn.webp);
    background-size: cover;
   
}

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 40px;
}

.logo-section{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo{
    width:68px;
    height:68px;
    aspect-ratio:1;
    object-fit:contain;
    border-radius:0;
    color:#0056ff;
    font-size:32px;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
}

.logo-link{
    display:inline-flex;
    flex:0 0 auto;
    line-height:0;
    transition:transform .25s ease, filter .25s ease;
}

.logo-link:hover{
    transform:translateY(-2px);
    filter:drop-shadow(0 7px 12px rgba(0, 86, 255, .28));
}

.logo-link:focus-visible{
    outline:2px solid #9dd4ff;
    outline-offset:4px;
    border-radius:6px;
}

.logo-section span{
    color:#9dd4ff;
}

.header-right{
    display:flex;
    gap:15px;
}

button{
    border:none;
    cursor:pointer;
    padding:12px;
    border-radius:10px;
    font-size:18px;
}

#resetThemeBtn{
    color:#d9efff;
    background:rgba(0, 86, 255, .32);
    transition:background .25s ease, color .25s ease, transform .25s ease;
}

#resetThemeBtn:hover,
#resetThemeBtn:focus-visible{
    color:#fff;
    background:rgba(0, 126, 255, .62);
    transform:translateY(-2px);
}

#resetThemeBtn:focus-visible{
    outline:2px solid #9dd4ff;
    outline-offset:3px;
}

body.light #resetThemeBtn{
    color:#12305e;
    background:rgba(0, 126, 255, .12);
}

body.light #resetThemeBtn:hover,
body.light #resetThemeBtn:focus-visible{
    color:#005eff;
    background:rgba(0, 126, 255, .2);
}
/*=========================================================
                MOSAS ABOUT SECTION
=========================================================*/

.about-section{
    width:90%;
    max-width:1400px;
    margin:80px auto;
    padding:70px 60px;
    border-radius:30px;

    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
    0 20px 60px rgba(0,0,0,.35);

    color:#fff;
    animation:fadeUp 1s ease;
}

/*=========================================================
                SECTION TITLE
=========================================================*/

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

.section-title h2{

    font-size:3rem;
    font-weight:700;
    color:#fff;

    margin-bottom:12px;

    text-transform:uppercase;
}

.section-title p{

    font-size:1.2rem;

    color:#8fd4ff;

    letter-spacing:2px;
}

/*=========================================================
                CONTENT
=========================================================*/

.about-content h3{

    font-size:2rem;
    color:#00c6ff;

    margin-top:45px;
    margin-bottom:20px;

    border-left:5px solid #00c6ff;

    padding-left:15px;
}

.about-content p{

    font-size:17px;

    line-height:1.9;

    color:#f5f5f5;

    margin-bottom:25px;
}

/*=========================================================
                VISION & MISSION
=========================================================*/

.vision-mission{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    margin:50px 0;
}

/*=========================================================
                CARDS
=========================================================*/

.info-card{

    padding:35px;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        rgba(0,119,255,.35),
        rgba(0,50,180,.20)
    );

    border:1px solid rgba(255,255,255,.08);

    transition:.4s;
}

.info-card:hover{

    transform:
    translateY(-10px)
    scale(1.02);

    box-shadow:
    0 20px 40px rgba(0,119,255,.35);
}

.info-card h3{

    color:#fff;

    margin-bottom:20px;

    font-size:1.5rem;
}

/*=========================================================
                LISTS
=========================================================*/

.info-card ul{

    list-style:none;
}

.info-card ul li{

    padding:12px 0;

    font-size:16px;

    color:#eef7ff;

    border-bottom:
    1px solid rgba(255,255,255,.06);

    transition:.3s;
}

.info-card ul li:last-child{
    border-bottom:none;
}

.info-card ul li:hover{

    padding-left:12px;

    color:#9fe4ff;
}

/*=========================================================
                SERVICES GRID
=========================================================*/

.services-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:18px;

    margin-top:25px;
}

.services-grid div{

    padding:18px;

    border-radius:15px;

    background:
    rgba(255,255,255,.08);

    text-align:center;

    font-weight:600;

    transition:.35s;
}

.services-grid div:hover{

    background:#00aaff;

    transform:
    translateY(-6px);

    color:#fff;

    box-shadow:
    0 15px 25px rgba(0,170,255,.4);
}

/*=========================================================
                TAGLINE
=========================================================*/

.tagline{

    margin-top:70px;

    text-align:center;

    padding:35px;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #0400ff,
        #0905d6
    );

    box-shadow:
    0 20px 40px rgba(19, 19, 19, 0.35);
}

.tagline h2{

    color:#fff;

    font-size:2rem;

    letter-spacing:2px;

    text-transform:uppercase;
}

/*=========================================================
                DARK MODE
=========================================================*/

body.dark .about-section{

    background:
    rgba(18,25,45,.9);

    border:
    1px solid rgba(255,255,255,.08);
}

body.dark .info-card{

    background:
    rgba(0,55,155,.25);
}

body.dark .services-grid div{

    background:
    rgba(255,255,255,.05);
}

body.dark .services-grid div:hover{

    background:#008cff;
}

/*=========================================================
                LIGHT MODE
=========================================================*/

body.light{

    background:#f5f8ff;
}

body.light .about-section{

    background:#fff;

    color:#222;

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);
}

body.light .section-title h2,
body.light .about-content h3{

    color:#005eff;
}

body.light .about-content p{

    color:#555;
}

body.light .info-card{

    background:#f4f9ff;

    color:#222;

    border:
    1px solid #dcecff;
}

body.light .info-card h3{

    color:#005eff;
}

body.light .info-card ul li{

    color:#444;
}

body.light .services-grid div{

    background:#eef6ff;

    color:#005eff;
}

body.light .services-grid div:hover{

    background:#005eff;

    color:#fff;
}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(50px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:992px){

    .about-section{

        padding:50px 35px;
    }

    .section-title h2{

        font-size:2.3rem;
    }

}

@media(max-width:760px){

    .about-section{

        width:95%;

        padding:40px 25px;
    }

    .section-title h2{

        font-size:2rem;
    }

    .about-content h3{

        font-size:1.5rem;
    }

    .tagline h2{

        font-size:1.4rem;
    }

    .services-grid{

        grid-template-columns:1fr;
    }

}
.dashboard{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:15px;
    padding:30px;
    grid-template-rows: repeat(3, auto);
}

.board{

     display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:15px;
    padding:30px;
    grid-template-rows: repeat(3, auto);
}
.card{
    height:220px;
    perspective:1000px;
}

.card-inner{
    position:relative;
    width:100%;
    height:100%;
    transition:transform 0.8s;
    transform-style:preserve-3d;
}

.card:hover .card-inner{
    transform:rotateY(180deg);
}

.card.is-flipped .card-inner{
    transform:rotateY(180deg);
}

.card:focus-visible{
    outline:3px solid rgba(105, 200, 255, .9);
    outline-offset:4px;
    border-radius:15px;
}

.front,.back{
    position:absolute;
    width:100%;
    height:100%;
    backface-visibility:hidden;
    border-radius:15px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.front{
    background:rgba(0, 0, 255, 0.932);
}

.front i{
    font-size:70px;
    margin-bottom:15px;
}

.front h3{
    text-align:center;
}

.card-label-short{
    display:none;
}

.back{
    background:rgba(27, 18, 148, 0.616);
    transform:rotateY(180deg);
}

.back a{
    text-decoration:none;
    background:#0056ff;
    color:white;
    padding:15px 30px;
    border-radius:8px;
    font-weight:bold;
}

.dark-mode{
    background-color:#111;
    background-image:
        linear-gradient(rgba(5, 9, 18, .72), rgba(5, 9, 18, .78)),
        url(Wtdcmn.webp);
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

.dark-mode .front{
    background:#1d1d1daf;
}

.dark-mode .back{
    
        background:#1d1d1daf;
}
.dark-mode .main-nav{
    background-color: #444;
}
.dark-mode .solution-grid div{
    background: #444;
}
.dark-mode .back a{
    background:#444;
   
}

section{
    padding:80px 8%;
}

section h2{
    text-align:center;
    font-size:2.5rem;
    margin-bottom:30px;
}

.about-section,
.values-section,
.solutions-section,
.why-section,
.audience-section,
.objectives-section,
.future-section,
.contact-section{
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(20px);
    margin:40px;
    border-radius:20px;
    background-image: none;
}

.info-card,
.value-box,
.solution-grid div,
.future-grid div{
    background:rgba(255,255,255,.08);
    padding:25px;
    border-radius:15px;
    transition:.3s;
}

.info-card:hover,
.value-box:hover,
.solution-grid div:hover,
.future-grid div:hover{
    transform:translateY(-8px);
}

.values-grid,
.solution-grid,
.future-grid,
.audience-grid{
    display:grid;
    gap:20px;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.contact-form{
    max-width:700px;
    margin:auto;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:15px;
    margin-bottom:15px;
    border:none;
    border-radius:12px;
}

.contact-form button{
    width:100%;
    padding:15px;
    border:none;
    border-radius:12px;
    background:#00a4ff;
    color:white;
    cursor:pointer;
}

.footer{
    text-align:center;
    padding:50px 20px;
}

/* ==========================================
   LANDING PAGE FOOTER
========================================== */

.site-footer{
    position:relative;
    overflow:hidden;
    margin:42px 30px 24px;
    padding:34px 40px 18px;
    background:
        linear-gradient(135deg, rgba(0, 119, 255, .22), rgba(2, 22, 72, .54)),
        rgba(255, 255, 255, .08);
    border:1px solid rgba(157, 212, 255, .24);
    border-radius:22px;
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    box-shadow:
        0 18px 45px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}

.site-footer::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
        120deg,
        rgba(255,255,255,.12),
        transparent 32%,
        transparent 68%,
        rgba(0,198,255,.08)
    );
}

.footer-content{
    position:relative;
    z-index:1;
    max-width:1500px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.footer-brand{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.footer-brand strong{
    color:#fff;
    font-size:1.2rem;
    letter-spacing:.04em;
    transition:color .25s ease, text-shadow .25s ease;
}

.footer-brand:hover strong{
    color:#b8eaff;
    text-shadow:0 0 18px rgba(105, 200, 255, .45);
}

.footer-brand span{
    color:#9dd4ff;
    font-size:.9rem;
    transition:color .25s ease;
}

.footer-brand:hover span{
    color:#dff5ff;
}

.footer-nav{
    display:flex;
    align-items:center;
    gap:24px;
}

.footer-nav a{
    position:relative;
    color:#eaf6ff;
    text-decoration:none;
    font-size:.95rem;
    padding:7px 0;
    transition:color .25s ease, transform .25s ease, text-shadow .25s ease;
}

.footer-nav a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    border-radius:2px;
    background:#69c8ff;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .25s ease;
}

.footer-nav a:hover{
    color:#69c8ff;
    transform:translateY(-2px);
    text-shadow:0 0 14px rgba(105, 200, 255, .5);
}

.footer-nav a:hover::after,
.footer-nav a.active-page::after{
    transform:scaleX(1);
}

.footer-nav a.active-page{
    color:#69c8ff;
    text-shadow:0 0 14px rgba(105, 200, 255, .42);
}

.social-links{
    display:flex;
    align-items:center;
    gap:10px;
}

.social-links a{
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#eaf6ff;
    text-decoration:none;
    background:rgba(0, 126, 255, .2);
    border:1px solid rgba(157, 212, 255, .2);
    border-radius:50%;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.social-links a:hover,
.social-links a:focus-visible{
    color:#fff;
    background:#087eff;
    border-color:rgba(255,255,255,.42);
    transform:translateY(-3px);
    box-shadow:
        0 8px 18px rgba(0, 126, 255, .35),
        0 0 14px rgba(105, 200, 255, .22);
}

.social-links a:focus-visible{
    outline:2px solid #9dd4ff;
    outline-offset:3px;
}

.footer-bottom{
    position:relative;
    z-index:1;
    max-width:1500px;
    margin:22px auto 0;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.16);
    text-align:center;
}

.footer-bottom p{
    color:rgba(234, 246, 255, .78);
    font-size:.85rem;
    transition:color .25s ease;
}

.footer-bottom:hover p{
    color:#fff;
}

body.dark .site-footer{
    background:
        linear-gradient(135deg, rgba(18, 48, 92, .42), rgba(13, 17, 23, .84)),
        rgba(255,255,255,.06);
    border-color:rgba(157, 212, 255, .16);
}

body.light .site-footer{
    background:
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(225,242,255,.7)),
        rgba(255,255,255,.52);
    border-color:rgba(0, 126, 255, .18);
    box-shadow:
        0 18px 45px rgba(29, 89, 152, .14),
        inset 0 1px 0 rgba(255,255,255,.85);
}

body.light .footer-brand strong,
body.light .footer-nav a{
    color:#12305e;
}

body.light .footer-nav a.active-page{
    color:#005eff;
}

body.light .footer-brand span,
body.light .footer-bottom p{
    color:#527096;
}

body.light .social-links a{
    color:#12305e;
    background:rgba(0, 126, 255, .1);
    border-color:rgba(0, 126, 255, .16);
}

body.light .social-links a:hover,
body.light .social-links a:focus-visible{
    color:#fff;
    background:#087eff;
}

@media(max-width:640px){
    .site-footer{
        margin:30px 15px 18px;
        padding:28px 20px 16px;
    }

    .footer-content{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:18px;
    }

    .footer-nav{
        width:100%;
        gap:16px;
        flex-wrap:wrap;
        justify-content:center;
    }

    .social-links{
        justify-content:center;
        flex-wrap:wrap;
    }

    .footer-brand span{
        line-height:1.5;
    }

    .footer-bottom p{
        line-height:1.5;
    }
}

@media(max-width:400px){
    .site-footer{
        margin:26px 10px 14px;
        padding:24px 14px 14px;
        border-radius:18px;
    }

    .footer-content{
        gap:14px;
    }

    .footer-nav{
        column-gap:14px;
        row-gap:8px;
    }

    .footer-nav a{
        font-size:.9rem;
    }

    .footer-bottom{
        margin-top:18px;
        padding-top:13px;
    }
}

/* ==========================================
   LANDING PAGE MOBILE HEADER + GRID
========================================== */

@media(max-width:768px){
    header{
        position:relative;
        display:grid;
        grid-template-columns:1fr auto;
        gap:14px;
        padding:16px 18px;
    }

    .logo-section{
        grid-column:1 / -1;
        min-width:0;
        gap:10px;
        padding-right:96px;
    }

    .logo{
        width:54px;
        height:54px;
    }

    .logo-section h1{
        font-size:1.55rem;
        line-height:1.1;
    }

    .logo-section span{
        display:block;
        max-width:230px;
        font-size:.78rem;
        line-height:1.35;
    }

    .main-nav{
        grid-column:1 / -1;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:4px;
        width:100%;
        padding:8px;
        border-radius:12px;
    }

    .main-nav a{
        padding:9px 10px;
        font-size:.86rem;
        line-height:1.2;
    }

    .header-right{
        position:absolute;
        top:16px;
        right:18px;
    }

    .dashboard{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:10px;
        padding:16px 14px;
    }

    .card{
        min-width:0;
        height:170px;
    }

    .front,
    .back{
        padding:12px 8px 26px;
    }

    .front i{
        font-size:42px;
        margin-bottom:8px;
    }

    .front h3{
        max-width:100%;
        padding:0 4px;
        font-size:.82rem;
        line-height:1.25;
        overflow-wrap:anywhere;
    }

    .card-label-full{
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip:rect(0, 0, 0, 0);
        white-space:nowrap;
        border:0;
    }

    .card-label-short{
        display:inline;
    }

    .back a{
        max-width:100%;
        padding:10px 8px;
        font-size:.72rem;
        line-height:1.25;
        text-align:center;
        overflow-wrap:anywhere;
    }
}

@media (hover:none), (pointer:coarse){
    .card{
        cursor:pointer;
    }

    .card:hover .card-inner{
        transform:none;
    }

    .card.is-flipped .card-inner{
        transform:rotateY(180deg);
    }

    .front::after,
    .back::after{
        position:absolute;
        bottom:16px;
        color:rgba(255,255,255,.72);
        font-size:.7rem;
        letter-spacing:.04em;
        text-transform:uppercase;
    }

    .front::after{
        content:"Tap to flip";
    }

    .back::after{
        content:"Tap to return";
    }
}

@media(max-width:400px){
    header{
        padding:14px 12px;
        gap:12px;
    }

    .logo-section{
        padding-right:90px;
    }

    .logo-section h1{
        font-size:1.35rem;
    }

    .logo-section span{
        font-size:.72rem;
    }

    .main-nav a{
        padding:8px 8px;
        font-size:.8rem;
    }

    .header-right{
        top:14px;
        right:12px;
    }

    .dashboard{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:6px;
        padding:12px 8px;
    }

    .card{
        height:145px;
    }

    .front,
    .back{
        padding:9px 4px 22px;
        border-radius:10px;
    }

    .front i{
        font-size:30px;
        margin-bottom:6px;
    }

    .front h3{
        padding:0 2px;
        font-size:.65rem;
        line-height:1.18;
    }

    .back a{
        padding:7px 4px;
        font-size:.62rem;
        line-height:1.2;
    }

    .front::after,
    .back::after{
        bottom:6px;
        font-size:.48rem;
        letter-spacing:0;
    }

}
/* ==========================================
   ABOUT US SECTION
========================================== */

.about-section{
    margin:60px auto;
    padding:80px 8%;
    max-width:1400px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:25px;
    box-shadow:0 20px 50px rgba(0,0,0,.2);
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:3rem;
    color:#fff;
    margin-bottom:10px;
}

.section-title p{
    color:#8ec8ff;
    font-size:1.2rem;
    letter-spacing:1px;
}

.about-content h3{
    color:#fff;
    font-size:2rem;
    margin-bottom:20px;
}

.about-content p{
    color:#e9f2ff;
    line-height:1.9;
    margin-bottom:20px;
    font-size:1.05rem;
}

.vision-mission{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin-top:40px;
}

.info-card{
    padding:30px;
    border-radius:20px;
    background:linear-gradient(
        135deg,
        rgba(0,102,255,.25),
        rgba(0,68,180,.15)
    );
    border:1px solid rgba(255,255,255,.08);
    transition:.4s;
}

.info-card:hover{
    transform:translateY(-10px);
    box-shadow:0 15px 30px rgba(0,0,0,.25);
}

.info-card h3{
    color:#fff;
    margin-bottom:15px;
}

/* ==========================================
   SOLUTIONS SECTION
========================================== */

.solutions-section{
    margin:60px auto;
    padding:80px 8%;
    max-width:1400px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(20px);
    border-radius:25px;
}

.solutions-section h2{
    text-align:center;
    font-size:2.8rem;
    margin-bottom:40px;
}

.solution-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.solution-grid div{
    padding:30px;
    text-align:center;
    color:#fff;
    font-weight:600;
    border-radius:18px;
    cursor:pointer;

    background:linear-gradient(
        135deg,
        #005eff,
        #003db5
    );

    transition:.35s ease;
}

.solution-grid div:hover{
    transform:translateY(-10px) scale(1.03);
    box-shadow:
    0 10px 30px rgba(0,102,255,.4);
}

/* ==========================================
   CONTACT SECTION
========================================== */

.contact-section{
    margin:60px auto;
    padding:80px 8%;
    max-width:1400px;

    background:rgba(255,255,255,.06);
    backdrop-filter:blur(20px);
    border-radius:25px;
}

.contact-section h2{
    text-align:center;
    font-size:2.8rem;
    margin-bottom:40px;
}

.contact-form{
    max-width:800px;
    margin:auto;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:16px 20px;
    margin-bottom:20px;

    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);

    border-radius:15px;

    color:#fff;
    font-size:1rem;
    outline:none;

    transition:.3s;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:#00a2ff;
    box-shadow:0 0 15px rgba(0,162,255,.4);
}

.contact-form input.field-invalid,
.contact-form textarea.field-invalid{
    border-color:#ff7676;
    box-shadow:0 0 0 3px rgba(255, 118, 118, .14);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:#c9dfff;
}

.contact-form button{
    width:100%;
    padding:18px;

    border:none;
    border-radius:15px;

    background:linear-gradient(
        135deg,
        #00a2ff,
        #006eff
    );

    color:#fff;
    font-size:1rem;
    font-weight:700;
    cursor:pointer;

    transition:.3s;
}

.contact-form button:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(0,162,255,.4);
}

.contact-form button:disabled{
    cursor:not-allowed;
    opacity:.68;
    transform:none;
    box-shadow:none;
}

.form-status{
    min-height:24px;
    margin-top:14px;
    padding:0;
    border:1px solid transparent;
    border-radius:9px;
    font-size:.9rem;
    line-height:1.5;
    text-align:left;
}

.form-status:not(:empty){
    padding:11px 13px;
}

.form-status.is-error{
    color:#ffe0e0;
    background:rgba(179, 30, 45, .24);
    border-color:rgba(255, 118, 118, .38);
}

.form-status.is-success{
    color:#ddffea;
    background:rgba(20, 130, 77, .24);
    border-color:rgba(100, 230, 159, .34);
}

body.light .form-status.is-error{
    color:#8d1724;
    background:#fff0f1;
}

body.light .form-status.is-success{
    color:#146c3e;
    background:#edfff4;
}

/* ==========================================
   SERVICE DESTINATION PAGE
========================================== */

.service-page{
    min-height:calc(100vh - 190px);
    display:grid;
    place-items:center;
    padding:60px 20px;
}

.service-panel{
    width:min(100%, 620px);
    padding:42px;
    text-align:center;
    background:
        linear-gradient(135deg, rgba(0, 119, 255, .2), rgba(2, 22, 72, .48)),
        rgba(255,255,255,.08);
    border:1px solid rgba(157,212,255,.22);
    border-radius:22px;
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    box-shadow:
        0 20px 50px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.14);
}

.service-icon{
    width:76px;
    height:76px;
    margin:0 auto 20px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:2rem;
    background:linear-gradient(135deg, #087eff, #0047c8);
    border-radius:18px;
    box-shadow:0 12px 28px rgba(0, 86, 255, .34);
}

.service-panel h2{
    margin-bottom:10px;
    color:#fff;
    font-size:2rem;
}

.service-panel > p{
    color:#cfeaff;
    line-height:1.7;
}

.service-eyebrow{
    margin-bottom:8px;
    color:#69c8ff !important;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.service-actions{
    margin-top:30px;
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.service-actions a{
    padding:12px 20px;
    border-radius:9px;
    text-decoration:none;
    font-weight:700;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.service-primary-link{
    color:#fff;
    background:#087eff;
}

.service-secondary-link{
    color:#dff5ff;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.14);
}

.service-actions a:hover{
    transform:translateY(-2px);
    box-shadow:0 9px 20px rgba(0,0,0,.22);
}

body.light .service-panel{
    background:rgba(255,255,255,.9);
    border-color:rgba(0,126,255,.16);
}

body.light .service-panel h2{
    color:#12305e;
}

body.light .service-panel > p{
    color:#527096;
}

@media(max-width:640px){
    .service-page{
        padding:36px 15px;
    }

    .service-panel{
        padding:30px 20px;
        border-radius:18px;
    }

    .service-panel h2{
        font-size:1.6rem;
    }

    .service-icon{
        width:62px;
        height:62px;
        font-size:1.6rem;
    }
}

/* ==========================================
   DROPDOWN
========================================== */

.dropdown-menu{
    position:absolute;
    top:65px;
    right:0;
    width:220px;

    background:rgba(7,18,52,.95);
    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;

    overflow:hidden;

    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);

    transition:.3s ease;
    z-index:1000;
}

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

.dropdown-menu a{
    display:block;
    padding:15px 20px;
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.dropdown-menu a:hover{
    background:rgba(255,255,255,.08);
}

/* ==========================================
   LIGHT MODE SUPPORT
========================================== */

body.light .about-section,
body.light .solutions-section,
body.light .contact-section{
    background:#ffffff;
    color:#222;
}

body.light .about-content p,
body.light .section-title h2,
body.light .solutions-section h2,
body.light .contact-section h2{
    color:#111;
}

body.light .info-card{
    background:#f4f8ff;
}

body.light .contact-form input,
body.light .contact-form textarea{
    background:#f5f7fb;
    color:#222;
}

body.light .contact-form input::placeholder,
body.light .contact-form textarea::placeholder{
    color:#777;
}

/* ==========================================
   MOBILE RESPONSIVE
========================================== */

@media(max-width:768px){

    .vision-mission{
        grid-template-columns:1fr 1fr 1fr;
    }

    .section-title h2{
        font-size:2.2rem;
    }

    .solutions-section h2,
    .contact-section h2{
        font-size:2rem;
    }

    .about-section,
    .solutions-section,
    .contact-section{
        margin:25px 15px;
        padding:50px 25px;
    }
}

/*=========================================================
        MOSAS APPLICATION FORM STYLING
=========================================================*/

.application-section{
    margin-top:60px;
}

.application-section h3{
    text-align:center;
    margin-bottom:15px;
    color:#00c6ff;
    font-size:2rem;
}

.application-section p{
    text-align:center;
    margin-bottom:35px;
    color:#ddd;
}

/*=========================================================
        FORM
=========================================================*/

.application-form{
    width:100%;
}

.application-form h4{

    color:#00c6ff;

    margin:35px 0 20px;

    font-size:1.3rem;

    border-left:4px solid #00c6ff;

    padding-left:12px;
}

/*=========================================================
        GRID
=========================================================*/

.form-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

    margin-bottom:20px;
}

/*=========================================================
        INPUT BOX
=========================================================*/

.input-box{

    display:flex;

    flex-direction:column;
}

.input-box label{

    color:#fff;

    margin-bottom:8px;

    font-weight:500;
}

.input-box input,
.input-box select,
.input-box textarea{

    width:100%;

    padding:14px 18px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.15);

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:15px;

    outline:none;

    transition:.35s;
}

/* Dropdown Options */

.input-box select option{

    background:#0d2b5e;

    color:#fff;
}

/* Placeholder */

.input-box input::placeholder,
.input-box textarea::placeholder{

    color:#cfcfcf;
}

/* Focus */

.input-box input:focus,
.input-box textarea:focus,
.input-box select:focus{

    border-color:#00c6ff;

    box-shadow:0 0 15px rgba(0,198,255,.35);

    background:rgba(255,255,255,.12);
}

/*=========================================================
        TEXTAREA
=========================================================*/

textarea{

    resize:vertical;

    min-height:140px;
}

/*=========================================================
        FILE INPUT
=========================================================*/

input[type="file"]{

    padding:12px;

    cursor:pointer;
}

/*=========================================================
        CHECKBOX
=========================================================*/

.checkbox{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:35px 0;
}

.checkbox input{

    width:18px;

    height:18px;

    margin-top:5px;

    cursor:pointer;
}

.checkbox label{

    color:#f3f3f3;

    line-height:1.8;
}

/*=========================================================
        SUBMIT BUTTON
=========================================================*/

.submit-btn{

    width:100%;

    padding:16px;

    border:none;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        #0095ff,
        #004dbe
    );

    color:#fff;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;
}

.submit-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(0,149,255,.35);
}

.submit-btn:active{

    transform:scale(.98);
}

/*=========================================================
        INPUT HOVER
=========================================================*/

.input-box input:hover,
.input-box textarea:hover,
.input-box select:hover{

    border-color:#0095ff;
}

/*=========================================================
        DARK MODE
=========================================================*/

body.dark .application-section{

    color:#fff;
}

body.dark .input-box input,
body.dark .input-box textarea,
body.dark .input-box select{

    background:rgba(255,255,255,.08);

    color:#fff;
}

/*=========================================================
        LIGHT MODE
=========================================================*/

body.light .application-section{

    color:#222;
}

body.light .application-section p{

    color:#555;
}

body.light .application-form h4{

    color:#005eff;
}

body.light .input-box label{

    color:#333;
}

body.light .input-box input,
body.light .input-box textarea,
body.light .input-box select{

    background:#f5f7fb;

    color:#222;

    border:1px solid #d7dce5;
}

body.light .input-box select option{

    background:#fff;

    color:#222;
}

body.light .checkbox label{

    color:#444;
}

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

.application-section{

    animation:fadeUp .8s ease;
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

/*=========================================================
        RESPONSIVE
=========================================================*/

@media(max-width:992px){

    .form-grid{

        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .form-grid{

        grid-template-columns:1fr;
    }

    .application-form h4{

        font-size:1.15rem;
    }

    .submit-btn{

        font-size:16px;
    }

}

@media(max-width:480px){

    .application-section{

        padding:10px 0;
    }

    .input-box input,
    .input-box select,
    .input-box textarea{

        padding:12px 14px;
    }

}