@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');


:root{
    --main-color : #821F40;
    --second-color : #04765F;
    --trid-color : #05264E;
    --black-color : #000000;
    --text-color : #5D6F7D;
    --White-color : #FFFFFF;
    --White-color1 : #EFF0ED;
}


*{
    font-family: "Jost", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
    text-decoration: none;
    transition: all .5s cubic-bezier(.35, 1.14, .26, 1.24);
}




::-webkit-scrollbar{
    width: 0.8rem;
    background: var(--White-color);
    /* z-index: -1; */
    
}


::-webkit-scrollbar-thumb{
    width: 0.8rem;
    background: var(--main-color);
    border-radius: 5rem;
}

*::selection{
    background: var(--main-color);
    color: #fff;
}

section{
    padding: 7rem 9%;
    background-color: var(--White-color);
    
}

footer{
    padding: 7rem 9%;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
}


body{
    overflow-x: hidden;
}

/* box-shadow 

box-shadow:  18px 18px 30px #f2f2f2,
             -18px -18px 30px #ffffff;
    
*/








/* Header Section */

.headerNavber{
    position: fixed;
    width: 100%;
    padding: 1.5rem 9%;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    border-bottom: 1px solid #a3a2a269;
}

.headerNavber.active{
    background-color: var(--main-color);
    padding: 1rem 9%;
    box-shadow: 20px 0px 20px 0px rgba(92, 92, 92, 0.2);
    border-bottom: none;
}



.headerNavber .logo{
    width: 12%;
    height: 12%;
}


.headerNavber .logo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.logo1{
    display: none;
}



.headerNavber .navBers{
    display: flex;
    margin-right: auto;
}


.headerNavber .navBers .nav_menu{
    display: flex;
    list-style: none;
}


.headerNavber .navBers .nav_menu .nav_list{
    margin-left: 3rem;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
}

.headerNavber .navBers .nav_menu .nav_list a{
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--White-color);
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}





.headerNavber .headerBtn{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.headerNavber .headerBtn .header_login{
    padding: 1.3rem 2rem;
    text-decoration: none;
    background-color: var(--White-color);
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--trid-color);
}




.headerNavber .navBers .nav_menu .nav_list .dropDown{
    position: absolute;
    top: 40px;
    left: 0;
    width: 250px;
    border: 1px solid #ccccccad;
    list-style: none;
    background-color: var(--White-color);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    opacity: 0;
    visibility: hidden;
    padding-top: 2rem;
    transition: all 0.3s linear;
}


.headerNavber .navBers .nav_menu .nav_list:hover .dropDown{
    opacity: 1;
    visibility: visible;
}


.headerNavber .navBers .nav_menu .nav_list .dropDown li{
    border-bottom: 1px solid #a3a2a269;
    padding-bottom: 1.5rem;
    position: relative;
}


.headerNavber .navBers .nav_menu .nav_list .dropDown li:last-child{
    border-bottom: 1px solid #ffffff;
    padding-bottom: 0rem;
}


.headerNavber .navBers .nav_menu .nav_list .dropDown li a{
    transition: all 0.3s ease;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--trid-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.headerNavber .navBers .nav_menu .nav_list .dropDown li a:hover{
    margin-left: 1rem;
}



/* subDropdown */

.headerNavber .navBers .nav_menu .nav_list .dropDown li .subdropDown{
    position: absolute;
    top: 0px;
    left: 220px;
    width: 250px;
    border: 1px solid #ccccccad;
    list-style: none;
    background-color: var(--White-color);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    opacity: 0;
    visibility: hidden;
    padding-top: 2rem;
    transition: all 0.3s linear;
}


.headerNavber .navBers .nav_menu .nav_list .dropDown li:hover .subdropDown{
    opacity: 1;
    visibility: visible;
}




/* navDropdown1 */

.headerNavber .navBers .nav_menu .nav_list .navDropdown1{
    position: absolute;
    top: 40px;
    left: 0;
    width: 250px;
    background-color: var(--White-color);
    border-radius: 5px;
    border: 1px solid #66666648;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    list-style: none;
    padding: 1rem;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s linear;
}


.headerNavber .navBers .nav_menu .nav_list:hover .navDropdown1{
    visibility: visible;
    opacity: 1;
}


.headerNavber .navBers .nav_menu .nav_list .navDropdown1 li{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.headerNavber .navBers .nav_menu .nav_list .navDropdown1 li:hover{
    box-shadow: 0 5px 10px rgba(104, 195, 231, 0.2);
}


.headerNavber .navBers .nav_menu .nav_list .navDropdown1 li i{
    padding: 1.5rem;
    background-color: #f0eeee93;
    border-radius: 8px;
    font-size: 2rem;
    color: #04b64e;
}

.headerNavber .navBers .nav_menu .nav_list .navDropdown1 li .fa-hotel{
    padding: 1.5rem;
    background-color: #f0eeee93;
    border-radius: 8px;
    font-size: 2rem;
    color: #f1c40f;
}


.headerNavber .navBers .nav_menu .nav_list .navDropdown1 li .fa-plane{
    padding: 1.5rem;
    background-color: #f0eeee93;
    border-radius: 8px;
    font-size: 2rem;
    color: #c0392b;
}


.headerNavber .navBers .nav_menu .nav_list .navDropdown1 li .fa-eye{
    padding: 1.5rem;
    background-color: #f0eeee93;
    border-radius: 8px;
    font-size: 2rem;
    color: #8e44ad;
}


.headerNavber .navBers .nav_menu .nav_list .navDropdown1 li .fa-person-walking-luggage{
    padding: 1.5rem;
    background-color: #f0eeee93;
    border-radius: 8px;
    font-size: 2rem;
    color: #2980b9;
}


.headerNavber .navBers .nav_menu .nav_list .navDropdown1 li .navDropdown1_text h3{
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--trid-color);
    margin-bottom: 0.5rem;
}


.headerNavber .navBers .nav_menu .nav_list .navDropdown1 li .navDropdown1_text p{
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}




.headerNavber .closebtn{
    display: none;
}

.headerNavber .menubtn{
    display: none;
}


.headerBtn1{
    display: none;
}




/* header section media queries */

@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }


    /* Header Section */

    .headerBtn1{
        display: block;
        text-align: center;
        margin-top: 2rem;
    }


    .headerNavber.active{
        background-color: var(--main-color);
        padding: 2rem 9%;
        box-shadow: 20px 0px 20px 0px rgba(92, 92, 92, 0.2);
        border-bottom: none;
    }
    

    .headerBtn1  .header_login{
        padding: 1.3rem 2rem;
        text-decoration: none;
        background-color: var(--trid-color);
        border-radius: 8px;
        font-size: 1.5rem;
        font-weight: 500;
        color: var(--White-color);
    }

    .headerNavber .headerBtn{
        display: none;
    }

    .logo1{
        display: block;
        position: absolute;
        top: 30px;
        left: 20px;
    }

    .logo1 img{
        width: 50%;
        height: 50%;
        object-fit: cover;
    }

    .headerNavber .navBers .nav_menu .closebtn{
        display: block;
        position: absolute;
        right: 10px;
        top: 30px;
    }


    #dropMenu2.active{
        transform: rotate(180deg);
    }

    #dropMenu1.active{
        transform: rotate(180deg);
    }

    #dropMenu.active{
        transform: rotate(180deg);
    }

    #navdropMenu.active{
        transform: rotate(180deg);
    }

    .headerNavber .navBers .nav_menu .closebtn i{
        font-size: 2.5rem;
        color: var(--main-color);
        padding: 1rem 1.3rem;
        background-color: #FFE6E5;
        border-radius: 100%;
    }

    .headerNavber .menubtn{
        display: block;
    }

    .headerNavber .menubtn.hide{
        display: none;
    }

    .headerNavber .menubtn i{
        font-size: 3rem;
        color: var(--White-color);
    }


    .headerNavber .logo{
        width: 40%;
        height: 40%;
    }
    
    
    .headerNavber .logo img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }




    .headerNavber .navBers .nav_menu{
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        border-right: 2px solid #a3a2a269;
        height: 100vh;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0rem;
        padding-left: 2rem;
        padding-right: 1rem;
        padding-top: 10rem;
        overflow: scroll;
        transition: all 0.8s ease;
    }

    .headerNavber .navBers .nav_menu.active{
        left: 0;
    }

    .headerNavber .navBers .nav_menu .nav_list{
        margin-left: 0rem;
        border-bottom: 1px solid #66666648;
        padding-bottom: 2rem;
        
    }

    .headerNavber .navBers .nav_menu .nav_list a{
        font-size: 1.8rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--trid-color);
    }



    .headerNavber .navBers .nav_menu .nav_list .dropDown{
        position: relative;
        top: 0%;
        left: 0;
        width: 100%;
        margin-top: 0rem;
        background-color: transparent;
        box-shadow: none;
        border: none;
        padding: 0rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        opacity: 0;
        visibility: hidden;
        max-height: 0px;
        padding-top: 0rem;
        overflow: hidden;
        transition: all 0.5s ease;
    }

    .headerNavber .navBers .nav_menu .nav_list .dropDown.active{
        max-height: 450px;
        opacity: 1;
        visibility: visible;
        padding-top: 1rem;
        top: 10px;
    }


    .headerNavber .navBers .nav_menu .nav_list .dropDown li #dropDown_text{
        border-top: 1px solid var(--text-color);
        padding-top: 2rem;
    }





    /* navDropdown1 */
    .headerNavber .navBers .nav_menu .nav_list .navDropdown1{
        position: relative;
        top: 0%;
        left: 0;
        width: 100%;
        margin-top: 0rem;
        background-color: transparent;
        box-shadow: none;
        border: none;
        padding: 0rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        opacity: 0;
        visibility: hidden;
        max-height: 0px;
        padding-top: 0rem;
        overflow: hidden;
        transition: all 0.5s ease;
    }

    .headerNavber .navBers .nav_menu .nav_list .navDropdown1.active{
        max-height: 450px;
        opacity: 1;
        visibility: visible;
        padding-top: 1rem;
        top: 10px;
    }



    /* Sub dropDown */
    .headerNavber .navBers .nav_menu .nav_list .dropDown li .subdropDown{
        position: relative;
        top: 0%;
        left: 30px;
        width: 100%;
        margin-top: 0rem;
        background-color: transparent;
        box-shadow: none;
        border: none;
        padding: 0rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        opacity: 0;
        visibility: hidden;
        max-height: 0px;
        padding-top: 0rem;
        overflow: hidden;
        transition: all 0.5s ease;
    }

    .headerNavber .navBers .nav_menu .nav_list .dropDown li .subdropDown.active{
        max-height: 450px;
        opacity: 1;
        visibility: visible;
        padding-top: 1rem;
        top: 5px;
    }



}















/* Hero section */


.hero_section{
    background-image: url(./images/hero-img1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
}


.hero_container .hero_row{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    height: 80vh;
    text-align: center;
}


.hero_container .hero_row .hero_box h1{
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--White-color);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.hero_container .hero_row .hero_box h1 span{
    position: relative;
}

.hero_container .hero_row .hero_box h1 span span{
    position: absolute;
    top: 25px;
    right: 4px;
}

/* .hero_container .hero_row .hero_box h1 span::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: var(--White-color);
} */


.hero_container .hero_row .hero_box p{
    font-size: 2rem;
    font-weight: 300;
    color: var(--White-color);
    line-height: 1.5;
    margin-bottom: 3rem;
}


.booking_box{
    margin-top: 1rem;
}

.booking_box .booking_box_btns{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 5rem;
}


.booking_box .booking_box_btns .tabs_link{
    padding: 1.1rem 1.8rem;
    background-color: #ffffff36;
    text-decoration: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    border-radius: 5px;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--White-color);
    transition: all 0.3s ease;
}

.booking_box .booking_box_btns .tabs_link.active{
    padding: 1.1rem 1.8rem;
    background-color: #ffffff;
    text-decoration: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    border-radius: 5px;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--main-color);
    transition: all 0.3s ease;
}



.booking_box .booking_form{
    padding: 2rem;
    width: 100%;
    height: 100%;
    background-color: var(--White-color);
    border-radius: 10px;
    display: none;
}

.booking_box .booking_form.active{
    display: block;
}


.booking_box .booking_form form{
    display: flex;
    align-items: center;
    gap: 2rem;
}


.booking_box .booking_form form .booking_form_input{
    width: 100%;
    height: 100%;
}


