{box-sizing: border-box;}

/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');*/
/* //mobile// */
.ar-logo{
    width: 25rem;
}
body, html {
  height: 100%;
  
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;  
}



.logo{
   width:25%;
}

p{
    font-family: 'Montserrat', Arial, sans-serif;
   
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../img/abhath-masthead.png");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: 'Montserrat', Arial, sans-serif;

}

.learn{
    font-size:1.2rem;
}

/*homepage content*/
h3{
  font-size:1.5rem;
  font-family:Montserrat, Arial, sans-serif;
   text-align: center;
}

h4{
  
  font-family:Montserrat, Arial, sans-serif;
  
}
.our-products {
 background-color: white;
 padding-bottom: 1rem;
    padding-top: 1rem;
}
.our-products h4{
text-align: right;
  margin-right: 15%;
  margin-top: 2rem;
}

.our-products p{
  text-align: right;
  margin-right: 15%;
}


.three-cards{
   display: flex;
     max-width: 390px;
    flex-direction: column;
  padding-top: 1rem;
    background-color: white;
    padding-left: 6rem;
    padding-bottom: 1rem;
    margin-left: auto;
  margin-right: auto;
  align-items: center;
 
}
.card {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  margin-right: 6rem;
  margin-left: auto
  align-items: center;
  margin-top:1rem;
  margin-bottom:2rem;
}

.youtube{
    background-color: white;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}
iframe{
  display:block;
  margin-left: auto;
  margin-right: auto;
  margin-top:1.5rem;
  margin-bottom:3rem;
  background-color: white;
  width: 390px;
  height: 315px;
}
/* .card img{
  width:150px;
  
} */

/*about page mobile*/

.our-story{
  background-color:grey;
  padding:2rem;
}

.wathiq {
  display:block;
  margin-left:auto;
  margin-right:auto;
  width:100px;
  height:100px;
}
.story{
  color:white;
  font-size:1.5rem;
  font-family:Montserrat, Arial, sans-serif;
   text-align: center;
  
}

.bio{
  text-align: right;
  color:white;
  padding-left:2rem;
}

.sec{
    background-color: white;
    padding-bottom: 1rem;
}
.our-vision{
  text-align:center;
}
.vision{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.text{
  color:black;
  padding-left:1rem;
  padding-right:1rem;
  text-align: right;
}
.values{
  text-align:center;
  padding-right:1rem;
}

/*footer*/
 button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
   margin-right:80%;
    text-decoration: none;
    
   
}

.button{
   display: flex;
    justify-content: center; 
    flex-direction: row;
}

button a{
    text-decoration: none;
    color: black;
  
}

footer{
  background-color:#424242;
  padding:1rem;
  font-family: 'Montserrat', Arial, sans-serif;
  font-style:normal;
}
.ii {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
}

 button:hover {
  background-color: #555;
  color: white;
}

 button a:hover {

  color: white;
}
a {
   color: black;
  text-decoration: none;
  
}



.sns a:hover{
    color: #555;
}

.info{
   color: white;
    text-align: center;
    padding-top: 1.5rem;
  
}
.sns{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color:white;
  margin-bottom:1rem;
  font-size:1.4rem;
}

.icons {
  margin-left:1rem;
   color: white;
}

.copyright{
  margin-left:35%;
   color: white;
}



/*contact page mobile*/

.ftdesktop {
    display: none;
        
}

.reach {
    font-size:1.2rem ;
}
.body {
    position: relative;
}

.ft {
    display: block;
    position: absolute;
    font-size: 1.5rem;
    bottom: 44rem;
    left:11rem;
    text-align: right;
    font-family: 'Montserrat', Arial, sans-serif;
    margin-left:0;
    margin-right:0;
    
}



/*
    padding-left: 1rem;
    padding-left: -10rem;
*/
}

.box {
    margin: 0 0 1rem 0;
}

.box-fm {
    margin: 0 0 1rem 0;
}

.box-n{
    margin: 0 0 1rem 0;
}
.box-em {
    margin: 0 0 1rem 0;
}



label {
    display: inline-block;
    margin-bottom: 0.5rem;
    text-align: right;
}

#name{
    margin-top: 2.8rem;
    text-align: right;
    margin-left: 16rem;
    
}

#emailtab{
   margin-left: 16rem; 
}

#pn{
    margin-left: 16rem; 
}
#contact-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #F5F5F5;
    font-family: 'Montserrat', 'Arial', sans-serif;
/*    margin: auto;*/
    margin-top: 3rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom:3rem;
    padding: 2rem;
    border: 1.5px solid #DDD;
    max-width: 50rem;
    font-size: 1rem;
    border-radius: 0.2rem;
}

