body {  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            height: auto; /* Ensures it takes the full viewport height */  
            margin: 0; 
            padding: 30px; 
            background-color: #f0f0f0; /* Optional: Set a background color */  
        }
        .loading-screen {  
            margin-top: 70%;
            display: flex;  
            justify-content: center;  
            align-items: center;  
            width: 100px; /* Increased width */  
            height: 100px; /* Increased height */  
        }  

        .three-body {  
            --uib-size: 55px;  
            --uib-speed: 0.8s;  
            --uib-color: #f26925;  
            position: relative;  
            display: inline-block;  
            height: var(--uib-size);  
            width: var(--uib-size);  
            animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;  
        }  

        .three-body__dot {  
            position: absolute;  
            height: 100%;  
            width: 30%;  
        }  

        .three-body__dot:after {  
            content: '';  
            position: absolute;  
            height: 0%;  
            width: 100%;  
            padding-bottom: 100%;  
            background-color: var(--uib-color);  
            border-radius: 50%;  
        }  

        .three-body__dot:nth-child(1) {  
            bottom: 5%;  
            left: 0;  
            transform: rotate(60deg);  
            transform-origin: 50% 85%;  
        }  

        .three-body__dot:nth-child(1)::after {  
            bottom: 0;  
            left: 0;  
            animation: wobble1 var(--uib-speed) infinite ease-in-out;  
            animation-delay: calc(var(--uib-speed) * -0.3);  
        }  

        .three-body__dot:nth-child(2) {  
            bottom: 5%;  
            right: 0;  
            transform: rotate(-60deg);  
            transform-origin: 50% 85%;  
        }  

        .three-body__dot:nth-child(2)::after {  
            bottom: 0;  
            left: 0;  
            animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15) ease-in-out;  
        }  

        .three-body__dot:nth-child(3) {  
            bottom: -5%;  
            left: 0;  
            transform: translateX(116.666%);  
        }  

        .three-body__dot:nth-child(3)::after {  
            top: 0;  
            left: 0;  
            animation: wobble2 var(--uib-speed) infinite ease-in-out;  
        }  

        @keyframes spin78236 {  
            0% {  
                transform: rotate(0deg);  
            }  
            100% {  
                transform: rotate(360deg);  
            }  
        }  

        @keyframes wobble1 {  
            0%, 100% {  
                transform: translateY(0%) scale(1);  
                opacity: 1;  
            }  
            50% {  
                transform: translateY(-66%) scale(0.65);  
                opacity: 0.8;  
            }  
        }  

        @keyframes wobble2 {  
            0%, 100% {  
                transform: translateY(0%) scale(1);  
                opacity: 1;  
            }  
            50% {  
                transform: translateY(66%) scale(0.65);  
                opacity: 0.8;  
            }  
        }  

        /* Hide the main content initially */  
        .main-content {  
            display: none;  
        }

 /* Existing styles... */  


    .logo {
      animation: flipIn 1s ease forwards, moveToTop 0.5s ease 1s forwards;
    }
    /* Add animation styles */  
    @keyframes flipIn {  
        from {  
            transform: rotateY(-180deg);  
            opacity: 0;  
        }  
        to {  
            transform: rotateY(0);  
            opacity: 1;  
        }  
    }  

    @keyframes dropDown {  
        from {  
            transform: translateY(-50px);  
            opacity: 0;  
        }  
        to {  
            transform: translateY(0);  
            opacity: 1;  
        }  
    }  

    @keyframes scrollDown {  
        from {  
            transform: translateY(100px);  
            opacity: 0;  
        }  
        to {  
            transform: translateY(0);  
            opacity: 1;  
        }  
    }  

    img.logo {  
        animation: flipIn 1s ease forwards;  
    }  

    h1 {  
        animation: dropDown 1s ease 1s forwards; /* Starts after logo animation */  
        opacity: 0; /* Initially invisible */  
    }  

    h4 {  
        opacity: 0; /* Initially invisible */  
        animation: scrollDown 1s ease 1s forwards; /* Starts after title animation */  
    }  

    p {  
        opacity: 0; /* Initially invisible */  
        animation: scrollDown 1s ease 1s forwards; /* Starts after subtitle animation */  
    }
    .separator {  
        height: 20px; /* Visual separation */  
        background-color: #f2f2f2; /* Light grey background */  
        margin: 20px 0; /* Adjust separation margin */  
        border-radius: 5px;  
    } 






