/* ===========================
        GOOGLE FONT
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap');

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

:root{

    --bg:#bca38b;
    --bg2:#7b5c45;
    --main:#322413;
    --dark:#2b120a;
    --light:#ffffff;
    --shadow:0 15px 40px rgba(0,0,0,.08);
    --radius:18px;
    --transition:.35s;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Vazirmatn',sans-serif;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);
    color:var(--dark);
    overflow-x:hidden;

}

img{

    width:100%;
    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

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

header{

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    width:92%;

    height:85px;

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

    backdrop-filter:blur(18px);

    border-radius:20px;

    box-shadow:var(--shadow);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 40px;

    z-index:999;

}

.logo{

    display:flex;

    align-items:center;



}

.logo img{

    width: 55px;

    height:55px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid var(--main);

}

.logo h2{

    font-size:25px;

    color:var(--dark);

}

.logo p{

    color:#8a6c59;

}

/* ===========================
        NAVBAR
=========================== */

nav{

    display:flex;

    gap:30px;

}

nav a{

    color:var(--dark);

    font-weight:600;

    transition:.3s;

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    right:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:var(--main);

    border-radius:50px;

    transition:.4s;

}

nav a:hover::after{

    width:100%;

}

nav a:hover{

    color:var(--main);

}

.active{

    color:var(--main);

}

/* ===========================
        ADDRESS
=========================== */

.address{

    margin-top:130px;

    width:100%;

    background:var(--bg2);

    padding:14px;

    display:flex;

    justify-content:center;

    gap:10px;

    font-weight:600;

}

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

.hero{

    width:90%;

    margin:70px auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

}

.hero-text{

    flex:1;

}

.hero-text h1{

    font-size:60px;

    line-height:1.4;

    color:var(--dark);

}

.hero-text p{

    margin:30px 0;

    font-size:19px;

    color:#6f5747;

    line-height:2;

}

.hero-text a{

    background:var(--main);

    color:white;

    padding:15px 40px;

    border-radius:50px;

    transition:.35s;

    display:inline-block;

}

.hero-text a:hover{

    background:var(--dark);

    transform:translateY(-5px);

}

.hero-image{

    flex:1;

}

