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

*{
    margin: 0px;
    padding: 0px;
    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;
    font-weight: 500;
    letter-spacing: 0.15em;
}

/* ########  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

}

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

}
.button-primary{
    background-color: #fff;
    border-radius: 100px;
}
.button-primary:hover{
    background-color: #ddd;
}

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

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

.margin-top{
    margin-top: 1rem;
}


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

.header{
    position: relative;
    height: 100vh;
    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 .nav-item{
    display: inline-block;
    padding: 1rem;
    text-transform: uppercase;
    
}

.navbar a:link,
.navbar a:visited{
    color: #f4f4f4;
    
}
.navbar a:hover{
    border-bottom: 2px solid #f4f4f4;
}



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

.header-content h1{
    font-weight: 700;
    
}

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

.header-content p{
    font-weight: 300;
     
}

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

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

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

.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;
    background-color :#fff;
    font-size: 3rem;
    text-transform: uppercase;
    height: 100%;
}
.row1 .text-box .para-1, .row2 .text-box .para-1{
    line-height: 30px;
    text-transform: lowercase;
}

.row .img-box img{

    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;

}

/* ################## feature section style  ################## */

.feature{
    font-family: 'Poppins', sans-serif;
    padding: 10rem 0;
    background-color: #f4f4f4;
}

.box-wraper{
    
    box-shadow: 5px 5px 20px 0px #aaa;
}

.box{
    width: 33.33333%;
    float: left;
    padding: 2rem;
}

.box-wraper::after{
    content: '';
    display: block;
    clear: both;
}

.box-wraper .box-1{
    height: 100%;
    
    background-color: #263238;
    color: white;
    text-align: center;
    text-transform: uppercase;
    
}

.box-wraper .box-2{
    height: 100%;
    
    background-color: #e63946;
    color: white;
    text-align: center;
    text-transform: uppercase;
    
}

.box-wraper .box-3{
    height: 100%;
    /* border: 2px solid rgb(75, 35, 219); */
    background-color: #263238;
    color: white;
    text-align: center;
    text-transform: uppercase;
    
}
.box-wraper .box-1 p{
    text-transform: lowercase;
    padding: 2rem;
}

.box-wraper .box-2 p{
    text-transform: lowercase;
    padding: 2rem;
}

.box-wraper .box-3 p{
    text-transform: lowercase;
    padding: 2rem;
}

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

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

.socialmedialinks i{
   margin: 2rem;
}

.footer .footer-para{
    text-align: center;
}

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

.about{
    padding: 5rem 0;
}

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

.about-box{
    margin-top: 2rem;
    
    
}

.about-box .about-box1{
    float: left;
    padding-left: 12.5%;
}

.about-box .about-box2{
    float: right;
    padding-right: 12.5%;
}
.about-box::after{
    content: '';
    display: block;
    clear: both;
}

.about-box p::before{
    content: '\2713';
    color: #e63946;
    font-weight: bold;
    padding-right: 1rem;
}

.about h1{
    font-weight:bolder;
 
}


.paragraphdiv{
    margin-top: 2rem;
}

.paragraphdiv .p1,.p2,.p3,.p4{
    float: left;
    width: 25%;
    text-align: center; 
    font-weight: bold;
    color: #e63946;
    font-size: 1.8rem;
}

.paragraphdiv::after{
    content: '';
    display: block;
    clear: both;
}

.bg-border{

    background: linear-gradient(25deg, #d64c7f, #ee4758 50%);
    color: #fff;
    margin-top: 3rem; 
    padding: 1rem;
    box-shadow: 5px 5px 10px #00000057; 
}

.bg-para{
    width: 60%;
    float: left;
}

.inner-border{
    width: 40%;
    float: right;
    text-align: right;
}
 .innera{

   border: 4px solid white;
   color: white;
   text-transform: uppercase;
   text-align: center;
   font-size: 3rem;
   display: inline-block;
   padding: 0.3rem 2.5rem;
   letter-spacing: 0.5rem;

    
 }

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

 .bg-border::after{
    content: '';
    display: block;
    clear: both;
 }

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

  .contact{
    background: #f7f7f7;
    
    
  }


 .contact .contactbox1{
    
    height: 50%;
    float: left;
    margin-top: 5rem;
    width: 49%;
    background-color: rgb(244, 232, 232);
    padding-left: 1rem;
    padding-top: 1rem;
    margin-bottom: 10rem;
 }

 .contact .contactbox2{
    padding-top: 1rem;
    margin-top: 5rem;
    height: 50%;
    width: 49%;
    float: right;
    background-color: rgb(244, 232, 232);
    margin-bottom: 10rem;
 }

 .contact .contactbox1 i{
      
    display: inline-block;
    margin-right: 1rem;
}

.contact .contactbox1 h2{
    display: inline-block;
    margin-right: 1rem;
    text-transform: uppercase;
}

.contact .about-box1 img{
    min-width: 90%;
    min-height: 40rem;
    object-fit: cover;
    object-position: right;
}


 .contactbox2 h2::after{
    content: '';
    display: block;
    width: 100%;
    border-bottom: 5px solid #e63946; 
    margin-top: 0.5rem;
}

.contactbox2 p{
    line-height: 2rem;
}

/* ####################### contact form style ###################33 */

.contactform{
    height: 580px;
    padding: 1rem;
}

.contactform label{
    display: block;
    width: 100%;
}

.contactform input{
    width: 100%;
}

.contactform textarea{
    width: 100%;
    height: 350px;
}

.contactform button{
    display: block;
    background-color: #e63946;
    color: #fcf3f2;
    padding: 1rem 4rem;
    border: none;
    outline: none;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 1.8rem;
    margin: 0 auto;

}

/* /* !!!!!!!!!!!!!!! add media quries !!!!!!!!!!!!!!!!!!!!!!!!!!  */

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

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

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

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

    .feature .box{
        float: none;
        width: 100%;
        text-align: center;
        box-shadow: 5px 5px 20px 0px #aaa;
        
    }

    .feature .box-2,.feature .box-3{
        margin-top: 40px;
    }

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

    .about-box .about-box1,.about-box .about-box2{
        padding: 0;
    }

    

    .bg-border .bg-para,.bg-border .inner-border{
        float: none;
        width: 100%;
        text-align: center;
    }

    .contact .contactbox1,.contact .contactbox2{
        float: none;
        width: 100%;
        text-align: center;
        height: auto;
    }

    .contact .about-box1 img{
        width: 100%;
        height: 100%;
        object-position: 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;
        text-align: center;
        width: 100%;
    }

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

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

    .feature .box{
        float: none;
        width: 100%;
        text-align: center;
        box-shadow: 5px 5px 20px 0px #aaa;
        
    }

    .feature .box-2,.feature .box-3{
        margin-top: 40px;
    }

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

    .about-box .about-box1,.about-box .about-box2{
        padding: 0;
    }

    

    .bg-border .bg-para,.bg-border .inner-border{
        float: none;
        width: 100%;
        text-align: center;
    }

    .contact .contactbox1,.contact .contactbox2{
        float: none;
        width: 100%;
        text-align: center;
        height: auto;
    }

    .contact .about-box1 img{
        width: 100%;
        height: 100%;
        object-position: center;
    }
}


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

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

    .about-box .about-box1,.about-box .about-box2{
        padding: 0;
    }
}

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