:root {
    --main-primary: #135589;
    --main-secondary: #70161E;
    --main-supplementary: #FFA926;

    --second-primary: #C5E5FF;
    --second-secondary: #FFCBD0;
    --second-supplementary: #FFDCA8;

    --background-primary: #F0F8FF;
    --background-secondary: #FFF2F3;
    --background-supplementary: #FFF6E9;

    --error-primary: #FF4644;
    --error-secondary: #FFECEC;

    --neutral-primary: #242423;
    --neutral-secondary: #504F4D;
    --neutral-disable: #7C7B77;
    --neutral-line: #BDBBB6;
    --neutral-background: #FFF;
    --neutral-dark: #1A1A19;

    --blue-60: #135589;
    --blue-50: #3B8DCD;
    --blue-40: #6FC0FF;
    --blue-30: #9AD3FF;
    --blue-20: #C5E5FF;
    --blue-10: #F0F8FF;

    --pink-60: #70161E;
    --pink-50: #B43E49;
    --pink-40: #F87B86;
    --pink-30: #FFA5AD;
    --pink-20: #FFCBD0;
    --pink-10: #FFF2F3;

    --yellow-60: #774800;
    --yellow-50: #BB7407;
    --yellow-40: #FFA926;
    --yellow-30: #FFC367;
    --yellow-20: #FFDCA8;
    --yellow-10: #FFF6E9;

    --red-60: #790200;
    --red-50: #BD1B19;
    --red-40: #FF4644;
    --red-30: #FF7D7C;
    --red-20: #FFB5B4;
    --red-10: #FFECEC;

    --neutral-60: #1A1A19;
    --neutral-50: #242423;
    --neutral-40: #504F4D;
    --neutral-30: #7C7B77;
    --neutral-20: #BDBBB6;
    --neutral-10: #FCF9F1;
}

body {
    min-height: 100%;
}

body, h1, h2, h3, p, a, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* Typography */
.web-display {
    font-family: "Paytone One";
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 96px */
}

.web-title {
    font-family: "Paytone One";
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 54px */
}

.web-subtitle {
    font-family: Montserrat;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 36px */
}

.web-label-lg {
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 30px */
}

.web-label-sm {
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
}

.web-label-sm-bold {
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.web-paragraph {
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 30px */
}

.web-caption {
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
}

.web-body {
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}


/* Shadow */
.shadow-lg {
    box-shadow: 0px 18px 40px 0px rgba(0, 0, 0, 0.10), 0px 74px 74px 0px rgba(0, 0, 0, 0.09), 0px 166px 100px 0px rgba(0, 0, 0, 0.05), 0px 296px 118px 0px rgba(0, 0, 0, 0.01), 0px 464px 130px 0px rgba(0, 0, 0, 0.00);
}

.shadow-sm {
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.10), 0px 40px 40px 0px rgba(0, 0, 0, 0.09);
}


/* Button */
.primary-btn, .secondary-btn, .supplementary-btn, .tertiary-btn {
    display: inline-flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    text-align: center;
}

.primary-btn {
    background-color: var(--main-primary);
    color: var(--neutral-background);
}

.primary-btn:hover {
    background: var(--blue-50);
    color: var(--neutral-background);
}

.primary-btn:focus {
    border-radius: 8px;
    border: 2px solid var(--blue-40);
    background-color: var(--main-primary);
    color: var(--neutral-background);
}

.secondary-btn {
    background-color: var(--main-secondary);
    color: var(--neutral-background);
}

.secondary-btn:hover {
    background-color: var(--pink-50);
}

.secondary-btn:focus {
    border-radius: 8px;
    border: 2px solid var(--pink-40);
    background-color: var(--main-secondary);
}

.supplementary-btn {
    background-color: var(--main-supplementary);
    color: var(--neutral-primary);
}

.supplementary-btn:hover {
    background-color: var(--yellow-30);
}

.supplementary-btn:focus {
    border-radius: 8px;
    border: 2px solid var(--yellow-20);
    background-color: var(--main-supplementary);
}

.tertiary-btn {
    background-color: transparent;
    color: var(--blue-50);
    text-decoration-line: underline;
}

.tertiary-btn:hover {
    color: var(--blue-40);
}

.tertiary-btn:focus {
    color: var(--blue-60);
}

.outline-btn {
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    text-decoration: none;
}

.outline-btn-error {
    color: var(--error-primary);
    border: 2px solid var(--error-primary);
}

.tipe-gender {
    display: flex;
    padding: 4px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 40px;
    border: 1px solid var(--Neutral-Primary, #242423);  
}

.sisa-kamar {
    color: var(--error-primary)
}


/* Navbar Style */
#navbar {
    /* font-family: 'Montserrat' !important; */
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--neutral-background);
    z-index: 9999;
}

#navbar .nav-item {
    margin-left: 28px;
}

#navbar .nav-item a {
    color: var(--neutral-primary);
}

#navbar .dropdown-menu li {
    padding: 12px 20px;
}

