@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,300&display=swap');
*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
}
body{
    font-family: 'Montserrat', sans-serif;
}
html{
    font-size: 62.5%;
}

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####################### */
.container1{
    max-width: 1200px;
    widows: 90%;
    margin:0px 15%;
}

.lg-heading{
    font-size: 3.5rem;
}
.md-heading{
    font-size: 2.2rem;
}
.text-red{
    columns: #e63946;
}
.text-light{
    color:#efefef;
}
.text-black{
    color: #333333;
}
.text-grey{
    columns: #555555;
}
.bg-dark{
    background-color: #555555;
}
.btnn{
    display: inline-block;
    background-color: #ffffff;
    color:red;
    border-radius: 10rem;
    font-weight: 700;
    padding:0.5em 1.5em;
    text-transform: uppercase;
    margin:0.5em 0;
    font-size: 1.6rem;
    cursor: pointer;
}
.btnn:hover{
    background-color: honeydew;

}

.smallbtn{
    display: inline-block;
    background-color:white;
    color: red;
    border: 1px solid red;
    border-radius: 100px;
    text-transform: uppercase;
    padding:0.5em 1.5em;
    margin:1em 0;
    font-size: 1.6rem;
    position: absolute;
    top:70%;
    cursor: pointer;
}
.smallbtn:hover{
    background-color: lavender;

}
.header{
    position: relative;
    height:95vh;
    background-image: linear-gradient(rgb(0,0,0,0.5),rgb(0,0,0,0.5)),url("../Images/header-image.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* .header .nav-bar{
    /* border:2px dotted white; */

 .logo,
 .nav-bar a{
    color:white;
}
 .nav-bar .logo{
    float:left;
    font-size: 3.5rem;
    padding-left: 1rem;
}
 .nav-bar .nav-item{
    float:right;
   
    
}
.nav-bar::after{
    display: block;
    clear:both;
    content: "";
}
.nav-item .home{
    padding:0px 1rem;
    display: inline-block;
    margin-top: 1rem;
    text-transform: uppercase;
}

.nav-bar a:link,
.nav-bar a:visited{
    columns: #f4f4f4;
}
.nav-bar a:hover{
    border-bottom: 1px solid #ffffff;
}
a{
    padding-bottom: 0.1rem;
}

.header article{
    position: absolute;
    background-image: linear-gradient(rgba(0,0,0,0.2),rgbs(0,0,0,0.2));
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    /* border:2px dotted white; */
    word-spacing: 0.1rem;  
    text-align: center;
    text-transform: uppercase;
}



.mid h2{
    font-weight: 700;
}

                   /* #################Showcase################ */



.showcase{
    background-color: #dddddd;
    padding:10rem 0;
}
.showcase .row{
    /* border:2px solid red; */
    height:350px;
    box-shadow: 0 0 20px 0 gray;
    
}
.footer .row{
    padding-bottom: 10px;
}
.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{
    /* border:4px solid black; */
    height:100%;
    
}
.row .text-box, .row .p{
    padding-left:3rem;
    padding-right: 3rem;
    height:100%;
    /* border:4px solid rgb(100, 105, 100); */
    font-family: fantasy;
    font-size: 3.5rem;
    background-color: white;
    text-transform: uppercase;
    word-spacing: 1px;
}
 .row .text-box{
     position: relative;
 }
 .row .text-box p{
     position: absolute;
     padding-top: 4rem;
 }
.row .img-box img{
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;     /*this used to maintain the aspect ratio of img */
}
.row h1{
    padding-top: 0.8em;
}
.card{
    height:25rem;
    padding-top: 2rem;
    margin-top: 5rem;
    position: relative;
}
.card-body{
    background-color: rgb(210, 230, 225);
    
}
.footer{
    /* margin-top:2rem; */
    background-color: rgb(201, 207, 212);
    
}
.foot{
    height:20%;
    width:25%;
    float:left;

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

}
.card-title{
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
}
.card-text{
    margin-top:1.6rem;
    margin-bottom: 1.6rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 2px;
}
.btn{
    position: absolute;
    top:75%;
  
}
.card .card-body  .btn-primary {

    font-size: 1rem;
    background-color:#007C21;
    border-color: ghostwhite;
    font-weight: 500;
    letter-spacing: 1px;
    text-shadow: grey;
    text-transform: capitalize;
}



.feature1 .box1{
    padding:10px;
    float: left;
    width:33.33%
}
.box1 h2{
    text-align: center;
    font-weight: 600;
    font-family: cursive;

}
.box-a , .box-c{
    /* background-color: #FFE53B;
    background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 37%, #ffffff 100%); */
    background-color: #74EBD5;
/* background-image: linear-gradient(90deg, #74EBD5 0%, #9FACE6 100%); */
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);


    color: black;
}
.box-b{
    background-color: #F4D03F;
background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);

    /* background-color: darkorange; */
    color: black;
}
.box-wrapper::after{
    display: block;
    clear:both;
    content: " ";

}
.feature1{
    /* border: 2px solid black; */
    padding:10px;

    background-color:#dce3c8

}
.feature1 .img{
    height:15rem;
    width:100%;
    border:5px dotted white;
   
    

}
.feature1  img{
    width:100%;
    height:100%;
    
}
/* ############################### About Page ############################# */
main .container1 .heading-top{
    padding-left: 5px;
    padding-bottom: 3px;
    margin:1.2rem 0;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: 500;
    border-bottom: 5px solid red;
    
}
main ul li{
    list-style: none;
    font-weight: 500;
    
}
main ul li::before{
    content: "✓ ";
    color: orangered;
    font-weight: 600;
}
.mainpara{
    font-weight: normal;
}

