@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 body{
    font-family: 'Montserrat', sans-serif;
 }
 html{
     font-size: 62.5%;
 }
 *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 /* ###############header section################# */

 .header{
     height: 95vh;
  
     background-image: url('./header-image.jpg');
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     position: relative;
 }
 /* ############navbar############## */
 .navbar .navitems .navitem a{
     text-decoration: none;
     
 }
 .navbar{

    padding-top: 0.8em;
 }
 .navbar .logo{
     float: left;
 }
 .navbar .navitems{
     float: right;
     
 }
.navbar .navitem{
    display: inline-block;
    padding: 0.5em;
    margin: 0.7em;
     margin-top: 00.5em; 
}
 .navbar::after{
     content: '';
     display: block;
     clear: both;
 }
  .navbar .navitems a:hover{
     border-bottom: 1px solid white;
 }
 
 /* #####################font colors##################### */

 .white{
     color: white;
 }
 .red{
     color: rgb(255, 68, 68);
 }
 .light-grey{
     color: rgb(212, 212, 212);
 }

 /* ###########################FONT SIZE############### */
 
 .nsize{
     font-size: 1.6rem;
 }
 .msize{
     font-size: 2.3rem;
     letter-spacing: 0.3em;
 }
 .lsize{
    font-size: 3.5rem;
 }
 .fontupper{
     text-transform: uppercase;
 }


 /* ###############contener############### */
   .contener{
       max-width: 1200px;
       width: 80%;
       margin: 0 auto;
   }
   /* #############header content############## */
   .header-content h1{
       letter-spacing: 0.5em;
       margin-bottom: 00.5em;
   }
   .header-content a{
       text-decoration: none;
      background-color: rgb(255, 255, 255);
       padding: 1em 1.5em;
       margin-top: 1em;
       font-size: 1.7rem;
       border-radius: 3.5rem;
       font-weight: 700;
       display: inline-block;
   }
   .header-content a:hover{
       background-color: rgb(243, 243, 243);
   }
   .header-content p{
       margin-bottom: 1.5em;
       font-weight: 500;
       text-transform: uppercase;
       margin-top: 3em;
       line-height: 2.5rem;
   }
   .header-content{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
   }

   /* #############showcase section################# */
   .showcase{
       background-color: lightgray;
       padding:8rem 0;
       
   }
   .row{
       height: 30em;  
       background-color: rgb(255, 255, 255);
       box-shadow: 0px 0px 15px 0px black;
     
       
    
   }
   .row1{
       margin-bottom:8rem;
   }
  .row .textbox{
  
       padding: 1em;
       
  }
  .row1 .imgbox, .row2 .textbox{
      float: left;
      width: 50%;
  }
  .row1 .textbox, .row2 .imgbox{
      float: right;
      width: 50%;
  }
  .row .imgbox{
      height: 100%;
  }
  .row .imgbox img{
      width: 100%;
      height: 100%;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
  }
  .showcase .row p{
      padding-top: 1em;
      letter-spacing: 0.2em;
      line-height: 2em;
      margin-bottom: 1em;
  }
  .row .textbox{
      padding-left: 2rem;
  }
  .row h1{
      padding-top: 1em;
  }
  .showcase .row .textbox a{
   text-decoration: none;
   border: rgb(255, 68, 68) solid 2px;
   box-sizing: content-box;
   padding: 0.4em 0.7em;
   border-radius: 3rem;
   font-weight: 600;
  }

.textbox a:hover{
    background-color: rgb(243, 243, 243);
}
/* ################feature section#################### */
.feature-section{
    
    padding: 5rem;
}
.main-box{
box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.425);

}
 .feature-section .box{
  
    float: left;
    width: 33.333333%;
    padding: 1.5em;
     text-align: center;
    
}
.main-box::after{
    content: '';
    clear: both;
    display: block;
} 

.fheading{
    font-size: 1.8rem;
    margin-bottom: 1em;
    letter-spacing: 0.2em;
}
.feature-section p{
    font-size: 1.2rem;
    letter-spacing: 0.15em;
    line-height: 2.5em;
}
.box1, .box3{
    background-color: rgb(83, 83, 83);
    color: cornsilk;
}
.box2{
    background-image: radial-gradient( circle 860px at 11.8% 33.5%,  rgba(240,30,92,1) 0%, rgba(244,49,74,1) 30.5%, rgba(249,75,37,1) 56.1%, rgba(250,88,19,1) 75.6%, rgba(253,102,2,1) 100.2% );
    color: cornsilk;
}

/* ##############footer menu############## */
footer{
    background-color: rgb(44, 44, 44);
    color: rgb(255, 254, 251);
    padding: 1.5rem;
    text-align: center;
}
.social-media-links{
    margin-bottom: 1em;
}
.social-media-links i{
    margin: 0 1rem;
}
footer p{
    font-size: 1.3rem;
}

/* #############about us############### */

