@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  
:root {
  --color1: #AF6635; /*primery*/
  --color2: #F8F6F3; /*secondry*/
  --color3: #F0E2D9; /*onPrimery*/
}

*{
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

.shape {
  stroke-dasharray: 140 530;
  stroke-dashoffset: -460;
  stroke-width: 8px;
  fill: transparent;
  stroke: var(--color1);
  border-bottom: 2px solid black;
  transition: stroke-width 6s, stroke-dashoffset 6s, stroke-dasharray 6s;
  animation: dash 12s linear infinite;
}

.text {
  text-decoration: none;
  font-size: 2.5em;
  line-height: 12px;
  letter-spacing: 2px;
  color: #000;
  top: -48px;
  position: relative;
  text-shadow: 3px 3px 3px #000;
  transition: 0.7s ease;
  font-family: 'Tajawal', sans-serif;


}

.text:hover{
  color: #fff;
  transform: scale(1.1);  
}

@keyframes dash {
  0% {
    stroke-dashoffset: -460;
  }
  50% {
    stroke-dashoffset: -1700;
  }
  100% {
    stroke-dashoffset: -460;
  }
}



header{
  height: 15%;
  background-color:  var(--color3);
  width: 100%;
  position: fixed;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 200px;
}




.navigation{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.navigation a{
  text-decoration: none;
  color: var(--color1);
  font-size: 1.5em;
  font-family: 'Tajawal', sans-serif;
  font-weight: 500;
}

.navigation a:hover{
  color:#000;
}

.list{
  list-style: none;
  display: flex;
  gap: 25px;
}

#toggler,.navigation label{
  display: none;

}
section{
  padding: 100px 200px;
}


.download{
  background-color:  var(--color2);
  border: 3px solid var(--color1);
  border-radius: 10px;
  display:flex;
  align-items:stretch;
  justify-content: space-between; 
  padding: 10px;
}

.download a{
  font-size: 1.2em;
  text-decoration: none;
  color:var(--color1);
  font-family: 'Tajawal', sans-serif;

}

  .form-btn{
    width: 250px;
    color: var(--color3);
    background-color: var(--color1);
    font-size: 1.1em;
    font-weight: 600;
    display:inline; 
    margin-top: 20px;
    padding:10px 12px;
    letter-spacing: 1px;
    border-radius: 15px;
    border: 10px;
    transition: 0.7s ease;
}


.form-btn:hover{
    color: #000;
    transform: scale(1.1);
}




.main{
  max-width: 100%;
  display:inline-flex;
  align-items: center;
  justify-content: space-around;
  flex-direction:row;
  background-color:  var(--color3);

}

.main2{
  max-width: 100%;
  display:inline-flex;
  align-items: center;
  justify-content: space-around;
  flex-direction:row;
  background-color:  var(--color1);

}


.main-div1{
  height: 80%;
  width: 100vw;
  display:flex;
  align-items: center;
  justify-content:space-around;
  text-align: center;
  flex-direction:column;
  margin: 50px;
  padding: 50px;
  color: var(--color1);
}


.main h3{
  color: var(--color3);
}



.services{
  background-color:  var(--color3);
  color: var(--color1);
  display: flex;
  justify-content:space-around;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

.servicesROW{
  display: flex;
  justify-content:space-around;
  align-items: center;
  text-align: center;
  flex-direction: row;
}



.sec-div{
  max-width: 50%;
    min-height: 25em;
    background-color:  var(--color2);
    border-radius: 15px;
    padding: 50px;
    text-align:center;
    border: 3px solid var(--color1);
    margin: 50px;
    flex-direction: row;

    
}

.sec-div img{
  background-color: var(--color1);
  border-radius: 15px;

}

.sec-div h2 {
  color:  var(--color1);
  padding: 10px;

  
}

.sec-div h3{
  color:  var(--color1);
  padding-bottom: 10px;    
}

.social-icons a{
  text-decoration: none;
  color:  var(--color2);
  font-size: 1.3em;
  margin: 10px;
  display:inline-flex;
  flex-direction: row;
  transition: 0.7s ease;
}

.social-icons a:hover{
  color: #000;
  transform: scale(1.3);
}

.AU  {
  min-width: 100vw;
  max-width: 100vw;
}

.AU  img{
  min-width: 100vw;
  max-width: 100vw;
}

.AUIMG{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

}
.AU h2{
color:  var(--color3);
}

.AU h3{
color:  var(--color3);
padding-bottom: 10px;    

}

.AU h4{
font-size: 0.7em;
}


.icon{
color:  var(--color3);
font-size: 3em;
text-align: center;
}

.info{
text-align: center;
}

.info h3{
color:  var(--color3);
font-size: 1em;
font-weight: 500;
margin: 8px;
}
.info p{
font-size: 1em;
font-weight: 500;
}
.AU{
background-color:  var(--color3);
}

.AU .LCenter{
color:  var(--color3);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

.AU .main-div{
  width: 95%;
  background-color:  var(--color1);
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  margin: 20px;
}



.contact-card{
background-color:  var(--color3);
text-align: center;
}

.contact-card .title{
color: var(--color3);
margin:  50px;
}

.content{
max-width: 200px;
min-height: 200px;
padding: 20px;
background-color: var(--color3);
border-radius: 15px;
display: flex;
justify-content:space-around;
align-items: center;
text-align: center;
flex-direction: column;
}

.content a{
text-decoration: none;
color: var(--color1);

}

.content h1{
color: var(--color1);
font-size: 0.8em;
font-family: 'Tajawal', sans-serif;

}

.content h1:hover{
  color: #000;
  }





.contact-card .social-icons a{
  color: var(--color1);
  padding:  5px;
  
}

.contact-card .social-icons h1{
  color: var(--color1);
  margin:  5px;

}






.footer{
background-color:  var(--color1);
color:  var(--color2);
padding: 2em;
display: flex;
justify-content: space-around;

}

.footer-title{
color: var(--color3);
font-size: 0.8em;
font-weight: 600;
font-family: 'Tajawal', sans-serif;

}

.footer-title span{
color:  var(--color3);
font-family: 'Tajawal', sans-serif;

}

.footer .social-icons a:hover{
color: #000;
}

@media (max-width: 1023px){

body{
  font-size: 7px;
}

header{
  padding: 5px ;
  justify-content: space-around;
}

.logo {
  font-size: 1.5em;
}

.menu{
  width: 0;
  background-color:  var(--color3);
  border-radius: 0px 0px 15px 15px;
  padding: 5px;
  padding-top: 50px;
  max-height: 0;
  overflow: hidden;
  color: var(--color1);
}

.list{
  flex-direction: column;
  align-items: center;
}

.navigation label{
  display: inline;
  align-items: center;
  cursor: pointer;
  font-size: 2em;
  color:  var(--color1);
}


#toggler:checked ~.menu{
  position:fixed;
  top: 15%;
  right: 1px;
  width: 100px;
  max-height: 100%;
}

.title{
  font-size: 1.8em;
}

section{
  padding: 20px 10px;
  text-align: center;
}

 .download a{
      font-size:20px ;
      width: 50px;

     
}

.card{
  padding: 5px;
}

.main{
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100vw;
  min-width: 100vw;
  min-height: 100vh;

}



.sec-div{
  padding: 5px;
  min-width: 90%;
  flex-direction: column;

}
.main-div{
  padding: 30px;
 text-align: center;
}

.main-div1{
  max-width: 90vw;
  min-width: 90vw;
  margin: 10px;
  flex-direction: column;
}

.main-div1 img{
max-width: 85vw;
margin-top: 10px;
}

.download a{
  font-size: 1.3em;
}

.services .servicesROW{
  flex-direction: column;
}

.services h2{
  font-size: large;
}

.content{
  max-width: 100px;
  max-height: 80px;
}

.main h2{
  font-size: 1.4em;
}

.main h3{
   font-size: 1.2em;
}
.main h4{
  font-size: 1em;
}

.content{
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;

}

.content{
  width: 50px;
  height:50px;
}

.content a{
  font-size: 20px;
}

.contact-card .content .card .icon{
  font-size: 2em;
}



.contact-card h1{
  font-size: 0.5em;
  margin-top: 10px;
}

.footer{
  padding: 0.5em;
  display: flex;
  align-items: center;
  justify-content:space-around;
  
}

.footer-title{
  font-size: 1em;
  font-weight: 500;
}

.social-icons a{
  font-size: 1.8em;
}



.AU{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

}


@media (max-width: 300px){

body{
  font-size: 5px;
}

header{
  padding: 1px;
  justify-content: space-around;
}

.navigation a{
  padding-left: 5px;
}


.title{
  font-size: 1.4em;
}

section{
  padding: 10px 10px;
}

.main{
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.social-icons{
  font-size: 1em;
}

.main-div{
  padding: 20px;
  text-align: center;
}

.main-div1 img{
  max-width: 60vw;
  max-height: 80vh;
  }

.main h2{
  font-size: 1.2em;
}

.main h3{
   font-size: 1em;
}

.social-icons a{
  margin: 5px;
}

 
.content{
  flex-direction: column;
  align-items: center;
  text-align: center;

}

.footer{
  padding: 0.5em;
  display: flex;
  justify-content: space-around;
  
}

.footer .social-icons{
  font-size: 1em;
  margin: 0.1em;
}

.footer-title{
  font-size: 0.8em;
  font-weight: 400;
}
}