/* Contact Us **************************************** */

.contact-header{
	height: 40vh;
}

.contact-icon {
	margin: -10vh auto 4vh auto;
	height: 20vh;
	width: 20vh;
	border-radius: 50%;
	display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
	background: var(--orange);
}

.contact-icon img{
	height: 10vh;
}

@media (max-width: 1023px) {  

.contact-button-hidden {
	visibility: hidden;
	pointer-events: none;
}

 }

.contact-heading {
    font-size: 25px;
    color: var(--darkgrey);
    font-weight: 600;
    margin-top: 3vh;
    text-align: center;
}

  .contact {
        width: 90%;
        margin: 0 5%;
    }

    .contact-us {
        width: 100%;
        height: auto;
        margin: 0 0 3vh 0;
		color: var(--lightgrey);
    }
	
	.contact-details {
	width: 100%;
    height: 55vh;
	background: var(--white);	
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	border-radius: 5px;	 
}


.contact-form{
	width: 100%;
    height: 55vh;
	background: var(--darkgrey); 
	border-radius: 5px;	
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	padding: 2vh;
}

.contact-details-left{
	flex-basis: 50%;
}

.contact-details-right{
	flex-basis: 50%;
	padding-left: 2vh;
}
  
  .contact-details-left img{
	width: 100%;
	height: 51vh;
	border-radius: 5px;
}

	.contact-us h1 {
    font-size: 3.5vw;
    color: var(--midgrey);
    margin-bottom: 1vh;
}

.contact-us h2 {
    font-size: 15px;
}

.contact-us h3 {
    font-size: 13px;
	font-weight: 400;
}

.contact-us h5 {
    font-size: 12px;
    margin-bottom: 4vh;
}

.contact-us h4 {
    font-size: 14px;
	font-weight: 400;
    margin-bottom: 2vh;
}

.contact-us i {
    width: 20px;
    height: 20px;
    font-size: 14px;
}

.contact-us a {
	color: var(--lightgrey);
    text-decoration: none;
    font-size: 14px;
}

.contact-us .social-links a {
    margin-top: 3vh;
	color: white;
}


@media (max-width: 1023px) {  
	.contact-details { 
    height: auto; 	 
}
 
.contact-form{ 
    height: auto; 
}

.contact-details-left{
	flex-basis: 100%;
}

.contact-details-right{
	flex-basis: 100%; 
}   
 
 }

/* Location **************************************** */

.google-map {
        width: 100%;
        height: 50vh;
		margin: auto auto;
    }

    .google-map iframe {
        width: 100%;
        height: 100%;
        border: none;
		border-radius: 4px;
    }

/* Why Choose Us ************************************************** */

.contact-benefits {
    height: 26vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 10vh 5%;
}

.contact-benefits div {
    height: 26vh;
    width: 23%;
    position: relative;
    overflow: hidden;
    padding: 10px;
    font-size: 12px;
    font-weight: 300;
    text-align: center;
    transition: 1s;
}

.contact-benefits div .benefit-icon {
	width: 10vh;
	height: 10vh;
	background: var(--teal);
	display: flex;
	align-items: center;
	justify-content: center;
    border-radius: 50%;
	border: none;
	margin: 2vh auto;
}

.contact-benefits div .benefit-icon img {
    width: 6vh;
    height: auto;
}

.contact-benefits div h2 {
    min-height: 4vh;
    font-size: 14px;
    color: var(--darkgrey);
    transition-delay: 1s;
    transition-duration: 1s;
    position: relative;
}

/* Contact Form **************************************** */

form {
        width: 100%;
    }
	
   form textarea,
    form input {
        width: 100%;
        border: 0;
        outline: none;
        background: #333333;
        color: var(--white);
        font-size: 13px;
        border-radius: 3px;
    }
	
	form input {
       height: 5vh;
	   padding-left: 15px;
	   margin-bottom: 2vh;
    }
	
    form textarea {
        height: 25vh;
		padding: 15px;
        resize: none;
		margin-bottom: 1vh;
    }
	
    form .input-box {
        display: flex;
        justify-content: space-between;
    }
   form .input-box .input-field {
        width: 49%;
    } 
	
	.submit-button{
    margin: 0 0 0 0;
	width: 24%;
	}
	
	.clear-button{
    margin: 0 0 0 0.5%;
	background: var(--white);
	color: var(--black);
	width: 24%;
    }