.booking_box .booking_form form .booking_form_input select{
    width: 100%;
    height: 55px;
    outline: none;
    border: 1px solid #a3a2a269;
    border-radius: 5px;
    padding-left: 2rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--trid-color);
    transition: all 0.3s ease;
}

.booking_box .booking_form form .booking_form_input select:focus{
    border-color: var(--main-color);
}

.booking_box .booking_form form .booking_form_input select option{
    color: var(--text-color);
}



.booking_box .booking_form form .booking_form_input input{
    width: 100%;
    height: 55px;
    outline: none;
    border: 1px solid #a3a2a269;
    border-radius: 5px;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--trid-color);
    transition: all 0.3s ease;
}

.booking_box .booking_form form .booking_form_input input:focus{
    border-color: var(--main-color);
}



.booking_box .booking_form form .booking_form_btn{
    width: 40%;
    height: 55px;
    background-color: var(--main-color);
    border-radius: 5px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.booking_box .booking_form form .booking_form_btn a{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--White-color);
}

.booking_box .booking_form form .booking_form_btn a i{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--White-color);
}





@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }


    .hero_section{
        background-image: url(./images/hero-img1.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 170vh;
    }


    .hero_container .hero_row{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        width: 100%;
        height: 150vh;
        text-align: center;
    }
    
    
    .hero_container .hero_row .hero_box h1{
        font-size: 3.5rem;
        font-weight: 700;
        color: var(--White-color);
        line-height: 1.3;
        margin-bottom: 1rem;
    }
    
    
    .hero_container .hero_row .hero_box h1 span span{
        display: none;
    }


    .hero_container .hero_row .hero_box p{
        font-size: 1.5rem;
        font-weight: 300;
        color: var(--White-color);
        line-height: 1.5;
        margin-bottom: 3rem;
    }


    .booking_box .booking_box_btns{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        margin-bottom: 5rem;
    }


    .booking_box .booking_form form{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2rem;
    }



}












/* Banner section */

.banner_container .banner_row{
    align-items: center;
}

.banner_container .banner_row .banner_box{
    padding-left: 2rem;
}


.banner_container .banner_row .banner_box .banner_content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    background-color: var(--White-color);
    padding: 1rem;
    border: 4px dotted #DEE2E6;
    border-radius: 10px;
    cursor: pointer;
}

.banner_container .banner_row .banner_box .banner_content .banner_img{
    width: 35%;
    height: 35%;
    position: relative;
}


.banner_container .banner_row .banner_box .banner_content .banner_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.banner_container .banner_row .banner_box .banner_content .banner_img h4{
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0.5rem 1.5rem;
    background-color: var(--main-color);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--White-color);
    border-radius: 5px;
}


.banner_container .banner_row .banner_box .banner_content .banner_text h2{
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 0.5rem;
}


.banner_container .banner_row .banner_box .banner_content .banner_text p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.banner_container .banner_row .banner_box .banner_content .banner_text p span:first-child{
    border-left: 1px solid #ffffff;
    padding-left: 0rem;
}

.banner_container .banner_row .banner_box .banner_content .banner_text p span{
    border-left: 1px solid #a3a2a269;
    padding-left: 0.5rem;
}



.banner_container .banner_row .banner_box .banner_content .banner_text h3{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--trid-color);
}

.banner_container .banner_row .banner_box .banner_content .banner_text h3 span{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
}








@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }

    .banner_container .banner_row .banner_box{
        padding-left: 0rem;
        margin-bottom: 3rem;
    }


}












/* Hotel Booking section */

.heading{
    text-align: center;
    margin-bottom: 8rem;
}


.heading h1{
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 1rem;
}


.heading p{
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-color);
}



.hotel_container .hotel_row .hotel_box{
    padding-left: 2rem;
    margin-bottom: 4rem;
}



.hotel_container .hotel_row .hotel_box .hotel_content{
    border: 1px solid #DEE2E6;
    border-radius: 15px;
}



.hotel_container .hotel_row .hotel_box .hotel_content .hotel_img{
    overflow: hidden;
    position: relative;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    transition: all 0.3s linear;
}

.hotel_container .hotel_row .hotel_box .hotel_content .hotel_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s linear;
}

.hotel_container .hotel_row .hotel_box .hotel_content:hover .hotel_img img{
    transform: scale(1.1);
}


.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text{
    padding: 1.5rem;
}


.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text .hotel_title{
    margin-bottom: 2rem;
}

.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text .hotel_title h1{
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 0.5rem;
}


.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text .hotel_title p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
}


.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text h3{
    padding: 1rem;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--second-color);
    background-color: #06ffcd36;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 1rem;
}


.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text .hotel_icon{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
}

.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text .hotel_icon p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 0rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text .hotel_icon p i{
    color: #48AD7E;
}


.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text .hotel_btns{
    display: flex;
    justify-content: space-between;
    align-items: center;
}




.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text .hotel_btns .hotel_btns_text h4{
    padding: 0.5rem 1rem;
    background-color: var(--second-color);
    border-radius: 5px;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--White-color);
    display: inline-block;
}


.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text .hotel_btns .hotel_btns_text h1{
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 0.5rem;
}


.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text .hotel_btns .hotel_btns_text h1 span{
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: line-through;
}


.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text .hotel_btns .hotel_btns_text p{
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-color);
}


.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text .hotel_btns .hotel_btns_text1{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}


.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text .hotel_btns .hotel_btns_text1 h5{
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--trid-color);
    line-height: 1.5;
}

.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text .hotel_btns .hotel_btns_text1 h5 span{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.5;
}

.hotel_container .hotel_row .hotel_box .hotel_content .hotel_text .hotel_btns .hotel_btns_text1 a{
    padding: 11px 10px;
    background-color: var(--main-color);
    border-radius: 5px;
    text-decoration: none;
    color: var(--White-color);
    font-size: 1.5rem;
    font-weight: 400;
}



@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }

    .heading h1{
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--trid-color);
        margin-bottom: 1rem;
    }
    
    
    .heading p{
        font-size: 1.5rem;
        font-weight: 400;
        color: var(--text-color);
    }

    .banner_container .banner_row .banner_box{
        padding-left: 0rem;
        margin-bottom: 3rem;
    }



    .hotel_container .hotel_row .hotel_box{
        padding-left: 0rem;
        margin-bottom: 3rem;
    }

}








/* Location section */

.location_section{
    background-color: #F1F5F8;
}



.location_container .location_row .location_box{
    padding-left: 1.5rem;
    margin-bottom: 2.5rem;
}


.location_container .location_row .location_box .location_img{
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
}


.location_container .location_row .location_box .location_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s linear;
}


.location_container .location_row .location_box .location_img:hover img{
    transform: scale(1.1);
}


.location_container .location_row .location_box .location_img .location_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0000004f;
    z-index: 2;
}


.location_container .location_row .location_box .location_img .location_text{
    position: absolute;
    left: 20px;
    bottom: 25px;
    z-index: 3;
}

.location_container .location_row .location_box .location_img .location_text h1{
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--White-color);
    margin-bottom: 0.5rem;
}


.location_container .location_row .location_box .location_img .location_text p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--White-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}


/* .location_container .location_row .location_box .location_img .location_text p span{
    border-left: 1px solid #fff;
    padding-left: 1rem;
} */

.location_container .location_row .location_box .location_img .location_text p span{
    position: relative;
}

.location_container .location_row .location_box .location_img .location_text p span::before{
    content: "";
    position: absolute;
    bottom: 5px;
    left: -8px;
    width: 1%;
    height: 10px;
    background-color: var(--White-color);
}





@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }


    .location_container .location_row .location_box{
        padding-left: 0rem;
        margin-bottom: 3rem;
    }


}











/* international Section */

.international_container .international_row .international_box{
    padding-left: 1rem;
    margin-bottom: 3rem;
}

.international_container .international_row .international_box .international_content{
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}



.international_container .international_row .international_box .international_content .international_img{
    position: relative;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}


.international_container .international_row .international_box .international_content .international_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s linear;
}

.international_container .international_row .international_box .international_content:hover .international_img img{
    transform: scale(1.1);
}


.international_container .international_row .international_box .international_content .international_text{
    padding: 1.5rem;

}

.international_container .international_row .international_box .international_content .international_text h1{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}


.international_container .international_row .international_box .international_content .international_text p{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 3rem;
}


.international_container .international_row .international_box .international_content .international_text p span{
    border-left: 1px solid #a3a2a269;
    padding-left: 1rem;
}

.international_container .international_row .international_box .international_content .international_text h3{
    text-align: end;
    font-size: 2rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 2rem;
}

.international_container .international_row .international_box .international_content .international_text h3 span{
    text-align: end;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
}


.international_btns{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
}

.btns1{
    padding: 12px 35px;
    background-color: var(--main-color);
    border-radius: 5px;
    color: var(--White-color);
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.btns1::before{
    content: "";
    position: absolute;
    width: 30%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 .3em rgba(255, 255, 255, 0.1);
    left: 0;
    top: 0;
    transform: skew(-45deg) translateX(530%);
    transition: 500ms ease-in-out transform;
}


.btns1:hover:before{
    transform: skew(-45deg) translateX(-130%);
}










@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }



    .international_container .international_row .international_box{
        padding-left: 0rem;
        margin-bottom: 2.5rem;
    }


}





/* Video section */

.video_section{
    background-image: url(./images/video-bg-img.webp);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 60vh;
}

.video_ovarlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0000008e;
}

.video_btns{
    position: absolute;
    top: 38%;
    left: 48%;
}

.video_btns .pulse{
    width: 80px;
    height: 80px;
    background: transparent;
    border-radius: 100px;
    display: grid;
    place-items: center;
}


.video_btns .pulse img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
}


.video_btns .pulse img:hover{
    transform: scale(1.1);
}


.video_btns .pulse:before,
.video_btns .pulse:after{
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: var(--main-color);
    border-radius: 100%;
    z-index: 2;
    opacity: 0.7;
}

.video_btns .pulse:before{
    animation: pulse 2s ease-out infinite;
}

.video_btns .pulse:after{
    animation: pulse 2s 1s ease-out infinite;
}


@keyframes pulse{
    100%{
        transform: scale(2.2);
        opacity: 0;
    }
}







@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }


    .video_section{
        background-image: url(./images/video-bg-img.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        width: 100%;
        height: 80vh;
    }


    .video_btns{
        position: absolute;
        top: 50%;
        left: 43%;
    }
    
    .video_btns .pulse{
        width: 70px;
        height: 70px;
        background: transparent;
        border-radius: 100px;
        display: grid;
        place-items: center;
    }



}    










/* Reviews section */
.review_section{
    background-color: #F1F5F8;
}


.review_container .review_row .review_box{
    padding-left: 1rem;
}

.review_container .review_row .review_box .review_content{
    padding: 1.5rem;
    background-color: var(--White-color);
    border-radius: 10px;
    border: 1px solid #DEE2E6;
}

.review_container .review_row .review_box .review_content .review_title{
    display: flex;
    justify-content: space-between;
    align-items: normal;
}

.review_container .review_row .review_box .review_content .review_title .review_img{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    width: 100%;
    height: 100%;
}


.review_container .review_row .review_box .review_content .review_title .review_img img{
    width: 30%;
    height: 30%;
    object-fit: cover;
    border-radius: 5px;
}


.review_container .review_row .review_box .review_content .review_title .review_img .review_img_text h1{
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 0.3rem;
}

.review_container .review_row .review_box .review_content .review_title .review_img .review_img_text p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}


.review_container .review_row .review_box .review_content .review_title .review_img .review_img_text .review_img_retting{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    color: #FFC107;
}


.review_container .review_row .review_box .review_content .review_title .review_icon i{
    font-size: 1.5rem;
    padding: 1.2rem;
    background-color: #FFE6E5;
    border-radius: 100px;
    color: var(--main-color);
}


.review_container .review_row .review_box .review_content p{
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
}


.swiper-pagination{
    position: relative;
    margin-top: 2rem;
    z-index: 1000;
}
.swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    background-color: var(--main-color);
}












/* About US section */

.about_container .about_row{
    align-items: center;
}


.about_container .about_row .about_img{
    padding-right: 11rem;
}


.about_container .about_row .about_box .about_content h3{
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--main-color);
    margin-bottom: 1rem;
}

.about_container .about_row .about_box .about_content h1{
    font-size: 4rem;
    font-weight: 700;
    color: var(--trid-color);
    line-height: 1.3;
    margin-bottom: 2rem;
}


.about_container .about_row .about_box .about_content p{
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 3rem;
}


