@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');



* {

    padding: 0;

    margin: 0;

    box-sizing: border-box;

    font-family: 'Open Sans', sans-serif;

    list-style: none;

    text-decoration: none;

    scroll-behavior: smooth;

}

:root{

    --main-color: #0c2840;

    --text-color: #736357;

    --bg-color: #f2e6ce;

    --big-font: 6rem;

    --h2-font: 4.2rem;

    --p-font: 1.9rem;

}

html{

    font-size: 62.5%;

    overflow-x: hidden;

}

html::-webkit-scrollbar{

    width: .8rem;

}

html::-webkit-scrollbar-track{

    background: transparent;

}

html::-webkit-scrollbar-thumb{

    background: var(--text-color);

    border-radius: 5rem;

}

*::selection{

    background: var(--main-color);

    color: #fff;

}

body{

    color: var(--text-color);

    background: var(--bg-color);

}

header {

    position: fixed;

    width: 100%;

    top: 0;

    right: 0;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: transparent;

    padding: 25px 15%;

    background: var(--main-color);

    transition-duration: .7s;

}

.logo img{

    max-width: 100%;

    width: 60px;

    height: auto;

    border-radius: 5px;

    padding-top: 0;

    padding-bottom: 0;

}


#menu-icon{

    font-size: 4rem;

    cursor: pointer;

    display: none;

    color: #fff;

}

section{

    max-height: 100vh;

    padding: 5rem 15%;

}

.home{

    width: 100%;

    min-height: 90vh;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    padding-top: 100px;

    /* display: grid;

    grid-template-columns: repeat(2, 1fr);

    grid-gap: 1.5rem;

    align-items: center; */

}

.home-text{

    flex: 1 1 45rem;

}

.home-text h1{

    font-size: var(--big-font);

    color: var(--main-color);

}

.home-text h2{

    font-size: var(--h2-font);

    margin: 1rem 0 2rem;

}

.btn{

    display: inline-block;

    padding: 10px 30px;

    background: var(--main-color);

    color: #ffffff;

    border-radius: 5rem;

    font-size: 15px;

}

.btn:hover{

    transform: scale(1.2) translateY(0px);

    transition: .8s;
	

}

.mail{
	
	padding: 17px 10px;
	
}

.mail a{
	
	font-size: 2.3rem;
	
	color: var(--text-color);
	
	font-family: Courier, monospace;
	
	line-height: 2.3rem;
	
}

.mail a span{
	
	vertical-align: middle;
	
}

.mail:hover{
	
	transform: scale(1.05) translateX(5px);
	
	transition: .8s;
	
}

.mail a:hover{
	
	color: var(--main-color);
	
	transition: .8s;
	
}

.contact{

    background-color: var(--main-color);

}

.footer{

    padding: 10px 0;

}

.main{

    display: flex;

    flex-flow: wrap;

}

.col{

    width: 30%;

    padding-top: 20px;

}

.col h4{

    font-size: 1.5rem;

    color: var(--text-color);

    margin-bottom: 25px;

    position: relative;

}

.col h4::before{

    content: "";

    position: absolute;

    height: 2px;

    width: 50px;

    left: 0;

    bottom: -8px;

    background: var(--bg-color);

}

.col ul li:not(last-child){

    margin-bottom: 15px;

}

.col ul li a{

    color: #9897a9;

    font-size: 1.2rem;

    display: block;

    text-transform: capitalize;

    transition: .4s;

}

.col ul li address{

    color: #9897a9;

    font-size: 1.2rem;

    display: block;

    text-transform: capitalize;

    transition: .4s;

}

.col ul li a:hover{

    color: var(--text-color);

    transform: translateY(-12px);

}

.socialx{

    width: 320px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.socialx a{

    height: 40px;

    width: 40px;

    background: var(--main-color);

    color: #ffffff;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1.9rem;

    border-radius: 50%;

    transition: .4s;

}

.socialx a:hover{

    transform: scale(1.2);

    color: var(--bg-color);

    background: var(--text-color);

}



@media (max-width: 1140px){

    section{

        padding: 50px 8%;

    }

    

    .home{

        padding: 6rem auto;

    }

    .col{

        width: 50%;

        margin-bottom: 10px;

    }

}


@media (max-width: 768px){

    html{

        font-size: 50%;

    }

    #menu-icon{

        display: initial;

        color: #fff;

    }


    .home{

        padding: 5rem auto;

    }

    .socialx{

        padding: 60px auto;

    }

}

@media (max-width: 450px){

    html{

        font-size: 45%;

    }

    .socialx{

        padding: 30px auto;

    }

    header{

        background-color: transparent;

    }

}