/** --------------------------------------------------------------
** DESKTOP
**--------------------------------------------------------------*/

/** STICKY BAR */
#masthead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 888;
}

/** NAVBAR UNDERLINE */

.navbar-end-line {
    height: 2px;
    width: 100%;
    background: rgb(81, 211, 197);
    background: linear-gradient(90deg, rgba(81, 211, 197, 1) 25%, rgba(53, 112, 243, 1) 75%);
}

/** BASE CONTAINER */

#main-navbar-v2 {
    height: 4rem;
}

/*? Wider than 991 */
@media (min-width: 992px) { 
    #main-navbar-v2 {
        width: max-content;
    }
}

/*? Dumb fix for resolutions between 1150px and 1250px */
/* 
@media (min-width:1150px) and (max-width:1250px) {
    #main-navbar-v2 {
        margin-right: -20px;
        margin-left: -20px;
    }
} */

/*? Dumb fix for resolutions between 1150px and 1250px */
/* 
@media (min-width:990px) and (max-width:1000px) {
    #main-navbar-v2 {
        margin-right: -10px;
        margin-left: -10px;
    }
} */

/** LOGO */

#main-navbar-v2 .header-logo {
    height: 3rem;
    margin-right: 1rem;
}

/** MAIN LINKS IN NAVBAR */

#main-navbar-v2 .nav-item .nav-link {
    width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: #00A0BE;
    font-weight: bold;
    font-size: 14px;
    transition: 0.15s;
}

#main-navbar-v2 .nav-item .nav-link:hover:not(.dropdown-toggle), 
#main-navbar-v2 .nav-item .nav-link.active,
#main-navbar-v2 .nav-lan a:hover {
    border-bottom: 2px solid #FF393C;
    padding-bottom: 2px;
    margin-bottom: 6px;
}

/** CTA BUTTON */

#main-navbar-v2 .btn-navbar-cta {
    width: max-content;
    min-width: 65px;
    margin: 0;
    padding: 7px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .1s;
    background: linear-gradient(to right, #4285f4 0%, #53dbd2 100%);
    color: #fff;
    border: none;
    border-radius: 23px;
    font-size: 14px;
    font-weight: normal;
}

#main-navbar-v2 .btn-navbar-cta:hover {
    box-shadow: 0 2px 8px 0 #00000033;
    font-weight: bold;
}

/** LAN SWITCH */

#main-navbar-v2 .nav-lan a {
    text-transform: uppercase;
    color: #00A0BE;
    font-weight: bold;
    text-decoration: none;
}

#main-navbar-v2 .nav-lan .lan-cont:not(:last-child)::after {
    content: '|';
    margin: 0px 5px;
    color: #00A0BE;
}

/** FIXES FOR RESPONSIVE */

/*? Between 991 and 1200 */
@media (min-width: 992px) {
    /* Main Container */
    #main-navbar-v2 {
        height: 5rem;
    }
    /* Logo */
    #main-navbar-v2 .header-logo {
        height: 3rem;
        margin-right: 1rem;
    }
    /* Main Links */
    #main-navbar-v2 .nav-item .nav-link {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 14px;
    }
    /* CTA Button */
    #main-navbar-v2 .btn-navbar-cta {
        font-size: 14px;
        padding: 7px 16px;
    }
    /* Lan Switcher */
    #main-navbar-v2 .nav-lan a {
        font-size: 14px;
    }
}

/*? Between 1200 and 1440 */
@media (min-width: 1200px) {
    /* Logo */
    #main-navbar-v2 .header-logo {
        height: 3.5rem;
        margin-right: 1.5rem;
    }
    /* Main Links */
    #main-navbar-v2 .nav-item .nav-link {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        font-size: 15px;
    }
    /* CTA Button */
    #main-navbar-v2 .btn-navbar-cta {
        padding: 7px 20px;
        font-size: 15px;
    }
    /* Lan Switcher */
    #main-navbar-v2 .nav-lan a {
        font-size: 15px;
    }
}

/*? Wider than 1440 */
@media (min-width: 1440px) {
    /* Logo */
    #main-navbar-v2 .header-logo {
        height: 3.5rem;
        margin-right: 2rem;
    }
    /* Main Links */
    #main-navbar-v2 .nav-item .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 16px;
    }
    /* CTA Button */
    #main-navbar-v2 .btn-navbar-cta {
        padding: 7px 24px;
        font-size: 16px;
    }
    /* Lan Switcher */
    #main-navbar-v2 .nav-lan a {
        font-size: 16px;
    }
}

/** DROPDOWN CONTAINER */

#main-navbar-v2 .nav-item .dropdown-menu {
    width: max-content;
    margin-top: 0px;
    border: none;
    background-color: #F6F6F6;
    border-radius: 2px;
    box-shadow: 3px 0px 3px 0px #00000010;
}

/** DROPDOWN ITEM TITLE */

#main-navbar-v2 .nav-item .dropdown-menu .item-m1 {
    display: block;
    width: 100%;
    padding: 15px 1rem 7px 1rem;
    color: #4d4d4d;
    font-weight: bold;
    margin: 0;
}

/** DROPDOWN ITEM LINK */

#main-navbar-v2 .nav-item .dropdown-menu .item-m2 {
    display: block;
    width: 100%;
    padding: 0rem 1rem 2px 2rem;
    color: #4d4d4d;
    font-weight: normal;
    margin: 0;
}

/** HOVER FOR DROPDOWN ITEM */

#main-navbar-v2 .nav-item .dropdown-menu a.item-m1:hover, #main-navbar-v2 .nav-item .dropdown-menu a.item-m2:hover {
    color: #55DBD2;
}

/** --------------------------------------------------------------
** RESPONSIVE
**--------------------------------------------------------------*/

#responsive-menu-container {
    background: rgb(53, 112, 243);
    background: linear-gradient(315deg, rgba(53, 112, 243, 1) 0%, rgba(81, 211, 197, 1) 60%);
}

#responsive-menu-container p, #responsive-menu-container a {
    color: #fff;
    font-weight: inherit;
    margin: 0;
}

#responsive-menu-container a:hover {
    color: #4ae2ff;
}

#responsive-menu-container .menu-col:not(:last-child) {
    border-right: 2px solid #00000020;
}

#responsive-menu-container .menu-title-0 {
    color: #fff !important;
    padding-top: 1rem !important;
    padding-bottom: .5rem !important;
    font-weight: bold !important;
    font-size: 1.05rem !important;
    border-bottom: 2px solid #00000020 !important;
}

#responsive-menu-container .menu-title-0-caret-down svg {
    font-size: 1.5rem;
}

#responsive-menu-container .menu-title-1 {
    color: #fff;
    margin-bottom: .2rem;
    font-weight: bold;
}

#responsive-menu-container .menu-title-2 {
    margin-bottom: 0rem;
}

#responsive-menu-container a.btn-menu-cta {
    color: #fff;
    border: 1px solid #fff;
    padding: .5rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
}