@font-face{


font-family:"SchoolFont";

src:url("../../assets/font/B Titr Bold_0.ttf")
format("truetype");

font-weight:normal;

font-style:normal;


}

*{


margin:0;

padding:0;

box-sizing:border-box;

font-family:"SchoolFont", sans-serif;


}

html{


scroll-behavior:smooth;


}

body{


margin:0;

padding:0;

background:#f4f6f9;

overflow-x:hidden;


}

a{


text-decoration:none;


}

/* =========================
MAIN
========================= */

main{


transform:none;

width:100%;


}

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

.main-header{


position:relative;

width:100%;

min-height:620px;

height:620px;

margin-bottom:50px;

background-image:url("../../assets/img/image.jpg");

background-position:center;

background-size:cover;

background-repeat:no-repeat;

display:flex;

justify-content:center;

align-items:center;


}

/* Bottom fade */

.main-header::after{


content:"";

position:absolute;

left:0;

right:0;

bottom:0;

height:160px;

background:linear-gradient(

    to bottom,

    transparent,

    #f4f6f9

);

pointer-events:none;


}

/* =========================
BIG HEADER BOX
========================= */

.big-box{


position:relative;

z-index:2;

width:380px;

max-width:90%;

margin:0 auto;

background:rgba(5,55,52,.72);

border-radius:15px;

padding:35px 25px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

box-shadow:

    0 10px 30px rgba(0,0,0,.2);


}

.big-box h2{


color:white;

margin:10px;

font-size:28px;

line-height:1.8;


}

.big-box p{


color:white;

margin:10px;

font-size:17px;

line-height:2;


}

.big-box button{


width:auto;

min-width:150px;

height:auto;

margin:15px 10px 5px;

padding:9px 20px;

background:#D4AF37;

color:white;

border-radius:8px;

border:none;

font-size:17px;

transition:.3s;


}

.big-box button:hover{


background:#b89220;

cursor:pointer;

transform:translateY(-2px);


}

/* =========================
SMALL BOXES
========================= */

.boxes{


width:100%;

display:flex;

justify-content:center;

align-items:center;

gap:25px;

margin:0 auto 45px;

padding:0 20px;

flex-wrap:wrap;


}

.box{


width:150px;

min-width:150px;

height:110px;

margin:0;

border:1px solid #ccc;

border-radius:10px;

text-align:center;

background:white;

box-shadow:

    2px 2px 20px rgba(8,85,35,.25);

transition:.3s;


}

.box img{


margin-top:9px;

width:45px;

height:45px;

object-fit:contain;


}

.box:hover{


box-shadow:

    4px 4px 20px rgba(8,85,35,.35);

transform:translateY(-8px);


}

/* =========================
MAIN PANELS
========================= */

.main-panels{


width:95%;

max-width:1200px;

margin:0 auto 50px;

display:grid;

grid-template-columns:

    repeat(3, minmax(0,1fr));

gap:30px;

align-items:start;


}

/* =========================
COMMON PANELS
========================= */

.fast-acc,

.info,

.events{


width:100%;

max-width:none;

height:auto;

min-height:100px;

border:1px solid #ccc;

border-radius:12px;

background:white;

overflow:hidden;

box-shadow:

    0 5px 15px rgba(0,0,0,.06);


}

.fast-acc{


direction:rtl;


}

.events{


direction:rtl;


}

.info{


direction:rtl;


}

/* =========================
PANEL TITLES
========================= */

.fast-acc h3,

.events h3,

.info h3{


color:#053734;

text-align:center;

padding:15px 10px;

margin:0;

font-size:20px;

border-bottom:1px solid #ddd;


}

h3{


color:#053734;

text-align:center;


}

/* =========================
QUICK ACCESS
========================= */

.fast-acc div{


min-height:42px;

height:auto;

background:#0855322c;

margin:10px;

border-radius:10px;

text-align:center;

display:flex;

align-items:center;

justify-content:center;


}

.fast-acc div a{


display:block;

width:100%;

padding:9px 10px;

text-decoration:none;

color:#053734;

font-size:15px;

transition:.3s;


}

