:root {
     --primary-color: #1da316;
     --light-purple: #001e2b;
     --dark-purple: #ffffff;
     --bg-gradient: linear-gradient(90deg, #a5c7e2, #e5e3ef);
 }


 .section-hotel-calc {
     background: var(--bg-gradient) !important;
 }

 .hotel-heading {
     font-size: 3rem;
     font-weight: 700;
     color: rgba(var(--main-color), 1);
 }

 .hotel-subheading {
     font-size: 1.1rem;
     margin-bottom: 40px;
 }

 .hotel-box {
     background: rgb(255, 255, 255);
     border-radius: 16px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     padding: 40px 30px;
 }

 .hotel-box input.form-control,
 .hotel-box input.form-control:hover,
 .hotel-box input.form-control:focus {
     border-radius: 10px;
     background-color: rgba(var(--white-color), 0.3);
     border: 1px solid rgba(var(--main-color), 1);
     box-shadow: none;
 }

 .hotel-form-label {
     font-weight: 600;
     margin-bottom: 8px;
 }

 .hotel-img-box {
     background: rgb(238 235 240);
     border-radius: 20px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     padding: 20px;
 }

 .highlight-text {
     background: #d7c8ff;
     border-radius: 12px;
     padding: 2px 10px;
     font-weight: 600;
     font-size: 0.9rem;
     display: inline-block;
     margin-right: 6px;
     color: #3d1c8a;
 }

 .hotel-request-btn {
     background: var(--primary-color);
     border: none;
     width: 100%;
     padding: 12px;
     color: #fff;
     border-radius: 20px;
     margin-top: 10px;
 }

 .hotel-illustration {
     max-width: 100%;
 }






 .section-occupancy-info {
     padding: 60px 20px;
     overflow: visible !important;
     position: unset;
 }

 .info-heading {
     font-size: 2rem;
     font-weight: 700;
     color: #111;
 }

 .info-description {
     font-size: 1rem;
     margin-bottom: 20px;
     color: #333;
 }

 .info-highlight {
     display: inline-block;
     background-color: var(--light-purple);
     color: var(--dark-purple);
     font-weight: 600;
     border-radius: 20px;
     padding: 5px 14px;
     margin-right: 6px;
     font-size: 0.9rem;
 }

 .info-formula {
     background-color: var(--light-purple);
     display: inline-block;
     padding: 5px 15px;
     border-radius: 20px;
     font-weight: 600;
     margin-bottom: 10px;
     color: #fff;
 }

 .formula-box {
     font-weight: 600;
     color: var(--primary-color);
     text-align: center;
     margin-left: 10px;
 }

 .info-checkbox {
     color: #222;
     font-size: 1rem;
     margin-bottom: 10px;
     display: flex;
     align-items: start;
     gap: 10px;
 }

 .info-checkbox i {
     color: #1da316;
     font-size: 1.3rem;
     margin-top: 2px;
 }

 .info-box-btn {
     background-color: var(--primary-color);
     color: #fff;
     padding: 12px 24px;
     border: none;
     border-radius: 30px;
     font-size: 1rem;
     margin-top: 30px;
 }

 .info-illustration {
     max-width: 100%;
     border-radius: 15px;
     max-height: 600px;
     object-position: right;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     margin: 0 auto;
     margin-right: 0;
     display: flex;
 }

 .contetleftsec {
     margin-bottom: 2rem;
 }

 .sticky-illustration {
     position: sticky;
     top: 90px;
 }




 .calculator-steps-section {
     position: relative;
     padding: 80px 20px 60px;
     overflow: hidden;
     text-align: center;
     background: rgb(237 235 240) !important;
 }

 .steps-title {
     font-size: 1.8rem;
     font-weight: 700;
     margin-bottom: 60px;
 }

 .steps-image-path {
     position: absolute;
     top: -9px;
     left: 50%;
     transform: translateX(-50%);
     max-width: 1200px;
     width: 100%;
     z-index: 0;
     pointer-events: none;
     height: 500px;
 }

 .step-box {
     background: #fff;
     border-radius: 12px;
     padding: 30px 20px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
     z-index: 1;
     position: relative;
     min-height: 135px;
     max-width: 350px;
     margin-top: 43px;
 }

 .step-4-container .step-box {

     margin: 0 auto;
 }

 .step-badge {
     position: absolute;
     top: -33px;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(var(--main-color), 1);
     color: #fff;
     font-weight: 600;
     width: 40px;
     height: 40px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
 }

 .step-box h6 {
     font-weight: 700;
     font-size: 0.85rem;
     margin-bottom: 8px;
 }

 .step-box p {
     font-size: 0.75rem;
     margin: 0;
     color: #555;
 }

 .step-btn-wrapper {
     margin-top: 70px;
     position: relative;
     z-index: 1;
 }

 .step-cta-btn {
     background: linear-gradient(to right, rgba(var(--main-color), 1), rgba(var(--main-color), 1));
     border: none;
     padding: 12px 30px;
     color: #fff;
     font-weight: 600;
     font-size: 1rem;
     border-radius: 30px;
     transition: background 0.3s ease;
 }

 .step-cta-btn:hover {
     background: linear-gradient(to right, rgba(var(--main-color), 1), rgba(var(--main-color), 1));
 }

 @media (min-width: 768px) {
     .step-row {
         display: flex;
         justify-content: center;
         gap: 20px;
     }

     .step-box {
         flex: 1;
         margin-bottom: 60px;
     }

     .step-4-container {
         max-width: 600px;
         margin: 0 auto;
     }
 }

 .innercontentimg {
     height: 540px;
     object-fit: cover;
     width: 100%;
     margin-bottom: 1rem;
 }

 .customclass {
     margin-bottom: -1.75rem !important;
 }

 .steps-titlebox {
     margin-bottom: 60px;
 }

 .steps-titlebox .steps-title {
     margin-bottom: 10px;
 }

 .steps-titlebox .common-para {
     max-width: 800px;
     margin: 0 auto;
 }

 .info-list {
     list-style: circle;
     padding-left: 30px;
 }

 .info-list li {
     margin-bottom: 10px;
 }

 @media (max-width: 1500px) {
     .hotel-heading {
         font-size: 2.4rem;
     }

     .hotel-subheading {
         font-size: 14px;
         margin-bottom: 10px;
     }

     .info-heading {
         font-size: 1.6rem;
     }
 }

 @media (max-width: 1024px) {
     p {
         font-size: 14px !important;
     }

     .hotel-heading {
         font-size: 26px;
     }

     .info-heading {
         font-size: 24px;
     }

     .info-checkbox {
         font-size: 15px;
     }

     .info-formula,
     .formula-box {
         font-size: 13px;
     }
 }

 @media (max-width: 767px) {
     .info-illustration {
         max-width: 100%;
         border-radius: 15px;
         max-height: 350px;
         width: 100%;
     }

     .bg-dark-hlx {
         background-color: rgba(var(--main-color), 1);
         padding: 40px 0px;
         border-radius: 10px;
     }

     .step-box {
         margin: 0 auto;
         margin-top: 20px;
     }

     .steps-image-path {
         display: none;
     }

     .step-row {
         margin-top: 3rem !important;
     }

     .step-4-container .step-box {
         margin: 0 auto;
         margin-top: 20px;
     }

     .steps-title {
         font-size: 1.4rem;
         font-weight: 700;
         margin-bottom: 20px;
     }
 }

 @media (max-width: 580px) {
     p {
         font-size: 13px !important;
     }

     .info-checkbox {
         font-size: 13px;
     }
     .info-checkbox span{
        font-size: 13px;
     }
         .info-heading {
        font-size: 18px;
    }
    .section-occupancy-info {
    padding: 20px 20px;
}
.info-box-btn {
    font-size: 0.8rem;
    margin-top: 0px;
}
.info-formula, .formula-box {
    font-size: 10px;
}
 }