@import url('https://fonts.googleapis.com/css2?family=Abel&family=Cairo:wght@200&family=Montserrat:wght@300;500;700&family=Poppins&display=swap');

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

/* ############## html styling############# */

html{
   font-size: 62.5%;
}

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

ul li{
   list-style: none;
}

a{
   font-size: 1.6rem;
   text-decoration: none;
}

p, li{
   font-size: 1.4rem;
   margin-bottom: 0.5em;
   letter-spacing: 0.15em;
   line-height: 1.5em;
}

h1, h2, h3{
   margin-bottom: 0.5em;
   letter-spacing: 0.15em;
   font-weight: 500;
}

/* ################ utility classes############ */

.container{
   max-width: 1200px;
   width: 90%;
   margin: 0 auto;
}

.lg-heading{
   font-size: 3.5rem;
}

.md-heading{
   font-size: 2.2rem;
}

.text-red{
   color: #e63946;
}

.text-light{
   color: #f4f4f4;
}

.text-black{
   color: #333;
}

.text-gray{
   color: #555;
}

.bg-dark{
   background-color: #263238;
}

.btn{
   display: inline-block;
   padding: 0.5em 1.5em;
   font-weight: 500;
   text-transform: uppercase;
   margin: 0.5em 0;
}

.btn-primary{
   background-color: #fff;
   border-radius: 10em;
}

.btn-primary:hover{
   background-color: #ddd;
}

.btn-secondary{
   border: 1px solid #e63946;
   border-radius: 1.5em;
   color: #e63946;
   margin-top: 2em;
   background-color: #fff;
}

.btn-secondary:hover{
   background-color: #fcf3f2;
}

/* ################## header styling########### */


.header{
   position: relative;
   border: 5px solid black;
   height: 95vh;
   background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(../img/header-image.jpg);
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

.navbar{
   padding: 1rem;
}


.navbar .logo{
   float: left;
}

.navbar .nav-items{
   float: right;
   margin: top 1rem; ;
}

.navbar::after{
   content: "";
   display: block;
   clear: both;
}

.navbar .nav-item{
   display: inline-block;
   padding: 1rem;
   text-transform: uppercase;
}

.navbar a:link,
.navbar a:visited{
   color: #f4f4f4;
}

.navbar a{
   padding-bottom: 0.3rem;
}
.navbar a:hover{
   border-bottom: 1px solid #fff;
}

/* ################ header-content styling########## */

.header-content{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   text-align: center;
   background: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2));
}

.header-content h1{
   text-transform: uppercase;
   font-weight: 500;
}
.header-content p{
   text-transform: uppercase;
   font-size: 0.8rem;
}

/* ############# showcase styling########## */

.showcase{
   background-color: #ddd;
   padding: 10rem 0;

}

.row{
   height: 350px;
   background-color: #fff;
   box-shadow: 1px 2px 12px 0px;
}

.row1{
   margin-bottom: 10rem;
}

.row1 .img-box,
.row2 .text-box{
   float: left;
   width: 50%;
}

.row2 .img-box,
.row1 .text-box{
   float: right;
   width: 50%;
}

.row .img-box{
   height: 100%;
}
.row .text-box{
   padding: 3rem;
}

.row .img-box img{
   display: inline-block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.row::after{
   content: "";
   display: block;
   clear: both;
}

/* ############## Feature section styling############# */

.features{
   padding: 10rem 0;
}

.box-wrapper{
   box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.403);
  
}

.box{
   width: 33.33333333%;
   float: left;

   padding: 2rem;
   text-align: center;
}

.box-1, .box-3{
   background-color: #263238;
   color: #fff;
}

