/* ==========================================
   FOXSTONE TRAINING WEBSITE
   Version 1.0
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f7f8fb;
    color:#24385f;
}

img{
    max-width:100%;
    display:block;
}

/* ==========================
   HEADER
========================== */

header{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:90px;

    padding:0 7%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    background:#071126;

    z-index:9999;

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

}

.logo{

    height:60px;

}

nav{

    display:flex;
    gap:40px;

}

nav a{

    color:white;
    text-decoration:none;
    font-weight:600;
    transition:.3s;

}

nav a:hover{

    color:#ff7a00;

}

.demo-btn{

    background:#ff7a00;
    color:white;

    padding:14px 28px;

    border-radius:10px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}

.demo-btn:hover{

    transform:translateY(-3px);

}

/* ==========================
   HERO
========================== */

.hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

    padding:170px 7% 100px;

    background:linear-gradient(
        180deg,
        #fafafa 0%,
        #f3f5f8 100%
    );

}

.hero-text{

    max-width:600px;

}

.tag{

    color:#ff7a00;

    font-weight:bold;

    letter-spacing:2px;

    margin-bottom:20px;

    display:block;

}

.hero h1{

    font-size:5rem;

    line-height:.95;

    margin-bottom:30px;

    color:#24385f;

}

.hero h2{

    font-size:2rem;

    margin-bottom:25px;

}

.hero p{

    font-size:1.15rem;

    line-height:1.8;

    color:#555;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

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

.primary-btn,
.secondary-btn{

    padding:16px 30px;

    border-radius:12px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}

.primary-btn{

    background:#ff7a00;

    color:white;

}

.primary-btn:hover{

    transform:translateY(-3px);

}

.secondary-btn{

    border:2px solid #24385f;

    color:#24385f;

}

.secondary-btn:hover{

    background:#24385f;

    color:white;

}

/* ==========================
   HERO IMAGE
========================== */

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:1;

}

.hero-image img{

    width:430px;

    filter:drop-shadow(
        0 30px 60px rgba(0,0,0,.20)
    );

}

/* ==========================
   TRUST SECTION
========================== */

.trust{

    padding:100px 7%;

    background:white;

    text-align:center;

}

.trust h2{

    font-size:2.4rem;

    margin-bottom:60px;

}

.trust-grid{

    display:grid;

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

    gap:30px;

}

.trust-card{

    background:#f7f8fb;

    border-radius:18px;

    padding:35px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:.3s;

}

.trust-card:hover{

    transform:translateY(-8px);

}

.trust-card h3{

    font-size:2rem;

    margin-bottom:20px;

}

.trust-card h4{

    margin-bottom:12px;

}

/* ==========================
   FEATURES
========================== */

.features{

    padding:100px 7%;

    background:#f3f5f8;

}

.features h2{

    text-align:center;

    font-size:2.5rem;

    margin-bottom:60px;

}

.feature-grid{

    display:grid;

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

    gap:30px;

}

.feature-card{

    background:white;

    border-radius:18px;

    padding:35px;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

    transition:.3s;

}

.feature-card:hover{

    transform:translateY(-10px);

}

/* ==========================
   CTA
========================== */

.cta{

    padding:100px 7%;

    text-align:center;

    background:#071126;

    color:white;

}

.cta h2{

    font-size:3rem;

    margin-bottom:20px;

}

.cta p{

    margin-bottom:40px;

}

/* ==========================
   FOOTER
========================== */

footer{

    background:#071126;
    color:white;
    padding:70px 7% 35px;
    text-align:center;

}

.footer-links{

    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:30px;

}

.footer-links a{

    color:white;
    text-decoration:none;

    padding:12px 24px;

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

    border-radius:50px;

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

    transition:.3s ease;

    font-weight:600;

}

.footer-links a:hover{

    background:#ff7a00;
    border-color:#ff7a00;

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(255,122,0,.35);

}

footer p{

    color:#9ca9c4;
    font-size:.95rem;

}

/* ==========================
   PRIVACY PAGE
========================== */

.page{

    max-width:900px;

    margin:140px auto;

    padding:0 30px;

    line-height:1.8;

}

.page h1{

    font-size:3rem;

    margin-bottom:30px;

}

.page h2{

    margin-top:50px;

    margin-bottom:15px;

}

.page ul{

    padding-left:20px;

}

.page li{

    margin-bottom:10px;

}

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

@media(max-width:900px){

.hero{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-text{

    max-width:100%;

}

.hero-buttons{

    justify-content:center;

}

.trust-grid{

    grid-template-columns:1fr;

}

.feature-grid{

    grid-template-columns:1fr;

}

nav{

    display:none;

}

.hero-image img{

    width:320px;

}

}