@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Be Vietnam Pro', sans-serif;
}


:root {
    --main-color: #FF8B00;
    --second-color: #804600;
    --header-color: #3C3C3C;
    --text-color: #6F6F6F;
    --box-hover-color: #F7941D;
    --contact-border-color: #7979795e;
}

/* header  */
.bottom_header .navbar-toggler {
    height: 55px;
    padding: 4px 6px;
    border-radius: 5px;
}

.bottom_header .navbar-toggler:focus {
    box-shadow: 0 0 1px 1px var(--main-color);
}

.top_header {
    background-color: var(--second-color);
    padding: 10px 0;
}

.header_icon {
    width: 18px;
    margin-left: 20px;
    transition: transform 0.3s ease;
}

.header_icon:hover {
    transform: scale(1.15);
}

.brand_logo {
    width: 25%;
}

.w-md-100 {
    width: 45%;
}

.bottom_header .collapse {
    width: 55%;
}

.bottom_header .navbar .nav-item .nav-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--second-color);
    transition: color 0.3s ease;
    padding: 13px 22px !important;
    white-space: nowrap;
}

.bottom_header .navbar .nav-item .nav-link.active,
.bottom_header .navbar .nav-item .nav-link:hover {
    color: var(--main-color);
}

.bottom_header .contact_btn {
    color: white !important;
    font-weight: 400 !important;
    background-color: var(--main-color);
    padding: 13px 22px !important;
    border-radius: 5px !important;
    transition: background-color 0.4s ease !important;
}

/* end header  */

/* home slider  */
.slider_icon {
    width: 55px;
    filter: drop-shadow(0 1px 5px rgba(128, 128, 128, 0.342));
}

.slider .carousel-control-next,
.slider .carousel-control-prev {
    opacity: 1 !important;
}

/* end home slider  */

/* home vision mission  */
@font-face {
    font-family: 'w12arthouse';
    src: url("../fonts/w12arthouse.ttf") format('ttf');
}

.mmfont {
    color: var(--main-color);
    font-weight: 700;
    margin-bottom: 30px;
    font-family: w12arthouse !important;
}

.main_header {
    color: var(--header-color);
    font-weight: 700;
    margin-bottom: 50px;
}

.v_m_icon {
    width: 55px;
}

.sub_header {
    color: var(--header-color);
    font-weight: 600;
    margin: 20px 0;
}

.all_text {
    color: var(--text-color);
    font-size: 14px;
    line-height: 27px;
    text-align: justify;
}

.read_more_btn {
    color: white;
    background-color: var(--main-color);
    padding: 13px 22px;
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    transition: background-color 0.4s ease;
}

.read_more_btn:hover,
.bottom_header .contact_btn:hover {
    background-color: var(--second-color) !important;
}

/* home vision mission  */

/* home page vision mission  */
.vision_mission {
    background-image: url(../images/person.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 800px;
}

/* end home page vision mission  */

/* featured_services  */
.img_box {
    background-color: #f2f2f2;
    text-align: center;
    padding: 60px 0;
    transition: background-color 0.4s ease;
}

.img_box:hover {
    background-color: var(--box-hover-color);
}

.img_box:hover img {
    /* filter: opacity(0.8) drop-shadow(0 0 white); */
    filter: brightness(0) invert(1);
}

.service_title {
    color: var(--header-color);
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    line-height: 27px;
    margin-top: 15px;
}

/* end featured_services  */

/* home activity  */
.activity_box {
    position: relative;
    display: block;
    cursor: pointer;
}

.activity_box .overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #3C3C3C80;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.activity_box .overlay i {
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    font-size: 25px;
    transform: translate(-50%, -50%);
}

.activity_box:hover .overlay {
    opacity: 1;
}

