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

:root {
    --primary-color: #039C40;
    --light-color: #fcfcfc;
    --dark-color: #01220E;
    --grey-color: #F2F2F2;
    --font-family: "Inter", sans-serif;
    --second-family: "Istok Web", sans-serif;
    --third-family: "Irish Grover", sans-serif;
    --font3: "Abhaya Libre ExtraBold", sans-serif;
}

body {
    padding: 0;
    margin: 0;
    background-color: var(--grey-color);
    font-family: var(--font-family);
    font-style: normal;
}

/* toggle menu bar */
#menubar {
    order: 4;
}


#toggleMenu {
    display: none;
}

.toggle-menu {
    cursor: pointer;
    display: none;

    @media(max-width:600px) {
        display: block;
    }
}

.toggle-menu:after {
    content: url("./assets/icons/menu.svg");
}

/* input[type="checkbox"]:checked+.toggle-menu:after {
    content: "done";
    } */

input[type="checkbox"]:checked+.toggle-menu+.menu {
    display: flex;
    align-items: center;
    align-content: center;
    font-size: 24px;
    z-index: 111;
    position: fixed;
    /* justify-content: flex-start; */
}

input[type="checkbox"]:checked+.toggle-menu+.menu .toggle-menu::after {
    content: url("./assets/icons/close-icon.svg");
    position: absolute;
    top: 30px;
    right: 20px;

}


/* tourist place name list */
.place-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* border-radius: 20px; */
}

.international-list {
    width: 100%;
    overflow: scroll;
    scroll-behavior: smooth;
    gap: 20px;
    /* background-color: green; */

}

.international-list::-webkit-scrollbar {
    display: none;
}

input[type="radio"] {
    display: none;
}

label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-weight: bold;
}

.faq-content {
    background-color: #f2f2f2;
    margin-bottom: 15px;
    padding: 20px;
    border-radius: 10px;
}

.content {
    display: none;
    /* padding:10px; */
}

input[type="radio"]:checked+label+.content {
    display: block;
}

.quote-promo {
    background-color: #000;
    padding: 30px;
    color: #fff;
    text-align: center;
    border-radius: 20px;

    p {
        font-family: var(--font-family);
        font-weight: 400;
        font-size: 38px;
        text-align: center;
        color: #fff;
    }
}

.quick-info {
    display: flex;

    @media(max-width:600px) {
        flex-direction: column;
    }
}

.quick-info .about {
    width: 100%;
}

.quick-info .contact {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.places-list {
    @media(max-width:600px) {
        flex-direction: column;
    }
}

.places {
    width: 100%;
    overflow: scroll;
}
.places::-webkit-scrollbar{
    display: none;
}
.place{
    color:#f1f1f1;
    font-size: 18px;
    font-weight: bold;
    background-color: #1313135a;
    /* padding:5px 10px; */
}

.destination-title {
    width: 70%;
    overflow: hidden;

    @media(max-width:600px) {
        width: 100%;
    }
}
.destination-title ::-webkit-scrollbar{
    display: none;
}

.place-card {
    width: 100%;
    
    /* background-color: green; */
    /* opacity: 0; */
    animation: slide 5s infinite linear;

}

.place-slide:hover .place-card{
   animation-play-state: paused;
}

@keyframes slide {
    0% {
        /* opacity: 0; */
        transform: translateX(0);
    }

    100% {
        /* opacity: 1; */
        transform: translateX(-50%);
    }
}

.customize-your-trip-content form input,
select {
    padding: 15px 10px;
    width: 100%;
    margin: 10px 0;
    background-color: transparent;
    /* border: 1px solid rgba(255, 255, 255, 0.569); */
    border: 1px solid rgba(51, 51, 51, 0.2);
    color: #252525;
    font-size: 14px;
}

.customize-your-trip-content form input::placeholder {
    color: #252525;
    /* opacity: 0.5; */
}

.customize-your-trip-content form select option {
    color: #000;
}

.customize-your-trip-content form button {
    border: none;
    background-color: #039c40;
    color: #f1f1f1;
    font-weight: bold;
    width: 100%;
    padding: 15px 10px;
}

.enquery-btn{
    border:1px solid #000;
    background-color: transparent;
    color: #000;
    padding:10px 15px;
    border-radius: 50px;
    font-size: 14px;
}