.about-color{
    color: black;
}
.about-navbar-bg{
    background-color: rgb(32, 32, 32);
    padding: 1.5em;
}
.about-section-heading{
    margin-top: 1.5em;
}
.about-section-heading::after{
     content: ""; 
    display: block;
    border: 2px solid red;
    width: 100%;
    margin-top: 0.2em;
    background-color: rgb(255, 87, 87);
}
.about-paragraph{
    line-height: 2em;
    margin-top: 2em;
    font-weight: 500;
    letter-spacing: 00.1em;
    margin-left: 2rem;
}
.about-box{
    
    text-align: center;
    line-height: 2em;
    margin-top: 2em;
   font-weight: 650;
}
.about-box .left{
    float: left;
    width: 50%;
}
.about-box .right{
    float: right;
    width: 50%;
}
.about-box::after{
    content: '';
    display: block;
    clear: both;
}
.about-box p::before{
    content: '\2713';
    color: rgb(255, 60, 60);
    padding-right: 0.8em;
}
.counts{
    /* border: 2px solid black; */
    margin-top: 4rem;
    text-align: center;
    
}
.counts .b1{
    float: left;
    width: 25%;
}
.counts .b2{
    float: left;
    width: 25%;
}.counts .b3{
    float: left;
    width: 25%;
}.counts .b4{
    float: left;
    width: 25%;
}
.counts::after{
    content: '';
    display: block;
    clear: both;
}
.counts span{
    font-size: 2.5rem;
    font-weight: 800;
    color: rgb(255, 60, 60);
    letter-spacing: 00.1em;
}
.counts p{
    font-size: 1.3rem;
    padding-top: 0.9em;
    font-weight: 900;
    letter-spacing: 00.3em;
}
.about-footer{
    border: 2px solid red;
     padding:1em; 
    margin-top: 3rem;
    text-align: center;
    background-image: radial-gradient( circle 860px at 11.8% 33.5%,  rgba(240,30,92,1) 0%, rgba(244,49,74,1) 30.5%, rgba(249,75,37,1) 56.1%, rgba(250,88,19,1) 75.6%, rgba(253,102,2,1) 100.2% );
    box-shadow: 0px 0px 3px black;
}

    
.about-footer a{
    display: inline-block;
    float: right;
    text-decoration: none;
    border: 4px solid rgb(255, 255, 255);
    padding: 0.8em 2em;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 00.3em;
    color: cornsilk;
    
}
.about-footer p{
    float: left;
    color: cornsilk;
   padding-top: 1.5em;
   font-weight: 700;

}
.about-footer::after{
    content: '';
    clear: both;
    display: block;
}
 /* ################contact form############ */
 .contact{
      /* border: 2px solid black;  */
     padding: 1rem;
      margin-top: 3rem;
 }
 .address{
     /* border: 2px solid red; */
     width: 49%;
     float: left;
     background-color:rgb(252, 252, 252);
     height: 600px;
 }
 .contact-form{
      /* border: 2px solid green;  */
      height: 600px;
     width: 49%;
     float: right;
 }
 .contact::after{
     content: '';
     clear: both;
     display: block;
 }
 .contact .address p{
     font-size:1.3rem;
     padding-bottom: 1em;
     padding-top: 0.6em;
     font-weight: 550;
 }
 .contact .address h2{
     display: inline-block;
     letter-spacing: 0.3em;
 }
 .address img{
      width: 100%;
 }
 
 .contact-contener{
    
    
        max-width: 1200px;
        width: 70%;
        margin: 0 auto;
    
 }
 .address-group i{
     color: rgb(255, 60, 60);
 }
 /* #############contact form########## */
 .contact-form h2{
    text-transform: uppercase;
    
     border-bottom: rgb(255, 60, 60) 3px solid; 
    padding: 1rem;
    padding-top: 0;
 } 

 .contact-form label{
     display: block;
     font-size: 1.3rem;
     font-weight: 600;
     padding-left: 1rem;
     text-align: left;
 }
 .contact-form label::after{
     content: '*';
     color: rgb(255, 64, 64);
 }
 .contact-form .input{
     margin: 1rem;
     width: 80%;
 }
 .contact-form p{
     margin-top: 1rem;
     margin-bottom:1rem;
 }
 .contact-form textarea{

    height: 25rem
 }
.contact-form a{
    display: inline-block;
    text-decoration: none;
   background-color: rgb(255, 60, 60);
    padding: 0.3em 1.5em;
    margin-left: 34%;
    font-size: 1.7rem;
    color: rgb(255, 255, 255);
}

/* ###############media queries################ */

@media (min-width:350px) and (max-width:780px){
    html{
        font-size: 60%;
    }
    
    .address{
        height: 500px;
    }
    .navbar .logo, .navbar .navitems{
        float: none;
        display: block;
        width: 100%;
        text-align: center;
    }
    .row .imgbox, .textbox{
        float: none;
        width: 100%;
        text-align: center;
    

    }
    
    .row .textbox{
        float: none;
        display: block;
        width: 100%;
        text-align: center;

    }
    .row .textbox a{
display: inline-block;
margin-bottom: 1rem;
    }
    .row{
        height: auto;
        margin: 5rem;
    }
     
    .feature-section .box{
        float: none;
        display: block;
        width: 100%;
        margin: 2rem 0;
        box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.425);

    }
    
    input{
        display: inline-block;
     margin: 2em;
        
    }
    .main-box{
        width: 100%;
        box-shadow: none;
       background: none;
    }
    
    .contener{
        width: auto;
    }
    /* .main-box::before{
        content: 'features';
        font-size: 3rem;
    } */
    .feature-section::before{
        content: 'Features';
        font-size: 3rem;
        margin-bottom: 3rem;
        text-align: center;
        display: block;
        text-decoration: underline;
    }
    
    
}

@media(max-width:626px){

    .about-footer a, .about-footer p{
        float: none;
    }
    .about-footer p{
        padding-bottom: 1rem;
        padding-top: 2rem;
    }
}

@media(max-width:744px) {

    .contact .address, .contact .contact-form{
        float: none;
        width: 100%;
    }
    .contact-form{
        text-align: center;
    }
    .contact-form a{
        margin: auto;
    }
    .about-section-heading{
        padding-left: 2rem;
    }
}