.about_container .about_row .about_box .about_content .about_count{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}

.about_container .about_row .about_box .about_content .about_count .about_count_box{
    padding: 2rem;
    background-color: #F1F5F8;
    border-radius: 10px;
    text-align: center;
}

.about_container .about_row .about_box .about_content .about_count .about_count_box h2{
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--trid-color);
    line-height: 1.2;
}

.about_container .about_row .about_box .about_content .about_count .about_count_box p{
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 0;
}





@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }


    .about_container .about_row .about_img{
        padding-right: 0rem;
        margin-bottom: 5rem;
    }



}    




/* Blogs section */

.blog_container .blog_row .blog_box{
    padding-left: 2rem;
}

.blog_container .blog_row .blog_box .blog_content .blog_img{
    margin-bottom: 2rem;
}

.blog_container .blog_row .blog_box .blog_content .blog_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}


.blog_container .blog_row .blog_box .blog_content .blog_title{
    margin-bottom: 1rem;
}

.blog_container .blog_row .blog_box .blog_content .blog_title h3{
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--second-color);
    background-color: #D4EEE3;
    border-radius: 5px;
    display: inline-block;
    padding: 0.5rem 1.5rem;
}

.blog_container .blog_row .blog_box .blog_content a{
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--black-color);
    text-decoration: none;
}


.blog_container .blog_row .blog_box .blog_content p{
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
    margin-top: 1rem;
    margin-bottom: 2rem;
}


.blog_container .blog_row .blog_box .blog_content .blog_btn{
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--main-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}



@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }


    .blog_container .blog_row .blog_box{
        padding-left: 0rem;
        margin-bottom: 4rem;
    }

}





/* Newsletter section */
.newsletter_section{
    background-image: url(./images/newsletter-img.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
}


.newsletter_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000a2;
}


.newsletter_container .newsletter_row .newsletter_box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    height: 40vh;
    z-index: 999;
}

.newsletter_container .newsletter_row .newsletter_box .newsletter_content{
    text-align: center;
    width: 60%;
}


.newsletter_container .newsletter_row .newsletter_box .newsletter_content h1{
    font-size: 4rem;
    font-weight: 700;
    color: var(--White-color);
    margin-bottom: 1rem;
}

.newsletter_container .newsletter_row .newsletter_box .newsletter_content p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--White-color);
    margin-bottom: 3rem;
}



.newsletter_container .newsletter_row .newsletter_box .newsletter_content .newsletter_input{
    width: 100%;
    padding: 1rem;
    background-color: var(--White-color);
    border-radius: 5px;
}


.newsletter_container .newsletter_row .newsletter_box .newsletter_content .newsletter_input .newsletter_input_box{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.newsletter_container .newsletter_row .newsletter_box .newsletter_content .newsletter_input .newsletter_input_box input{
    width: 100%;
    height: 50px;
    outline: none;
    padding-left: 1rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    border-radius: 5px;
    border: none;
}

.newsletter_container .newsletter_row .newsletter_box .newsletter_content .newsletter_input .newsletter_input_box a{
    width: 30%;
    height: 50px;
    background-color: var(--main-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--White-color);
}








@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }


    .newsletter_container .newsletter_row .newsletter_box{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        width: 100%;
        height: 50vh;
        z-index: 999;
    }
    
    .newsletter_container .newsletter_row .newsletter_box .newsletter_content{
        text-align: center;
        width: 100%;
    }


    .newsletter_container .newsletter_row .newsletter_box .newsletter_content .newsletter_input .newsletter_input_box input{
        width: 100%;
        height: 45px;
        outline: none;
        padding-left: 1rem;
        font-size: 1.4rem;
        font-weight: 400;
        color: var(--text-color);
        border-radius: 5px;
        border: none;
    }


    .newsletter_container .newsletter_row .newsletter_box .newsletter_content .newsletter_input .newsletter_input_box a{
        width: 60%;
        height: 45px;
        background-color: var(--main-color);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        justify-content: center;
        text-decoration: none;
        border-radius: 5px;
        font-size: 1.6rem;
        font-weight: 500;
        color: var(--White-color);
    }



}







/* Footer section */

.footer_section{
    background-color: #003149;
    padding-bottom: 3rem;
}

.footer_container .footer_row .footer_box{
    padding-left: 4rem;
    align-items: normal;
}

.footer_container .footer_row .footer_box .footer_logo{
    margin-bottom: 2rem;
}

.footer_container .footer_row .footer_box .footer_logo a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.footer_container .footer_row .footer_box p{
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-color);
    margin-bottom: 2rem;
}


.footer_container .footer_row .footer_box .footer_social{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.footer_container .footer_row .footer_box .footer_social a i{
    padding: 1rem;
    background-color: #1A465C;
    border-radius: 5px;
    color: #557685;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.footer_container .footer_row .footer_box .footer_social a i:hover{
    background-color: var(--main-color);
    color: var(--White-color);
}

.footer_container .footer_row .footer_box2{
    display: flex;
    justify-content: space-around;
    align-items: normal;
}


.footer_container .footer_row .footer_box h2{
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--White-color);
    margin-bottom: 2rem;
}

.footer_container .footer_row .footer_box .footer_link{
    display: inline-block;
}

.footer_container .footer_row .footer_box .footer_link p{
    line-height: 1.2;
}


.footer_container .footer_row .footer_box .footer_link p a{
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 2rem;
}


.footer_container .footer_row .footer_box .footer_link p a:hover{
    color: var(--White-color);
}



.footer_container .footer_row .footer_box .footer_payment_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}






.footer_info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5rem;
    border-top: 1px solid #0F4863;
    padding-top: 3rem;
}


.footer_info h3{
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-color);
}


.footer_info .footer_info_text{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}

.footer_info .footer_info_text a{
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-color);
}














@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }


    .footer_container .footer_row .footer_box .footer_logo{
        margin-bottom: 2rem;
    }
    
    .footer_container .footer_row .footer_box .footer_logo a img{
        width: 50%;
        height: 50%;
        object-fit: cover;
    }


    .footer_container .footer_row .footer_box{
        padding-left: 0rem;
        margin-bottom: 4rem;
        align-items: normal;
    }


    .footer_container .footer_row .footer_box2{
        display: flex;
        flex-direction: column;
        gap: 0rem;
    }


    .footer_info{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }




}    




/*====================================/
           // Blogs Pages // 
/====================================*/


/* blogs Hero Section */

.blog_hero_section{
    background-image: url(./images/video-bg-img.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 80vh;
    position: relative;
}

.blog_hero_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000088;
}




.blog_hero_container .blog_hero_row .blog_hero_box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 40vh;
    z-index: 2;
}


.blog_hero_container .blog_hero_row .blog_hero_box .blog_hero_content h1{
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--White-color);
}

.blog_hero_container .blog_hero_row .blog_hero_box .blog_hero_content p{
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--White-color);
}







/* hero Shape */
.custom-shape-divider-bottom-1728808111 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1728808111 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 110px;
}

.custom-shape-divider-bottom-1728808111 .shape-fill {
    fill: #FFFFFF;
}



.blog1_btn{
    text-align: center;
    margin-top: 8rem;
}




@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }


    .blog_hero_section{
        background-image: url(./images/video-bg-img.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 105vh;
        position: relative;
    }


    .blog_hero_container .blog_hero_row .blog_hero_box{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        text-align: center;
        width: 100%;
        height: 60vh;
        z-index: 2;
    }


    .custom-shape-divider-bottom-1728808111 svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 61px;
    }
}    


























/*====================================/
        // Blogs details Pages // 
/====================================*/

/* blogs Hero Section */

.blog_details_hero_section{
    background-image: url(./images/blog-details-img.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 80vh;
    position: relative;
}

.blog_details_hero_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000088;
}




/* hero Shape */
.custom-shape-divider-bottom-1728808111 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1728808111 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 110px;
}

.custom-shape-divider-bottom-1728808111 .shape-fill {
    fill: #FFFFFF;
}




/* blog_details_Card */

.blog_details_Card_section{
    padding: 7rem 15%;
    position: relative;
} 


.blog_details_Card_container .blog_details_Card_row .blog_details_Card_box .blog_details_Card_content{
    padding: 2rem;
    background-color: var(--White-color);
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    width: 70%;
    position: absolute;
    top: -100%;
    left: 15%;
}


.blog_details_Card_container .blog_details_Card_row .blog_details_Card_box .blog_details_Card_content .card_title{
    margin-bottom: 1rem;
}


.blog_details_Card_container .blog_details_Card_row .blog_details_Card_box .blog_details_Card_content .card_title h3{
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--second-color);
    background-color: #D4EEE3;
    border-radius: 5px;
    padding: 0.8rem 1.2rem;
    display: inline-block;
}


.blog_details_Card_container .blog_details_Card_row .blog_details_Card_box .blog_details_Card_content h1{
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 1rem;
}


.blog_details_Card_container .blog_details_Card_row .blog_details_Card_box .blog_details_Card_content p{
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}



.blog_details_Card_container .blog_details_Card_row .blog_details_Card_box .blog_details_Card_content .blog_details_Card_info{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}


.blog_details_Card_container .blog_details_Card_row .blog_details_Card_box .blog_details_Card_content .blog_details_Card_info .blog_details_Card_img{
    width: 5%;
    height: 5%;
}


.blog_details_Card_container .blog_details_Card_row .blog_details_Card_box .blog_details_Card_content .blog_details_Card_info .blog_details_Card_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100px;
}


.blog_details_Card_container .blog_details_Card_row .blog_details_Card_box .blog_details_Card_content .blog_details_Card_info .blog_details_Card_info_text{
    margin-top: 1rem;
}

.blog_details_Card_container .blog_details_Card_row .blog_details_Card_box .blog_details_Card_content .blog_details_Card_info .blog_details_Card_info_text h2{
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 0.5rem;
}

.blog_details_Card_container .blog_details_Card_row .blog_details_Card_box .blog_details_Card_content .blog_details_Card_info .blog_details_Card_info_text p{
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}





/* blog_details_info section */


.blog_details_info_section{
    padding: 7rem 15%;
}


.blog_details_info_container .blog_details_info_row .blog_details_info_box p{
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
    text-transform:none;
    margin-bottom: 2rem;
}

.blog_details_info_container .blog_details_info_row .blog_details_info_box p span{
    font-size: 3rem;
    font-weight: 500;
    color: var(--main-color);
    padding: 0.5rem 1.5rem;
    background-color: #FFE6E5;
    border-radius: 5px;
}


.blog_details_info_container .blog_details_info_row .blog_details_info_box h2{
    font-size: 2rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 3rem;
    margin-top: 3rem;
}


.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_review{
    padding: 2.5rem;
    background-color: #FFE6E5;
    border-radius: 10px;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_review h4{
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    font-style: italic;
    color: var(--trid-color); 
    margin-bottom: 2.5rem;
}


.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_review h3{
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    font-style: italic;
    color: var(--main-color); 
}




.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_card{
    padding: 2rem;
    background-color: var(--White-color);
    border-radius: 10px;
    border: 1px solid #DEE2E6;
}


.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_card .blog_details_info_card_img{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}


.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_card .blog_details_info_card_img{
    margin-bottom: 1rem;
}


.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_card .blog_details_info_card_img .details_info_card_img{
    width: 6%;
    height: 6%;
}


.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_card .blog_details_info_card_img .details_info_card_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100px;
}


.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_card .blog_details_info_card_img .details_info_card_text h2{
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--trid-color);
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_card .blog_details_info_card_img .details_info_card_text p{
    font-size: 1.3rem;
    font-weight: 400;
    color: #2d3033;
}



.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_card .blog_details_info_btns{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    margin-bottom: 1rem;
}


.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_card .blog_details_info_btns .blog_details_info_icon{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_card .blog_details_info_btns .blog_details_info_icon a i{
    font-size: 2.5rem;
    color: #455873;
    transition: all 0.3s ease;
}

.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_card .blog_details_info_btns .blog_details_info_icon a i:hover{
    color: var(--main-color);
}


.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_like{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5rem;
    padding: 2rem;
    background-color: #F8F9FA;
    border-radius: 10px;
}


.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_like h1{
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--trid-color);
}

.blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_like h4{
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-color);
}





