MainIndex.css

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 16px;
}

main{
    padding:2.5rem 5rem; /* All main elements which are the sections will have padding on top of the padding 60px left and right in the layout div*/
}

/*First Section - Hero*/
#heroDiv { /* FIRST SECTION HALF OF THE DIV*/
    background-color: white;
    width: 100%;
    height: 90vh;
    display: flex;
    flex-direction: row;
}

.hdiv1 { /* LEFT HALF OF THE DIV*/
    width: 50%;
    height: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.hdiv2 { /* RIGHT HALF OF THE DIV */
    width: 50%;
    height: 100%;
    background-color: white;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hdiv2 img{
    width:160%;  
    background-position:center; 
    background-repeat:no-repeat; 

}
.hdiv1 h4{
    width:75%;
    font-size:3rem; 
    text-align:left; 
}
.hdiv1 p {
    text-align:left; 
    width:75%; 
}
.hbdiv{
    width:75%;
    height:10%;
    display:flex; justify-content:left; align-items:center; 
}
#btn1{
    width:5rem; margin-right:1rem; 
    border-radius:0; 
}
#btn2 {
    width: 8rem;
    border-radius: 0;
}
/*Second Section */
#Div1 {
    background-color: white;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    padding: 4.75rem 5rem;
    align-items: center;
    justify-content: center;
}
.dd1 {
    width: 50%;
    height: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.dd2 {
    width: 50%;
    height: 100%;
    background-color: white;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.image2 {
        width: 120%;
        background-position: center;
        background-repeat: no-repeat;
    }
.dp1 {
    height: 6%;
    width: 75%;
}
.dp2 {
    width: 75%;
    height: 14%;
    margin:0; padding:0; 
}
.dh4 {
    width: 75%;
    height: 25%;
    font-size: 2.9rem;
}
.newsdiv {
    width: 75%;
    height: 45%;

    display:flex; flex-direction:row; 
}
.btndiv {
    width: 75%;
    height: 10%;

    display:flex; align-items:center; 
}
.nd1{
    width:50%; 
    height:100%; 
    display:flex; 
    flex-direction:column; 
    justify-content:space-around; 
    align-items:center; 
}
.nd1 h4{
    width:100%; 
    text-align:left; 
}
.nd2 {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align:left; 
}
.nd2 h4 {
    width: 100%;
    text-align: left;
}
#btn11 {
    border-radius: 0;
    margin-right: 1rem;
}
#btn22 {
    border-radius: 0;  
    border:0; 
}
div span{
    width:100%; 
    text-align:left; 
}
div span i{
    font-size:2rem;
}
/*Section 3 Starts */
#Div2 {
    width: 100%;
    height: 100vh;
    background-color: white;

    display: flex;
    flex-direction: column;
    padding: 4.75rem 5rem;
}
.d2d1{
    width:100%; 
    height:15%; 
    padding-bottom:0rem ; 
    display:flex; flex-direction:column; justify-content:center; align-items:center; 
}
.d2d1 p{
    margin:0 ; padding: 0rem 6rem ;
}
.d2d1 h4{
    font-size:2.9rem; 
}
.coldiv {
    width: 100%;
    height: 80%;

    padding:0.5rem 2rem; 
    display:flex; flex-direction:row; justify-content:space-around; align-items:center; 
}
.cdiv1 {
    height: 100%;
    width: 29%;
    display: flex;
    flex-direction: column;
    border:2px solid black; 
}
.cdd1 {
    width: 100%;
    height: 50%;
    background-color: black;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cdd1 img{
    background-position:center;    
    width:90%; 
}
.cdd2 {
    width: 100%;
    height: 50%;
    padding: 0.5rem;
}

.cdiv2 {
    height: 100%;
    width: 29%;
    border:2px solid black; 
}
.cdd21 {
    width: 100%;
    height: 50%;
    background-color: black;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cdd21 img {
    width:90%; 
    background-size: cover;
    background-position: center;
}
.cdd22 {
    width: 100%;
    height: 50%;
    padding:0.5rem; 
}
.cdiv3 {
    height: 100%;
    width: 29%;
    border:2px solid black; 
}
.cdd31 {
    width: 100%;
    height: 50%;
    background-color: black;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cdd31 img {
    width:90%; 
    background-size: contain;
    background-position: center;
}
.cdd32 {
    width: 100%;
    height: 50%;
    padding: 0.5rem;
}
.btnd2 {
    width: 100%;
    height: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btnd2 button{
    border-radius:0; 
}
/* FAQ section starts  */

#faq {
    width: 100%;
    min-height: 100vh; /* Min height is the minimum height that div has to be then if the content goes more than that it will grow */
    background-color: white;
    padding: 4.75rem 9rem;
}
.faqheader{
    font-size:3rem; 
}
.pheader{
    font-size:1.1rem; 
}
.psubhead {
    font-weight: bold;
    font-size: 1.1rem;
}
.phide{
    font-size:0.8rem; 
    display:inline-block; 
    cursor:pointer; 
}
.fdiv {
    padding: 0rem 25rem 0rem 0rem;
}
.dcontact{
    display:flex; flex-direction:column; 
}
.dcontact h4{
    font-size:1.8rem; 
}
.dcontact button{
    width:7rem; 
    border-radius:0; 
}
/* Footer section starts */
#footer{
    width:100%; 
    height:60vh; 
    background-color: white; 
    padding: 3.5rem 9rem 1.5rem 9rem;  

    display:flex; flex-direction:column; 
}
#f1{
    width:100%; 
    height:70%; 

    display:flex; flex-direction:row; 
}
#hr {
    width: 100%;
    height: 10%;
}