.circle {  
        height: 200px;  
        width: 200px;  
        border-radius: 200px;  
        border: 1px solid #f2f2f2;  
        transition: 0.3s;  
        display: flex;  
        align-items: center;  
        justify-content: center;   
        position: relative;  
        margin: 0 auto;  
        overflow: hidden;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    } 
    .circle:hover {
    	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    } 

    .restaurant:hover, .conference:hover, .gym:hover, .rooms:hover {  
         
        transition: 0.3s;  
    }  

    .restaurant {  
        background-image: url(../img/restaurant.jpg);  
    }  
    .conference {  
        background-image: url(../img/conference-sq.jpg);  
    }  
    .gym {  
        background-image: url(../img/gym-sq.jpg);  
    }   
    .rooms {  
        background-image: url(../img/room-sq.jpg);  
    }

    .restaurant:hover {  
          
    }  
    .conference:hover {  
         
    }  
    .gym:hover {  
          
    }   
    .rooms:hover {  
          
    }   

    .inner-circle {  
        background-color: white;  
        height: 50px;  
        width: 50px;  
        border-radius: 50%;  
        display: flex;  
        align-items: center;   
        justify-content: center;   
        opacity: 0;   
        position: absolute;  
        transition: 0.3s;   
    }  

    .circle:hover .inner-circle {  
        height: 100%;  
        width: 100%;   
        opacity: 1;  
        transition: 0.3s;
    }  

    .icon {  
        font-size: 25pt;  
        transition: color 0.3s, transform 0.6s; /* Animate color change and transformation */   
        backface-visibility: hidden; /* Prevents back icon showing through */  
    }  

    .circle:hover .icon {  
        font-size: 35pt; /* Keep the icon size the same */  
        color: #f46616; /* Change color on hover */   
        transform: rotateY(180deg); /* Flip the icon */  
    }  

    .inner-circle .icon {  
        transform: rotateY(180deg); /* Hide the back icon initially */  
    }  

    .circle:hover .inner-circle .icon {  
        opacity: 1; /* Show the inner icon */  
        transform: rotateY(0deg); /* Show it normally */  
        font-size: 35pt; /* Change size if needed */  
        color: #f46616; /* Change color on hover */  
    }



        /* From Uiverse.io by kamehame-ha */ 
.coolinput {
  display: flex;
  flex-direction: column;
  width: fit-content;
  position: static;
  width: 100%;
}

.coolinput label.text {
  font-size: 0.75rem;
  color: #FF8E56;
  font-weight: 700;
  position: relative;
  top: 0.5rem;
  margin: 0 0 0 7px;
  padding: 0 3px;
  background: #fff;
  width: fit-content;
}


.coolinput .input {
  padding: 11px 10px;
  font-size: 0.75rem;
  border: 2px #FF8E56 solid;
  border-radius: 5px;
  background: #fff;
}

.coolinput .input:focus {
  outline: none;
}

/*radio buttons*/
.radio-inputs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  background-color: transparent;
  border: none;
  padding: 0.25rem;
  width: 100%;
  font-size: 14px;
}

.radio-inputs .radio {
  flex: 1 1 auto;
  text-align: center;
}

.radio-inputs .radio input {
  display: none;
}

.radio-inputs .radio .name {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: none;
  padding: .5rem 0;
  color: rgba(51, 65, 85, 1);
  transition: all .15s ease-in-out;
}

.radio-inputs .radio input:checked + .name {
  background-color: transparent;
  color: #f26925;
  font-weight: 600;
}

/* From Uiverse.io by adamgiebl */ 
.card {
  margin-top: 10px;
  padding: 10px;  
  width: auto;
  height: auto;
  border-radius: 10px;
  background: #f2f2f2;
  
}


/* From Uiverse.io by vinodjangid07 */ 
.Btn {
  width: 130px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(15, 15, 15);
  border: none;
  color: white;
  font-weight: 600;
  gap: 8px;
  cursor: pointer;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.103);
  position: relative;
  overflow: hidden;
  transition-duration: .3s;
}

.svgIcon {
  width: 16px;
}

.svgIcon path {
  fill: white;
}

.Btn::before {
  width: 130px;
  height: 130px;
  position: absolute;
  content: "";
  background-color: white;
  border-radius: 50%;
  left: -100%;
  top: 0;
  transition-duration: .3s;
  mix-blend-mode: difference;
}

.Btn:hover::before {
  transition-duration: .3s;
  transform: translate(100%,-50%);
  border-radius: 0;
}

.Btn:active {
  transform: translate(5px,5px);
  transition-duration: .3s;
}


/*checkbox*/
.checkbox-wrapper input[type="checkbox"] {
  display: none;
}

.checkbox-wrapper .terms-label {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.checkbox-wrapper .terms-label .label-text {
  margin-left: 10px;
}

.checkbox-wrapper .checkbox-svg {
  width: 70px;
  height: 70px;
}

.checkbox-wrapper .checkbox-box {
  fill: rgba(226, 226, 226);
  stroke: #f26925;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  transition: stroke-dashoffset 0.6s ease-in;
}

.checkbox-wrapper .checkbox-tick {
  stroke: #f26925;
  stroke-dasharray: 172;
  stroke-dashoffset: 172;
  transition: stroke-dashoffset 0.6s ease-in;
}

.checkbox-wrapper input[type="checkbox"]:checked + .terms-label .checkbox-box,
  .checkbox-wrapper input[type="checkbox"]:checked + .terms-label .checkbox-tick {
  stroke-dashoffset: 0;
}