.fast-acc div a:hover{


color:#D4AF37;

padding-right:15px;


}

/* =========================
EVENTS / NEWS
========================= */

.news-item{


padding:15px;

border-bottom:1px solid #eee;


}

.news-item:last-child{


border-bottom:none;


}

.news-item h4{


color:#053734;

margin-bottom:8px;

text-align:center;

font-size:18px;


}

.news-item p{


color:#444;

line-height:2;

margin-bottom:8px;

font-family:"SchoolFont", sans-serif;


}

.all-news-link{


text-align:center;

margin:20px 0;


}

.all-news-link a{


text-decoration:none;

color:#053734;

font-weight:bold;

font-size:17px;

transition:.3s;


}

.all-news-link a:hover{


color:#D4AF37;


}

/* =========================
INFO
========================= */

.info h3{


color:#053734;


}

.info p{


padding:12px 15px;

line-height:2;

color:#444;


}

/* =========================
MODAL
========================= */

.modal{


display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.5);

justify-content:center;

align-items:center;

z-index:9999;

padding:20px;


}

.modal-content{


position:relative;

background:rgb(26,143,113);

width:330px;

max-width:100%;

padding:25px;

border-radius:12px;

text-align:center;

transform:none;


}

.modal-content a{


text-decoration:none;

color:#053734;

display:block;

padding:12px;

margin-bottom:0;


}

.close{


position:absolute;

left:15px;

top:10px;

font-size:28px;

cursor:pointer;


}

/* =========================
MOBILE MENU BUTTON
========================= */

.menu-btn{


display:none;

font-size:30px;

background:none;

border:none;

color:white;

cursor:pointer;

padding:15px;


}

/* =========================
TABLET
========================= */

@media(max-width:1000px){


.main-header{

    height:550px;

    min-height:550px;

}


.main-panels{

    grid-template-columns:

        repeat(2, minmax(0,1fr));

    gap:20px;

}


.main-panels .info{

    grid-column:1 / -1;

}


.boxes{

    gap:18px;

}


.box{

    width:140px;

    min-width:140px;

}


}

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

@media(max-width:768px){


.main-header{

    height:500px;

    min-height:500px;

    margin-bottom:35px;

    background-position:center;

}


.main-header::after{

    height:120px;

}


.big-box{

    width:90%;

    max-width:360px;

    padding:25px 18px;

}


.big-box h2{

    font-size:23px;

}


.big-box p{

    font-size:15px;

}


.big-box button{

    font-size:15px;

    min-width:130px;

}


/* Small boxes */

.boxes{

    gap:15px;

    padding:0 10px;

}


.box{

    width:

        calc(50% - 15px);

    min-width:130px;

    height:105px;

}


/* Panels */

.main-panels{

    width:92%;

    display:flex;

    flex-direction:column;

    gap:20px;

}


.fast-acc,

.events,

.info{

    width:100%;

}


.fast-acc h3,

.events h3,

.info h3{

    font-size:18px;

}


.news-item{

    padding:13px;

}


.news-item h4{

    font-size:16px;

}


.news-item p{

    font-size:14px;

}


.modal-content{

    width:90%;

}


}

/* =========================
SMALL PHONES
========================= */

@media(max-width:480px){


.main-header{

    height:430px;

    min-height:430px;

    background-size:cover;

}


.big-box{

    width:92%;

    padding:20px 15px;

}


.big-box h2{

    font-size:20px;

    margin:5px;

}


.big-box p{

    font-size:14px;

    margin:7px;

}


.big-box button{

    font-size:14px;

    padding:8px 15px;

    min-width:120px;

}


/* Boxes become 2 columns */

.boxes{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:12px;

    padding:0 15px;

}


.box{

    width:100%;

    min-width:0;

    height:100px;

}


.box img{

    width:40px;

    height:40px;

}


/* Panels */

.main-panels{

    width:94%;

    gap:15px;

}


.fast-acc div{

    margin:7px;

}


.fast-acc div a{

    font-size:14px;

    padding:8px;

}


.news-item{

    padding:12px;

}


.news-item p{

    font-size:13px;

    line-height:1.9;

}


.all-news-link a{

    font-size:15px;

}


}