:root{
    --mainText: #F1DFD1;
    --reverseText: #232385;
    --mainAccent:#E85C4F;
    --fixedAccent: #C1121F;
    --logo: url(public/images/logo1Dark.svg);
    --mode: url(public/images/light.svg);
    --mainBg:#13134A;
    --heroBg: url(public/images/herobg1.jpg);
    --mainShape: url(public/images/lightMainShape.svg);
    --btnShape:  url(public/images/btnShape1.svg);
    --heroMandalaOp:1;
    --bg2:#252555;
    --grey:#99A1AF;
    --bg3: #151537;
    --shadow:drop-shadow(0 25px 50px -12px rgba(0, 0, 0, 0.25));
    --factBg: url(public/images/factbgDark.svg);
    --shadow2:drop-shadow(0 25px 50px -12px rgba(0, 0, 0, 0.5));
    --fadedText:#f5f5f5a3;
    --cardIcon1: url(public/images/cardicon20101.svg);
    --cardIcon2: url(public/images/cardicon20202.svg);
    --cardIcon3: url(public/images/cardicon20303.svg);
    --cardIcon4: url(public/images/cardicon20404.svg);
    --gradient1:linear-gradient(0deg, #13134A 0%, rgba(29, 29, 109, 0.00) 100%);
    --statsBg:url(public/images/StatisticsSection.jpg);
    --statsFig: url(public/images/statsFigure.svg);
    --loginIcon: url(public/images/login1.svg);
    --gradient2: linear-gradient(180deg, #13134A 50.19%, rgba(19, 19, 74, 0.00) 100%);

}
.lightMode{
    --mainText:  #13134A;
    --reverseText: #F1DFD1;
    --mainAccent:#C1121F;
    --fixedAccent: #C1121F;
    --logo: url(public/images/logo2.svg);
    --mode: url(public/images/dark.svg);
    --mainBg:#F1DFD1;
    --heroBg: url(public/images/herobg2.jpg);
    --mainShape: url(public/images/darkMainShape.svg);
    --btnShape:  url(public/images/btnShape3.svg);
    --heroMandalaOp:0.8;
    --bg2:#FFE2CD;
    --grey: #364153;
    --bg3: #fceade;
    --shadow:drop-shadow(0 25px 50px -12px rgba(0, 0, 0, 0.25));
    --factBg: url(public/images/factbgLight.svg);
    --shadow2:drop-shadow(0 25px 50px -12px rgba(0, 0, 0, 0.5));
    --fadedText:#13134a95;
     --cardIcon1: url(public/images/cardicon201.svg);
    --cardIcon2: url(public/images/cardicon202.svg);
    --cardIcon3: url(public/images/cardicon203.svg);
    --cardIcon4: url(public/images/cardicon204.svg);
    --gradient1:linear-gradient(0deg, #F1DFD1 0%, rgba(68, 65, 137, 0.00) 100%);
    --statsBg:url(public/images/StatisticsSectionLight.jpg);
    --statsFig: url(public/images/statsFigure2.svg);
    --loginIcon: url(public/images/login2.svg);
    --gradient2: linear-gradient(180deg, #F0DED0 50.19%, rgba(254, 226, 205, 0.00) 100%);

}
*{
    margin: 0;
    padding: 0;
    color: var(--mainText);
    font-family: "Tajawal";
    transition: all 0.2s ease-in-out;
    scroll-behavior: smooth;
    text-align: center;
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
background:none;
}
::-webkit-scrollbar-thumb {
  background: var(--fixedAccent);
}
.separatorBottom{
    width: 100%;
    z-index: 9;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50px;
    background: var(--gradient1);
}
.separtorTop{
    bottom: unset;
    top: -5px;
    transform: rotate(180deg);
}
header{
    display: flex;
    justify-content:center;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    background: var(--mainText);
}
body{
    background-color: var(--mainBg);
    position: relative;
}
.header_container{
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1440px;
    padding: 24px 72px;
    box-sizing: border-box;
}
.logoContainer{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.logo_header{
    width: 138px;
    height: 23px;
    background-image: var(--logo)
}
nav{
    display: flex;
    align-items: center;
}
nav ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    list-style: none;
    height: 24px;
}
nav ul li {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    text-wrap: nowrap;
    color: var(--reverseText);
    padding: 0 10px;
}
nav ul li:hover{
    padding: 0 10px 5px 10px;
    opacity: 0.5;
}
a{
    text-decoration: none;
    height: inherit;
    color: inherit;
}
nav ul li.active {
    opacity: 0.5;
    bottom: 2px;
}

nav ul li.active a {
    font-weight: 300;
}
.lightButton{
    position: fixed;
    z-index: 999;
    background: var(--mainText);
    bottom: 5vh;
    right: 5vw;
    padding: 12px;
    border-radius: 33px;
}
.lightButton:hover{
    margin-bottom: 5px;
}
.lightButton:hover div{
    opacity: 0.5;
}
.lightButton:active div{
    scale: -1;
    opacity: 0.5;
}
.lightButton div{
    background-image: var(--mode);
    width: 25px;
    height: 25px;
}
button{
    outline: none;
    border: inherit;
}
.hero{
    background: var(--heroBg);
    width: 100%;
    height: 623px;
    overflow: hidden;
    position: relative;
}
.centeredBg{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
section{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}
.margined{
    margin: 80px auto;
}
.container{
    width: 100%;
    max-width: 1440px;
    padding: 72px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.flex_column{
    display: flex;
    flex-direction: column;
}
.heroBlock{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    align-self: stretch;
}
h2{
    color: var(--mainText);
    font-family: "El Messiri";
    font-size: 48px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.48px;
    text-align: center;
    line-height: 62px;
}
h2 span{
    color: var(--mainAccent);
    font-family: inherit;
}
h6{
    font-size: 16px;
    font-weight: 300;
}
p{
    font-size: 20px;
    font-weight: 300;
}
.messiri{
    font-family: "El Messiri";
}
.heroBlock p{
    max-width: 700px;
    text-align: center;
    margin-top: 22px;
    letter-spacing: 0.5px;
}
.mainShape{
    width: 66px;
    height: 39px;
    background: var(--mainShape);
    align-self: center;
    justify-self: center;
    margin: 0px auto 9px auto;
}
.button1{
    display: flex;
    padding: 12px 17px;
    color: #F5F5F5;
    text-align: center;
    font-family: "El Messiri";
    font-size: 16px;
    font-weight: 400;
    background: var(--fixedAccent);
    position: relative;
    bottom: 0;
    margin: 0 20px;
}
.buttonsFlex{
    display: flex;
    gap: 16px;
    animation: move-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1800ms both;

}
.button1::before,
.button1::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 28px;
    background-image: url(public/images/btnShape2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.8s ease;
}
.button1::before {
    left: -20px;
}
.button1::after {
    right: -20px;
    transform: translateY(-50%) scaleX(-1);
}
.button1:hover::before {
    left: -25px;
}

.button1:hover::after {
    right: -25px;
}
.button1:hover{
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    bottom: 5px;
    color: var(--fadedText);
}
.button2{
    color: var(--mainText);
    border: 1px solid var(--mainText);
    background: none;
}
.button2::before,
.button2::after {
    background-image: var(--btnShape);
}
.mandalasFlex{
    width: 100%;
    display: flex;
    position: absolute;
    gap: 0;
    bottom: -250px;
    align-items: center;
    justify-content: center;
    justify-self: center;
    opacity: var(--heroMandalaOp);
    animation: move-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both;
}
.mandalasFlex img{
    width: 372px;
    height: auto;
    transform: rotate(0deg);

}
.rotateanim{
    animation: rotate 4s linear infinite;
}
.rotateanim2{
    animation: rotate2 4s linear infinite;
}
@keyframes rotate{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.scroll_animate2{
    view-timeline: --scroll-tl;
    animation-timeline: --scroll-tl;
    animation-delay: cover 30%;
    animation-range: cover 30% cover 35%;
}
@keyframes rotate2{
    from {
        transform: rotate(360deg);
        
    }
    to {
        transform: rotate(0deg);
    }
}
.title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 44px;
}
.title img{
    width: 66px;
    height: auto;
}
b{
    font-family: inherit;
}
.popUp{
    width: 100vw;
    height: 100vh;
    background: #020621f6;
    top:0px;
    left: 0; 
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
}
.preLoader{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
}
.preLoader img{
    width: 144px;
    height: 144px;
}

.contactForm{
    width: 100%;
    max-width: 1080px;
    background: var(--bg3);
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
form{
    width: 100%;
}
.contactFormImg{
    width: 100%;
    height: 324px;
    background-image: url(public/images/workshopImg.jpg);
    margin-bottom: 44px;
}
.error { 
    color: red; 
 }
.success-message { 
    color: green;
}
.hidden { 
    display: none; 
}
label { 
display: block; 
margin-bottom: 5px; 
color: var(--mainText);
text-align: left;
}
input { 
    width: 100%; 
    padding: 12px; 
    box-sizing: border-box; 
    background: var(--mainBg);
    border: none;
    color: var(--grey);
    outline: none;
    text-align: left;
}
input:focus{
    border: 1px solid var(--fixedAccent);
    color: var(--mainText);
    outline: none;
}
.nameMailFlex{
    display: flex;
    gap: 16px;
    width: 100%;
}
.input1{
    width: calc(50% - 8px);
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}
.input2{
    width: 100%;
}
.contactForm form{
    padding: 22px 34px 80px 34px;
    box-sizing: border-box;
}
form .button1{
    align-self: flex-end;
    justify-self: center;
    justify-content: center;
    margin: 34px 22px 0  22px;
    width: 50%;
    box-sizing: border-box;
}
h3{
    font-size: 36px;
    font-weight: 400;
}
.contactForm h6{
    max-width: 819px;
}
.success-message{
    display: none;
}
.aboutContent{
    display: flex;
    gap: 22px;
    flex-direction: row;
    align-items: center;
}
.aboutContent img{
    max-width: 418px;
    width: 33%;
    object-fit: contain;
    height: auto;
    filter: var(--shadow); 
}
.aboutContent p{
    text-align: left;
}
.moretext {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all ease-in-out;
}
.moretext.open {
  height: auto; 
  opacity: 1;
}
#moreBtn{
    margin-top: 22px;
}
.factSection{
    background-image: var(--factBg);
    padding: 200px;
    box-sizing: border-box;
    background-position: center;
    height: 571px;
    width: 984px;
    filter: drop-shadow(8px 8px 10px #00000033);
    margin:20px 0 100px 0;
}
.factSection p{
    margin: 22px 0;  
}
.factSection h6{
    color: var(--mainAccent);
    font-style: italic;
}
.cardsFlex{
    display: flex;
    gap: 32px;
    justify-self: center;
    align-self: center;
}
.card1{
    display: flex;
    width: 245px;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    background: var(--bg2);
    box-sizing: border-box;
    position: relative;
    height: 328px;
    max-height: 316px;
    overflow: hidden;
    bottom: 0;
    box-shadow: 0 10px 10px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}
.card1:hover {
    bottom: 5px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);

}
.card1Title{
    display: flex;
    padding-bottom: 9px;
    align-items: flex-start;
    border-bottom: 1px solid var(--fixedAccent);
    color: var(--mainText);
    font-family: "El Messiri";
    font-size: 20px;
    text-align: left;
    font-weight: 400;
}
.card1 h6{
    text-align: left;
    color: var(--grey);
}
.cardIcon1{
    background-image: var(--cardIcon1);
}
.cardIcon2{
    background-image: var(--cardIcon2);
}
.cardIcon3{
    background-image: var(--cardIcon3);
}
.cardIcon4{
    background-image: var(--cardIcon4);
}
.card1Icon{
    width: 63px;
    height: 63px;
    margin-bottom: 12px;
}
.card1Deco{
    width: 134px;
    height: auto;
    position: absolute;
    right: -5px;
    top: 0;
    transform: rotate(180deg);
}

.langBtn{
    display: flex;
    padding: 4px;
    background: var(--mainText);
    justify-content: center;
    align-items: center;
    border: 1px solid var(--reverseText);
    color: var(--reverseText);
    width: 32px;
    box-sizing: border-box;
    bottom: 0;
    position: relative;
}
.langBtn:hover{
    opacity: 0.5;
    bottom: 4px;
}

footer {
    background: var(--heroBg);
    color: var(--mainText);
    padding: 40px 72px;
    text-align: center;
    margin-top: 80px;
    width: 100%;
    box-sizing: border-box;
    background-attachment: fixed;
    position: relative;
}

.footer-content {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-logo {
    width: 138px;
    height: 23px;
    background-image: var(--logo);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--grey);
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    opacity: 1;
    position: relative;
    bottom: 0;
}

.footer-links a:hover {
    opacity: 0.7;
    bottom: 4px;
}
h5{
    font-family: "El Messiri";
    font-size: 24px;
    color: var(--mainText);
    font-weight: 400;
}
.footer-text {
    font-size: 14px;
    color: var(--grey);
    font-weight: 300;
}
footer img{
    height: 31px;
    width: auto;
}
footer .title{
    margin-bottom: 0;
}
.topBtn{
    border-bottom: 1px solid var(--mainText);
    width: fit-content;
    justify-self: center;
    align-self: center;
}
.topBtn:hover{
    color: var(--mainAccent);
    border-bottom: 1px solid var(--mainAccent);
}
footer .container{
    margin: 0;
    padding: 0;
}
.statsSection{
    background-image: var(--statsBg);
    /* height: 537px; */
    padding: 40px 0;
    background-attachment: fixed;
}
.statsContainer{
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
}
.statsLeft{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-items: center;
    justify-content: center;
    gap: 43px;
    padding: 0 20px;
}
.statsRight{
    gap: 23px;
}
.statsBlock{
    gap: 2px;
}
h1{
    color: var(--mainAccent);
    text-align: center;
    font-family: "El Messiri";
    font-size: 72px;
    font-style: normal;
    font-weight: 400;
    line-height: 80%;
}
.statsBlock span{
    margin-bottom: 16px;
}
.statsBlock h3{
    font-family: "El Messiri";
    line-height: 24px;
    font-weight: 700;
}
.statsBlock span h5{
    font-size: 24px;
    font-weight: 400;
    color: var(--mainAccent);
}
.statsFigure{
    width: 672px;
    height: 189px;
    background-image: var(--statsFig);
}
.moveIn{
    position: relative;
    transform: translateY(100px);
    animation: move-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.moveIn{
    position: relative;
    transform: translateY(100px);
    animation: move-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 800ms both;
}
@keyframes move-in{
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  80% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.scroll_animate2{
    view-timeline: --scroll-tl;
    animation-timeline: --scroll-tl;
    animation-delay: cover 30%;
    animation-range: cover 30% cover 35%;
}
.btnFlex1{
    display: flex;
    gap: 4px;
}
.closeBtn{
    align-self: flex-start;
    justify-self: flex-start;
}
.loginBtn{
    border: none;
}
.loginBtn div{
    background-image: var(--loginIcon);
    width: 32px;
    height: 32px;
}
.loginForm{
    width: 700px;
    padding: 44px;
    position: relative;
    z-index: 3;
    margin: 0;
}
.loginForm form{
    z-index: 2;
    padding: 22px 0;
}
.mandala{
   top: 200px;
    height: 450px;
    left: 550px;
    position: absolute;
    z-index: 1;
}
.loginHero{
    min-height: 400px;
    padding: 100px 0;
    position: relative;
}
.loginFooter{
    margin: 0;
}
.galleryFlex{
    flex-direction: row;
    display: flex;
     gap: 20px;
     flex-wrap: nowrap;
    position: relative;

}
.galleryFlex img{
    width: calc(25% - 20px);
    position: relative;
    bottom: 0;
}
.galleryFlex img:hover{
bottom: 4px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
#popUp{
    display: none;
}
.closeBtn{
     position: absolute; top: 10px; 
     right: 10px; 
     background: var(--bg2);
     border: none; padding: 10px;  
     font-size: 20px;
     border: 1px solid var(--mainText);
}
.closeBtn:hover{
opacity: 0.9;
}
#lightboxImg{
    max-width: 90vw;
    max-height: 90vh;
}
.container2 {
    width: 100%;
    overflow: hidden;
    position: relative;
    max-width: 1240px;
}
.container2 .title{
    z-index: 999;
    position: absolute;
    width: 100%;
    top: -10px;
}
.container2 .separtorTop{
    border-radius: 50%;
    width: 131%;
    height: 50%;
    top: -38%;
    left: -13%;
    background: var(--gradient2)

}
.swiper {
    width: 100%;
    padding: 50px 0;
}
.swiper-slide {
    width: 200px;
    height: 500px;
    overflow: hidden;
    transition: all 1s;
}

.swiper-slide img {
    width: 675px;
    height: 800px;
    object-fit: cover;
    transition: 1s;
    /* max-width:  */
    opacity: 0.8;
}

.swiper-slide-active {
    width: 350px;
    transition: 1s;
    opacity: 1;
}

.swiper-slide-active img {
    transform: scale(1.1);
    object-position: 50% 0%;
}