.box-2{
   background: linear-gradient(25deg,#d64c7f,#ee4758 50%);
   color: #fff;
}

.box-wrapper::after{
   content: "";
   display: block;
   clear: both;
}


/* ############ footer styling######### */

.footer{
   background-color: #263238;
   color: #f4f4f4;
   padding: 2rem;
   text-align: center;
}

.social-media-links i{
   margin: 2rem;
}


/* ########### about page styling############ */

.about{
   padding: 5rem 0;
}

.about-heading::after{
   content: "";
   display: block;
   border-bottom: 4px solid #e63946;
   width: 100%;
}


/* ######### about-wrapper styling######### */

.about-wrapper{
   text-align: center;
   margin-top: 2rem;
}

.about-wrapper::after{
   content: "";
   display: block;
   clear: both;
}

.about-wrapper li::before{
   content: "\2713";
   color: #e63946;
   font-weight: bold;
   padding-right: 1rem;
   
}

.about-wrapper .left{
   float: left;
   width: 50%;
}

.about-wrapper .right{
   float: right;
   width: 50%;
}

/* ############# count styling######## */

.counts{
   margin-top: 3rem;
}

.count-item{
   float: left;
   width: 25%;
   text-align: center;
}

.counts::after{
   content: "";
   display: block;
   clear: both;
}

.count-item span{
   font-size: 3rem;
   color: #e63946;
   font-weight: 700;
}

.count-item p{
   font-size: 1.8rem;
   color: #555;
   font-weight: 700;
   
}

/* ################# cta banner styling######## */

.cta-banner{
   background: linear-gradient(25deg,#d64c7f,#ee4758 50%);
   color: #f4f4f4;
   padding: 1.1rem;
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.34);
   margin-top: 3rem;
}

.cta-banner-left{
   float: left;
   width: 60%;
}

.cta-banner-right{
   float: right;
   width: 40%;
   text-align: right;
}

.cta-banner::after{
   content: "";
   display: block;
   clear: both;
}

.cta-line{
   font-size: 1.5rem;
   font-weight: 700;
   margin-top: 1.5rem;
}

.cta-btn{
   display: inline-block;
   text-align: center;
   font-size: 3rem;
   border:  4px solid white;
   font-weight: 700;
   text-transform: uppercase;
   padding: 0.3em 2.5em;
   letter-spacing: 0.5rem;
   color: #f4f4f4;
}

/* ############ contact page styling######### */

.contact-form{
   padding: 5rem 0;
   background: #f7f7f7;
}

.form-wrapper::after{
   content: "";
   display: block;
   clear: both;
}

.form-wrapper .company-address{
   height: 760px;
   background: #fff;
   float: left;
   width: 49%;
   padding: 1rem;
}

.form-wrapper .company-address i{
   display: inline-block;
   margin-right: 1rem;
}

.form-wrapper .company-address h2{
   display: inline-block;
   text-transform: uppercase;
}

.form-wrapper .address-group{
   margin-bottom: 3rem;
}

.form-wrapper .company-address img{
   max-width: 100%;
   min-height: 40rem;
   object-fit: cover;
   object-position: right;
}

/* ########## form styling########## */


.form-wrapper .form{
   height: 760px;
   font-size: 1.6rem;
   background: #fff;
   float: right;
   width: 49%;
   padding: 1rem;
}

.form h2::after{
   content: "";
   display: block;
   border-bottom: 5px solid #ee4758;
   width: 100%;
}

.form-wrapper .form label{
   display: block;
}

.form-wrapper .form input{
   padding: 0.5rem;
   width: 100%;
}

.form-wrapper .form .form-group{
   margin-bottom: 1.2rem;
}

.form-wrapper .form label::after{
   content: "*";
   color: #e63946;
}

.form-wrapper .form textarea{
   width: 100%;
   height: 300px;
   padding: 1rem;
}

.form-btn{
   display: block;
   margin: 0 auto;
   padding: 0.5em 3em;
   font-size: 1.8rem;
   text-transform: uppercase;
   background: #e63946;
   border-radius: 20px;
   color: #fff;
   outline: none;
   border: none;
   cursor: pointer;
}

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

@media (max-width: 500px){
   html{
      font-size: 50%;
   }

   .navbar .nav-items, .navbar .logo{
      float: none;
      display: block;
      width: 100%;
      text-align: center;
   }

   .header-content .main-heading{
      display: none;
   }

   .row{
      height: auto;
      width: 100%;
   }

   .row .img-box,
   .row .text-box{
      float: none;
      width: 100%;
      text-align: center;
   }

   .features .box{
      float: none;
      width: 100%;
      text-align: center;
      box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.403);
   }

   .features .box-2, 
   .features .box-3{
      margin-top: 5rem;
   }

   .box-wrapper{
      box-shadow: none;
   }

   .cta-banner-left,
   .cta-banner-right{
      float: none;
      width: 100%;
      text-align: center;
   }

   .form-wrapper .company-address{
      float: none;
      width: 100%;
      height: auto;
      text-align: center;
      margin-bottom: 5rem;
   }

   .form-wrapper .form{
      float: none;
      width: 100%;
      height: auto;
      text-align: center;
   }
}

@media (min-width: 501px) and (max-width: 768px){
   html{
      font-size: 50%;
   }

   p{
      font-size: 1.8rem;
   }

   .navbar .nav-items, .navbar .logo{
      float: none;
      display: block;
      width: 100%;
      text-align: center;
   }

   .row{
      height: auto;
      width: 100%;
   }

   .row .img-box,
   .row .text-box{
      float: none;
      width: 100%;
      text-align: center;
   }

   .features .box{
      float: none;
      width: 100%;
      text-align: center;
      box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.403);
   }

   .features .box-2, 
   .features .box-3{
      margin-top: 5rem;
   }

   .box-wrapper{
      box-shadow: none;
   }

   .cta-banner-left,
   .cta-banner-right{
      float: none;
      width: 100%;
      text-align: center;
   }

   .form-wrapper .company-address{
      float: none;
      width: 100%;
      height: auto;
      text-align: center;
      margin-bottom: 5rem;
   }

   .form-wrapper .form{
      float: none;
      width: 100%;
      height: auto;
      text-align: center;
   }
}

@media (min-width: 769px) and (max-width: 1200px){
   html{
      font-size: 56.25%;
   }

   .row .text-box h2{
      font-size: 2.2rem;
      font-weight: 500;
   }
}

@media (orientation: landscape) and (max-height: 500px){
   .header{
      height: 90vmax;
   }
}