.list1{
    float:left;
    /* border: 2px solid black; */
    padding-left: 10%;
    width: 50%;
}
.list2{
    float:right;
    /* border: 2px solid black; */
    padding-right: 10%;
    padding-left: 20px;
    width:50%;
}

main .middle::after{
    display: block;
    clear:both;
    content:" ";
}
.middle{
    margin:2rem 0;
    
}
.lower-middle::after{
    display: block;
    clear:both;
    content:" ";
}
main .lower-middle div{
    float:left;
    /* border: 2px solid red; */
    margin:2rem 5rem;
    text-align: center;
    
}
.lower-middle div h1{
    font-weight: 700;
    text-transform: uppercase;
    color:#fc2403;

}
.lower-middle div i{
    text-align: center;
}


.lower-middle div h2{
    font-weight: 600;
    text-transform: capitalize;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 2px;
}


.footermiddle p{
    float:left;
    width:80%;
    /* border: 2px solid firebrick; */
    /* margin:0.2rem; */
    padding-left: 1rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-size: 2rem;
    
    
    
}
.footermiddle a{
    float:right;
    border:2.5px solid white;
    /* margin:0.2rem; */
    width:20%;
    font-size: 1.6rem;
    text-align: center;
    color:white;
    /* margin-right: 2rem; */
    font-weight: 600;
    font-size: 2rem;
    padding:0 1px;
    
}
main .container1 .footermiddle::after{
    display: block;
    clear: both;
    content:"";   
}
.footermiddle{
    /* border: 2px solid red; */
    background-color:#f02424;
    color:white;
    height:6rem;
    position: relative;
    font-family: cursive;
    margin-top: 3rem;
}
.footermiddle p{
    position: absolute;
    top:50%;
    left:40%;
    transform: translate(-50%,-40%);
}
.footermiddle a{
    position: absolute;
    top:68%;
    left:85%;
    transform: translate(-68%,-85%);

}
.end-foot{
    /* border: 3px solid red; */
    margin-top: 3rem;
    background-color: #212120;
}
.end-foot .middleicon i{
    display: block;
    /* border: 2px solid blue; */
    float:left;
    margin:2rem 2rem;
    color: white;
}
.middleicon::after{
    display: block;
    clear: both;
    content: " ";
}
.middleicon{
    margin-left:40%; 
    display: block;
    /* border:2px solid green;  */
 }
