html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

#siteWrapper {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden; 
}


html {
  position: relative;
  min-height: 100%;
}

body {
    width: 100%;
}

main{
    z-index: 1;
}

.container-fluid {
    padding: 0;
}



#HomeSec1 {
    width: 100%;
    height: 800px;
    background-image: url("../images/Home_BG-01.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.navbar {
    height: 80px;
    top: 0px;
    width: 100vw;
}

#navbar {
    height: 80px;
    position: fixed;
    z-index: 2;
    font-size: .66em;
    top: 0px;
    width: 100vw;
}

.nav-item{
    min-width: 50px;
}

@media (min-width: 992px) {
    #navbarSupportedContent, #navbarSupportedContent a {
        font-size: 0.9em;
    }
    #toggler {
        display: none;
    }
}

@media (min-width: 1200px) {
    #navbarSupportedContent, #navbarSupportedContent a {
        font-size: 1em;
    }
    #toggler {
        display:none;
    }
}

@media (max-width: 992px) {
   
    #toggler{
        width: 15%;
    }

    .navbar-toggler{
        width:100%;
        height:fit-content;
    }

    #navbarBG{
        display: none;
    }

    .navbar {
        height: 100px;
    }

    #navbar {
        height: 100px;
    }
}

@media (max-width: 992px) {

    .top-bg {
        background-attachment: scroll;
    }
}

@media (min-width: 992px) {

    .top-bg {
        background-attachment: fixed;
    }
}

#navbarBG {
    height: 80px;
    width: 100vw;
    position: fixed;
    z-index: 1;
    top: -75px;
    transition: top 0.3s;
    background-color: white;
}

#navbarList {
    overflow-y: scroll !important;
    max-height: 200px !important;
}

#navbarList::-webkit-scrollbar {
    display: none;
}

.icon-blue {
    color: #0079b5;
}

.icon-white{
    color: white;
}

.text-blue {
    color: #0079b5;
}

.text-grey {
    color: lightgray;
}

.homeSec3Img {
    width: 100%;
    height: contain;
}

.homeSec4Img {
    width: 100%;
    height: contain;
}

.homeSec3Item {
    margin-bottom: 50px;
    min-height: 600px;
}

.homeSec4Item {
}

.homeSec3Info {
    max-width: 500px;
    border-radius: 25px;
    font-size: 1.33em;
}

.homeSec4Info {
    border-radius: 25px;
    font-size: 1.2em;
}

.homeSec4Item {
    min-height: 100vh; 
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 80%;
}

#homeSec4a {
    background-image: url("../images/Home_Sec_4aBG.jpg");
}

#homeSec4b {
    background-image: url("../images/Home_Sec_4bBG.jpg");
}

#homeSec4c {
    background-image: url("../images/Home_Sec_4cBG.jpg");
}

#homeSec4d {
    background-image: url("../images/Home_Sec_4dBG.jpg");
}

#homeSec5b {
    min-height: 300px;
    background-image: url("../images/Home_Sec_5bBG.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center center;
    min-height: 80%;
}

.bg-blue {
    background-color: #0079b5;
}
.bg-grey {
    background-color: lightgrey;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.button {
    width: 200px;
    height: 50px;
}

#phoneImg {
    width: 100%;
    height: contain;
    position: relative;
    top: -150px;
}

.modal {
    display: none;
    position: fixed;
    top: 15%;
    left: 10%;
    width: 80%;
    height: 80%;
    z-index: 3;
    overflow-y: hidden;
    background: rgb(0, 0, 0, 0.0);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0px;
    border-radius: 25px;
    width: 90%;
    height: 90%;
    background-color: rgba(56,255,255,0.0);
}

.close {
    margin: 10px;
    position: absolute;
    top: 0%;
    right: 0%;
    font-size: 20px;
    cursor: pointer;
    z-index:4;
}

#registrationImgDiv {
    position: relative;
    width: 60%;
    height: 0;
    padding-bottom: 30%;
    padding-top: 30%;
}

#registrationImg {
    position: absolute;
    width: 90%;
    height: 90%;
}
.bigSquareImgDiv {
    position: relative;
    width: 60%;
    height: 0;
    padding-bottom: 30%;
    padding-top: 30%;
}

.bigSquareImg {
    position: absolute;
    width: 90%;
    height: 90%;
}

.circle {
    width: 100%;
    height: 0px;
    padding-bottom: 50%;
    padding-top: 50%;
    border-radius: 50%;
}

.square {
    width: 100%;
    height: 0px;
    padding-bottom: 50%;
    padding-top: 50%;
}

.hover-scale {
    box-shadow: -5px 7px 5px 0px rgba(0,0,0,0.19);
    -webkit-box-shadow: -5px 7px 5px 0px rgba(0,0,0,0.19);
    -moz-box-shadow: -5px 7px 5px 0px rgba(0,0,0,0.19);
    transition: transform ease 0.5s,box-shadow ease 0.5s,-webkit-box-shadow ease 0.5s,-moz-box-shadow ease 0.5s;
}

    .hover-scale:hover {
        transform: translateY(-5%);
        box-shadow: -12px 15px 5px 0px rgba(0,0,0,0.12);
        -webkit-box-shadow: -12px 15px 5px 0px rgba(0,0,0,0.12);
        -moz-box-shadow: -12px 15px 5px 0px rgba(0,0,0,0.12);
        transition: transform ease 0.5s,box-shadow ease 0.5s,-webkit-box-shadow ease 0.5s,-moz-box-shadow ease 0.5s;
    }