@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }

    .blog_details_hero_section{
        background-image: url(./images/video-bg-img.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 105vh;
        position: relative;
    }

    .custom-shape-divider-bottom-1728808111 svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 61px;
    }


    .blog_details_Card_container .blog_details_Card_row .blog_details_Card_box .blog_details_Card_content .blog_details_Card_info .blog_details_Card_img{
        width: 15%;
        height: 15%;
    }



    .blog_details_Card_container .blog_details_Card_row .blog_details_Card_box .blog_details_Card_content{
        padding: 2rem;
        background-color: var(--White-color);
        border-radius: 10px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        width: 90%;
        position: absolute;
        top: -150%;
        left: 5%;
    }



    .blog_details_info_section{
        padding: 7rem 4%;
    }



    .blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_card .blog_details_info_card_img .details_info_card_img{
        width: 15%;
        height: 15%;
    }



    .blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_like{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 5rem;
        padding: 2rem;
        background-color: #F8F9FA;
        border-radius: 10px;
    }


    .blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_card .blog_details_info_btns{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 0rem;
        margin-bottom: 0rem;
    }

    .blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_card .blog_details_info_btns{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 3rem;
        margin-bottom: 1rem;
    }


    .blog_details_info_container .blog_details_info_row .blog_details_info_box .blog_details_info_like .blog_details_info_like_btns{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2rem;
        margin-top: 3rem;
    }


}    























/*====================================/
        // Sign Up Pages // 
/====================================*/


.signup_container .signup_row .signup_box{
    padding: 2rem;
    background-color: var(--White-color);
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    align-items: center;
}


.signup_box_row{
    align-items: center;
}


.signup_box_row .signup_img_box{
    display: flex;
    justify-content: center;
    align-items: center;
}

.signup_box_row .signup_img_box .signup_img{
    width: 70%;
    height: 70%;
}


.signup_box_row .signup_img_box .signup_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.signup_box_row .signup_content_box{
    padding-left: 3rem;
    border-left: 1px solid #EAEAEA;
}

.signup_box_row .signup_content_box .signup_content .signup_logo{
    width: 30%;
    height: 30%;
    margin-bottom: 2rem;
}

.signup_box_row .signup_content_box .signup_content .signup_logo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.signup_box_row .signup_content_box .signup_content h1{
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 1rem;
}


.signup_box_row .signup_content_box .signup_content .signup_link{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 5rem;
}


.signup_box_row .signup_content_box .signup_content .signup_link p{
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-color);
}

.signup_box_row .signup_content_box .signup_content .signup_link p a{
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--main-color);
    text-decoration: none;
}


.signup_box_row .signup_content_box .signup_content .signup_form form{
    width: 100%;
    height: 100%;
}


.signup_box_row .signup_content_box .signup_content .signup_form form .signup_input_box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}



.signup_box_row .signup_content_box .signup_content .signup_form form .signup_input_box label{
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--black-color);
}


.signup_box_row .signup_content_box .signup_content .signup_form form .signup_input_box input{
    position: relative;
    width: 100%;
    height: 60px;
    outline: none;
    border: 1px solid #DADFE6;
    padding-left: 1.5rem;
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.signup_box_row .signup_content_box .signup_content .signup_form form .signup_input_box input:focus{
    border-color: var(--main-color);
}





.signup_box_row .signup_content_box .signup_content .signup_form form .signup_password_box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
    position: relative;
}


.signup_box_row .signup_content_box .signup_content .signup_form form .signup_password_box label{
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--black-color);
}


.signup_box_row .signup_content_box .signup_content .signup_form form .signup_password_box input{
    width: 100%;
    height: 60px;
    outline: none;
    border: 1px solid #DADFE6;
    padding-left: 1.5rem;
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.signup_box_row .signup_content_box .signup_content .signup_form form .signup_password_box input:focus{
    border-color: var(--main-color);
}


.signup_box_row .signup_content_box .signup_content .signup_form form .signup_password_box i{
    position: absolute;
    right: 20px;
    top: 55%;
    cursor: pointer;
    font-size: 1.8rem;
    color: var(--text-color);
}


.signup_box_row .signup_content_box .signup_content .signup_form form .signup_input_btns{
    width: 100%;
    height: 100%;
    margin-bottom: 2rem;
}


.signup_box_row .signup_content_box .signup_content .signup_form form .signup_input_btns input{
    position: relative;
    width: 100%;
    height: 60px;
    outline: none;
    border: 1px solid var(--main-color);
    background-color: var(--main-color);
    padding-left: 1.5rem;
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--White-color);
    transition: all 0.3s ease;
}


.signup_box_row .signup_content_box .signup_content .signup_form form .signup_input_radio{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0rem;
    margin-bottom: 3rem;
}


.signup_box_row .signup_content_box .signup_content .signup_form form .signup_input_radio input{
    width: 6%;
    height: 15px;
    accent-color: var(--main-color);
}

.signup_box_row .signup_content_box .signup_content .signup_form form .signup_input_radio label{
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--black-color);
}



.signup_box_row .signup_content_box .signup_icon{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}


.signup_box_row .signup_content_box .signup_icon a .fa-facebook{
    padding: 1.5rem;
    border: 1px dotted #DADFE6;
    font-size: 3rem;
    color: #3B5998;
}


.signup_box_row .signup_content_box .signup_icon a .fa-whatsapp{
    padding: 1.5rem;
    border: 1px dotted #DADFE6;
    font-size: 3rem;
    color: #4CAF50;
}


.signup_box_row .signup_content_box .signup_icon a .fa-linkedin{
    padding: 1.5rem;
    border: 1px dotted #DADFE6;
    font-size: 3rem;
    color: #1685B9;
}


.signup_box_row .signup_content_box .signup_icon a .fa-dribbble{
    padding: 1.5rem;
    border: 1px dotted #DADFE6;
    font-size: 3rem;
    color: #EA4C89;
}


.signup_box_row .signup_content_box .signup_icon a .fa-twitter{
    padding: 1.5rem;
    border: 1px dotted #DADFE6;
    font-size: 3rem;
    color: #00ACED;
}










@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }


    .signup_box_row .signup_content_box{
        padding-left: 0rem;
        margin-top: 5rem;
        border-left: 1px solid #ffff;
    }


    .signup_box_row .signup_content_box .signup_content .signup_form form .signup_input_radio input{
        width: 10%;
        height: 15px;
        accent-color: var(--main-color);
    }



    .signup_box_row .signup_content_box .signup_icon{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
    }




}





















/*====================================/
        // About US Pages // 
/====================================*/

/* About US Hero Section */

.about_hero_section{
    background-image: url(./images/video-bg-img.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 80vh;
    position: relative;
}

.about_hero_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000088;
}




.about_hero_container .about_hero_row .about_hero_box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 40vh;
    z-index: 2;
}


.about_hero_container .about_hero_row .about_hero_box .about_hero_content h1{
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--White-color);
}

.about_hero_container .about_hero_row .about_hero_box .about_hero_content p{
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--White-color);
}




/* hero Shape */
.custom-shape-divider-bottom-1728808111 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1728808111 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 110px;
}

.custom-shape-divider-bottom-1728808111 .shape-fill {
    fill: #FFFFFF;
}






@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }


    .about_hero_section{
        background-image: url(./images/video-bg-img.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 105vh;
        position: relative;
    }


    .about_hero_container .about_hero_row .about_hero_box{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        text-align: center;
        width: 100%;
        height: 60vh;
        z-index: 2;
    }


    .custom-shape-divider-bottom-1728808111 svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 61px;
    }
}    











/*====================================/
        // Career Pages // 
/====================================*/

/* Career Hero Section */

.career_hero_section{
    background-image: url(./images/video-bg-img.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 80vh;
    position: relative;
}

.career_hero_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000088;
}




.career_hero_container .career_hero_row .career_hero_box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 40vh;
    z-index: 2;
}


.career_hero_container .career_hero_row .career_hero_box .career_hero_content h1{
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--White-color);
}

.career_hero_container .career_hero_row .career_hero_box .career_hero_content p{
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--White-color);
}




/* hero Shape */
.custom-shape-divider-bottom-1728808111 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1728808111 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 110px;
}

.custom-shape-divider-bottom-1728808111 .shape-fill {
    fill: #FFFFFF;
}




/* career section */

.heading h1 span{
    color: var(--main-color);
}


.career_container .career_row .career_box{
    padding-right: 3rem;
    margin-bottom: 4.5rem;
}


.career_container .career_row .career_box .career_content{
    padding: 3rem;
    background-color: #F1F5F8;
    border-radius: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}


.career_container .career_row .career_box .career_content:hover{
    background-color: var(--main-color);
    color: var(--White-color);
}



.career_container .career_row .career_box .career_content .career_icon{
    display: flex;
    flex-wrap: wrap;
    align-items: normal;
    gap: 1.5rem;
}


.career_container .career_row .career_box .career_content .career_icon i{
    font-size: 3.5rem;
    color: var(--trid-color);
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}


.career_container .career_row .career_box .career_content:hover .career_icon i{
    color: var(--White-color);
}

.career_container .career_row .career_box .career_content .career_icon .career_icon_text h2{
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--trid-color);
    transition: all 0.3s ease;
}

.career_container .career_row .career_box .career_content:hover .career_icon .career_icon_text h2{
    color: var(--White-color);
}


.career_container .career_row .career_box .career_content .career_icon .career_icon_text p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.career_container .career_row .career_box .career_content:hover .career_icon .career_icon_text p{
    color: var(--White-color);
}




.career_container .career_row .career_box .career_content i{
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: 2rem;
    color: var(--trid-color);
    transition: all 0.3s ease;
}


.career_container .career_row .career_box .career_content:hover i{
    color: var(--White-color);
}




.career_btn{
    text-align: center;
    margin-top: 4rem;
}






@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }


    .career_hero_section{
        background-image: url(./images/video-bg-img.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 105vh;
        position: relative;
    }


    .career_hero_container .career_hero_row .career_hero_box{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        text-align: center;
        width: 100%;
        height: 60vh;
        z-index: 2;
    }


    .custom-shape-divider-bottom-1728808111 svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 61px;
    }



    .career_container .career_row .career_box{
        padding-right: 0rem;
        margin-bottom: 2.5rem;
    }





} 

















/*====================================/
        // Error Pages // 
/====================================*/
.error_content{
    margin-bottom: 1rem;
    margin-top: 2rem;
    text-align: center;
}

.error_content .error_btn{
    margin-top: 4rem;
    text-align: center;
}

.error_content h1{
    font-size: 8rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 0.5rem;
}

.error_content h2{
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 1rem;
}

.error_content p{
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--text-color);
}



.error_container .error_row .error_box{
    display: flex;
    justify-content: center;
    align-items: center;
}

.error_container .error_row .error_box .error_img{
    width: 60%;
    height: 100%;
}

.error_container .error_row .error_box .error_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}







@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }

    .error_container .error_row .error_box{
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .error_container .error_row .error_box .error_img{
        width: 80%;
        height: 100%;
    }
    
    .error_container .error_row .error_box .error_img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .error_content h2{
        font-size: 2rem;
        font-weight: 700;
        color: var(--trid-color);
        margin-bottom: 1rem;
    }



}
























































/*====================================/
        // Help Center Pages // 
/====================================*/

/* Help Hero Section */

.help_hero_section{
    background-image: url(./images/video-bg-img.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 80vh;
    position: relative;
}

.help_hero_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000088;
}




.help_hero_container .help_hero_row .help_hero_box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 40vh;
    z-index: 2;
}


.help_hero_container .help_hero_row .help_hero_box .help_hero_content h1{
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--White-color);
}

.help_hero_container .help_hero_row .help_hero_box .help_hero_content p{
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--White-color);
}




/* hero Shape */
.custom-shape-divider-bottom-1728808111 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1728808111 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 110px;
}

.custom-shape-divider-bottom-1728808111 .shape-fill {
    fill: #FFFFFF;
}




/* help Section */

.help_container .help_row{
    margin-bottom: 7rem;
}


.help_container .help_row .help_box{
    padding-right: 2rem;
}


