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

*{margin: 0;
padding: 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: 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#####
 */

.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: #333333;}

.text-gray{color: #555555;

}

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

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

.btn-primary{background-color: #fff;
    border-radius: 100px;
}

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

.btn-secondary{border: 2px solid #e63946;
border-radius: 24px;
color: #e63946;
background-color: #fff;}

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



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

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

.navbar{
padding: 1rem;}



 .navbar .logo{float: left;font-size: 3.5rem;
}

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

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

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

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

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

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



/* ######### header content style ######### */

.header-content{
position: absolute;
text-align: center;
left: 18%;
top: 35%;
background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.1))}

.header-content h1{text-transform: uppercase;
font-size: 700;}

.header-content p{text-transform: uppercase;}



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

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

.row{height: 350px;
background: #fff;
box-shadow: 0px 0px 20px 0px #aaa;}

.row1{margin-bottom: 100px;
}

.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 SECTION STYLING ################ */


.features{padding: 10rem 0;
}

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

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

padding: 20px;
text-align: center;}

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

.box-2{background-color: #a04e4e;
color: white;}


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


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

.footer{background-color: #263238;
    color: #f4f4f4;
    padding: 20px;
    text-align: center;
border: 2px solid green;
}

.social-media-links i{margin: 10px;}


/* ########## About Page Styling ########### */

.about{padding: 5rem 0;
}

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


/* ############## About  Wrapper Styling ############# */


.about-wrapper{text-align: center;
margin-top: 20px;}

.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{margin-top: 30px;
}

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

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

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

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


/* ########## Banner Styling ########### */

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


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

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

    .cta-line{font-weight: 700;
    font-size: 20px;
    margin-top: 15px;
}

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

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




/* ########### Contact Form Styling ############## */


.contact-form{padding: 50px 0;
    background: #f7f7f7;
}

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


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

.form-wrapper .company-address i{display: inline-block;
margin: 10px;
padding: 
}

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

}

.form-wrapper .address-group{margin-bottom: 30px;
}


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


/* ###### Form Styling ######## */



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

.form h1{border-bottom: 5px solid #e63946;}


.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: 10px;
}

.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 h1{
    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;
}

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

.form-wrapper .company-address{
    float: none;
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}

.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 .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;
    }
    
    .banner-left,
    .banner-right{
        float: none;
        width: 100%;
        text-align: center;
    }
    
    .form-wrapper .company-address{
        float: none;
        width: 100%;
        height: auto;
        margin-bottom: 50px;
    }
    
    .form-wrapper .form{float: none;
    width: 100%;
    height: auto;}
    .navbar .nav-items, .navbar .logo{
        float: none;
        display: block;
        width: 100%;
        text-align: center;
    }
    
    .header-content h1{
        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;
    }
    
    .banner-left,
    .banner-right{
        float: none;
        width: 100%;
        text-align: center;
    }
    
    .form-wrapper .company-address{
        float: none;
        width: 100%;
        height: auto;
        margin-bottom: 50px;
    }
    
    .form-wrapper .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;}

   }