.textdiv{
    color:white;
    display: block;
    /* border:2px solid red;  */
    text-align: center;
    text-transform: uppercase;
}
/* ############################## Contact Page #################### */
.info{
    width:50%;
    font-weight: 700;
    -webkit-text-stroke: 1px black;
}


.form-1{
    width:50%;
    font-size: 1.6rem;
    color: black;
    font-weight: 700;
}
.form-1 input, textarea{
    width:100%;
}
.info img{
    display: inline-block;
    width:100%;
    height:400px;
    object-fit: cover;
}
.parents .info{
    float:left;
    /* border: 2px solid green; */
    height:100%;
    margin-top: 2.5rem;
    color:white;
    font-weight: 700;
    font-size: 1.5rem;

    /* padding:3px; */
}
.parents .form-1{
    float:right;
    /* border: 2px solid blue; */
    height: 100%;
    margin-top: 2.5rem;
    /* padding:3px; */
}
.parents::after{
    display: block;
    clear: both;
    content:" ";
    padding:3px;
}

.form-1{
    padding-left: 4rem;
    padding-right: 1rem;
}

.form-1 h2{
    font-size: 3rem;
    font-weight:700;
    border-bottom: 4px solid #f02424;
    text-transform: capitalize;
    font-family: cursive;
    padding-bottom: 1rem;
}
.form-1 p{
    font-family: cursive;
}
.form-1 label{
    font-size: 2rem;
    font-weight: 700;
    color:black;
    text-transform: capitalize;
    -webkit-text-stroke: 1px white;
    
}
 input:hover{
    background-color:lightcyan;
    color: black;
}
input[type="submit"]{
    margin:0 25%;
    width:50%;
    color: white;
    background-color:  #f02424;
    border: 2px solid white;
    border-radius: 2rem;
    cursor: pointer;
}
textarea{
    background: cornsilk;
}
.info div{
    margin:3rem 0;
    padding-top: 1.6rem;
}
.parents{
    background-image: linear-gradient(rgba(0,0,0,0),rgbs(0,0,0,0));
}
.backpic{
    height: 75%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: linear-gradient(rgb(0,0,0,0.1),rgb(0,0,0,0.1)),url("../Images/sean-pollock-PhYq704ffdA-unsplash.jpg");
}
.info p{
    font-size: 1.6rem;
}
.info i{
    color: #f02424;
}
.backpic .nav-bar{
    background-color: black;
}
/* ################# Media query############### */
@media (max-width:500px){
    html{
        font-size: 50%;
    }
     .nav-bar .logo,.nav-item{
        float:none;
        display: block;
        text-align: center;
        width: 100%;
    }
    .showcase .row{
        width: 100%;
    }
}
@media (max-width:300px){
    html{
        font-size: 50%;
    }
    .showcase .row p{
        font-size:40%;
    }
    .showcase .row{
        margin-left:0.3rem;
    }
    .feature1 p{
        font-size:50%;
    }
    
}
/* ############media query for about page############## */
@media (max-width:560px){
    html{
        font-size: 50%;
    }
    .footermiddle p{
        /* margin:1rem; */
        font-size: 100%;
        
    }
    .footermiddle a{
        /* margin:1rem; */
        font-size: 100%;
    }
    .lower-middle div,.middleicon i{
        float:none;
        display:block;
        width: 100%;
        text-align: center;
    }
    
}
@media (max-width:900px){
    .footermiddle p{
        /* margin:1rem; */
        font-size: 100%;
        
    }
    .footermiddle a{
        /* margin:1rem; */
        font-size: 100%;}
    }
/* ##############media query for contact us page################ */
@media (max-width:550px){
    html{
        font-size: 50%;
    }
    .parents .info,.parents .form-1{
        /* font-size: 50%;
        width:40%; */
        float: none;
        display: block;
        text-align: center;
        color:white;
        width:100%;

    }
    /* /* .parents .info p{
        margin-right:2rem;
        color:white;
        -webkit-text-stroke: none;

    }
    .form-1 p,.info p{
        font-size:70%;
    } */
}