@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&display=swap');
*{margin:0;padding:0;box-sizing: border-box;font-family: 'Lato', sans-serif;letter-spacing: 1.5px;font-size: 1.1rem;}


/* Color */
:root {
    --white: white;
    --blue: #27387E;
    --dark_blue: #263656;
    --pale_blue: #E3E8F1;
    --black: #403C3C;
    --grey: #868787;
    --light_grey: #D9D9D9;
    --dark_grey:#6A6767;
}

:root{--bs-border-radius:30px;}
.pagination li a{font-size: 0.8rem;}
        

body, html {height: 100%;}


/* Scrollbar Css */
body::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: var(--dark_blue);}
body::-webkit-scrollbar {width: 6px;background-color: var(--dark_blue);}
body::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: var(--dark_blue);}

.w-10{width: 10%;}
.w-20{width: 20%;}
.w-30{width: 30%;}
.w-40{width: 40%;}
.w-50{width: 50%;}
.w-60{width: 60%;}
.w-70{width: 70%;}
.w-80{width: 80%;}
.w-90{width: 90%;}
.w-100{width: 100%;}

.no-scroll {overflow: hidden;}

/* Define Font Style */
h1,h2,h3,h4,h5,h6{    font-family: 'Lato', sans-serif;
    font-weight: bolder;}
p{font-family: 'Lato', sans-serif;}

h1, h2{
    text-transform: uppercase;
}

h1{
    font-size: 36px;
}

body{
    font-family: 'Lato', sans-serif !important;
}

.swal2-container .swal2-confirm{background-color: var(--blue);}

body {background: var(--pale_blue);}
.mainContent { width: 100%; min-height: 100%; }
.topNav { background: var(--white); padding: 1% 0; display: flex; justify-content: space-between; align-items: center; width: 100%;}
.topNav .logoDiv .icon-logo { height: 45px; width: auto; }
.topNav .navLinks { display: flex; align-items: center; width: 100%;justify-content: end; }
.topNav .navLinks a { color: var(--dark_grey); font-size: 1.4vh; font-weight: 900; text-decoration: none; margin: 0 15px;transition: color 0.3s ease; }
.topNav .navLinks a:hover { color: var(--pale_blue); }

.topNav .navLinks .searchDiv { margin-left: 20px; width: 40%; border-radius: 25px; border: 1px solid var(--blue); background-color: rgba(217, 217, 217, 0.3); display: flex; align-items: center; padding: 0.5%; max-height: 45px; height: 100%;max-width: 300px;transition: max-width 0.5s ease; }
.topNav .navLinks .searchDiv .icon { width: 10%; display: flex; justify-content: center; align-items: center; color: var(--blue); }
.topNav .navLinks .searchDiv .search { display: flex; width: 90%; border: none; background-color: transparent; color: var(--blue); }
.topNav .navLinks .searchDiv .search::placeholder { color: var(--blue); }
.topNav .navLinks .searchDiv .search:focus { outline: none; }
.topNav .navLinks .searchDiv:focus-within {max-width: 450px; }

.topNav .navLinks .languageDiv-mobile { display: none; }
.topNav .navLinks .languageDiv { min-width: 150px; height: 45px; border-radius: 25px; border: 1px solid var(--blue); padding: 0 20px; display: flex; justify-content: center; align-items: center; margin-left: 20px; }
.topNav .navLinks .languageDiv .languages { width: 50px; text-align: center; display: flex; align-items: center; justify-content: center; }
.topNav .navLinks .languageDiv .languages:nth-child(2) { border-left: 1px solid var(--blue); border-right: 1px solid var(--blue); }
.topNav .navLinks .languageDiv a { text-decoration: none; color: var(--blue); font-size: 0.875em; letter-spacing: 1.5px;margin: 0; }

.topNav .navLinks .profileDiv{min-width: 150px;height: 45px;border-radius: 25px;border: 1px solid var(--blue);padding: 0 20px;display: flex;justify-content: center;align-items: center;color: var(--blue);cursor: pointer;}
.topNav .navLinks .profileDiv .icon{font-size: 1.35em;display: flex;justify-content: center;align-items: center;color: var(--blue);}
.topNav .navLinks .profileDiv span {padding-left: 5px;margin-top: 5px;font-size: 0.875em;letter-spacing: 1.5px;}