.hero-image img{

    border-radius:25px;

    box-shadow:var(--shadow);

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

.features{

    width:90%;
    margin:100px auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;

}

.card{

    background:rgb(219, 218, 218);

    padding:40px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.4s;

    cursor:pointer;

}

.card:hover{

    transform:translateY(-15px);

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.icon{

    font-size:60px;

    margin-bottom:20px;

}

.card h3{

    color:#5B3A29;

    margin-bottom:15px;

    font-size:28px;

}

.card p{

    color:#7c6758;

    line-height:2;

}


/*==============================
        GALLERY
==============================*/

.gallery{

    width:90%;

    margin:100px auto;

}

.gallery h2{

    text-align:center;

    margin-bottom:50px;

    color:#5B3A29;

    font-size:42px;

}

.gallery-box{

    display:grid;

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

    gap:25px;

}

.gallery-box img{

    height:320px;

    object-fit:cover;

    border-radius:20px;

    transition:.5s;

    cursor:pointer;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.gallery-box img:hover{

    transform:scale(1.05);

}


/*==============================
        PAGE TITLE
==============================*/

.page-title{

    padding-top:180px;

    text-align:center;

    margin-bottom:80px;

}

.page-title h1{

    font-size:55px;

    color:#5B3A29;

}

.page-title p{

    margin-top:20px;

    color:#7b685a;

    font-size:20px;

}


/*==============================
        ABOUT
==============================*/

.about{

    width:90%;

    margin:auto;

}

.about-text{

    background:white;

    padding:60px;

    border-radius:25px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.about-text h2{

    font-size:40px;

    margin-bottom:30px;

    color:#5B3A29;

}

.about-text p{

    line-height:2.4;

    font-size:18px;

    color:#6d5647;

    margin-bottom:20px;

}


/*==============================
        SCHOOL GALLERY
==============================*/

.school-gallery{

    width:90%;

    margin:100px auto;

}

.school-gallery h2{

    text-align:center;

    margin-bottom:45px;

    color:#5B3A29;

    font-size:42px;

}

.gallery-grid{

    display:grid;

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

    gap:25px;

}

.photo-card{

    overflow:hidden;

    border-radius:25px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.photo-card img{

    height:340px;

    object-fit:cover;

    transition:.5s;

}

.photo-card:hover img{

    transform:scale(1.12);

}


/*==============================
        STATISTICS
==============================*/

.statistics{

    width:90%;

    margin:90px auto;

    display:grid;

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

    gap:30px;

}

.stat{

    background:#C9A97E;

    color:white;

    padding:45px;

    border-radius:20px;

    text-align:center;

    transition:.4s;

}

.stat:hover{

    transform:translateY(-10px);

}

.stat h2{

    font-size:55px;

}

.stat p{

    margin-top:15px;

    font-size:20px;

}
/*==============================
        MAJORS
==============================*/

.major-container{

    width:90%;
    margin:80px auto;

}

.major-card{

    display:flex;
    align-items:center;
    gap:50px;

    background:#fff;

    padding:35px;

    margin-bottom:50px;

    border-radius:25px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.4s;

}

.major-card:hover{

    transform:translateY(-8px);

}

.reverse{

    flex-direction:row-reverse;

}

.major-image{

    flex:1;

}

.major-image img{

    width:100%;
    height:420px;
    object-fit:cover;
    border-radius:20px;

}

.major-content{

    flex:1;

}

.major-content h2{

    font-size:42px;
    color:#5B3A29;
    margin-bottom:20px;

}

.major-content p{

    line-height:2;
    color:#6d5647;
    margin-bottom:20px;

}

.major-content ul{

    padding-right:20px;
    margin-bottom:30px;

}

.major-content li{

    margin:10px 0;
    color:#7a6455;

}

.btn{

    display:inline-block;
    padding:14px 35px;

    background:#C9A97E;

    color:#fff;

    border-radius:50px;

    transition:.3s;

}

.btn:hover{

    background:#5B3A29;

}


/*==============================
        WHY
==============================*/

.why-major{

    width:90%;
    margin:100px auto;

}

.why-major h2{

    text-align:center;
    margin-bottom:40px;
    font-size:42px;

}

.why-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.why-card{

    background:white;

    padding:40px;

    text-align:center;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.4s;

    font-size:55px;

}

.why-card:hover{

    transform:translateY(-12px);

}

.why-card h3{

    font-size:28px;

    margin:20px 0;

    color:#5B3A29;

}

.why-card p{

    color:#7b6759;

}


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

.contact-container{

    width:90%;

    margin:80px auto;

    display:grid;

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

    gap:30px;

}

.contact-card{

    background:white;

    padding:45px;

    text-align:center;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.4s;

}

.contact-card:hover{

    transform:translateY(-10px);

}

.contact-icon{

    font-size:60px;

    margin-bottom:20px;

}

.contact-card h2{

    margin-bottom:20px;

    color:#5B3A29;

}

.contact-card p{

    color:#766152;

}

.map-section{

    width:90%;

    margin:80px auto;

}

.map-section h2{

    text-align:center;

    margin-bottom:35px;

}

.map-box{

    height:450px;

    border-radius:25px;

    background:#ddd;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    color:#666;

}


/*==============================
        AWARDS
==============================*/

.awards{

    width:90%;

    margin:80px auto;

    display:grid;

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

    gap:30px;

}

.award-card{

    background:white;

    padding:40px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.4s;

}

.award-card:hover{

    transform:translateY(-10px);

}

.award-icon{

    font-size:55px;

    margin-bottom:20px;

}

.award-card h2{

    color:#5B3A29;

    margin-bottom:15px;

}

.award-card p{

    color:#786455;

}

.certificate-gallery{

    width:90%;

    margin:100px auto;

}

.certificate-gallery h2{

    text-align:center;

    margin-bottom:40px;

}


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

footer{

    margin-top:100px;

    background:#5B3A29;

    color:white;

    text-align:center;

    padding:50px 20px;

}

footer h3{

    font-size:32px;

    margin-bottom:15px;

}

footer p{

    color:#ddd;

}


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

@media(max-width:992px){

.hero{

flex-direction:column;

text-align:center;

}

.major-card{

flex-direction:column;

}

.reverse{

flex-direction:column;

}

.features,
.statistics,
.gallery-grid,
.awards,
.contact-container,
.why-grid{

grid-template-columns:1fr;

}

header{

flex-direction:column;

height:auto;

padding:20px;

}

nav{

margin-top:20px;

flex-wrap:wrap;

justify-content:center;

}

}

@media(max-width:600px){

.hero-text h1{

font-size:38px;

}

.page-title h1{

font-size:36px;

}

.logo h2{

font-size:22px;

}

.card,
.contact-card,
.award-card{

padding:25px;

}

}
/*==========================
        Fade Up
==========================*/

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(70px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp 1s ease forwards;

}

/*==========================
        Fade Left
==========================*/

@keyframes fadeLeft{

    from{

        opacity:0;
        transform:translateX(-80px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

.fade-left{

    animation:fadeLeft 1s ease;

}

/*==========================
        Fade Right
==========================*/

@keyframes fadeRight{

    from{

        opacity:0;
        transform:translateX(80px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

.fade-right{

    animation:fadeRight 1s ease;

}

/*==========================
        Zoom
==========================*/

@keyframes zoom{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.zoom{

    animation:zoom .8s ease;

}

/*==========================
        Float
==========================*/

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.hero-image img{

    animation:floating 5s infinite ease-in-out;

}

/*==========================
        Button
==========================*/

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:120%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.6s;

}

.btn:hover::before{

    left:130%;

}

/*==========================
        Card Hover
==========================*/

.card,
.award-card,
.contact-card,
.why-card,
.stat{

    transition:.35s;

}

.card:hover,
.award-card:hover,
.contact-card:hover,
.why-card:hover,
.stat:hover{

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

}

/*==========================
        Image Hover
==========================*/

.gallery img,
.photo-card img,
.major-image img{

    transition:.5s;

}

.gallery img:hover,
.photo-card img:hover,
.major-image img:hover{

    transform:scale(1.08);

}

/*==========================
        Navbar Hover
==========================*/

nav a{

    transition:.35s;

}

nav a:hover{

    letter-spacing:1px;

}

/*==========================
        Footer
==========================*/

footer{

    animation:fadeUp 1.2s ease;

}

.social-icon {
    width: 80px;
    height: 80px;
    margin: 0 10px;
    transform: 0.3s;
    position: relative;
    right: 120px;
    top: 3px;
}

.social-icon:hover {
    transform: scale(1.7s);
}

.index-video video{

    width: 100%;;

    height:300px;

    object-fit:cover;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.5s;

    cursor:pointer;


}

.index-video{

    display:grid;

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

    gap: 25px;

}
.hero-image{

    width:100%;

    animation:wave 4s ease-in-out infinite;

}

.register-section{

    width:90%;
    margin:100px auto;
    text-align:center;

}

.register-section h2{

    font-size:42px;
    color:#5B3A29;
    margin-bottom:20px;

}

.register-section p{

    font-size:20px;
    color:#6b5648;
    margin-bottom:40px;

}

.register-btn{

    display:inline-block;
    padding:18px 55px;
    background:linear-gradient(135deg,#c8a97e,#8b5e3c);
    color:white;
    text-decoration:none;
    font-size:22px;
    font-weight:bold;
    border-radius:60px;
    transition:.4s;
    box-shadow:0 12px 35px rgba(139,94,60,.35);

}

.register-btn:hover{

    transform:translateY(-6px) scale(1.05);
    box-shadow:0 18px 45px rgba(139,94,60,.45);

}

.news-card{
    position: var(--main);
    width: 100%;
    height: 700px;
    margin: auto;
    overflow: hidden;
    border-radius: 16px;
}

.news-card img,
.news-card video{
    width: 100%;
    display: block;
    object-fit: cover;
}

.news-box{
    left: 5%;
    right: 5%;
    bottom: 5%;

    background: rgba(255, 255, 255, 92);
    border-radius: 15px;
    padding: 18px;
    box-sizing: border-box;
    backdrop-filter:blur(8px);
    box-shadow: 0 8px 25px 
    rgba(0, 0, 0, 2);
}

.news-box h2{
    margin: 0 auto auto;

    font-size: clamp(18px, 2.5vw,32px);
    color: #111;
}

.news-box p{
    margin: 0;

    font-size: clamp(14px,2vw,20px);
    color: #444;
    line-height: 1.6;
}

.news-box{
    min-height: 80px;
    max-height: 45%;
    overflow: auto;
}

.news-card{
    position: relative;
    width: auto;
    height: auto;
    margin: 0 auto 30px;
    max-width: 700px;
}