.owl-carousel img.owl_slider_icon {
    width: 40px;
    border-radius: 15px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.owl-nav {
    height: 0;

}

img.owl_slider_icon.owl-prev {
    position: absolute;
    top: 50%;
    left: -1.6%;
    transform: translate(0, -50%);

}

img.owl_slider_icon.owl-next {
    position: absolute;
    top: 50%;
    right: -1.6%;
    transform: translate(0, -50%);

}

.owl-carousel:hover .owl_slider_icon {
    opacity: 1;
}

.btn-closed {
    position: absolute;
    top: 4%;
    right: 2%;
    border: none;
    background-color: transparent;
}

.btn-closed i:before {
    background-color: var(--main-color);
    color: white;
    border-radius: 3px;
    padding: 2px;
    font-size: 20px;
}

/* end home activity  */

/* footer  */
footer {
    background-color: #f2f2f2;
}

.footer_logo {
    width: 12%;
}

.address_text {
    color: var(--header-color);
    font-size: 14px;
    font-weight: 400;
}

.footer_icon {
    width: 18px;
    margin: 0 10px;
    transition: transform 0.3s ease;
}

.footer_icon:hover {
    transform: scale(1.15);
}

.footer_nav {
    margin-bottom: 30px;
    list-style: none;
    padding: 0;
}

.footer_nav_link {
    font-size: 14px;
    text-decoration: none;
    color: var(--main-color);
    padding: 0 20px;
}

.text-hover a:hover {
    text-decoration: underline !important;
}

/* end footer  */

/* page banner  */
.header_position {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.banner_header {
    color: white;
    font-weight: 600;
    margin-bottom: 15px;
}

.breadcrumb-item {
    color: white;
    text-decoration: none;
    font-weight: 300;
    font-size: 15px;
}

.breadcrumb i::before {
    color: white;
    font-size: 11px;
    margin: 0 5px;
    vertical-align: middle;
    margin-bottom: 5px;
}

/* end page banner  */

/* contact us  */
.contact_icon {
    width: 60px;
    margin-right: 15px;
}

.address_header {
    font-weight: 600;
    color: var(--header-color);
}

.contact_text {
    color: var(--text-color);
    font-size: 14px;
    line-height: 27px;
}

.working_hour {
    color: var(--main-color);
    font-weight: 700;
    margin-bottom: 20px;
}

.hours {
    color: var(--header-color);
    padding-left: 3px;
}

.working_time_table tr td {
    color: var(--text-color);
    font-size: 14px;
    line-height: 30px;
}

.working_time_table tr td:first-child {
    padding-right: 15px;
}

.contact_us .form-control {
    padding: 10px 0;
    border: none;
    border-radius: 0;
    border-bottom: 2px solid var(--contact-border-color);
}

.contact_us .form-control,
.contact_us .form-control::placeholder {
    color: var(--text-color);
    font-size: 14px;
}

.contact_us .form-control:focus {
    box-shadow: none;
}

/* end contact us  */

/* fade effect  */
@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.page {
    animation-name: fade;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

/* end fade effect  */

/* media query responsive  */
@media screen and (max-width:1024px) {
    img.service_icon {
        width: 55px;
    }

    .img_box {
        padding: 45px 0;
    }

    .contact_icon {
        width: 55px;
        margin-right: 13px;
    }

    .address_header {
        font-size: 18px;
    }

    .contact_us .d-flex.pe-lg-4,
    .contact_us .d-flex.pe-lg-5 {
        padding-right: 0.5rem !important;
    }

    .contact_text {
        color: var(--text-color);
        font-size: 13px;
        line-height: 25px;
    }
}

@media screen and (max-width: 991px) {
    .w-md-100 {
        width: 100%;
    }

    .header_icon {
        width: 16px;
        margin-left: 16px;
    }

    .top_header {
        padding: 3px 0;
    }

    .brand_logo {
        width: 22%;
    }

    .bottom_header .navbar .nav-item .nav-link {
        font-size: 13px;
        padding: 7px 12px !important;
    }

    .bottom_header .contact_btn {
        display: inline-block;
        font-weight: 400 !important;
    }

    .banner_header {
        font-size: 27px;
        margin-bottom: 3px;
    }

    .breadcrumb-item {
        font-size: 13px;
    }

    .breadcrumb i::before {
        font-size: 9px;
        margin: 0 4px;
        margin-bottom: 8px;
    }

    .slider_icon {
        width: 35px;
    }

    .vision_mission {
        height: auto;
    }

    .mmfont {
        font-size: 33px;
        margin-bottom: 25px;
    }

    .main_header {
        margin-bottom: 30px;
        font-size: 25px;
    }

    .v_m_icon {
        width: 50px;
    }

    .sub_header {
        margin: 15px 0;
        font-size: 20px;
    }

    .all_text {
        font-size: 13px;
        line-height: 24px;
    }

    .img_box {
        padding: 60px 0;
    }

    img.service_icon {
        width: 70px;
    }

    .read_more_btn {
        padding: 10px 18px;
        font-size: 13px;
        border-radius: 4px;
    }

    .footer_logo {
        width: 17%;
    }

    .address_text {
        font-size: 13px;
    }

    .footer_icon {
        width: 17px;
        margin: 0px 9px;
    }

    .footer_nav_link {
        font-size: 13px;
        padding: 0px 17px;
    }

    .contact_icon {
        width: 45px;
        margin-right: 13px;
    }

    .address_header {
        font-size: 17px;
        margin-bottom: 5px;
    }

    .contact_text {
        font-size: 13px;
        line-height: 23px;
    }

    .working_hour {
        margin-bottom: 15px;
        font-size: 19px;
    }

    .working_time_table tr td {
        font-size: 13px;
        line-height: 27px;
    }

    .contact_us .form-control,
    .contact_us .form-control::placeholder {
        font-size: 13px;
    }

    .owl-carousel img.owl_slider_icon {
        width: 30px;
        border-radius: 10px;
    }

    img.owl_slider_icon.owl-prev {
        left: -2.4%;
    }

    img.owl_slider_icon.owl-next {
        right: -2.4%;
    }
}

@media screen and (max-width:575px) {
    .vision_mission {
        background-position: 65% 50%;
    }

    .bottom_header .collapse {
        padding-bottom: 10px;
    }

    .header_icon {
        width: 14px;
        margin-left: 14px;
    }

    .top_header {
        padding: 2px 0;
    }

    .navbar-toggler-icon {
        width: 1.3em;
        height: 1.3em;
    }

    .bottom_header .navbar-toggler {
        height: 45px;
        padding: 4px;
        border-radius: 3px;
    }

    .bottom_header .navbar .nav-item .nav-link {
        font-size: 12px;
        padding: 6px 9px !important;
        font-weight: 500;
    }

    .slider_icon {
        width: 30px;
    }

    .mmfont {
        font-size: 27px;
        margin-bottom: 22px;
    }

    .main_header {
        margin-bottom: 25px;
        font-size: 22px;
    }

    .v_m_icon {
        width: 47px;
    }

    .sub_header {
        margin: 12px 0;
        font-size: 18px;
    }

    .all_text {
        font-size: 13px;
        line-height: 23px;
    }

    .read_more_btn {
        padding: 8px 15px;
        font-size: 12px;
        border-radius: 3px;
    }

    .img_box {
        padding: 55px 0;
    }

    .service_title {
        font-size: 14px;
        line-height: 23px;
        margin-top: 10px;
    }

    .footer_logo {
        width: 27%;
    }

    .address_text {
        font-size: 12px;
    }

    .footer_icon {
        width: 16px;
        margin: 0px 9px;
    }

    .footer_nav_link {
        font-size: 12px;
        white-space: nowrap;
        padding: 0 10px;
    }

    .footer_nav {
        margin-bottom: 27px;
        flex-wrap: wrap !important;
    }

    nav.breadcrumb {
        line-height: 12px;
    }

    .banner_header {
        font-size: 20px;
        margin-bottom: 0;
        line-height: 20px;
    }

    .breadcrumb-item {
        font-size: 9px;
    }

    .breadcrumb i::before {
        font-size: 6px;
        margin: 0px 3px;
        margin-bottom: 4px;
    }

    .all_text {
        font-size: 12px;
        line-height: 23px;
    }

    .btn-closed i:before {
        font-size: 15px;
    }

    .contact_icon {
        width: 35px;
        margin-right: 10px;
    }

    .address_header {
        font-size: 15px;
        margin-bottom: 3px;
    }

    .contact_text {
        font-size: 12px;
        line-height: 22px;
    }

    .contact_us iframe {
        height: 330px;
    }

    .working_hour {
        margin-bottom: 13px;
        font-size: 18px;
    }

    .working_time_table tr td {
        font-size: 12px;
        line-height: 25px;
    }

    .contact_us .form-control,
    .contact_us .form-control::placeholder {
        font-size: 12px;
    }

    .contact_us .form-control {
        padding: 8px 0;
    }
}

@media screen and (max-width:380px) {
    .vision_mission {
        background-position: 63% 50%;
    }

    .brand_logo {
        width: 25%;
    }

    img.service_icon {
        width: 60px;
    }

    .img_box {
        padding: 50px 0;
    }
}

@media screen and (max-width:280px) {
    .navbar-toggler-icon {
        width: 1em;
        height: 1em;
    }

    .bottom_header .navbar-toggler {
        height: 30px;
        padding: 1px 1px 3px 1px;
        border-radius: 2px;
    }

    .bottom_header .navbar .nav-item .nav-link {
        font-size: 9px;
        padding: 4px 6px !important;
    }

    .bottom_header .contact_btn {
        border-radius: 3px !important;
    }

    .bottom_header nav.navbar {
        padding: 2px;
    }

    .header_icon {
        width: 12px;
        margin-left: 12px;
    }

    .top_header {
        padding: 0;
        padding-bottom: 1px;
    }

    .slider_icon {
        width: 22px;
    }

    .mmfont {
        font-size: 23px;
        margin-bottom: 20px;
    }

    .main_header {
        margin-bottom: 20px;
        font-size: 18px;
    }

    .v_m_icon {
        width: 40px;
    }

    .sub_header {
        margin: 10px 0;
        font-size: 15px;
    }

    .all_text {
        font-size: 11px;
        line-height: 20px;
    }

    .read_more_btn {
        padding: 7px 13px;
        font-size: 11px;
        border-radius: 3px;
    }

    .img_box {
        padding: 37px 0;
    }

    img.service_icon {
        width: 47px;
    }

    .service_title {
        font-size: 11px;
        line-height: 19px;
        margin-top: 5px;
    }

    .footer_logo {
        width: 30%;
    }

    .address_text {
        font-size: 10px;
    }

    .footer_icon {
        width: 14px;
        margin: 0px 8px;
    }

    .footer_nav_link {
        font-size: 10px;
        white-space: nowrap;
        padding: 0px 6px;
    }

    .footer_nav {
        margin-bottom: 20px;
    }

    .all_text {
        font-size: 9px;
        line-height: 17px;
    }

    .activity_box .overlay i {
        font-size: 20px;
    }

    .banner_header {
        font-size: 16px;
        line-height: 17px;
    }

    .breadcrumb-item {
        font-size: 8px;
    }

    .contact_icon {
        width: 30px;
        margin-right: 8px;
    }

    .address_header {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .contact_text {
        font-size: 11px;
        line-height: 16px;
    }

    .contact_us iframe {
        height: 300px;
    }

    .working_hour {
        margin-bottom: 12px;
        font-size: 16px;
    }

    .working_time_table tr td {
        font-size: 11px;
        line-height: 22px;
    }

    .contact_us .form-control {
        padding: 6px 0;
    }

    .contact_us .form-control,
    .contact_us .form-control::placeholder {
        font-size: 11px;
    }
}