* {
margin: 0!important;
padding: 0;
box-sizing: border-box;
font-family: "Tajawal", sans-serif;

}

:root {
--orange : #FA7808;
--orange2 : #FFA659;
--blue : #2B2E5B;
--secondery : #3F3F3F;
}
.orange {
color: var(--orange);
}
.orange2 {
color: var(--orange2);
}
.orange2-bg {
background-color: var(--orange2);
}
.blue {
color: var(--blue);
}
.secondery {
color: var(--secondery);
}
/* Regular */
@font-face {
font-family: 'Tajawal';
src: url('../font/Tajawal-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}

/* Medium */
@font-face {
font-family: 'Tajawal';
src: url('../font/Tajawal-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}

/* Bold */
@font-face {
font-family: 'Tajawal';
src: url('../font/Tajawal-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}

/* استخدام الخط في كل الصفحة */

body {
font-family: 'Tajawal', sans-serif;
font-weight: 400;
overflow-x: hidden;

}

a {
color: inherit;
}
a:hover {
color: var(--orange);
}

a {
text-decoration: none;
cursor: pointer;
}
.sec6 a:hover {
color: var(--blue);
}

header {
position: sticky;
top: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
z-index: 1000;
}

nav {
margin: auto;
display: flex;
align-items: center;
justify-content: space-around;
padding: 10px 20px;
transition: all 0.3s ease;
}

.imgDiv img {
height: 100px;
transition: all 0.3s ease;
}

header.scrolled .imgDiv img {
height: 70px;
}

ul {
list-style: none;
display: flex;
align-items: center;
gap: 35px;
}

ul li {
cursor: pointer;
font-size: 20px;
color: #000;
transition: 0.3s;
}

ul li:hover {
color: var(--orange);
}

ul li button {
border: none;
padding: 10px 18px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
color: #fff;
transition: 0.3s;
}

ul li button:hover {
opacity: 0.9;
}

/* زر البرجر */
.burger {
display: none;
flex-direction: column;
justify-content: center;
cursor: pointer;
width: 35px;
height: 25px;
gap: 6px;
}

.burger span {
background-color: #333;
height: 3px;
width: 100%;
border-radius: 2px;
transition: 0.3s;
}

/* حركة عند التفعيل */
.burger.active span:nth-child(1) {
transform: rotate(45deg) translateY(12px);
}

.burger.active span:nth-child(2) {
opacity: 0;
}

.burger.active span:nth-child(3) {
transform: rotate(-45deg) translateY(-12px);
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 992px) {
header nav {
flex-direction: column;
align-items: flex-start;
}

header .imgDiv {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}

header ul {
display: none;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 10px;
padding: 10px 0;
background-color: #fff;
border-top: 1px solid #eee;
}

header ul.show {
display: flex;
}

header .burger {
display: flex;
}

header .imgDiv img {
height: 70px;
}

header header.scrolled .imgDiv img {
height: 60px;
}
}

main section {
padding-bottom: 18vh;
padding-top: 18vh;
overflow-x: hidden;
z-index: 1;
position: relative;
}
main .sec1 {
padding-top: 8vh;
}
.ourElement {
position: relative;
z-index: 1;
transition: 0.2s ease-in-out;
background: #fff;
}
.ourElement:hover {
transform: translateY(-10px);
transition: 0.2s ease-in-out;
}

main .sec1 .heroImgDivEffect {
height: 70vh;
background-image: url("../<?= $hero['image'] ?>");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 40px 40px 100px 40px;
position: relative;
z-index: 100;
}

main .sec1 .heroImgDiv {
position: relative;
}

main .sec1 .heroImgDiv::before {
content: "";
height: 75vh;
width: 7vw;
border-radius: 0px 50px 50px 0px;
background-color: #FFDCBD;
position: absolute;
right: -3vw;
top: -2vh;
z-index: 90;
}

main .sec1 .heroImgDiv .teachers {
height: 20vh;
width: 17rem;
border-radius: 15px 15px 35px 15px;
background-color: #fff;
box-shadow: 0px 0px 25px 20px rgba(112, 112, 112, 0.25);
position: absolute;
left: 0px;
bottom: -4vh;
z-index: 110;
}

main .sec1 .heroImgDiv .students {
height: 20vh;
width: 10rem;
border-radius: 15px 15px 35px 15px;
background-color: #fff;
box-shadow: 0px 0px 25px 20px rgba(112, 112, 112, 0.25);
position: absolute;
right: -1.5rem;
bottom: 10vh;
z-index: 110;
}

main .sec1 .hero-p {
font-size: 2rem;
}

main .sec1 h1 {
color: #141414;
text-align: center;
font-weight: bolder;
font-size: 3rem;
}

main .mainHeader {
font-size: 4rem;
}

main .myshadow {
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.16);
}

main .sec2 aside>div>div {
height: -webkit-fill-available;
}

main .sec3 .heroImgDivEffect {
height: 60vh;
background-image: url("../<?= $message['image'] ?>");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 150px 20px 20px 20px;
position: relative;
z-index: 100;
}

main .sec3 .heroImgDiv {
position: relative;
}

main .sec3 .heroImgDiv::before {
content: "";
height: 70vh;
width: 6vw;
border-radius: 0px 50px 50px 0px;
background-color: #DCDFFF;
position: absolute;
right: -3vw;
top: -5vh;
z-index: 90;
}

main .sec4 .heroImgDivEffect {
height: 60vh;
background-image: url("../<?= $vision['image'] ?>");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px 150px 20px 20px;
position: relative;
z-index: 100;
}

main .sec4 .heroImgDiv {
position: relative;
}

main .sec4 .heroImgDiv::before {
content: "";
height: 70vh;
width: 6vw;
border-radius: 50px 0px 0px 50px;
background-color: #DCDFFF;
position: absolute;
left: -3vw;
top: -5vh;
z-index: 90;
} 
main .sec5 aside {
height: 220px;
display: grid;
place-content: center;
}

main .sec6 .heroImgDivEffect {
height: 55vh;
background-image: url("../<?= $admin['image'] ?>");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px 20px 20px 20px;
position: relative;
z-index: 100;
}

main .sec6 .heroImgDiv {
position: relative;
}

main .sec6 .heroImgDiv::before {
content: "";
height: 20vh;
width: 4vw;
border-radius: 50px 0px 0px 50px;
background-color: #DCDFFF;
position: absolute;
left: -5vw;
bottom: -5vh;
z-index: 90;
} 

main .sec6 .heroImgDiv::after {
content: "";
height: 20vh;
width: 4vw;
border-radius: 0px 50px 50px 0px;
background-color: #DCDFFF;
position: absolute;
right: -5vw;
top: -5vh;
z-index: 90;
} 


@media (max-width: 992px) {
    main section {
    padding-top: 10vh;
    padding-bottom: 10vh;
    }
    main .sec1 {
    padding-top: 40px;
    }
    main .sec1 h1 {
    font-size: calc(1.375rem + 1.5vw);
    }
    main .sec1 .hero-p {
    font-size: 16px;
    text-align: center;
    padding-bottom: 10px;
    }
    main .sec1 .heroImgDivEffect {
        height: 45vh;
    }
    main .sec1 .heroImgDiv::before {
        height: 50vh;
        width: 15vw;
        right: -7vw;
        top: -3vh;
    }
    main .sec1 .heroImgDiv .teachers {
    height: 15vh;
    width: 8rem;
    }
    main .sec1 .heroImgDiv .teachers h4 {
    font-size: 0.9rem;
    }
    main .sec1 .heroImgDiv .students {
    height: 15vh;
    width: 5rem;
    }
    main .sec1 .heroImgDiv .students h3 {
    font-size: 1rem;
    }
    main .sec1 .heroImgDiv .students h6 {
    font-size: 0.6rem;
    }
    main .mainHeader {
    font-size: 2.5rem;
    }
    main .sec3 .heroImgDiv::before {
    height: 65vh;
    width: 20vw;
    right: -7vw;
    top: -2vh;
    }
    main .sec4 .heroImgDiv::before {
    height: 65vh;
    width: 20vw;
    left: -7vw;
    top: -2vh;
    }
    main .sec6 .heroImgDiv::before {
        height: 14vh;
        width: 7vw;
        left: -9vw;
        bottom: -3vh;
    }
    main .sec6 .heroImgDiv::after {
        height: 14vh;
        width: 7vw;
        right: -9vw;
        top: -3vh;
    }
}

footer {
    border-top: 2px solid var(--orange);
    position: relative;
    z-index: 1;
}