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

*{

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

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.6rem;
    margin-bottom: 0.5em;
    letter-spacing: 0.15em;
}

h1,h2,h3{

    margin-bottom: 0.5em;
    letter-spacing: 0.15em;
    font-weight: 500;


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

.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-grey{

    color: #555;
}

.navbar a:link,
.navbar a:visited{

    color:#f4f4f4;
    
}

.navbar a{

    padding-bottom: 0.3rem;
}
.navbar a:hover{

    border-bottom: 1px solid white;
}

.btn{

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

}

.btn-primary{

    background-color: #f4f4f4;
    border-radius: 10em;
}

.btn-primary:hover{

    background-color: #ddd;
}

.btn-secondary{

    background-color: #f4f4f4;
    border-radius: 1.5em;
    border: 2px solid #e63946;
    color: #e63946;
}

.btn-secondary:hover{

    background-color: #fcf3f2;
}

.bg-dark{

    background-color: #263238;
}

/* #################### CONTAINER UTILITY CLASS ################### */

.container{

    max-width: 1000px;
    width:90%;
    margin:0 auto;
}

.header{

    height: 100vh ;
    position:relative;
    background: linear-gradient(rgb(0,0,0,0.5),rgb(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 .navbar-items{

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

    content:"";
    clear: both;
    display: block;
}

.navbar .navbar-item{

    display: inline-block;
    padding: 1rem;
}

.header-content{

    
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: linear-gradient(rgb(0,0,0,0.2),rgb(0,0,0,0.2));
    max-width: 900px;
    width: 90%;
}

.header-content h1{

    text-transform: uppercase;
    font-weight: 700;
}

.header-content p{

    text-transform: uppercase;
}

/* ########## showcase-section styling ####### */

.showcase{

    background-color: #dddddd;
    padding:10rem 0 ;
}

.row{

    height: 350px;
    
    background-color: #fff;
    box-shadow: 0px 0px 20px 0px #aaaaaa;
}

.row1{

    margin-bottom: 10rem;
}

.row1 .img-box,.row2 .text-box{

    float: left;
    width: 50%;
}


.row1 .text-box,.row2 .img-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 section styling ######################## */

.feature{

    padding: 8rem 0;
}

.box-wrapper{

   box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.521);
}

.box{

    width: 33.3333333%;
    float:left;
   
    padding: 2rem;
    text-align: center;
}

.box-b1,.box-b3{

    background-color: #263238;
    color: #f4f4f4;
}

.box-b2{

    background: linear-gradient(25deg,#d64c75,#ee4758 50%);
    color: #f4f4f4;
}

.box-wrapper::after{

    content:"";
    display:block;
    clear:both;

}

.fas{

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

}

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

/* ################# about section coding ########### */
.about{

    padding: 3rem;
}
.about h2{

    border-bottom: 4px solid #e63946;
}
.about p{

   letter-spacing: 0.2rem;
}
/* ####################### about-wrapper ################ */
.about-wrapper{

    margin-top: 4rem;
    text-align: center;
    
    
}

.about-wrapper::after{

    content: "";
    display: block;
    clear: both;
}
.about-wrapper .left{
    float: left;
    width: 50%;
    


}

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

    
}

.about-wrapper li::before{

    content: '\2713';
    color: #e63946;
    font-weight: bold;
    padding-right: 1rem;
   
}

/* ############# COUNT SECTION ############### */

.count::after{

    content:"";
    display:block;
    clear: both;


}

.count .count-item1{

    float: left;
    width:25%;
}

.count .count-item2{

    float: left;
    width:25%;
}

.count .count-item3{

    float: left;
    width:25%;
}

.count .count-item4{

    float: left;
    width:25%;
}

.count{

    padding-top: 3rem;
    text-align: center;
}
.count-item span{

    color: #e63946;
    font-weight: 700;
    padding-bottom: 2rem;
}

.count-item p{

    text-transform: capitalize;
}

.banner{

    background: linear-gradient(25deg,#d64c75,#ee4758 50%);
    
    
    padding: 1rem;
    box-shadow: 5px 5px 10px #00000059;
    margin: 3rem;
}

.para{
    font-weight: 700;
    font-size: 2rem;
    margin-top: 1.5rem;
}

.banner-left{

    float: left;
    width: 60%;
    color: #f4f4f4;
}

.banner-right{

    float: right;
    width: 40%;
    text-align: right;
}

.banner::after{

    content: "";
    display: block;
    clear: both;
}

.ban-btn{

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

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

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

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

    
}

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

    
    float: left;
    width: 49%;
    background: #fff;
    padding: 1rem;
    height: 760px;
}

.form-wrapper .address i{

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

    display: inline-block;
    text-transform: uppercase;
}

.form-wrapper .address img{

    max-width: 90%;
    min-height: 40rem;
    object-fit: cover;
    object-position: right;
}




/* ########################## form-stylking ################### */

.form-wrapper .form{

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

.form-wrapper h1::after{
    content:"";
    display: block;
    width: 100%;
    border: 3px solid #e63946;

}

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

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

.form-wrapper .form label::after{

    content: "*";
    color: #e63946;
}

.form-wrapper .form textarea{

    width: 100%;
    height: 300px;
    padding: 1rem;
    margin-bottom: 1rem;

}

.form-btn{

    display: block;
    margin: 0 auto;
    padding: 0.4em 3em;
    font-size: 1.8rem;
    text-transform: uppercase;
    background: #ee4758;
    color: #f4f4f4;
}

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

@media(max-width:500px){

    html{
        font-size: 50%;
    }
    .navbar .navbar-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;
    }

    .box{

        float:none;
        display:block;
        width: 100%;
        text-align: center;
        
    }

    .banner-left, .banner-right{

        float: none;
        width: 100%;
        text-align: center;
    }

    .form-wrapper .address{

        float: none;
        width: 100%;
        height: auto;
        margin-bottom: 5rem;


    }

    .form-wrapper .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 .navbar-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;
    }

    .box{

        float:none;
        display:block;
        width: 100%;
        text-align: center;
        
    }

    .banner-left, .banner-right{

        float: none;
        width: 100%;
        text-align: center;
    }

    .form-wrapper .address{

        float: none;
        width: 100%;
        height: auto;
        margin-bottom: 5rem;


    }

    .form-wrapper .form{

        float: none;
        width: 100%;
        height: auto;


    }




}


@media(min-width:769px) and (max-width:1200px){


    html{


        font-size:50.25%;
    }

    
}