.logo {
    width: 15%;
    height: 100%;
}
.logo img{
    width:50%; 
}
.ref1 {
    width: 16%;
    height: 100%;
}
.ref2 {
    width: 16%;
    height: 100%;
}
.ref3 {
    width: 16%;
    height: 100%;
}
.ref1 h4, .ref2 h4, .ref3 h4,.em h4{
    font-size: 1.2rem;
}
.ref1 p, .ref2 p , .ref3 p {
    margin:0; 
    padding:0; 
}
.em{
    width:37%; height:100%; 
}
.emdiv{
    width:100%; 
    height:20%; 
    display:flex; flex-direction:row; justify-content:start; align-items:center; 
}
.em p:last-child{
    font-size:0.8rem; 
}
#email {
    width: 70%;
    height: 2.5rem;
    border-radius: 0;
    margin-right:1rem; 

}
#embtn {
    border-radius: 0;
    height: 2.5rem;
    width: 30%;
}
#f2 {
    width: 100%;
    height: 20%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.f2d1 {
    width:60%; 
    height:100%; 
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.f2d1 p{
    margin:0; 
    padding:0; 
}
.f2d1 p:nth-child(2), .f2d1 p:nth-child(3),.f2d1 p:nth-child(4) {
        text-decoration: underline;
        cursor:pointer; 
    }
.f2d2 {
    width: 14%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.f2d2 i{
    font-size:1.4rem;
    cursor:pointer; 
}

/* Time for media queries for responsive website design */
@media (max-width:1350px){
    *{
        font-size:15px; 
    }
    .dp1 {
        height: 5%;
        width: 75%;

    }

    .dp2 {
        width: 75%;
        height: 14%;
        margin: 0;
        padding: 0;
    }

    .dh4 {
        width: 75%;
        height: 26%;
        font-size: 2.7rem;
    }
    
}

@media (max-width:1200px){
    *{
        font-size:14px; 
    }
    #heroDiv {
        padding: 3.75rem 3.75rem; 
    }
   
    .dp1 {
        height: 4%;
        width: 75%;
    }

    .dp2 {
        width: 75%;
        height: 14%;
        margin: 0;
        padding: 0;
    }

    .dh4 {
        width: 75%;
        height: 27%;
        font-size: 2.7rem;
    }
    #Div1 {
        padding: 3.75rem 3.75rem;
    }

    #Div2 {
        padding: 3.75rem 0rem;
    }

    #faq {
        padding: 2.5rem 3.75rem;
    }
    #footer {
        padding: 3.5rem 3.75rem 1.5rem 3.75rem;
    }
    .fdiv {
        padding: 0rem 10rem 0rem 0rem;
    }
    .emdiv {
        width: 100%;
        height: 30%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }
    #email {
        width: 90%;
        height: 2.3rem;
        border-radius: 0;
        margin-right: 1rem;
    }

    #embtn {
        border-radius: 0;
        height: 2.3rem;
        width: 40%;
    }
    .cdiv1 {
        width: 31%;
    }
    .cdiv2 {
        width: 31%;
    }
    .cdiv3 {
        width: 31%;
    }
    .hdiv1 { /* LEFT HALF OF THE DIV*/
        
        align-items: start;
    }
    .dd1 {
        align-items: start;
    }
}

