/* CSS Document */
@import url("fonts.css"); /* Page layout styles */
@import url("login.css"); /* Login styles */
@import url("alert-box.css"); /* Alert box styles */
@import url("custom.css"); /* Custom styles */
@import url("header.css"); /* Header styles */
@import url("msg-box.css"); /* Footer styles */
@import url("footer.css"); /* Footer styles */
@import url("color-codes.css"); /* Standard Color styles */
@import url("tabs.css"); /* Standard Color styles */
@import url("containers.css"); /* Standard Color styles */
.contact-us-breaker{
	background-color: #FDFBEE;
}
.cbb-text-cont{
	width: 100%;
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.cbb-text-cont h2{
	width: 100%;
	font-size: 1.5rem;
	color:#57B4BA;
	line-height: 1;
	text-align: center;
}
.cbb-text-cont span{
	font-size: 1.5rem;
	font-weight: 600;
	color:#C64F27;
	line-height: 1;
	text-align: center;
	display: block;
}
.contact-us-text-cont{
	width: 100%;
	max-width: 1000px;
	margin: 10px auto;
	padding: 50px 20px;
}
.contact-us-text-cont p{
	font-size: 1.0rem;
    line-height: 1.8;
	color: #555;
	margin-bottom: 20px;
}
.contacts-list-wrap{
    width: 100%;
    background-color: #EEA175;
    padding: 50px 15vw;
}
.contacts-list-cont{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:20px;
    justify-content: center;
    align-content: center;
}
.contacts-item{
    width: 100%;
    max-width: 330px;
    padding: 20px;
    text-align: center;
}
.ci-icon{
    width: 80px;
    height: 80px;
    margin: auto;
}
.ci-icon svg, .ci-icon svg path{
    width: 80px;
    height: 80px;
    fill: #001E1C;
}
.ci-contact-details{
    width: 100%;
}
.ci-cd-title{
    width: 100%;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.5rem;
    color: #001E1C;
}
.ci-cd-value{
    width: 100%;
    font-weight: 200;
    font-size: 0.875rem;
    line-height: 1.5em;
    color: #001E1C;
}
.contact-us-form-wrap{
    width:100%;
    max-width: 1000px;
    margin: 30px auto;
    padding:30px 0px;
}
.cu-send-btn{
    background-color: #C64F27;
    color:#FDFBEE;
}
.cu-send-btn:hover{
    background-color: #C64F27;
    color:#FDFBEE;
}
.cu-form-title-cont{
    width:100%;
    max-width: 1000px;
    margin: auto;
    padding:10px;
}
.cu-form-title{
    width: 100%;
    font-weight: 600;
    font-size: 1.5rem;
    color: #001E1C;
    padding: 0px 20px;
}
.cu-form-subtitle{
    width: 100%;
    font-size: 1.2rem;
    color: #57B4BA;
    padding: 0px 20px;
}
.cu-form-wrap{
    width: 100%;
    padding:20px;
}
.contact-us-map-wrap{
    width:100%;
    max-width: 1000px;
    margin: 5px auto;
    padding:30px 0px;
}
.cu-map-title{
    width: 100%;
    font-weight: 600;
    font-size: 1.5rem;
    padding:0px 20px;
    color:#001E1C;
}
.cu-map-subtitle{
    width: 100%;
    font-size: 1.2rem;
    padding:0px 20px;
    color:#57B4BA;
}
.cu-map-cont{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap:20px;
    align-items: center;
    justify-items: center;
    align-items: center;
}
.cu-map{
    width:100%;
    height: 400px;
}
.cu-direction-cont{
    width:30%;
}
.cu-dir-title{
    width: 100%;
    color:#57B4BA;
}
.cu-paw-wrap{
    width:100px;
    margin: auto;
    aspect-ratio: 1;
    position: relative;
}
.cu-paw{
    width: 100%;
    height: 100%;
    position:absolute;
}
@media screen and (min-width:767px) {
    .contact-us-breaker{
        background-color: #FDFBEE;
    }
    .cbb-text-cont{
        width: 100%;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .cbb-text-cont h2{
        width: 100%;
        font-size: 5.5rem;
        color:#57B4BA;
        line-height: 1;
        text-align: center;
    }
    .cbb-text-cont span{
        font-size: 5.5rem;
        font-weight: 600;
        color:#C64F27;
        line-height: 1;
        text-align: center;
        display: block;
    }
    .contact-us-text-cont{
        width: 100%;
        max-width: 1000px;
        margin: 10px auto;
        padding: 50px 0px;
    }
    .contact-us-text-cont p{
        font-size: 1.1rem;
        color: #555;
        margin-bottom: 20px;
    }
    .contacts-list-wrap{
        width: 100%;
        background-color: #EEA175;
        padding: 50px 15vw;
    }
    .contacts-list-cont{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap:20px;
        justify-content: center;
        align-content: center;
    }
    .contacts-item{
        width: 100%;
        max-width: 330px;
        padding: 20px;
        text-align: center;
    }
    .ci-icon{
        width: 100px;
        height: 100px;
        margin: auto;
    }
    .ci-icon svg, .ci-icon svg path{
        width: 100px;
        height: 100px;
        fill: #001E1C;
    }
    .ci-contact-details{
        width: 100%;
    }
    .ci-cd-title{
        width: 100%;
        font-weight: 400;
        font-size: 1.5em;
        line-height: 1.5em;
        color: #001E1C;
    }
    .ci-cd-value{
        width: 100%;
        font-weight: 200;
        font-size: 1.1em;
        line-height: 1.5em;
        color: #001E1C;
    }
    .contact-us-form-wrap{
        width:100%;
        max-width: 1000px;
        margin: 30px auto;
        padding:30px 0px;
    }
    .cu-send-btn{
        background-color: #C64F27;
        color:#FDFBEE;
    }
    .cu-send-btn:hover{
        background-color: #C64F27;
        color:#FDFBEE;
    }
    .cu-form-title-cont{
        width:100%;
        max-width: 1000px;
        margin: auto;
        padding:10px;
    }
    .cu-form-title{
        width: 100%;
        font-weight: 600;
        font-size: 2.3rem;
        color:#001E1C;
    }
    .cu-form-subtitle{
        width: 100%;
        font-size: 1.4rem;
        color:#57B4BA;
    }
    .cu-form-wrap{
        width: 100%;
        padding:0px;
    }
    .contact-us-map-wrap{
        width:100%;
        max-width: 1000px;
        margin: 30px auto;
        padding:30px 0px;
    }
    .cu-map-title{
        width: 100%;
        font-weight: 600;
        font-size: 2.3rem;
        color:#001E1C;
    }
    .cu-map-subtitle{
        width: 100%;
        font-size: 1.4rem;
        color:#57B4BA;
    }
    .cu-map-cont{
        width: 100%;
        display: flex;
        flex-direction: row;
        gap:20px;
        align-items: center;
        justify-items: center;
        align-items: center;
    }
    .cu-map{
        width:100%;
        height: 400px;
    }
    .cu-direction-cont{
        width:30%;
    }
    .cu-dir-title{
        width: 100%;
        color:#57B4BA;
    }
    .cu-paw-wrap{
        width:100px;
        margin: auto;
        aspect-ratio: 1;
        position: relative;
    }
    .cu-paw{
        width: 100%;
        height: 100%;
        position:absolute;
    }    
}