#comment{
    text-align: right;
    margin-left: 16rem; 
}

.rb{
    
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.mcq{
    text-align: right;
}
.radio {
    text-align: right;
    font-size: 1rem;
}
#submit-button {
    background-color: #EE5125;
    color: white;
    border-style: none;
    width: 18.2rem;
    padding: 0.8rem;
    font-size: 1rem;
    border-radius: 0.2rem;
    margin-top: 2rem;
    margin-bottom: 0.6rem;
    
}

#submit-button:hover{
    background-color: #ddd;
    color: black;

}

#fname {
    border: 1.5px solid #DDD;
    padding: 0.4rem;
    width: 18.2rem;
    display: inline-block;
    border-radius: 0.2rem; 
}

#email {
    border: 1.5px solid #DDD;
    padding: 0.4rem;
    width: 18.2rem;
    display: inline-block;
    border-radius: 0.2rem;
}

#number{
    border: 1.5px solid #DDD;
    padding: 0.4rem;
    width: 18.2rem;
    display: inline-block;
    border-radius: 0.2rem;
}
#message {
    border: 1.5px solid #DDD;
    padding: 2rem;
    width: 18.2rem;
    display: inline-block;
    border-radius: 0.2rem;
}


/*desktop view*/

@media only screen and (min-width: 35rem) {
/*   footer desktop */
.ii {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  
}
   
.sns{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color:white;
  margin-top:1rem;
  font-size:1.4rem;
}

.icons {
  margin-left:1rem;
   color: white;
} 
   
.copyright{
  margin-left:44%;
   
}
/*hompage content desktop*/
.three-cards{
   max-width: 80rem;
  flex-direction: row;
  justify-content: space-around;
  padding-right:1rem;
 
}
 
#prod{
    padding-top: 2rem;
    font-size: 2rem;
}
.our-products h4{
  margin-left: 10%;
  margin-top: 2rem;
}

.our-products p{
  margin-left: 10%; 
}
    
iframe{
      width: 800px;
      height: 600px;
}
    
/*about page desktop*/
    
.learn{
    font-size:2rem;
}
.our-story {
   display: flex;
    flex-direction: row;
}

.our-story p{
        text-align: right;
}
.story{
      text-align: right;
      margin-left: 2rem;
      font-size: 2rem;
}

.wathiq{
    width:200px;
    height:200px; 
    
}

.pass{
     padding-top: 3rem;   
    padding-bottom: 3rem;  
}

.vs {
    display: flex;
    flex-direction: row-reverse;
}
    
.our-vision{
        text-align: right;
        padding-top: 3rem;
        padding-left:3rem;
    padding-right:3rem;
    font-size: 2rem;
}
    
.pass-vi p{
        text-align: right;
}

.mission {
    display: flex;
    flex-direction: row;
}

.pass-m {
         text-align: right;
}
    
.about {
    display: flex;
    flex-direction: row-reverse;
    padding-bottom:2rem;
    
}  
    
.pass-va{
        margin-right: 14%;
}

.about img{
    margin-left: 2rem; 
    margin-right: 25%;
}
    
.text{
   padding: 3rem;     
}
    
.values{
    margin-right:2rem;
}


   
 /*contact page deskstop*/  
.reach {
    font-size:2rem ;
}
  .box {
    margin: 0 0 1rem 0;
}

label {
    display: block;
}
    
#contact-form {
    position: relative;
    max-width: 50rem;
    margin: auto;
    margin-top: 4rem;
    margin-bottom: 4rem;
    
}
    
.ftdesktop {
    display: block;
    color:white;
    text-align: center;
    font-size: 2rem;
    padding-top: 3rem
}

.ft {
    display:none;
    left: 16.5rem; 
    bottom: 25.5rem;
    z-index: 1;
}

.box-em {
    position: absolute;
    right: 2rem;
    bottom: 20.9rem;
}
.rb{
    position: absolute;
    right: 26rem;
    bottom: 16rem;
}
#name{
    position: absolute;  
    right:2rem;
    bottom:22.5rem;
}
#fname {
      width: 18rem;
    margin-left: 22.4rem;
}

#email {
    position:absolute;
    right:27.8rem;
    top:-2.5rem;
    width: 18rem;
 
}
#emailtab{
    position: absolute;
    right:24rem;
    top:-2.5rem;
}
#message {
     width: 45.8rem;   
}

#comment{
       margin-left: 42rem; 
}

#pn{
      position: absolute;
    right:2.3rem;
 }
    
#number{
     width: 15.4rem; 
   margin-left: 25rem;
}
    
.box-n{
     display: block;
}
#submit-button {
        width: 8rem; 
}      
    
    
    
/*closing bracket    */
}