@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Red+Hat+Display:wght@400;500;600;700&display=swap");

:root {
    --light-1: #FFFFFF;
    --light-2: #F9FAFE;
    --light-3: #FAFAFD;

    --dark-1: #16171C;
    --dark-2: #494C57;
    --dark-3: #171717;
    --dark-4: #202020;
    --dark-5: #151515;
    --dark-6: #004CB6;

    --subtleGrey-1: #F8F8FC;
    --subtleGrey-2: #989DB1;
    --subtleGrey-3: #8D8F98;
    --subtleGrey-4: #9A9A9A;
    --subtleGrey-5: #CED2DE;

    --subtleBlue-1: #34B3FF;
    --subtleBlue-2: #518CFF;
    --subtleBlue-3: #4376DB;
    --subtleBlue-4: #CCE3FF;

    --subtleGreen-1: #00B67A;

    --lemonYellow: #F2FF57;
    --deepGrey: #2E2E2E;
    --navy-1: #313E60;
    --navy-2: #1C3055;

    --black-1: #080e09;
    --black-2: #232323;
    --black-3: #101419;
    --gray-3: #e2e3e5;
    --gray-4: #c9c9c9;
    --gray-5: #adb2b8;
    --gray-6: #9c9c9c;
    --gray-7: #879fb0;
    --blue-primary: #0f52ba;
    --blue-secondary: #478fff;
    --blue-tertiary: #739ad5;
    --softBlue: #F9FCFC;
    --yellow: #ff9900;

    --white-1: #ffffff;
    --white-2: #eeeeee;
    --white-3: #ecf1f4;
    --black: #000909;
    --dark: #0A0F16;
    --subtleGreen: #90BCB7;
    --darkGreen: #082D28;
    --darkTosca: #569B9B;
    --tosca-1: #00FFD1;
    --tosca-2: #27D7D7;
    --tosca-3: #3FE8FF;
    --deepTosca-1: #016A6A;
    --deepTosca-2: #02A6A6;
    --grey-1: #888888;
    --grey-2: #dddbdb;
}

.navbar-1-2 .btn-fill {
    background-color: #ffdda9;
    color: #372642;
    transition: 0.3s;
}

.navbar-1-2 .btn-fill:hover {
    background-color: #fcd396;
    color: #372642;
    transition: 0.3s;
}

.navbar-1-2 nav a.nav-link {
    color: #ffffff;
    transition: 0.3s;
}

.navbar-1-2 nav a.nav-link:hover {
    color: #ffdda9;
    font-weight: 500;
    transition: 0.3s;
}

.navbar-1-2 nav a.nav-link.active {
    color: #ffdda9;
}

.navbar-1-2 #menu-toggle:checked+#menu,
.navbar-1-2 #menu-toggle:checked+#menu+#menu {
    display: block;
}

.font-display {
    font-family: 'Red Hat Display', sans-serif;
}

.font-body {
    font-family: 'Inter', sans-serif;
}

.text-subtleBlue-2 {
    color: var(--subtleBlue-2);
}

.text-subtleGreen-2 {
    color: var(--subtleGreen-1);
}

.text-dark-1 {
    color: var(--dark-1);
}

.text-dark-2 {
    color: var(--dark-2);
}

.text-dark-3 {
    color: var(--dark-3);
}

.text-dark-4 {
    color: var(--dark-4);
}

.text-dark-5 {
    color: var(--dark-5);
}

.text-navy-2 {
    color: var(--navy-2);
}

.text-subtleBlue-1 {
    color: var(--subtleBlue-1);
}

.text-subtleGrey-1 {
    color: var(--ssubtleGrey-1);
}

.text-subtleGrey-2 {
    color: var(--subtleGrey-2);
}

.text-subtleGrey-3 {
    color: var(--subtleGrey-3);
}

.text-subtleGrey-4 {
    color: var(--subtleGrey-4);
}

.text-subtleGrey-5 {
    color: var(--subtleGrey-5);
}

@media(max-width: 768px) {
    .bg-subtleBlue-1 {
        background-color: var(--subtleBlue-1);

    }

    .icon-placeholder {
        height: 274px;
        width: 303px;
    }

    .mt-px442 {
        margin-top: 442px;
    }

    .explore-gallery {
        height: 600px;
    }

    .image-explore {
        width: 452px;
        height: 600px;
    }

    /* .form-placeholder {
        width: 465px;
    } */
}

@media (min-width: 1024px) {
    .icon-placeholder {
        width: 250px;
    }
}

.bg-light-1 {
    background-color: var(--light-1);
}

.bg-light-2 {
    background-color: var(--light-2);
}

.bg-light-3 {
    background-color: var(--light-3);
}

.bg-subtleGreen {
    background-color: var(--subtleGreen-1);
}

.bg-subtleGrey-1 {
    background-color: var(--subtleGrey-1);
}

.text-px20 {
    font-size: 20px;
}

.bg-dark-6 {
    background-color: var(--dark-6);
}

.bg-subtleGreen {
    background-color: var(--subtleGreen-1);
}

.bg-subtleGrey-1 {
    background-color: var(--subtleGrey-1);
}

.bg-dark-3 {
    background-color: var(--dark-3);
}

.bg-dark-4 {
    background-color: var(--dark-4);
}

.bg-dark-5 {
    background-color: var(--dark-5);
}

.w-screen-3xl {
    width: 1696px;
}

.form-placeholder {
    padding: 52px;
    box-shadow: -32px 48px 60px rgba(22, 23, 28, 0.04);

}

select:invalid {
    color: #6B7280;
}

select:valid {
    color: var(--light-1);
}

select:invalid option,
select:valid option {
    margin: 12px 0;
    font-weight: 500;
    color: var(--light-1);
}

.z-min1 {
    z-index: -1;
}