.help_container .help_row .help_box .help_content{
    padding: 2rem;
    background-color: var(--White-color);
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.help_container .help_row .help_box .help_content .help_title{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid #E2E8EC;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
}


.help_container .help_row .help_box .help_content .help_title i{
    padding: 1.3rem;
    background-color: #D4EEE3;
    border-radius: 100px;
    color: var(--second-color);
    font-size: 2.5rem;
}


.help_container .help_row .help_box .help_content .help_title .fa-apple{
    padding: 1.3rem 1.5rem;
    background-color: #E3E3FF;
    border-radius: 100px;
    color: #6363F5;
    font-size: 2.5rem;
}


.help_container .help_row .help_box .help_content .help_title .fa-globe{
    padding: 1.3rem;
    background-color: #FFF3CD;
    border-radius: 100px;
    color: #FFC107;
    font-size: 2.5rem;
}


.help_container .help_row .help_box .help_content .help_title h3{
    font-size: 1.6rem;
    font-weight: 600;
    color: #2d3033;
}

.help_container .help_row .help_box .help_content p a{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.help_container .help_row .help_box .help_content p a:hover{
    color: var(--main-color);
}




/* support Card */

.support_container .support_row .support_box{
    padding-right: 2rem;
}

.support_container .support_row .support_box .support_content{
    padding: 3rem 2rem;
    background-color: #F1F5F8;
    border-radius: 10px;
}


.support_container .support_row .support_box .support_content .support_title{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}


.support_container .support_row .support_box .support_content .support_title i{
    padding: 2.5rem;
    background-color: #B2E7DC;
    border-radius: 100px;
    font-size: 3.5rem;
    color: var(--second-color);
    margin-bottom: 5rem;
}


.support_container .support_row .support_box .support_content .support_title .fa-ticket{
    padding: 2.5rem 2.2rem;
    background-color: #FFE2E0;
    border-radius: 100px;
    font-size: 3.5rem;
    color: var(--main-color);
    margin-bottom: 5rem;
}


.support_container .support_row .support_box .support_content .support_title .support_title_text h3{
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 0.5rem;
}

.support_container .support_row .support_box .support_content .support_title .support_title_text p{
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 3rem;
}


.support_container .support_row .support_box .support_content .support_title .support_title_text .support_btn{
    margin-bottom: 2rem;
}




@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }


    .help_hero_section{
        background-image: url(./images/video-bg-img.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 105vh;
        position: relative;
    }


    .help_hero_container .help_hero_row .help_hero_box{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        text-align: center;
        width: 100%;
        height: 60vh;
        z-index: 2;
    }


    .custom-shape-divider-bottom-1728808111 svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 61px;
    }



    .help_container .help_row .help_box{
        padding-right: 0rem;
        margin-bottom: 4rem;
    }


    .support_container .support_row .support_box{
        padding-right: 0rem;
        margin-bottom: 4rem;
    }




    .support_container .support_row .support_box .support_content .support_title i{
        padding: 2.5rem;
        background-color: #B2E7DC;
        border-radius: 100px;
        font-size: 3.5rem;
        color: var(--second-color);
        margin-bottom: 1rem;
    }
    
    
    .support_container .support_row .support_box .support_content .support_title .fa-ticket{
        padding: 2.5rem 2.2rem;
        background-color: #FFE2E0;
        border-radius: 100px;
        font-size: 3.5rem;
        color: var(--main-color);
        margin-bottom: 1rem;
    }


} 












/*====================================/
        // Faq's Pages // 
/====================================*/
/* Help Hero Section */

.faq_hero_section{
    background-image: url(./images/video-bg-img.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 80vh;
    position: relative;
}

.faq_hero_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000088;
}




.faq_hero_container .faq_hero_row .faq_hero_box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 40vh;
    z-index: 2;
}


.faq_hero_container .faq_hero_row .faq_hero_box .faq_hero_content h1{
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--White-color);
}

.faq_hero_container .faq_hero_row .faq_hero_box .faq_hero_content p{
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--White-color);
}




/* hero Shape */
.custom-shape-divider-bottom-1728808111 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1728808111 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 110px;
}

.custom-shape-divider-bottom-1728808111 .shape-fill {
    fill: #FFFFFF;
}



/* Faq's Info section */

.faqInfo_container .faqInfo_row .faqInfo_box{
    padding-right: 2rem;
    text-align: center;
}


.faqInfo_container .faqInfo_row .faqInfo_box .faqInfo_content{
    padding: 3rem 1rem;
    background-color: var(--White-color);
    border-radius: 10px;
    border: 2px dotted #DEE2E6;
}

.faqInfo_container .faqInfo_row .faqInfo_box .faqInfo_content i{
    font-size: 4rem;
    color: var(--main-color);
    margin-bottom: 1rem;
}

.faqInfo_container .faqInfo_row .faqInfo_box .faqInfo_content h1{
    font-size: 2rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 1rem;
}


.faqInfo_container .faqInfo_row .faqInfo_box .faqInfo_content p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}


.faqInfo_container .faqInfo_row .faqInfo_box .faqInfo_content .faqInfo_content_icon{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}


.faqInfo_container .faqInfo_row .faqInfo_box .faqInfo_content .faqInfo_content_icon a i{
    padding: 1rem;
    background-color: #F1F5F8;
    border-radius: 100px;
    font-size: 1.8rem;
}






/* FAQs Section */

.faqs_container .faqs_row{
    align-items: center;
 }

 

 .accordion{
    --bs-accordion-btn-bg: #ffff;
    --bs-accordion-active-bg: #fff;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-bg: #fff;
    --bs-accordion-color: var(--black-color);
    --bs-accordion-btn-active-icon: #821F40;
    --bs-accordion-border-color: none;
}


.accordion-item{
    margin-bottom: 2rem;
}

.accordion-item .accordion-body{
    padding: 2rem;
    border-bottom: 1px solid #DEE2E6;
    border-left:  1px solid #DEE2E6;
    border-right:  1px solid #DEE2E6;
    border-top:  1px solid #ffffff;
}


.accordion-item .accordion-body p{
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
}



/* .accordion-header{
    box-shadow: 0 5px 10px #47546723;
} */





.accordion .accordion-button{
    font-size: 1.6rem;
    font-weight: 500;
    border: 1px solid #DEE2E6;
    color: var(--trid-color);
    background-color: var(--White-color);
    padding: 1.5rem 2.5rem;
}

.accordion .accordion-button.show{
    font-size: 1.6rem;
    font-weight: 500;
    border: 1px solid #DEE2E6;
    color: var(--main-color);
    background-color: #FAE9E8;
    padding: 1.5rem 2.5rem;
}


.accordion .accordion-button:focus{
    color: var(--main-color);
    background-color: #FAE9E8;
}


.accordion .accordion-button:not(.collapsed){
    box-shadow: none;
}



.accordion-button::after {
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='DarkRed' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E"); */
    background-image: url(../asset/images/plus.svg);
    transition: all 0.5s;
    --bs-accordion-btn-active-icon-color: #821F40;
    --bs-accordion-btn-icon-width: 3rem;

  }


  .accordion-button:not(.collapsed)::after {
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='DarkRed' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E"); */
    background-image: url(../asset/images/minus.svg);
    --bs-accordion-btn-icon-width: 3rem;
  }






@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }





    .faq_hero_section{
        background-image: url(./images/video-bg-img.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 105vh;
        position: relative;
    }


    .faq_hero_container .faq_hero_row .faq_hero_box{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        text-align: center;
        width: 100%;
        height: 60vh;
        z-index: 2;
    }


    .custom-shape-divider-bottom-1728808111 svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 61px;
    }




    .faqInfo_container .faqInfo_row .faqInfo_box{
        padding-right: 0rem;
        margin-bottom: 3rem;
        text-align: center;
    }

}    
















/*====================================/
        // Pricing Pages // 
/====================================*/
/* Pricing Hero Section */

.pricing_hero_section{
    background-image: url(./images/video-bg-img.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 80vh;
    position: relative;
}

.pricing_hero_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000088;
}




.pricing_hero_container .pricing_hero_row .pricing_hero_box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 40vh;
    z-index: 2;
}


.pricing_hero_container .pricing_hero_row .pricing_hero_box .pricing_hero_content h1{
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--White-color);
}

.pricing_hero_container .pricing_hero_row .pricing_hero_box .pricing_hero_content p{
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--White-color);
}




/* hero Shape */
.custom-shape-divider-bottom-1728808111 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1728808111 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 110px;
}

.custom-shape-divider-bottom-1728808111 .shape-fill {
    fill: #FFFFFF;
}



/* pricing section */

.pricing_container .pricing_row .pricing_box{
    padding-right: 2rem;
}


.pricing_container .pricing_row .pricing_box .pricing_content{
    padding: 2rem;
    background-color: var(--White-color);
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #F1F5F8;
}

.pricing_container .pricing_row .pricing_box .pricing_content.active{
    padding: 2rem;
    background-color: var(--White-color);
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #CD2C22;
}


.pricing_container .pricing_row .pricing_box .pricing_content .pricing_title{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid #DEE2E6;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}


.pricing_container .pricing_row .pricing_box .pricing_content .pricing_title i{
    padding: 2rem 1.9rem;
    background-color: #E3E3FF;
    border-radius: 100px;
    font-size: 3rem;
    color: #6363F5;
}

.pricing_container .pricing_row .pricing_box .pricing_content .pricing_title #pricing_icon{
    padding: 2rem 1.9rem;
    background-color: #FFE6E5;
    border-radius: 100px;
    font-size: 3rem;
    color: #CD2C22;
}


.pricing_container .pricing_row .pricing_box .pricing_content .pricing_title #pricing_icon1{
    padding: 2rem 1.9rem;
    background-color: #D4EEE3;
    border-radius: 100px;
    font-size: 3rem;
    color: #27A974;
}


.pricing_container .pricing_row .pricing_box .pricing_content .pricing_title .pricing_title_text h3{
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--trid-color);
    text-transform: uppercase;
}


.pricing_container .pricing_row .pricing_box .pricing_content .pricing_title .pricing_title_text h1{
    font-size: 4rem;
    font-weight: 700;
    color: var(--trid-color);
}

.pricing_container .pricing_row .pricing_box .pricing_content .pricing_title .pricing_title_text h1 span{
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--text-color);
}


.pricing_container .pricing_row .pricing_box .pricing_content p{
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}


.pricing_container .pricing_row .pricing_box .pricing_content p .fa-circle-check{
    font-size: 1.5rem;
    color: #27A978;
}


.pricing_container .pricing_row .pricing_box .pricing_content p .fa-circle-xmark{
    font-size: 1.5rem;
    color: #CE3426;
}



.pricing_container .pricing_row .pricing_box .pricing_content .pricing_btn{
    margin-top: 3rem;
    padding-top: 4rem;
    border-top: 1px solid #DEE2E6;
    text-align: center;
    margin-bottom: 1.5rem;
}




.pricing_container .pricing_row .pricing_box .pricing_content .pricing_btn .btns2{
    padding: 18px 100px;
    background-color: var(--main-color);
    border-radius: 5px;
    color: var(--White-color);
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.pricing_container .pricing_row .pricing_box .pricing_content .pricing_btn .btns2::before{
    content: "";
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 .3em rgba(255, 255, 255, 0.1);
    left: 0;
    top: 0;
    transform: skew(-45deg) translateX(530%);
    transition: 500ms ease-in-out transform;
}


.pricing_container .pricing_row .pricing_box .pricing_content .pricing_btn .btns2:hover:before{
    transform: skew(-45deg) translateX(-130%);
}







.pricing_container .pricing_row .pricing_box .pricing_content .pricing_btn1{
    margin-top: 3rem;
    padding-top: 4rem;
    border-top: 1px solid #DEE2E6;
    text-align: center;
    margin-bottom: 1.5rem;
}


.pricing_container .pricing_row .pricing_box .pricing_content .pricing_btn1 .btns3{
    padding: 18px 100px;
    background-color: #212529;
    border-radius: 5px;
    color: var(--White-color);
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.pricing_container .pricing_row .pricing_box .pricing_content .pricing_btn1 .btns3::before{
    content: "";
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 .3em rgba(255, 255, 255, 0.1);
    left: 0;
    top: 0;
    transform: skew(-45deg) translateX(530%);
    transition: 500ms ease-in-out transform;
}


.pricing_container .pricing_row .pricing_box .pricing_content .pricing_btn1 .btns3:hover:before{
    transform: skew(-45deg) translateX(-130%);
}













@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }



    .pricing_hero_section{
        background-image: url(./images/video-bg-img.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 105vh;
        position: relative;
    }


    .pricing_hero_container .pricing_hero_row .pricing_hero_box{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        text-align: center;
        width: 100%;
        height: 60vh;
        z-index: 2;
    }


    .custom-shape-divider-bottom-1728808111 svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 61px;
    }



    .pricing_container .pricing_row .pricing_box{
        padding-right: 0rem;
        margin-bottom: 4rem;
    }



}    










/*====================================/
        // privacy Pages // 
/====================================*/
/* privacy Hero Section */

