@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');



*{
    scroll-behavior: smooth;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    
}



/**********************************************CONTACT US IMAGE*********************************************/
.imager{
    display:flex;
    justify-content: center;
    align-items: center;
    background-image:url(https://t4.ftcdn.net/jpg/02/12/88/93/360_F_212889356_poIFoaqJEWqHKjqA0Z88MsBHOVQKupHZ.jpg);
    background-size: cover;
    width: 99.5%;
    height: 50vh;
    margin-bottom: 4%;
    flex-direction: column;
    color: red;
    margin-left: .3%;
    position: relative;
}

.imager .holder{
    position: absolute;
    top: 70%;
    left:5%;
}

/**************************************OUR LOCATION*****************************************88*/
#locator{
    text-align: center;
    margin-bottom: 4%;
}


#locator iframe{
    width: 80%;
    height: 70vh;
}


/***************************************FEEDBACK/CONTACT US*********************************************************/
.feedback{
    display: flex;
    width: 100%;
    height: 70vh;
    flex-direction: row;
    margin-bottom: 5%;
    position: relative;
}

.feedback h3{
    margin-bottom: 5%;
}

.feedback #former{
    width: 100%;
    margin-left: 10%;
}

form .wide{
    width: 77%;
}

.feedback #contact{
    margin-top: .001%;
    width: 58%;
    margin-right: 10%;

}

.feedback #contact h3{
    margin-bottom: 7%;
    position: relative;
}

#para{
    margin-top: 10%;
}

@media screen and (max-width:768px) {
    .about{
        width: 100% !important;
        font-size: 22px !important;
        padding: 12px !important;
        margin-top: 0px !important;
    }

    .gaa{
        width: 100% !important;
    }

    .wide{
        width: 100% !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .wide-2{
        width: 100% !important;
        margin: 0px !important;
        padding: 15px;
    }

    .feedback{
        padding-bottom: 0px;
        height: 700px !important;
    }

    #contact{
        padding-left: 5%;
    }
}

.about{
    bottom: 1%;
    position: absolute;
    margin-top: 22%;
    text-align: center;
    width: 20%;
    border: 3px solid rgb(213, 79, 79) ;
    border-radius: 12px ;
    padding: .6% .1%;
    font-size: 126%;
    font-weight: bold;
    transition: .5s ease-in-out;
    background-color: transparent;
    color: rgb(213, 79, 79);
}
.about:hover{
    color: white;
    background-color: rgb(213, 79, 79);
    cursor: pointer;
}
a{
    text-decoration: none;
    color: black;
}


#icons{
    display: flex;
    width: 100%;
    height: 5vh;
    justify-content: center;
    align-items: center;
}



/********************************************MEDIA QUERIES [TABLETS]**********************************/
@media screen and (min-width:300px)  and (max-width:991px){
    
    .wrapper .border{
        width: 71%;
        margin-bottom: -20%;
        height: .2%;
    }
    
    .footer-wrapper{
        margin-top: 24%;
        position: relative;
        width: 70%;
        padding-top: 5%;     
        
        margin-left: -3%;  
    }
    
    
    .location{
        height: 1vh;
        margin-bottom: 0%;
        margin-top: 0%;
    }
    
    
    .gaa{
        width:50%;
    }
    
    .feedback{
        
        display: flex;
        width: 75%;
        height: 100vh;
        flex-direction: column;
        margin: 5% 5% 5% 9%;
        
    }
    
    .feedback #former h3{
        margin-top: 20%;
    }

    .feedback #former{
        width: 100%;
        margin-left: 10%;
        position: relative;
    }
    
    .feedback #former #para{
        margin-top: 30%;
        width: 100%;
    }

    #area-two, #area-one, #area-three{
        display: flex;
    }
    
    .feedback #former{
        width: 100%;
        margin-top: 5%;
        margin-left: 5%;
        margin-bottom: 5%;
        /* Important */
    }
    
    .wrapper{
        margin-top: 50%;
        height: 1%;
        padding-bottom: -50%;
    }
    
    #locator iframe{
        width: 75%;
        height: 70vh;
    }

    #icons{
        
        display: none;
    }

    .feedback #contact{
        margin-top: 0%;
        width: 100%;
        margin-right: 0%;
        margin-left: 4%;
    }
    
}