:root {
	--bg-white: #ffffff;
	--bg-gray: #F6F6F9;
   --bg-card: #F4F7FA;
	--bg-red: #FE3447;
	--bg-green: #01C616;
	--bg-gray-dark: #586B7A;
	--bg-google-rating: #BFC6CE;
	--bg-gray-hover: #D6DEE8;
	--bg-red-hover: #C81E2F;
   --bg-dark-1: #5C7081;
	--rgb-red: 255, 51, 71;
	--text-black: #000000;
	--text-gray: #4d4d4d;
	--text-dark: #082c33;
	--text-light: #696969;
	--text-red: #FE3447;
   --text-white: #ffffff;


	/* titles */
	--title-md: 700 38px/40px "Urbanist", sans-serif;
	--title-lg: 700 48px/48px "Urbanist", sans-serif;
	--title-sm: 600 26px/36px "Urbanist", sans-serif;
	--title-xm: 600 20px/28px "Urbanist", sans-serif;
	--inter-title-md: 600 16px/28px "Inter", sans-serif;
	--inter-title-sm: 500 14px/20px "Inter", sans-serif;
	--inter-title-xm: 500 12px/16px "Inter", sans-serif;

	/* text */
	--text-md: 400 16px/26px "Inter", sans-serif;
	--text-sm: 400 14px/20px "Inter", sans-serif;
}


#banner{
   width: 100%;
   position: relative;
   padding: 20px 2px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   border-radius: 30px;
   background-color: var(--bg-white);
   overflow-x: hidden;
}

#banner .head{
   position: absolute;
   top: 20px;
   margin: 0;
}

#banner .head .title{
   box-sizing: border-box;
   width: fit-content;
   font: var(--title-md);
   font-size: 28px;
   color: var(--text-dark);
   text-align: center;
   text-transform: capitalize;
   padding: 20px;
   border-radius: 30px;
   background-color: var(--bg-white);
}

#banner .image .img{
   width: 100%;
   border-radius: 30px;
   height: 70vh;
   object-fit: cover;
   object-position: center;
}



#contact{
   padding: 0 2px 40px;
}

#contact .contact_wrapper{
   width: 100%;
   padding: 20px;
   border-radius: 30px;
   background-color: var(--bg-white);
}

#contact .title{
   text-align: start;
   font: var(--title-md);
   color: var(--text-dark);
}

#contact .sub_title{
   text-align: start;
   font: var(--title-xm);
   color: var(--text-dark);
}

#contact .text{
   text-align: start;
   font: var(--text-md);
   color: var(--text-dark);
}

#contact .map{
   overflow: hidden;
   border-radius: 30px;
   height: 500px;
}

#contact .map iframe{
   border-radius: 30px;
   height: 500px;
   max-width: 100%;
   overflow: hidden;
}


#contact .contact_card{
   padding: 20px 15px;
   border-radius: 20px;
   width: 100%;
   height: fit-content;
   background-color: var(--bg-white);
}

#contact .contact_card .card_image{
   width: 100%;
   height: 220px;
   object-fit: cover;
   object-position: center;
   border-radius: 20px;
}

#contact .contact_card .btn{
   font: var(--title-xm);
   color: var(--text-white);
   font-weight: 400;
   display: block;
   width: 100%;
   background-color: var(--bg-red);
   text-align: center;
   border-radius: 20px;
   padding: 20px;
}
#contact .contact_card .btn:hover{
   background-color: var(--bg-red-hover);
}

#contact .contact_card .body{
   font: var(--title-xm);
   font-size: 16px;
   font-weight: 500;
}

#contact .contact_card .item{
   font: var(--title-xm);
   font-size: 16px;
   font-weight: 400;
}

#contact .contact_card .value{
   font: var(--title-xm);
   font-size: 16px;
   font-weight: 500;
}

#contact .contact_card a.value{
   color: var(--text-red);
   text-decoration: underline;
}




@media (min-width: 1024px) {

#banner{
   padding: 100px 20px 20px;
}

#banner .head{
   top: 50px;
}

#banner .head .title{
   font: var(--title-md);
   font-size: 34px;
   padding: 50px 150px;
   box-shadow: 0 0px 1px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
}

#banner .image{
   width: 100%;
}

#banner .image .img{
   width: 100%;
   height: 70vh;
}



#contact{
   padding: 50px 150px;
}

#contact .contact_wrapper{
   padding: 20px;
   width: 65%;
}

/* #contact .info{
   width: 100px;
} */

#contact .title{
   font: var(--title-md);
}

#contact .info{
   width: 30%;
   padding-right: 20px;
}   

#contact .sub_title{
   font: var(--title-xm);
   font-weight: 600;
}

#contact .text{
   font: var(--text-md);
}

#contact .map{
   width: 100%;
   border-radius: 20px;
   height: 500px;
}

#contact .map iframe{
   border-radius: 20px;
   height: 500px;
   width: 100%;
}


#contact .contact_card{
   width: 32%;
   height: fit-content;
}

}