.privacy_hero_section{
    background-image: url(./images/video-bg-img.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 80vh;
    position: relative;
}

.privacy_hero_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000088;
}




.privacy_hero_container .privacy_hero_row .privacy_hero_box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 40vh;
    z-index: 2;
}


.privacy_hero_container .privacy_hero_row .privacy_hero_box .privacy_hero_content h1{
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--White-color);
}

.privacy_hero_container .privacy_hero_row .privacy_hero_box .privacy_hero_content p{
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--White-color);
}




/* hero Shape */
.custom-shape-divider-bottom-1728808111 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1728808111 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 110px;
}

.custom-shape-divider-bottom-1728808111 .shape-fill {
    fill: #FFFFFF;
}




/* privacy Section */

.privacy_container .privacy_row .privacy_box h1{
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 2rem;
}


.privacy_container .privacy_row .privacy_box p{
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 2rem;
}


.privacy_container .privacy_row .privacy_box h2{
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 2rem;
}





@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }



    .privacy_hero_section{
        background-image: url(./images/video-bg-img.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 105vh;
        position: relative;
    }


    .privacy_hero_container .privacy_hero_row .privacy_hero_box{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        text-align: center;
        width: 100%;
        height: 60vh;
        z-index: 2;
    }


    .custom-shape-divider-bottom-1728808111 svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 61px;
    }


} 











/*====================================/
        // contact Pages // 
/====================================*/
/* contact Hero Section */

.contact_hero_section{
    background-image: url(./images/video-bg-img.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 80vh;
    position: relative;
}

.contact_hero_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000088;
}




.contact_hero_container .contact_hero_row .contact_hero_box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 40vh;
    z-index: 2;
}


.contact_hero_container .contact_hero_row .contact_hero_box .contact_hero_content h1{
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--White-color);
}

.contact_hero_container .contact_hero_row .contact_hero_box .contact_hero_content p{
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--White-color);
}




/* hero Shape */
.custom-shape-divider-bottom-1728808111 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1728808111 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 110px;
}

.custom-shape-divider-bottom-1728808111 .shape-fill {
    fill: #FFFFFF;
}








/* contact form section */

.contact_form_container .contact_form_row .contact_form_box{
    padding-right: 2rem;
}


.contact_form_container .contact_form_row .contact_form_box .contact_form_content{
    padding: 2rem;
    background-color: #F1F5F8;
    border-radius: 10px;
}


.contact_form_container .contact_form_row .contact_form_box .contact_form_content h1{
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--trid-color);
    margin-bottom: 1rem;
}


.contact_form_container .contact_form_row .contact_form_box .contact_form_content p{
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
    margin-bottom: 4rem;
}



.contact_form_container .contact_form_row .contact_form_box .contact_form_content .contact_form form .contact_form_input_box{
    width: 100%;
    height: 100%;
}


.contact_form_container .contact_form_row .contact_form_box .contact_form_content .contact_form form  .contact_form_input_box{
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}


.contact_form_container .contact_form_row .contact_form_box .contact_form_content .contact_form form .contact_form_input_box .contact_form_input{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}


.contact_form_container .contact_form_row .contact_form_box .contact_form_content .contact_form form .contact_form_input_box .contact_form_input label{
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--trid-color);
}


.contact_form_container .contact_form_row .contact_form_box .contact_form_content .contact_form form .contact_form_input_box .contact_form_input input{
    width: 100%;
    height: 60px;
    outline: none;
    border: 1px solid #DADFE6;
    background-color: var(--White-color);
    border-radius: 5px;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    transition: all 0.3s ease;
}


.contact_form_container .contact_form_row .contact_form_box .contact_form_content .contact_form form .contact_form_input_box .contact_form_input input:focus{
    border-color: var(--main-color);
}



.contact_form_container .contact_form_row .contact_form_box .contact_form_content .contact_form form .contact_form_input_box .contact_form_input textarea{
    width: 100%;
    height: 140px;
    outline: none;
    border: 1px solid #DADFE6;
    background-color: var(--White-color);
    border-radius: 5px;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    transition: all 0.3s ease;
}


.contact_form_container .contact_form_row .contact_form_box .contact_form_content .contact_form form .contact_form_input_box .contact_form_input textarea:focus{
    border-color: var(--main-color);
}




.contact_form_container .contact_form_row .contact_form_box .contact_form_content .contact_form form .contact_form_input_box .contact_form_btn{
    width: 100%;
    height: 100%;
}


.contact_form_container .contact_form_row .contact_form_box .contact_form_content .contact_form form .contact_form_input_box .contact_form_btn input{
    width: 100%;
    height: 60px;
    outline: none;
    border: 1px solid #DADFE6;
    background-color: var(--main-color);
    border-radius: 5px;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--White-color);
    transition: all 0.3s ease;
}


.contact_form_container .contact_form_row .contact_form_box .contact_form_content .contact_form form .contact_form_input_box .contact_form_btn input:focus{
    border-color: var(--main-color);
}






@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }



    .contact_hero_section{
        background-image: url(./images/video-bg-img.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 105vh;
        position: relative;
    }


    .contact_hero_container .contact_hero_row .contact_hero_box{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        text-align: center;
        width: 100%;
        height: 60vh;
        z-index: 2;
    }


    .custom-shape-divider-bottom-1728808111 svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 61px;
    }


    .contact_form_container .contact_form_row .contact_form_box{
        padding-right: 0rem;
        margin-bottom: 4rem;
    }




    .contact_form_container .contact_form_row .contact_form_box .contact_form_content .contact_form form  .contact_form_input_box{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
        margin-bottom: 2rem;
    }


} 


























/*====================================/
        // Hotel List Pages // 
/====================================*/
/* Hotel Hero Section */

.hotel_hero_section{
    background-image: url(./images/video-bg-img.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 80vh;
    position: relative;
}

.hotel_hero_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000088;
}



.hotel_hero_container .hotel_hero_row .hotel_hero_box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 40vh;
    z-index: 2;
}


.hotel_hero_container .hotel_hero_row .hotel_hero_box .hotel_hero_content h1{
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--White-color);
}

.hotel_hero_container .hotel_hero_row .hotel_hero_box .hotel_hero_content p{
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--White-color);
}




/* hero Shape */
.custom-shape-divider-bottom-1728808111_hotel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1728808111_hotel svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 110px;
}

.custom-shape-divider-bottom-1728808111_hotel .shape-fill {
    fill: #F1F5F8;
}





/* Hotel section */
.hotel_section{
    background-color: #F1F5F8;
}

.hotel_section1{
    background-color: #fff;
}


.hotel_container .hotel_row .hotel_box{
    padding-right: 2rem;
}


.hotel_container .hotel_row .hotel_box .hotel_filters{
    /* padding: 1.5rem; */
    background-color: var(--White-color);
    border-radius: 5px;
}


.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_content{
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: normal;
    margin-bottom: 0rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #DEE2E6;
}


.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_content .hotel_filters_text h1{
    font-size: 2rem;
    font-weight: 700;
    color: var(--trid-color);
    line-height: 1.1;
}

.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_content .hotel_filters_text p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
}


.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_content a{
    font-size: 1.4rem;
    font-weight: 600;
    /* color: #CD2C22; */
    color: var(--main-color);
    text-decoration: none;
}



.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_tags{
    padding: 1.5rem;
    margin-bottom: 0rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #DEE2E6;
}


.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_tags h1{
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--trid-color);
    margin-bottom: 1rem;
}


.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_tags .hotel_filters_tags_btns{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_tags .hotel_filters_tags_btns a{
    padding: 1rem 2rem;
    background-color: #F3F6FA;
    border-radius: 5px;
    color: var(--text-color);
    font-size: 1.2rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_tags .hotel_filters_tags_btns a:hover{
    background-color: var(--main-color);
    color: var(--White-color);
}

.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_tags .hotel_filters_tags_btns a.active{
    padding: 1rem 2rem;
    background-color: var(--main-color);
    border-radius: 5px;
    color: var(--White-color);
    font-size: 1.2rem;
    font-weight: 500;
    text-decoration: none;
}





.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_radio{
    padding: 1.5rem;
    margin-bottom: 0rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #DEE2E6;
}


.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_radio h1{
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--trid-color);
    margin-bottom: 2rem;
}


.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_radio .hotel_filters_radio_box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.5rem;
}


.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_radio .hotel_filters_radio_box input{
    width: 18px;
    height: 17px;
    outline: none;
    border: 1px solid #DEE2E6;
    accent-color: var(--main-color);
    cursor: pointer;
}

.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_radio .hotel_filters_radio_box label{
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-color);
    cursor: pointer;
}




.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_range{
    padding: 1.5rem;
    margin-bottom: 0rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #DEE2E6;
}


.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_range h1{
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--trid-color);
    margin-bottom: 2rem;
}


.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_range .hotel_filters_range_box{
    width: 100%;
    height: 100%;
}

.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_range .hotel_filters_range_box .numberRange{
    font-size: 1.8rem;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--trid-color);
    margin-bottom: 0rem;
}

.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_range .hotel_filters_range_box input{
    outline: none;
    width: 100%;
    height: 4px;
    accent-color: var(--main-color);
}



.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_ratting{
    padding: 1.5rem;
    margin-bottom: 0rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #DEE2E6;
}


.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_ratting h1{
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--trid-color);
    margin-bottom: 2rem;
}

.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_ratting .hotel_filters_ratting_box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}



.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_ratting .hotel_filters_ratting_box input{
    width: 18px;
    height: 17px;
    outline: none;
    border: 1px solid #DEE2E6;
    accent-color: var(--main-color);
    cursor: pointer;
}

.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_ratting .hotel_filters_ratting_box label{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--trid-color);
    cursor: pointer;
}

.hotel_container .hotel_row .hotel_box .hotel_filters .hotel_filters_ratting .hotel_filters_ratting_box label i{
    color: #FFC107;
}








.hotel_container .hotel_row .hotel_box .hotel_box_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5rem;
}


.hotel_container .hotel_row .hotel_box .hotel_box_title h1{
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--trid-color);
}


.hotel_container .hotel_row .hotel_box .hotel_box_title .hotel_box_title_btns{
    background-color: var(--main-color);
    padding: 0.5rem;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}


.hotel_container .hotel_row .hotel_box .hotel_box_title .hotel_box_title_btns a{
    padding: 0.8rem 1.5rem;
    background-color: var(--main-color);
    color: var(--White-color);
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 500;
    transition: all 0.3s ease;
}


.hotel_container .hotel_row .hotel_box .hotel_box_title .hotel_box_title_btns a:hover{
    background-color: var(--White-color);
    color: var(--main-color);
}


.hotel_container .hotel_row .hotel_box .hotel_box_title .hotel_box_title_btns a.active{
    padding: 0.8rem 1.5rem;
    background-color: var(--White-color);
    color: var(--main-color);
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 500;
    transition: all 0.3s ease;
}




.hotel_container .hotel_row .hotel_box .hotel_box_row{
    padding: 1.5rem;
    background-color: var(--White-color);
    border-radius: 10px;
    margin-bottom: 3rem;
}


.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}


.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_title .hotel_box_content_title_text .content_title_icon{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_title .hotel_box_content_title_text .content_title_icon i{
    font-size: 1.2rem;
    color: #FFC107;
}


.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_title .hotel_box_content_title_text h1{
    font-size: 2rem;
    font-weight: 700;
    color: var(--trid-color);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_title .hotel_box_content_title_text p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.2;
}


.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_title .hotel_box_content_title_btns{
    display: flex;
    flex-wrap: wrap;
    align-items: normal;
    gap: 1rem;
}

.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_title .hotel_box_content_title_btns .content_title_btns_text h3{
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--trid-color);
}

.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_title .hotel_box_content_title_btns .content_title_btns_text p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
}


.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_title .hotel_box_content_title_btns h1{
    padding: 1.4rem 1rem;
    background-color: var(--main-color);
    border-radius: 5px;
    color: var(--White-color);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 2rem;
}


.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotelbtns{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--main-color);
    text-decoration: none;
}

.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_offer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}


.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_offer .hotel_box_content_offer_text{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}


.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_offer .hotel_box_content_offer_text p{
    padding: 0.3rem 0.8rem;
    border: 1px dotted #CCD5DE;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-color);
}


.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_offer h5{
    padding: 0.8rem 1.5rem;
    background-color: var(--second-color);
    color: var(--White-color);
    font-size: 1.1rem;
    font-weight: 500;
    border-radius: 5px;
}




.hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_pricing{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}