.topNav .navLinks .loggedInProfileDiv{min-width: 150px;height: 45px;border-radius: 25px;position: relative;}
.topNav .navLinks .loggedInProfileDiv .dropdownToogle{display: flex;justify-content: center;align-items: center;color: var(--blue);padding: 0 20px;cursor: pointer;}
.topNav .navLinks .loggedInProfileDiv .dropdownItemBox{
    position: absolute;z-index: 10;color: var(--blue);max-height: 0px;min-width: 200px;left: -50px;top: 60px;width: 100%;
    border-radius: 10px; background-color: white;overflow: hidden;transition: max-height 0.5s ease-in-out;border: 1px solid var(--pale_blue)}
.topNav .navLinks .loggedInProfileDiv .dropdownItemBox.setMaxHeight{max-height: 200px !important;}
.topNav .navLinks .loggedInProfileDiv .dropdownItemBox .dropdownItem{padding: 1.2rem 2rem;cursor: pointer;font-size: 14px;}
.topNav .navLinks .loggedInProfileDiv .username{max-width: 100px;padding-top: 0 !important;}
.topNav .navLinks .loggedInProfileDiv .username span{    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.4vh;
    color: var(--dark_grey);
    font-weight: 900;}
.topNav .navLinks .loggedInProfileDiv .profileAvatar{width: 45px;height: 45px;border-radius: 50%;background-color: var(--blue);overflow: hidden;}
.topNav .navLinks .loggedInProfileDiv .icon{font-size: 1.35em;padding-left: 0.5rem;display: flex;justify-content: center;align-items: center;color: var(--blue);transition: transform 0.5s ease;}




/* Footer */
footer{background-color: var(--bgBlue);position: relative;padding-left: var(--navSize);}
footer .infoDiv{width: 100%;height: 100%;padding: 1.2rem 2rem;display: flex;flex-flow: column;justify-content: start;}
footer .socialDiv{padding: 1.2rem 2rem;}
footer .infoDiv h4{font-size: 1.125em;}
footer .infoDiv p{font-size: 1em;font-weight: 500;margin-top: auto;}
footer .dropdown {-webkit-appearance: none;width: 100%;padding: 10px 5px;border: none;border-bottom: 1px solid white;color: white;background-color: var(--bgBlue);margin-bottom: 20px;}
footer .selectDiv{position: relative;}
footer .selectDiv::after{content: '^';font: "Consolas", monospace;color: var(--blue)FFF;-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);right: 15px;position: absolute;top: 4px;pointer-events: none;}
footer .dropdown-container {display: flex;justify-content: space-between;width: 80%; }
footer .dropdown-container select {flex: 1;margin-right: 10px;}
footer a {text-decoration: none;}
footer a h3{font-size: 1em;color: white;}
footer a h3:hover {color: var(--bg);}
footer .socialMediaDiv a h3:hover {color: var(--blue);}
footer .footer-icon{width: 20%;max-width: 30px;margin-right: 15px;}
footer .redirectDiv{padding:3% 0 ;}
footer .socialMediaDiv{border-left: 1px solid #333333;padding-left: 13%;}
footer .w-40{width: 40%;}
footer .w-60{width: 60%;}
/* footer::before {content: "";position: absolute;top: 0;right: 0;border-top: 70px solid white;border-left: 70px solid transparent;} */
footer .logo{width: 80px;}
footer .infoDiv .reserved{font-size: 0.875em;color: var(--blue);text-align: left;font-weight: 500;}


.mainDiv{ padding-top: 1.5rem;flex: 1;}
.btn-primary{background-color: var(--blue);}
.btn-save{background-color: var(--blue); color: white; border: none; padding: 6px 15px; border-radius: 50px 50px; cursor: pointer; }




@media screen and (max-width: 1200px){
    .topNav .navLinks a { font-size: 1vh;}
    .topNav .navLinks .searchDiv .search::placeholder { font-size: 1vh;}
    .topNav .navLinks .searchDiv .search{ font-size: 1vh;}
    .topNav .navLinks .languageDiv a {font-size: 0.675em;  }

}

@media screen and (max-width: 768px){
    .topNav{padding: 3% 0;}
    .topNav .logoDiv .icon-logo { height: 45px; width: auto;margin: 0; }
    .topNav .navLinks{display: none;}
}

@media screen and (max-width: 580px){
    .topNav{padding: 3% 0;}
    .topNav .logoDiv{margin-right: 1.2rem !important;margin-left: 1.2rem !important;}
    .topNav .logoDiv .icon-logo { height: 45px; width: auto;margin: 0; }
    .topNav .navLinks{display: none;}

    .swal2-container .swal2-title{font-size: 5vw;}
    .swal2-container .swal2-html-container{font-size: 3vw;}
}