@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

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

}
/* ##################html element styling############################## */


html{
font-size: 62.5%;
}



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

ul li{
    list-style-type: none;
}


a{
    font-size: 1.6rem;
    text-decoration: none;
}
p, li{
    font-size: 1.6rem;
    margin-bottom: 0.5em;
    letter-spacing: 0.15em;
}

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

/* ########UTILITY CLASS########## */
    .container{
    max-width:1000px;
    width:90%;
  margin:0px auto;
}

.lg-heading{
    font-size: 3.25rem;
}
.md-heading{
    font-size: 2.2rem;
}
.text-red{
     color: #e63946;
}
.text-light{
      color: #f4f4f4;
}
.text-black{
      color: #333333;
}
.text-grey{
    color: #555555;
}
.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:white;
        border-radius: 100px;
        
    }
     .btn-primary:hover{
        background-color:#ddd;
    }
    .btn-secondary{
      border: 2px solid red;
      border-radius: 1.5em;
      color: #e63946;
      background: #fff;
      
    }
    .btn-secondary:hover{
       background-color: #efcef3f2;
    }



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







.header{
    position: relative;
    height: 95vh;
    background: linear-gradient(rgb(0,0,0,0.5),rgba(0,0,0,0.5)),url('../img/header2.img.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}
h1{
    color: white;
    font-weight: 400;
} 
     .navbar{ 
        padding: 1rem;
     }
   

    .navbar .logo{
         float:left;
     }
    .navbar .nav-items{
         float:right;
         margin-top: 1rem;
     }
      .navbar .nav-item{
        display:inline-block;
        padding: 1rem;
        text-transform: uppercase;
    }
    .navbar a:link,
    .navbar a:visited{
        color: #f4f4f4;
    }
     
    .navbar a{
        padding: 0.3rem;
    }
    .navbar a:hover{
        border-bottom: 1px solid white;
    }
     .navbar::after{
             content: '';
             display:block;
             clear:both;
         }
         /* ###################content-heading######################## */
           .header-content{
               position: absolute;
               text-align: center;
               
               top: 50%;
               left: 50%;
               transform: translate(-50%,-50%);
               background:linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1));
           }

     .header-content h1{
             text-transform: uppercase;
             font-weight: 700;
         }
         .header-content p{
             text-transform: uppercase;
             
         }
         /* ##############section styling########################### */
          .showcase{
              background: #ddd;
              padding: 100px 0;
          }
          .row{
              height: 350px;
              background: #fff;
              box-shadow: 0px 0px 20px 0px #aaaaaa;
          }
         .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;
        }
        /* #################FEATURES STYLING################################# */
    .feature{
      padding: 10rem 0;
    
    }
    .box-wrap{
        box-shadow: 5px 5px 20px 0px #00000057;
    }
    .box{
        width: 33.3333333%;
        float: left;
        padding: 2rem;
        text-align: center;

    }
    
    .box1, .box3{
        background-color:#263238;
        color: #fff;
    }
    .box2{
        background: linear-gradient(25deg,#d64c7f,#ee4758 50%);
        color: #fff;
        
    }
    .box-wrap::after{
        content: '';
        display: block;
        clear: both;
    }
    /* #########footer style################### */
       .footer{
           background: #263238;
           color: #fff;
           padding: 2rem;
           text-align: center;
           margin-top: 2rem;
       }
       .social-media i{
           margin: 2rem;
       }

       /* ################################about-styling ########################### */
   
     .aboutt::after{
           content: '';
           display: block;
           border-bottom: 3px solid #e63946;
           width: 100%;
       } 
       /* #######################about wrapper############### */
       .about-wrapper{
           
           text-align: center;
           margin-top: 2rem;
       }
       .about-wrapper .left{
           float: left;
           width: 50%;
       }
       .about-wrapper .right{
           float: right;
           width: 50%;
       }
       .about-wrapper::after{
           content: '';
           display: block;
           clear: both;
       }
       .about-wrapper li::before{
          content:'\2713';
          color: #e63946;
          font-weight: bold;
          padding-right:1rem ;
       }
    /* ######################count styling##################### */
    .counts{
      text-align: center;
        margin-top: 2rem;
    }
    .count-item{
        width: 25%;
        float: left;
    }
    .counts::after{
        content: '';
        display: block;
        clear: both;
    }
    /* ######################banner styling################# */
    .cta-banner{
        background:linear-gradient(25deg,#d64c7f,#ee4758 50%);
        color: #fff;
        padding: 1rem;
        box-shadow: 5px 5px 10px #00000069;
        margin-top: 3rem;
    }
    cta-line{
       font-weight: 700;
       font-size: 2rem;
       margin-top: 1.5rem;
    }
    .btn-cta{
        text-align: center;
        display: inline-block;
        font-size:700;
        font-weight:3rem;
        text-transform: uppercase;
        border: 4px solid white;
        padding: 0.3em 2.5em;
        letter-spacing: 0.5rem;
        color: #f4f4f4;
    }
    .cta-left{
        width: 60%;
         float: left;
    }
    .cta-right{
        width: 40%;
        float: right;
        text-align: right;
    }
    .cta-banner::after{
    content: '';
    display: block;
    clear: both;
    }
    /* #########################contact page styling######################## */
    .contact-form{
        padding: 5rem 0;
        background:#f7f7f7;
    }
    
    
    .form-wrap .company-address{
        height: 760px;
       
        float: left;
        width: 49%;
        background:#fff;
        padding: 1rem;
    }
    
    .form-wrap .company-address i{
        display: inline-block;
        margin-right: 1rem;
    }
    
    .form-wrap .company-address h2{
        display: inline-block;
        text-transform: uppercase;
    }
    
    .form-wrap .company-group{
        margin-bottom: 3rem;
    }
    
    .form-wrap .company-address img{
        max-width: 40rem;
        max-height: 65%;
        object-fit: cover;
        object-position:right;
    }
    
    .form-wrap::after{
        content: '';
        display: block;
        clear: both;
    }
    /* ###############form styling################## */
    .form-wrap .form{
        height: 760px;
        font-size: 1.6rem;
        float: right;
        width: 49%;
        background:#fff;
        padding: 1rem;
    }
    
    .form h1::after{
        content: '';
        display: block;
        border: 3px solid #e63946;
        width: 100%;
    }
    
    .form-wrap .form label{
        display: block;
    }
    
    .form-wrap .form input{
        padding: 0.5rem;
        width: 100%;
    }
    .form-wrap .form .form-group{
        margin-bottom: 1.2rem;
    }
    
    .form-wrap .form label::after{
        content: '*';
        color: #e63946;
    }
    
    .form-wrap .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;
        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;
            display: block;
            width: 100%;
            text-align: center;
        }
        
        .feature .box{
            float: none;
            width: 100%;
            text-align: center;
            box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.315);
        }
        .feature .box-2,
        .feature .box-3{
            margin-top: 5rem;
        }
        
        .box-wrap{
            box-shadow: none;
        }
        
        .cta-banner-left,
        .cta-banner-right{
            float: none;
            width: 100%;
            text-align: center;
        }
        .form-wrap .company-address{
            float: none;
            width: 100%;
            height: auto;
            margin-top: 5rem;
        }
        
        .form-wrap .form{
            float: none;
            width: 100%;
            height: auto;
        }
        }

        @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;
                display: block;
                width: 100%;
                text-align: center;
            }
            
            .feature .box{
                float: none;
                width: 100%;
                text-align: center;
                box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.315);
            }
            .feature .box-2,
            .feature .box-3{
                margin-top: 5rem;
            }
            
            .box-wrap{
                box-shadow: none;
            }
            
            .cta-banner-left,
            .cta-banner-right{
                float: none;
                width: 100%;
                text-align: center;
            }
            .form-wrap .company-address{
                float: none;
                width: 100%;
                height: auto;
                margin-top: 5rem;
            }
            
            .form-wrap .form{
                float: none;
                width: 100%;
                height: auto;
            }
        }
@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;
    }
}