.text-container {
    container-type: size;
    container-name: text-container;
}

.container-text {
    font-size: 1em;
    container-name: text-container;
}

.box-shadow {
    box-shadow: -5px 7px 5px 0px rgba(0,0,0,0.19);
    -webkit-box-shadow: -5px 7px 5px 0px rgba(0,0,0,0.19);
    -moz-box-shadow: -5px 7px 5px 0px rgba(0,0,0,0.19);
}

.box-border {
    border: 2px solid lightgrey;
}
.box-border-blue {
    border: 2px solid #0079b5;
}

.text-playfair-display{
    font-family: "playfair display";
}

#AccountBG {
    width: 100vw;
    min-height: 100vh;
    background-image: url("../images/AccountBG.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.disabled-link {
    pointer-events: none;
    color: gray; /* Optionally, you can change the color to indicate it's disabled */
    text-decoration: none; /* Optionally, you can remove the underline */
    cursor: not-allowed; /* Optionally, you can change the cursor to 'not-allowed' */
}

.black-link{
    text-decoration: underline;
}

.white-link {
    text-decoration: underline;
    color: white;
}


    .white-link:hover {
        text-decoration-color: #0079b5;
    }

.black-link:hover, .footer-link:hover {
    text-decoration-color: #0079b5;
}

.grey-link{
    text-decoration: underline;
}

.grey-link:hover {
    text-decoration-color: lightgrey;
}

.btn-black:hover {
    background-color: #0079b5;
}

.btn-grey:hover {
    background-color: lightgrey;
    color: black;
}

@media(max-width: 576px){
    .display-sm-none {
        display: none;
    }
}

/*Animations*/
/*Slide In from the left*/
.slideInLBox {
    /*transform: translateX(-25%);*/
    opacity: 0%;
}

.slide-in-l {
    animation: slideInL ease-in-out 1s;
}

.hasSlidInL {
    transform: translateX(0);
    opacity: 100%;
}

@keyframes slideInL {
    from {
        transform: translateX(-25%);
        opacity: 0%;
    }

    to {
        transform: translateX(0px);
        opacity: 100%;
    }
}

/*Slide In from the right*/
.slideInRBox {
    /*transform: translateX(25%);*/
    opacity: 0%;
}

.slide-in-r {
    animation: slideInR ease-in-out 1s;
}

.hasSlidInR {
    transform: translateX(0);
    opacity: 100%;
}

@keyframes slideInR {
    from {
        transform: translateX(-25%);
        opacity: 0%;
    }

    to {
        transform: translateX(0px);
        opacity: 100%;
    }
}

/*Slide In from Top*/
.slideInTBox {
    /*transform: translateY(-25%);*/
    opacity: 0;
}

.slide-in-t {
    animation: slideInT ease-in-out 1s;
}

.hasSlidInT {
    transform: translateY(0);
    opacity: 100%;
}


@keyframes slideInT {
    from {
        transform: translateY(-25%);
        opacity: 0%;
    }

    to {
        transform: translateY(0);
        opacity: 100%;
    }
}

/*Slide In from Top*/
.slideInBBox {
    /*transform: translateY(-200px);*/
    opacity: 0;
}

.slide-in-b {
    animation: slideInB ease-in-out 1s;
}

.hasSlidInB {
    transform: translateY(0);
    opacity: 100%;
}


@keyframes slideInB {
    from {
        /*transform: translateY(25%);*/
        opacity: 0%;
    }

    to {
        transform: translateY(0);
        opacity: 100%;
    }
}

/*Slide Out to the right*/
.slideOutRBox {
    opacity: 100%;
}

.slide-out-r {
    animation: slideOutR ease-in-out 1s;
}

.hasSlidOutR {
    transform: translateX(25%);
    opacity: 0%;
}

@keyframes slideOutR {
    from {
        transform: translateX(0);
        opacity: 100%;
    }

    to {
        transform: translateX(25%);
        opacity: 0%;
    }
}
.slideOutBox {
    transform: translateX(0);
    opacity: 100%;
}

.slide-out {
    animation: slideOut ease-in-out 1s;
}

.hasSlidOut {
    transform: translateX(25%);
    opacity: 0%;
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 100%;
    }

    to {
        transform: translateX(100%);
        opacity: 0%;
    }
}

.fadeInBox {
    opacity: 0;
}

.fade-in {
    animation: fadeIn ease-in-out 1s;
}

.hasFadedIn {
    opacity: 100;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeOutBox {
    opacity: 100;
}

.fade-out {
    animation: fadeOut ease-in-out 1s;
}

.hasFadedOut {
    opacity: 0;
}

@keyframes fadeOut {
    from {
        opacity: 100;
    }

    to {
        opacity: 0;
    }
}



.animations-disabled {
    transform: translateX(0);
    opacity: 100%;
}