.form-select-icon {
    background-repeat: no-repeat;
    background-image: url('https://api.elements.buildwithangga.com/storage/files/2/assets/Header/HeaderFinance-2/dropdownArrowDark.svg');
    background-size: 12px;
    background-position: calc(100% - 20px) center;
}

.content-2-3 .btn-outline {
    border: 1px solid #707092;
    color: #707092;
    transition: 0.2s;
}

.content-2-3 .btn-outline:hover {
    border: 1px solid #ffffff;
    color: #ffffff;
    transition: 0.2s;
}

.content-2-3 .card-header {
    background-color: #292952;
    border: 1px solid #4c4c6d;
}

.content-2-3 .btn-fill {
    background-color: #524eee;
    transition: 0.2s;
}

.content-2-3 .btn-fill:hover {
    --tw-shadow: inset 0 0px 25px 0 rgba(20, 20, 50, 0.7);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition: 0.2s;
}

.content-2-3 .text-purple {
    color: #707092;
}

.content-3-7 .card-outline {
    border: 1px solid #E5EBF9;
}

.content-3-7 .card {
    transition: 0.4s;
    top: 0px;

    left: 0px;
    position: relative;
}

.content-3-7 .card:hover {
    top: -3px;
    left: -3px;
    position: relative;
    transition: 0.4s;
}

.content-3-7 .btn-outline {
    border: 1px solid #2EC49C;
    color: #2EC49C;
}

.content-3-7 .btn-outline:hover {
    background-color: #2EC49C;
    color: #FFFFFF;
}

.content-3-7 .btn-fill {
    background-image: linear-gradient(rgba(91, 203, 173, 1), rgba(39, 194, 153, 1));
}

.content-3-7 .btn-fill:hover {
    background-image: linear-gradient(#29B18D, #29B18D);
}

.content-3-7 .price-list-3-7 .no-check-3-7 {
    color: #E1E1E1;
}

.content-3-7 .price-list-3-7 .check-3-7,
.content-3-7 .text-medium-black {
    color: #2E3A53;
}

.content-3-7 .bg-medium-black {
    background-color: #2E3A53;
}

.content-3-7 .text-medium-white {
    color: #C3C3C8;
}

.content-3-7 .caption {
    color: #8E8FAD;
}

.content-3-7 .price-title {
    color: #141C2E;
}

.content-3-7 .price-month {
    color: #9E9E9E;
}

.border-blue-primary {
    border-color: var(--blue-primary);
}

.text-blackText-2 {
    color: var(--black-2);
}

.text-blue-primary {
    color: var(--blue-primary);
}

.text-blue-secondary {
    color: var(--blue-secondary);
}

.text-gray-6 {
    color: var(--gray-6);
}

.text-gray-7 {
    color: var(--gray-7);
}

.shadow-sblue {
    box-shadow: 0px 24px 32px rgba(15, 82, 186, 0.4);
}

.shadow-cardShadow {
    box-shadow: none;
}

.cardShadow:hover {
    box-shadow: 12px 24px 80px rgba(15, 82, 186, 0.06);
}


.h-cardHotel {
    height: 420px;
}

.h-imageCard {
    height: 190px;
}

.w-imageCard {
    width: 268px;
}

.rounded-28 {
    border-radius: 28px;
}

.z-forBackground {
    z-index: -99;
}

.text-7 {
    font-size: 28px;
}

.bg-blue-primary {
    background-color: var(--blue-primary);
}

.bg-blackText-3 {
    background-color: var(--black-3);
}

.bg-blue-primary:hover {
    background-color: var(--blue-secondary);
    box-shadow: 0px 24px 32px rgba(15, 82, 186, 0.4);
}

.hide-scroll::-webkit-scrollbar {
    display: none;
}

.draggable {
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}

.explore-gallery {
    height: 530px;
    /* cursor: -webkit-grabbing;            cursor: grabbing; */
}

.image-explore {
    width: 326px;
    height: 450px;
}

.bg-softBlue {
    background-color: var(--softBlue);
}

.icon-placeholder {
    height: 200px;
    width: 274px;
}

.max-h-cardHotel {
    max-height: 300px;
}

.max-w-statisticHero {
    max-width: 85%;
}

.bg-black-1 {
    background-color: var(--black);
}

.bg-dark {
    background-color: var(--dark);
}

.text-40 {
    font-size: 40px;
}

.text-28 {
    font-size: 28px;
}

.text-24 {
    font-size: 24px;
}

.text-20 {
    font-size: 20px;
}

.text-white-1 {
    color: var(--white-1);
}

.text-white-2 {
    color: var(--white-2);
}

.text-grey-1 {
    color: var(--grey-1);
}

.text-grey-2 {
    color: var(--grey-2);
}

.text-darkGreen {
    color: var(--darkGreen);
}

.text-subtleGreen {
    color: var(--subtleGreen);
}

.bg-white-2 {
    background-color: var(--white-2);
}

.leading-px40 {
    line-height: 40px;
}

.leading-px36 {
    line-height: 36px;
}

.z-min100 {
    z-index: -100;
}

.z-min10 {
    z-index: -10;
}

.max-w-screen {
    max-width: 1440px;
}

.max-w-px400 {
    max-width: 400px;
}

.w-px580 {
    width: 580px;
}

.h-780 {
    height: 780px;
}

.footer-2-3 .list-footer li a {
    color: #707092;
}

.footer-2-3 .list-footer li a:hover {
    color: #FFFFFF;
}

.footer-2-3 .border-color {
    color: #707092;
}

.footer-2-3 .footer-link:hover {
    color: #FFFFFF;
}

.footer-2-3 .social-media-c:hover circle,
.footer-2-3 .social-media-p:hover path {
    fill: #FFFFFF;
}