@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Mooli&display=swap');

:root {
    --main-text-color: #333;
    --background-color: #fff;
    --secundry-color: rgb(237, 9, 9);
   
  }

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Lilita One', cursive;
  font-family: 'Mooli', sans-serif;

}




.progress2{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 1%;
  background-color: black;

}

.bar{
  display: block;
height: 100%;
width: 0;

background-color: rgb(237, 9, 9);

}



/* لتعيين لون الـ scroll */
::-webkit-scrollbar {
  background-color: white;/* لون المنطقة الخلفية للشريط */
}

::-webkit-scrollbar-thumb {
  background-color:  black; /* لون الشريط */
}

/* لتعيين عرض الـ scroll */
::-webkit-scrollbar {
  width: 0.3%;
}

nav{
  justify-content: space-around;
}

.logo span{
  color: var(--secundry-color);
}

.logo{
  margin-left: 2%;
}

a:hover{
  color: var(--secundry-color);

}


@media only screen and (min-width: 600px) {
.mr-10{
  margin-right: 20px;
}
}


.h-img{
  height: 100vh;
  filter: brightness(0.5);
  
}




.logo-span {
  color: rgb(237, 9, 9);
}

.mar {
  margin: 20px;
}
.custom-btn {
  width: 140px;
  height: 45px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;
}

/* 11 */
.btn-11 {
  border: none;
  background: rgb(237, 9, 9);
  opacity: 0.9;

  color: #fff;
  overflow: hidden;
}
.btn-11:hover {
  text-decoration: none;
  color: #fff;
}
.btn-11:before {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn1 3s ease-in-out infinite;
}
.btn-11:hover {
  opacity: 1;
}
.btn-11:active {
  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.3),
    -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
    inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
}