#navbar .dropdown-menu li:first-child {
    border-radius: 8px 8px 0px 0px;
}

#navbar .dropdown-menu li:last-child {
    border-radius: 0px 0px 8px 8px;
}

#navbar .dropdown-menu li:hover {
    background-color: var(--neutral-line);
}

#navbar .dropdown-menu li a:hover {
    background-color: var(--neutral-line);
}


#navbar .dropdown-menu li a:focus {
    color: var(--neutral-primary);
}

#navbar .dropdown-menu {
    padding: 0px;
    border: none;
    border-radius: 8px;
    box-shadow: 0px 18px 40px 0px rgba(0, 0, 0, 0.10), 0px 74px 74px 0px rgba(0, 0, 0, 0.09), 0px 166px 100px 0px rgba(0, 0, 0, 0.05), 0px 296px 118px 0px rgba(0, 0, 0, 0.01), 0px 464px 130px 0px rgba(0, 0, 0, 0.00);
}

#navbar .tertiary-btn {
    margin-left: 15px;
}


#navbar .navbar-toggler {
    border: none;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

/* End Navbar Style */


/* Footer Style */
#footer {
    background-color: var(--neutral-primary);
    padding-top: 80px;
    padding-bottom: 80px;
    margin-top: 11%;
}

#footer a {
    text-decoration: none;
}

#footer .menu {
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    gap: 40px;
}

#footer .menu a {
    color: var(--neutral-line);
}

#footer .social-media {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    gap: 40px;
}


#footer .web-caption {
    color: var(--neutral-line);
}
/* End Footer Style */



/* Kos Card Style */
.kos-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 8px;
    background-color: var(--neutral-background);
}

.kos-card .head {
    display: flex;
    height: 200px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px 8px 0px 0px;
    background-size: cover;
}

.kos-card .keterangan {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
}

.kos-card .keterangan .informasi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.kos-card .keterangan > .web-caption {
    color: var(--neutral-disable);
    margin-top: 12px;
}

.kos-card .keterangan > .web-paragraph {
    color: var(--neutral-primary);
}

.kos-card .keterangan > .web-label-lg {
    color: var(--main-secondary);
    margin-top: 12px;
    margin-bottom: 20px;
}

.kos-card .keterangan .primary-btn, .kos-card .keterangan .tertiary-btn {
    width: 100%;
}
/* End Kos Card Style */



.white-box {
    border-radius: 20px;
    background: var(--neutral-background);
    display: flex;
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    margin-bottom: 40px;
}


/* Form */
.form-group input {
    border-radius: 8px;
    border: 1px solid var(--neutral-line);
    background: var(--neutral-solid-white);
}

.form-group input::placeholder {
    color: var(--neutral-disable);
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}


/* Avatar Profile */
.avatar-profile {
    width: 50px;
    height: 50px;
    background-color: black;
    border-radius: 50%;
    background-size: cover;
    background-color:white;
}





/* RESPONSIVE */

/* Mobile */
@media (max-width: 767.98px) { 

    #navbar .nav-item {
        margin-left: 0;
    }

    #navbar .btn {
        width: 100%;
    }

    #navbar .tertiary-btn {
        margin-left: 0px;
    }

    .web-title {
        font-size: 28px;
    }
    .web-subtitle {
        font-size: 20px;
    }

    .web-label-sm, .web-label-sm-bold, .web-body, .web-caption, .web-paragraph {
        font-size: 14px;
    }

    .web-label-lg, .web-paragraph {
        font-size: 16px;
    }

    .web-display {
        font-size: 40px;
    }

    #footer .menu a {
        font-size: 12px;
    }


    .kos-card {
        margin-bottom: 20px;
    }

    .kos-card .head {
        height: 100px;
    }

    .kos-card .keterangan .informasi {
        flex-direction: column;
        align-items: start;
    }

    .kos-card .keterangan .informasi > .web-label-sm {
        font-size: 10px;
        margin-top: 3px;
    }

    .kos-card .keterangan > .web-caption {
        font-size: 10px;
    }

    .kos-card .keterangan > .web-paragraph {
        font-size: 12px;
    }

    .kos-card .keterangan > .web-label-lg {
        font-size: 14px;
    }

    .kos-card .keterangan > .web-label-sm {
        font-size: 9px;
    }

 }


/* Tablet */
 @media (min-width: 768px) and (max-width: 991.98px) { 
    #navbar .nav-item {
        margin-left: 0;
    }
    
    .web-title {
        font-size: 34px;
    }
    .web-subtitle {
        font-size: 22px;
    }

    .web-label-sm, .web-label-sm-bold, .web-body, .web-caption, .web-paragraph {
        font-size: 16px;
    }

    .web-label-lg, .web-paragraph {
        font-size: 18px;
    }

    .web-display {
        font-size: 50px;
    }

    #footer .menu a {
        font-size: 14px;
    }

    .kos-card {
        width: 300px;
        margin: 0px auto 20px auto;
    }

 }