/* ==========================================================
   CodeCradle Solutions
   Global Design System
   Premium Ivory + Navy + Gold Theme
========================================================== */


/* ===============================
   ROOT VARIABLES
================================ */

:root{

    --primary:#0B2D5C;
    --primary-dark:#061B3A;

    --gold:#E8B24C;
    --gold-soft:#F6D58A;

    --ivory:#FFFDF8;
    --cream:#F8F4EC;

    --white:#FFFFFF;

    --text:#233044;
    --muted:#64748B;

    --border:#E8E2D7;


    --shadow-sm:
    0 8px 25px rgba(11,45,92,.08);

    --shadow-md:
    0 15px 40px rgba(11,45,92,.12);

    --shadow-lg:
    0 25px 60px rgba(11,45,92,.18);


    --radius:20px;

    --transition:.35s ease;

}





/* ===============================
   RESET
================================ */


*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:
    "Inter",
    "Poppins",
    Arial,
    sans-serif;

    background:var(--ivory);

    color:var(--text);

    line-height:1.7;

    overflow-x:hidden;

}



img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

    transition:var(--transition);

}



ul{

    list-style:none;

    padding:0;

    margin:0;

}




/* ===============================
   TYPOGRAPHY
================================ */


h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--primary-dark);

    font-weight:700;

    line-height:1.3;

}



p{

    color:var(--muted);

    font-size:16px;

}





/* ===============================
   CONTAINER
================================ */


.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}





/* ===============================
   SECTIONS
================================ */


.section{

    padding:100px 0;

}



.section-title{

    text-align:center;

    max-width:750px;

    margin:0 auto 60px;

}



.section-title span{

    color:var(--gold);

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}



.section-title h2{

    font-size:44px;

    margin:15px 0;

}





/* ===============================
   BUTTONS
================================ */


.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:14px 32px;

    border-radius:50px;

    font-weight:700;

    border:none;

    cursor:pointer;

    transition:var(--transition);

}



.btn-primary{

    background:var(--gold);

    color:var(--primary-dark);

}



.btn-primary:hover{

    background:var(--primary);

    color:white;

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}





.btn-outline{

    border:2px solid var(--primary);

    color:var(--primary);

}



.btn-outline:hover{

    background:var(--primary);

    color:white;

}





/* ===============================
   GLASS CARD
================================ */


.glass-card{

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

    -webkit-backdrop-filter:blur(15px);

    backdrop-filter:blur(15px);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

}





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


.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}



.reveal.active{

    opacity:1;

    transform:translateY(0);

}





/* ===============================
   SCROLLBAR
================================ */


::-webkit-scrollbar{

    width:10px;

}



::-webkit-scrollbar-track{

    background:var(--cream);

}



::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:20px;

}



::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}





::selection{

    background:var(--gold);

    color:var(--primary-dark);

}

/* =====================================
   MOBILE COLOR FIX
===================================== */

@media(max-width:900px){

    html{
        color-scheme: light;
    }


    body{

        background:#FFFDF8 !important;
        color:#233044 !important;

    }


    .hero{

        background:
        radial-gradient(
            circle at top right,
            rgba(232,178,76,.22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #FFFDF8,
            #F8F4EC
        ) !important;

    }


    .navbar{

        background:#FFFDF8 !important;

    }


    .hero h1,
    .hero h2,
    .hero h3{

        color:#0B2D5C !important;

    }


    .hero p{

        color:#475569 !important;

    }

}
/* ==========================================================
   Contact Form Messages
========================================================== */

.form-message {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    display: none;
}

.form-message.success {
    display: block;
    background: #eaf8ef;
    color: #187a3d;
    border: 1px solid #b8e3c5;
}

.form-message.error {
    display: block;
    background: #fff0f0;
    color: #c62828;
    border: 1px solid #f0b8b8;
}

#contactForm button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}