@-webkit-keyframes shiny-btn1 {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

.out{
  outline: none;
}
/*header-end*/  


.s-top{
  margin-top: 3%;
  display: flex;
    flex-wrap: wrap;
}

.card{
  margin-top: 5%;
  margin: 2%;
  height: 10%;
}





/* === BASE HEADING === */ 

h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

h1 span {
  display: block;
  font-size: 0.5em;
  line-height: 1.3;
}
h1 em {
  font-style: normal;
  font-weight: 600;
}



.twelve h1 {
  font-size:26px; font-weight:700;  letter-spacing:1px; text-transform:uppercase; width:160px; text-align:center; margin:auto; white-space:nowrap; padding-bottom:13px;
}
.twelve h1:before {
    background-color: #c50000;
    content: '';
    display: block;
    height: 3px;
    width: 75px;
    margin-bottom: 5px;
}
.twelve h1:after {
    background-color: #c50000;
    content: '';
    display: block;
  position:absolute; right:0; bottom:0;
    height: 3px;
    width: 75px;
    margin-bottom: 0.25em;
}



/* ------- Helper Styles -------------*/
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.title {
  position: relative;

  width: 65%;
  max-width: 500px;
  padding: 1em;
margin-top: 8%;
  border: 3px solid rgba(0, 0, 0, 0.08);
}

h1:before,
h1:after {
  background-color: #c50000;
}






@media only screen and (min-width: 1000px) {
  .title{
  width: 20%;
  }
  
  }
  

  

@media only screen and (max-width: 400px) {

  .h-img{
  
  
  height: 65vh
  
  
  }
  }

  

  .about{
    display: flex; justify-content: center;
    
  }


  .description{
    display: flex; justify-content: center; margin-top: 5%;
    align-items: center;
  }

  .title-about{
    width: 50%;
  }

  .news{
    width:70%;
  }


  
  

@media only screen and (max-width: 1025px) {

  .title-about h1{
margin-left: 10%;
width: 100%;

  }
.title-about{
 padding: 5%;
  width: 65%;
}
  .news{
    padding: 7%;
  width: 180%;
  justify-content: center;
  }

  .description{
    width: 100%;
    display: block;
  }

  .image-about{
    width: 100%;
    


  }


  .image-about img{
  width: 100%;
  height: 30vh;
  object-fit: cover;
 

  }
  }




  

@media only screen and (max-width: 1025px )and (min-width:750px) {




  .image-about img{
  width: 100%;
  height: 80vh;
  object-fit: cover;
 

  }
  }





  /*courses/**/
  .courses{
    display: flex;
    justify-content: center;
 
  
  }


  .courses .card img{
  height: 200px;
  width: 100%;
  }

  

@media only screen and (max-width:376px ) {



.courses{
  display: block;
}
  }














  /*footer*/


  

  footer{
    background-color: black;
    margin-top: 9%;
   
    color: white;
    

  }


  .offer{
    height: 405;
  }

  .sign {
    display: flex;
    justify-content: space-around;
    padding-bottom: 5%;
    border-bottom: 1px solid white;
  }


  .offer h1{
font-size: 26px;
margin-top: 5%;
  }

  
  .offer h2{
    font-size: 15px;
    margin-top: 1%;


          }

  /*finish*/







.final{
display: flex;
justify-content: space-around;

}


.aboutf {
margin-left: 2%;
margin-top: 2%;
width: 20%;
}

.aboutf h1{
font-size: 20px;
}

.aboutf p{

width: 90%;
line-height: 1.5;
margin-top: 2%;
}

hr{
background-color: white;
width: 50%;
}


.servicesf{

margin-top: 2%;
width: 20%;
}

.servicesf h1{

font-size: 20px;

}

.servicesf h3{
cursor: pointer;
margin-top: 6%;
font-size: 15px;
width: 90%;
line-height: 0.7;



}
.linksf{

margin-top: 2%;
width: 20%;
}

.linksf h1{
font-size: 20px;

}

.linksf h3{
cursor: pointer;
margin-top: 6%;
font-size: 15px;

width: 90%;
line-height: 0.7;
}

.hei{
width: 90%;
}

.contactf{
width: 20%;
margin-top: 2%;
}


.contactf h1{
font-size: 20px;
}


.contactf h2{
margin-top: 7%;
font-size: 19px;
font-size: 15px;

}



.contactf h3{
color: #dfdfdf;
font-size: 15px;
margin-top: 3%;

width: 90%;
line-height: 0.3;
}
footer h3:hover{
text-decoration: underline;
cursor: pointer;

}


.finish{
display: flex;
color: wheat;
justify-content: space-around;
margin-top: 5%;
background-color: rgb(37, 36, 36);
padding: 10px;

}


.copy h1{
font-size: 15px;
}

.policy h1{
font-size: 15px;
}





@media only screen and (max-width: 426PX ) {

footer{
  background-color: white;
  color: white;
}
  .final{
display: block;
justify-content: flex-start;
  }


  .aboutf{
   display: none;
    
  }


  
  .servicesf{
  display: none;
  }


  
  .linksf{
    display: none;
  }


  
  .contactf{
    display: none;
  }
.finish{
  margin-top: 15%;
  color: white;
}
  
}








#scroll-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 999;
  border-radius: 100%;
  padding: 10px;
  background-color: white;
  color: black;
  border: 1px solid black;
 height: 50px;
  width: 50px;
  cursor: pointer;
  transition: all 1s ease;
  outline: none;
}


.fa-arrow-up{
  font-size: 20px;
  transition: all 1s ease;
}



.link-a{
  color: white;
  text-decoration: none;
}


.link-a:hover{


 color: white;

}



@media only screen and (min-width: 1023px ) {

.marl{
  margin-left: 7%;
}
}




@media only screen and (max-width: 769px ) {

  .marl{
    margin-top: 1%;
  }
  
  #toggleButton{
width: 10%;
height: 10%;
 
     }
  }



  

@media only screen and (max-width: 769px )and (min-width:700px) {

  #toggleButton{
width: 5%;
height: 5%;
 
     }
  }




  


  #snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
  }
  
  #snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }
  
  @-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
  }
  
  @keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }
  
  @-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
  }
  
  @keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }


  

@keyframes slideContinuous2 {
  0% {
    transform: translatey(0);
  }
  50% {
    transform: translatey(-5px);
  } /* تغيير القيمة حسب الحركة المطلوبة */
  100% {
    transform: translatey(0);
  }
}



#scroll-btn {
  
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 999;
  border-radius: 100%;
  padding: 10px;
  background-color: white;
  color: black;
  border: 1px solid black;
 height: 50px;
  width: 50px;
  cursor: pointer;
  transition: all 1s ease;
  outline: none;

}


.fa-arrow-up{
  font-size: 20px;
  transition: all 1s ease;
}


button img{
  animation: slideContinuous2 1s linear infinite;
}




  

@media only screen and (max-width: 641px) and (max-height: 361px) {

  .h-img{
  
  
  height: 100%
  
  
  }


  #toggleButton{
    width: 5%;
    height: 5%;
  }
  }