@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: 'Epilogue', sans-serif;letter-spacing: 2.5px;}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    transition: background-color 0s ease-in-out 99999s !important;
    -webkit-text-fill-color: white;
}

/* Color */
:root {
    --dark_blue: #0E0D13;
    --primary_blue: #222334;
    --tiffany_blue: #00FEE4;
    --pink: #DB1866;
    --purple: #6359E9;
    --purple_light: #4A40C7;
    --purple_dark: #1D1D41;
    --grey_purple:#4B4C63;
}

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(--pink);}

.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: 'Epilogue', sans-serif;}
p{font-family: 'Inter', sans-serif;}

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

body {background: var(--dark_blue);}
.mainContent { width: 100%; min-height: 100%; }
.topNav { background: var(--primary_blue); 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: white; font-size: 1.4vh; font-weight: 500; text-decoration: none; margin: 0 15px;transition: color 0.3s ease; }
.topNav .navLinks a:hover { color: var(--tiffany_blue); }

.topNav .navLinks .searchDiv { margin-left: 20px; width: 40%; border-radius: 25px; border: 1px solid #fff; 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: #fff; }
.topNav .navLinks .searchDiv .search { display: flex; width: 90%; border: none; background-color: transparent; color: #fff; }
.topNav .navLinks .searchDiv .search::placeholder { color: #fff; }
.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 #fff; 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 white; border-right: 1px solid white; }
.topNav .navLinks .languageDiv a { text-decoration: none; color: white; font-size: 0.875em; letter-spacing: 2.5px;margin: 0; }

.topNav .navLinks .profileDiv{min-width: 150px;height: 45px;border-radius: 25px;border: 1px solid #fff;padding: 0 20px;display: flex;justify-content: center;align-items: center;color: #fff;cursor: pointer;}
.topNav .navLinks .profileDiv .icon{font-size: 1.35em;display: flex;justify-content: center;align-items: center;color: #fff;}
.topNav .navLinks .profileDiv span {padding-left: 5px;margin-top: 5px;font-size: 0.875em;letter-spacing: 2.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: #fff;padding: 0 20px;cursor: pointer;}
.topNav .navLinks .loggedInProfileDiv .dropdownItemBox{position: absolute;z-index: 10;color: #fff;max-height: 0px;min-width: 200px;left: -50px;top: 60px;width: 100%;border-radius: 10px; background-color: #1F1D2B;overflow: hidden;transition: max-height 0.5s ease-in-out;}
.topNav .navLinks .loggedInProfileDiv .dropdownItemBox.setMaxHeight{max-height: 200px !important;}
.topNav .navLinks .loggedInProfileDiv .dropdownItemBox .dropdownItem{padding: 1rem 2rem;cursor: pointer;font-size: 14px;}
.topNav .navLinks .loggedInProfileDiv .username{max-width: 100px;}
.topNav .navLinks .loggedInProfileDiv .username span{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.topNav .navLinks .loggedInProfileDiv .profileAvatar{width: 45px;height: 45px;border-radius: 50%;background-color: white;overflow: hidden;}
.topNav .navLinks .loggedInProfileDiv .icon{font-size: 1.35em;padding-left: 0.5rem;display: flex;justify-content: center;align-items: center;color: #fff;transition: transform 0.5s ease;}




/* Footer */
footer{background-color: var(--bgBlue);position: relative;padding-left: var(--navSize);}
footer .infoDiv{width: 100%;height: 100%;padding: 1rem 2rem;display: flex;flex-flow: column;justify-content: start;}
footer .socialDiv{padding: 1rem 2rem;}
footer .infoDiv h4{font-size: 1.125em;}
footer .infoDiv p{font-size: 1em;font-weight: lighter;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: #FFFFFF;-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(--pink);}
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: white;text-align: left;font-weight: lighter;}


.mainDiv{ padding-top: 1.5rem;flex: 1;}
.btn-primary{background-color: var(--pink);}
.btn-save{background-color: var(--pink); color: white; border: none; padding: 5px 10px; border-radius: 5px; 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: 1rem !important;margin-left: 1rem !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;}
}