@media (max-width:800px){                    /* For Tablet sizes*/
    #heroDiv {
        background-color: white;
        width: 100%;
        height: 150vh;
        display: flex;
        flex-direction: column;
    }
    .hdiv1 { /* LEFT HALF OF THE DIV*/
        width: 100%;
        height: 30%;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        padding: 0rem 0rem;
    }

    .hdiv2 { /* RIGHT HALF OF THE DIV */
        width: 100%;
        height: 70%;
        background-color: white;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .cdiv1 {
        height: 100%;
        width: 40%;
    }
    .cdiv2 {
        height: 100%;
        width: 40%;
    }
    .cdiv3 {
        display:none; 
    }
    .hdiv1 h4 {
        width: 95%;
    }

    .hdiv1 p {
        width: 95%;
    }

    .dp2 {
        width: 95%;
        height: 14%;
        margin: 0;
        padding: 0;
    }

    .dh4 {
        width: 95%;
        height: 25%;
        font-size: 2.5rem;
    }

    .newsdiv {
        width: 95%;
        height: 45%;
        display: flex;
        flex-direction: row;
    }
}

@media (max-width:600px){
   
    .fdiv {
        padding: 0rem 1rem 0rem 0rem;
    }
    #heroDiv {
        width: 100%;
        height: 120vh;
       
    }
    .hdiv1 { /* LEFT HALF OF THE DIV*/
        width: 100%;
        height: 40%;

    }

    .hdiv2 { /* RIGHT HALF OF THE DIV */
        width: 100%;
        height: 60%;
    }
    #Div1 {
        background-color: white;
        width: 100%;
        height: 150vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding-top: 1.25rem; 
        padding-bottom: 1.25rem; 
    }

    .dd1 {
        width: 100%;
        height: 47%;
        display: flex;
        align-items: start;
        flex-direction: column;
    }

    .dd2 {
        width: 100%;
        height: 50%;
    }

    #Div2 {
        width: 100%;
        height: 200vh;
    }
    .coldiv {
        width: 100%;
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    .cdiv1 {
        height: 45%;
        width: 80%;
    }
    .cdiv2 {
        height: 45%;
        width: 80%;
    }
    #f2 {
        width: 100%;
        height: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;

    }

    .f2d1 {
        width: 100%;
        height: 100%;

    }
    .f2d2 {
        width: 40%;
        height: 100%;
    }

    #f1 {
        width: 100%;
        height: 70%;
    }
    .logo {
        width: 20%;
        height: 100%;
        display: none; 
    }

    .ref1 {
        width: 20%;
        height: 100%;

    }

    .ref2 {
        width: 20%;
        height: 100%;
    }

    .ref3 {
        width: 20%;
        height: 100%;
    }
    .em {
        width: 40%;
        height: 100%;
    }
    .ref1 h4, .ref2 h4, .ref3 h4,.em h4{
    font-size: 14px;
    } 
    .ref1 p, .ref2 p, .ref3 p {
        margin: 0;
        padding: 0;
        font-size: 11px;
    }

    #email {
        width: 100%;
        height: 2.4rem;
        border-radius: 0;
    }

    #embtn {
        border-radius: 0;
        height: 2.1rem;
        width: 55%;
    }
    .em p{
        font-size:11px; 
    }

}