.hotel_box_content_pricing_title h3{
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--trid-color);
    line-height: 1;
}


.hotel_box_content_pricing_title h4{
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--second-color);
    line-height: 1;
    padding: 0.5rem 1rem;
    background-color: #D4EEE3;
    border-radius: 5px;
    text-align: center;
}


.hotel_box_content_pricing_title p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
}


.hotel_box_content_pricing_text h1{
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--trid-color);
    line-height: 1.5;
}


.hotel_box_content_pricing_text h1 span{
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: line-through;
}


.hotel_box_content_pricing_text p{
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 0.3rem;
}







@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }



    .hotel_hero_section{
        background-image: url(./images/video-bg-img.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 90vh;
        position: relative;
    }


    .hotel_hero_container .hotel_hero_row .hotel_hero_box{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        text-align: center;
        width: 100%;
        height: 60vh;
        z-index: 2;
    }


    .custom-shape-divider-bottom-1728808111_hotel svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 61px;
    }



    .hotel_container .hotel_row .hotel_box{
        padding-right: 0rem;
        margin-bottom: 2rem;
    }







    .hotel_container .hotel_row .hotel_box .hotel_box_title{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2rem;
        margin-bottom: 5rem;
    }





    .hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_title{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        margin-top: 3rem;
    }


    .hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_offer{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }



    .hotel_container .hotel_row .hotel_box .hotel_box_row .hotel_box_content .hotel_box_content_pricing{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2rem;
        margin-bottom: 2rem;
    }





}    
















/*====================================/
        // compare List Pages // 
/====================================*/


.compare_container .compare_row .compare_box{
    padding-left: 2rem;
}


.compare_container .compare_row .compare_box .compare_content{
    padding: 1rem;
    background-color: var(--White-color);
    border-radius: 10px;
    border: 2px solid #DCE5EB;
}


.compare_container .compare_row .compare_box .compare_content .compare_img{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    margin-bottom: 1rem;
    
}


.compare_container .compare_row .compare_box .compare_content .compare_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s linear;
}

.compare_container .compare_row .compare_box .compare_content .compare_img:hover img{
    transform: scale(1.1);
}


.compare_container .compare_row .compare_box .compare_content .compare_img i{
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0.8rem 1rem;
    background-color: var(--White-color);
    border-radius: 100px;
    font-size: 1.5rem;
    color: var(--main-color);
}


.compare_container .compare_row .compare_box .compare_content .compare_text{
    padding-bottom: 0rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #E6EBEE;
    text-align: center;
}


.compare_container .compare_row .compare_box .compare_content .compare_text a{
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--trid-color);
    text-decoration: none;
}

.compare_container .compare_row .compare_box .compare_content .compare_text p{
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--main-color);
    border-bottom: none;
    margin-bottom: 0rem;
}


.compare_container .compare_row .compare_box .compare_content p{
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #E6EBEE;
    font-size: 1.3rem;
    font-weight: 500;
    color: #2d3033;
}

.compare_container .compare_row .compare_box .compare_content .parking{
    text-align: center;
    padding-bottom: 0rem;
    border-bottom: 1px solid #fff;
    font-size: 1.3rem;
    font-weight: 500;
    color: #2d3033;
}







@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }



    .compare_container .compare_row .compare_box{
        padding-left: 0rem;
        margin-bottom: 4rem;
    }


}    














/*====================================/
        // hotel details Pages // 
/====================================*/

.hotel_details_section{
    background-color: #F1F5F8;
}

.hotel_details_container .hotel_details_row .hotel_details_box{
    background-color: var(--White-color);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 4rem;
}


.hotel_details_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}


.hotel_details_title .details_title_retting .title_retting{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}


.hotel_details_title .details_title_retting .title_retting h4{
    background-color: #D4EEE3;
    border-radius: 5px;
    display: inline-block;
    color: var(--second-color);
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
}


.hotel_details_title .details_title_retting .title_retting .details_title_retting_icon{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.hotel_details_title .details_title_retting .title_retting .details_title_retting_icon i{
    font-size: 1.1rem;
    color: #FFC107;
}


.hotel_details_title .details_title_retting h1{
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--trid-color);
    line-height: 1.3;
}

.hotel_details_title .details_title_retting p{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
}








.hotel_details_title .details_title_btns{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    text-align: end;
}


.hotel_details_title .details_title_btns .title_btns_text h2{
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--trid-color);
    line-height: 1.4;
}

.hotel_details_title .details_title_btns .title_btns_text h5{
    background-color: var(--second-color);
    color: var(--White-color);
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 500;
}


.hotel_details_box .galleryGrid{
    display: grid;
    grid-template-columns: 0.52fr 0.24fr 0.24fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}


.hotel_details_box .galleryGrid .galleryGrid__item{
    overflow: hidden;
    position: relative;
    border-radius: 10px;
}


.hotel_details_box .galleryGrid .galleryGrid__item .galleryGrid__item_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000090;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 2;
}

.hotel_details_box .galleryGrid .galleryGrid__item:hover .galleryGrid__item_overlay{
    opacity: 1;
    visibility: visible;
}

.hotel_details_box .galleryGrid .galleryGrid__item a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s linear;
}


.hotel_details_box .galleryGrid .galleryGrid__item:hover a img{
    transform: scale(1.1);
}



.hotel_details_box .galleryGrid .galleryGrid__item a i{
    position: absolute;
    top: 45%;
    right: 45%;
    /* padding: 0.3rem; */
    /* background-color: var(--White-color); */
    border-radius: 100px;
    color: var(--White-color);
    font-size: 3.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 3;
}


.hotel_details_box .galleryGrid .galleryGrid__item:hover a i{
    opacity: 1;
    visibility: visible;
}











/* details card */
.details_card_container .details_card_row .details_card_box{
    padding-right: 2rem;
    margin-bottom: 4rem;
}


.details_card_container .details_card_row .details_card_box .details_card_content{
    padding: 1.5rem;
    background-color: var(--White-color);
    border-radius: 10px;
}


.details_card_container .details_card_row .details_card_box .details_card_content .details_card_title{
    margin-bottom: 2rem;
}

.details_card_container .details_card_row .details_card_box .details_card_content .details_card_title h3{
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--main-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.details_card_container .details_card_row .details_card_box .details_card_content p{
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0.7rem;
    color: var(--text-color);
}




.hotel_details_section h5{
    background-color: #27A974;
    padding: 1.5rem;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--White-color);
    margin-bottom: 4rem;
}

.hotel_details_section h5 a{
    color: var(--White-color);
}









/* details room */
.details_room_container .details_room_row{
    background-color: var(--White-color);
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 4rem;
}


.details_room_container .details_room_row h1{
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--trid-color);
    border-bottom: 1px solid #E2E8EC;
    padding-bottom: 1.5rem;
    margin-bottom: 2.5rem;
}



.details_room_container .details_room_row .details_room_box{
    padding-right: 1.5rem;
}


.details_room_container .details_room_row .details_room_box .details_room_content .details_room_img{
    width: 100%;
    height: 100%;
    margin-bottom: 1rem;
}

.details_room_container .details_room_row .details_room_box .details_room_content .details_room_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}


.details_room_container .details_room_row .details_room_box .details_room_content .details_room_title{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.details_room_container .details_room_row .details_room_box .details_room_content .details_room_title h2{
    background-color: #E3E3FF;
    color: #6779F6;
    border-radius: 5px;
    padding: 0.5rem 1.5rem;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 500;
}


.details_room_container .details_room_row .details_room_box .details_room_content .details_room_text{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.details_room_container .details_room_row .details_room_box .details_room_content .details_room_text p{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.1;
}


.details_room_container .details_room_row .details_room_box .details_room_content a{
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--main-color);
    text-decoration: none;
}



.details_room_container .details_room_row .details_room_box .room_pricing_content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    border-radius: 10px;
    border: 2px dotted #E2E8EC;
    margin-bottom: 2rem;
}

.details_room_container .details_room_row .details_room_box .room_pricing_content .room_pricing_text h1{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--trid-color);
    margin-bottom: 1rem;
    padding-bottom: 0;
    border-bottom: none;
}

.details_room_container .details_room_row .details_room_box .room_pricing_content .room_pricing_text h1 i{
    color: var(--text-color);
}



.details_room_container .details_room_row .details_room_box .room_pricing_content .room_pricing_text p{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
}




.details_room_container .details_room_row .details_room_box .room_pricing_content .room_pricing_btns{
    text-align: end;
}


.details_room_container .details_room_row .details_room_box .room_pricing_content .room_pricing_btns h1{
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--black-color);
    padding-bottom: 0;
    margin-bottom: 0rem;
    border-bottom: none;
}

.details_room_container .details_room_row .details_room_box .room_pricing_content .room_pricing_btns p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 3rem;
}







@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }


    .hotel_details_title{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        margin-bottom: 3rem;
    }


    .hotel_details_box .galleryGrid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }



    .details_card_container .details_card_row .details_card_box{
        padding-right: 0rem;
        margin-bottom: 2rem;
    }



    .details_room_container .details_room_row .details_room_box{
        padding-right: 0rem;
        margin-bottom: 4rem;
    }



    .details_room_container .details_room_row .details_room_box .room_pricing_content .room_pricing_btns{
        text-align: start;
    }


    .details_room_container .details_room_row .details_room_box .room_pricing_content{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2rem;
        padding: 2rem;
        border-radius: 10px;
        border: 2px dotted #E2E8EC;
        margin-bottom: 2rem;
    }



}  









/*====================================/
            // Booking Pages // 
/====================================*/

.booking_section{
    background-color: #F1F5F8;
}


.booking_step{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0rem;
    margin-bottom: 4rem;
    margin-top: 5rem;
}


.booking_step .booking_step_button{
    text-align: center;
    margin-top: 5rem;

}

.booking_step .booking_step_button p{
    margin-top: 0.5rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--trid-color);
}

.booking_step .booking_step_button .booking_step_link{
    padding: 1rem 0.6rem;
    background-color: var(--White-color);
    border-radius: 100px;
    display: inline-block;
    place-items: center;
}

.booking_step .booking_step_button a{
    padding: 0.5rem 1.2rem;
    background-color: #FFE6E5;
    border-radius: 100px;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--main-color);
}

.booking_step .booking_step_button a.active{
    padding: 0.5rem 1.2rem;
    background-color: var(--main-color);
    border-radius: 100px;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--White-color);
}

.booking_step .booking_step_button a.active1{
    padding: 0.4rem 0.9rem;
    background-color: var(--second-color);
    border-radius: 100px;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--White-color);
}


.booking_step .booking_step_line{
    flex: 1 0 32px;
    min-width: 1px;
    min-height: 1px;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.12);
}






/* booking_container */

.booking_container .booking_row .booking_box{
    padding-right: 2rem;
}


.booking_container .booking_row .booking_box .booking_content{
    padding: 2rem;
    background-color: var(--White-color);
    border-radius: 10px;
}


.booking_container .booking_row .booking_box .booking_content .booking_content_box{
    padding: 1rem;
    border: 2px dotted #DEE2E6;
    border-radius: 10px;
    margin-bottom: 2rem;
}


.booking_container .booking_row .booking_box .booking_content .booking_content_box .booking_content_img{
    padding-right: 1rem;
    padding-left: 0;
}

.booking_container .booking_row .booking_box .booking_content .booking_content_box .booking_content_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}


.booking_container .booking_row .booking_box .booking_content .booking_content_box .booking_content_text .booking_content_retting{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}


.booking_container .booking_row .booking_box .booking_content .booking_content_box .booking_content_text .booking_content_retting i{
    font-size: 1.1rem;
    color: #FFC107;
}



.booking_container .booking_row .booking_box .booking_content .booking_content_box .booking_content_text h1{
    font-size: 2rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 1rem;
}



.booking_container .booking_row .booking_box .booking_content .booking_content_box .booking_content_text p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 2rem;
}


.booking_container .booking_row .booking_box .booking_content .booking_content_box .booking_content_text .booking_content_btns{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}



.booking_container .booking_row .booking_box .booking_content .booking_content_box .booking_content_text .booking_content_btns h4{
    padding: 1.5rem 1rem;
    background-color: var(--main-color);
    border-radius: 5px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--White-color);
}


.booking_container .booking_row .booking_box .booking_content .booking_content_box .booking_content_text .booking_content_btns .booking_content_btns_text h3{
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--trid-color);
}

.booking_container .booking_row .booking_box .booking_content .booking_content_box .booking_content_text .booking_content_btns .booking_content_btns_text p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 0;
}


.booking_container .booking_row .booking_box .booking_content .booking_content_box .booking_content_text .booking_content_icon{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.booking_container .booking_row .booking_box .booking_content .booking_content_box .booking_content_text .booking_content_icon h2{
    padding: 0.8rem 1.2rem;
    border: 1px dotted #DEE2E6;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-color);
}






.booking_container .booking_row .booking_box .booking_content h1{
    font-size: 2rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 1rem;
}



.booking_container .booking_row .booking_box .booking_content p{
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 2rem;
}


.booking_container .booking_row .booking_box .booking_content h4{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 1.5rem;
}

.booking_container .booking_row .booking_box .booking_content h4.active{
    color: #27a974;
}









.booking_container .booking_row .booking_box .booking_btns{
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    justify-content: end;
}


.booking_container .booking_row .booking_box .booking_btns .btns_book1{
    padding: 10px 18px;
    background-color: #212529;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--White-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.booking_container .booking_row .booking_box .booking_btns .btns_book2{
    padding: 10px 18px;
    background-color: var(--main-color);
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--White-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}








.booking_container .booking_row .booking_box1{
    margin-top: 1rem;
}

.booking_container .booking_row .booking_box1 .booking_card{
    padding: 1.5rem;
    background-color: var(--White-color);
    border-radius: 10px;
}


.booking_container .booking_row .booking_box1 .booking_card h1{
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--trid-color);
    margin-bottom: 1rem;
}



.booking_container .booking_row .booking_box1 .booking_card .booking_card_box{
    border: 2px dotted #F1F5F8;
    padding: 1rem;
    margin-bottom: 1.5rem;
}



.booking_container .booking_row .booking_box1 .booking_card .booking_card_box .card_Check_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.booking_container .booking_row .booking_box1 .booking_card .booking_card_box .card_Check_box .booking_card_Check{
    background-color: #F7F9FC;
    padding: 1rem 3rem;
    border-radius: 5px;
    margin-bottom: 2rem;
}

.booking_container .booking_row .booking_box1 .booking_card .booking_card_box .card_Check_box .booking_card_Check .card_Check_text h3{
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-color);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.booking_container .booking_row .booking_box1 .booking_card .booking_card_box .card_Check_box .booking_card_Check .card_Check_text h1{
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--trid-color);
    margin-bottom: 0.5rem;
}

.booking_container .booking_row .booking_box1 .booking_card .booking_card_box .card_Check_box .booking_card_Check .card_Check_text p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}






.booking_container .booking_row .booking_box1 .booking_card .booking_card_box h2{
    font-size: 1.2rem;
    font-weight: 500;
    color: #455873;
    margin-bottom: 1rem;
    text-transform: uppercase;
}


.booking_container .booking_row .booking_box1 .booking_card .booking_card_box h4{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #0e1e2b;
    margin-bottom: 3rem;
}


.booking_container .booking_row .booking_box1 .booking_card .booking_card_box h4 i{
    padding: 0.9rem;
    background-color: #B2E7DC;
    border-radius: 100px;
    color: var(--second-color);
}


.booking_container .booking_row .booking_box1 .booking_card .booking_card_box p{
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-color);
}

.booking_container .booking_row .booking_box1 .booking_card .booking_card_box p a{
    text-decoration: none;
    color: var(--main-color);
}





.booking_container .booking_row .booking_box1 .booking_card .booking_pricing_box{
    border-radius: 10px;
    border: 1px solid #DEE2E6;
    margin-bottom: 2rem;
}


.booking_container .booking_row .booking_box1 .booking_card .booking_pricing_box .booking_pricing_text{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #DEE2E6;
    padding: 1rem 1.5rem;
}


.booking_container .booking_row .booking_box1 .booking_card .booking_pricing_box .booking_pricing_text:last-child{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
    padding: 1rem 1.5rem;
}


.booking_container .booking_row .booking_box1 .booking_card .booking_pricing_box .booking_pricing_text h3{
    font-size: 1.5rem;
    font-weight: 500;
    color: #2d3033;
}

.booking_container .booking_row .booking_box1 .booking_card .booking_pricing_box .booking_pricing_text h2{
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3033;
}


.booking_container .booking_row .booking_box1 .booking_card .booking_pricing_box .booking_pricing_text h3.active{
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--second-color);
}

.booking_container .booking_row .booking_box1 .booking_card .booking_pricing_box .booking_pricing_text h2.active{
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--second-color);
}






.booking_container .booking_row .booking_box1 .booking_card .booking_card_btns{
    width: 100%;
    height: 100%;
}

.booking_container .booking_row .booking_box1 .booking_card .booking_card_btns input{
    background-color: var(--main-color);
    color: var(--White-color);
    width: 100%;
    height: 60px;
    outline: none;
    border: none;
    border-radius: 5px;
    font-size: 1.6rem;
    font-weight: 500;

}







.booking_title{
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 2rem;
    padding-left: 1rem;
}




.booking_container .booking_row .booking_box_form{
    padding-right: 2rem;
    margin-top: 1rem;
}


.booking_container .booking_row .booking_box_form .booking_form{
    padding: 1.5rem;
    background-color: var(--White-color);
    border-radius: 5px;
    margin-bottom: 2.5rem;
}


.booking_container .booking_row .booking_box_form .booking_form h2{
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--trid-color);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #E2E8EC;
}


.booking_container .booking_row .booking_box_form .booking_form form{
    width: 100%;
    height: 100%;
}

.booking_container .booking_row .booking_box_form .booking_form .form_input_box{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    margin-bottom: 2rem;
}


.booking_container .booking_row .booking_box_form .booking_form .form_input_box .booking_form_input{
    width: 100%;
    height: 100%;
}


.booking_container .booking_row .booking_box_form .booking_form .form_input_box .booking_form_input label{
    width: 100%;
    font-size: 1.2rem;
    font-weight: 500;
    color: #2d3033;
    margin-bottom: 0.5rem;
}


.booking_container .booking_row .booking_box_form .booking_form .form_input_box .booking_form_input input{
    width: 100%;
    height: 55px;
    outline: none;
    border: 1px solid #DADFE6;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 5px;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.booking_container .booking_row .booking_box_form .booking_form .form_input_box .booking_form_input input:focus{
    border-color: var(--main-color);
}


.booking_container .booking_row .booking_box_form .booking_form .form_input_box .booking_form_input textarea{
    width: 100%;
    height: 160px;
    outline: none;
    border: 1px solid #DADFE6;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    border-radius: 5px;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.booking_container .booking_row .booking_box_form .booking_form .form_input_box .booking_form_input textarea:focus{
    border-color: var(--main-color);
}




.booking_container .booking_row .booking_box_form .booking_btns{
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    justify-content: end;
}


.booking_container .booking_row .booking_box_form .booking_btns .btns_book1{
    padding: 10px 18px;
    background-color: #212529;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--White-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.booking_container .booking_row .booking_box_form .booking_btns .btns_book2{
    padding: 10px 18px;
    background-color: var(--main-color);
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--White-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}














.booking_container .booking_row .booking_box2{
    padding-left: 0;
    padding-right: 0;
    margin-top: 1rem;
}


.booking_container .booking_row .booking_box2 .booking_payment_box{
    padding: 2rem;
    background-color: var(--White-color);
    border-radius: 5px;
}

.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}


.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_title h1{
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--trid-color);
}


.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_title a{
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--main-color);
    text-decoration: none;
}



.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_input{
    width: 100%;
    height: 100%;
}


.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_input .payment_input_box{
    padding: 1rem;
    border: 2px solid #ECF1F6;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_input .payment_input_box input{
    width: 20px;
    height: 20px;
    accent-color: var(--main-color);
}

.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_input .payment_input_box label{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: #0e1e2b;
    text-transform: uppercase;
}


.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_input .payment_input_box label i{
    font-size: 4rem;
    color: #04765F;
}


.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_input .payment_input_box label .fa-cc-mastercard{
    font-size: 4rem;
    color: #CE3426;
}


.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_input .payment_input_box label .fa-cc-paypal{
    font-size: 4rem;
    color: #106BDA;
}




.booking_container .booking_row .booking_box2 .booking_payment_box h1{
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--trid-color);
    margin-bottom: 1rem;
}


.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}


.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_content h4{
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-color);
}

.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_content h2{
    font-size: 1.4rem;
    font-weight: 600;
    color: #2d3033;
}


.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_content h3{
    font-size: 1.4rem;
    font-weight: 600;
    color: #51AE81;
}



.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_btns{
    margin-bottom: 1rem;
    margin-top: 2rem;
}


.booking_container .booking_row .booking_box2 .booking_payment_box .booking_payment_btns input{
    background-color: var(--main-color);
    color: var(--White-color);
    width: 100%;
    height: 60px;
    outline: none;
    border: none;
    border-radius: 5px;
    font-size: 1.6rem;
    font-weight: 500;
}












.booking_container .booking_row .booking_box_success .box_success_content{
    background-color: var(--White-color);
    padding: 5rem;
    margin-top: 5rem;
}


.booking_container .booking_row .booking_box_success .box_success_content .box_success_title{
    text-align: center;
    margin-bottom: 3rem;
}

.booking_container .booking_row .booking_box_success .box_success_content .box_success_title i{
    padding: 1.5rem 1.9rem;
    background-color: #27A974;
    color: var(--White-color);
    border-radius: 100px;
    font-size: 4rem;
    margin-bottom: 2rem;
}


.booking_container .booking_row .booking_box_success .box_success_content .box_success_title h1{
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--trid-color);
    margin-bottom: 0.5rem;
}


.booking_container .booking_row .booking_box_success .box_success_content .box_success_title p{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
}

.booking_container .booking_row .booking_box_success .box_success_content .box_success_title p a{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--main-color);
    text-decoration: none;
}


.booking_container .booking_row .booking_box_success .box_success_content .box_success_code{
    padding: 2rem;
    border: 3px dotted #e7f0f7;
    border-radius: 5px;
}

.booking_container .booking_row .booking_box_success .box_success_content .box_success_code .success_code_line{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 1.5rem;
}


.booking_container .booking_row .booking_box_success .box_success_content .box_success_code .success_code_line .box_success_code_text h2{
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--trid-color);
}


.booking_container .booking_row .booking_box_success .box_success_content .box_success_code .success_code_line .box_success_code_text p{
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-color);
}





.booking_container .booking_row .booking_box_success .box_success_content .box_success_btns{
    text-align: center;
    margin-top: 4rem;
}


















@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }



    .booking_container .booking_row .booking_box .booking_content .booking_content_box .booking_content_img{
        padding-right: 0rem;
        padding-left: 0;
        margin-bottom: 2rem;
    }



    .booking_container .booking_row .booking_box{
        padding-right: 0rem;
        margin-bottom: 2rem;
    }


    .booking_container .booking_row .booking_box1{
        margin-top: 1rem;
        padding-left: 0;
        padding-right: 0;
    }





    .booking_container .booking_row .booking_box_form{
        padding-right: 0rem;
        margin-top: 1rem;
        margin-bottom: 2rem;
    }




    .booking_container .booking_row .booking_box_form .booking_form .form_input_box{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2.5rem;
        margin-bottom: 2rem;
    }




    .booking_container .booking_row .booking_box_success .box_success_content{
        background-color: var(--White-color);
        padding: 2rem;
        margin-top: 5rem;
    }


    .booking_container .booking_row .booking_box_success .box_success_content .box_success_title h1{
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--trid-color);
        margin-bottom: 0.5rem;
    }



    .booking_container .booking_row .booking_box_success .box_success_content .box_success_code .success_code_line{
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        align-items: center;
        gap: 2rem;
        margin-bottom: 1.5rem;
    }



    .booking_container .booking_row .booking_box_success .box_success_content .box_success_btns{
        text-align: center;
        margin-top: 4rem;
        margin-bottom: 4rem;
    }






}    









#progress{
    position: fixed;
    bottom: 35px;
    right: 35px;
    cursor: pointer;
    display: none;
    z-index: 999;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 100px;
}



#progress #progressValue{
    color: var(--White-color);
    background-color: #003149;
    padding: 0.3rem 1rem;
    border-radius: 100px;
    font-size: 2.3rem;
}



@media (max-width:768px){
    section{
        padding: 7rem 4%;
    }

    footer{
        padding: 7rem 4%;
    }

    html{
        font-size: 55%;
    }


    body{
        overflow-x: hidden;
    }



    #progress #progressValue{
        display: none;
    }



}