:root {
     --primary-orange: #e74c3c;
     --secondary-orange: #d6743f;
     --light-bg: #fff8e7;
     --dark-text: #1a2236;
     --muted-text: #666666;
     --border-color: #e0e0e0;
     --primary-dark: #8B2E1F;
   }

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

   body {
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
     color: var(--dark-text);
     background-color: var(--light-bg);
   }

   .landing-page-body {
     /* background-image: url("<?php echo $BASE_URL; ?>/images/fullroomhire.jpeg"); */
     background-repeat: no-repeat;
     background-size: cover;
     background-position: top;
     background-attachment: fixed;
   }

   .CH_logo img {
     height: 54px;
   }

   .navbar {
     background: transparent;
     border-bottom: 3px solid #FFD700;
     box-shadow: 0 5px 10px #eab270;
   }
   .nav-link::after {
    content: "|";
    margin-left: 12px;
    color: #BF5B04; /* saffron theme */
    font-weight: 600;
}

.nav-item:last-child .nav-link::after {
    content: "";
}


   /* Header */
   .top-header {
     background-color: var(--primary-dark);
     color: #fff;
     padding: 8px 0;
     font-size: 0.9rem;
   }

   .top-header a,
   .call-number {
     color: #fff;
     text-decoration: none;
     margin-right: 20px;
   }

   .top-header i {
     margin-right: 7px;
   }


   .nav-link.active,
   .nav-link:hover {
     color: #7A0C1A !important;
     /* Carnival Burgundy */
     border-bottom: 3px solid #7A0C1A;
     padding-bottom: 4px;
     position: relative;
   }


   .nav-link.active::after {
     content: "▼";
     position: absolute;
     left: 42%;
     bottom: 5px;
     /* distance below text */
     transform: translateX(-50%);
     width: 0;
     height: 0;

     border-top: 6px solid #7A0C1A;
     /* triangle color */
   }





   /* Hero Section */
   .hero-section {
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     height: 400px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
   }

   .hero-section::before,
   .why-choose-section::before,
   .shadedBg::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;

     z-index: -1;
     background: #000;
     opacity: 0.3;
   }

   .hero-content {
     position: relative;
     z-index: 2;
     text-align: center;
     color: white;
     max-width: 600px;
     padding: 20px;
   }

   .hero-content .welcome-text {
     font-size: 24px;
     font-weight: 400;
     margin-bottom: 10px;
     letter-spacing: 1px;
     color: #fff;
   }

   .hero-content h1 {
     font-size: 48px;
     font-weight: 700;
     margin-bottom: 20px;
     line-height: 1.2;
     color: #0A1A3A;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }

   .hero-content p {
     font-size: 18px;
     margin-bottom: 30px;
     color: #fff;
     font-weight: 500;
   }

   .hero-buttons {
     display: flex;
     gap: 15px;
     justify-content: center;
     flex-wrap: wrap;
   }

   .btn-primary-custom {
     background-color: white;
     color: var(--dark-text);
     border: 2px solid white;
     padding: 12px 30px;
     font-weight: 600;
     border-radius: 4px;
     text-decoration: none;
     transition: all 0.3s;
     cursor: pointer;
     font-size: 14px;
   }

   .btn-primary-custom:hover {
     background-color: transparent;
     color: white;
   }

   .btn-orange-custom {
     background-color: var(--primary-orange);
     color: white;
     border: 2px solid var(--primary-orange);
     padding: 12px 30px;
     font-weight: 600;
     border-radius: 4px;
     text-decoration: none;
     transition: all 0.3s;
     cursor: pointer;
     font-size: 14px;
   }

   .btn-orange-custom:hover {
     background-color: var(--secondary-orange);
     border-color: var(--secondary-orange);
   }

   /* About Section */
   .about-section {
     padding: 60px 0;
     background-color: transparent;
   }

   .about-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0px;
     align-items: center;
   }

   .about-text {
     background: wheat;
     padding: 30px;
     border-top-right-radius: 20px;
     border-top-left-radius: 20px;
   }

   .about-text h2 {
     font-size: 32px;
     font-weight: 700;
     margin-bottom: 20px;
     color: var(--dark-text);
     border-bottom: 3px solid var(--secondary-orange);
     padding-bottom: 15px;
     display: inline-block;
   }

   .about-text p {
     font-size: 15px;
     line-height: 1.8;
     color: var(--muted-text);
     margin-bottom: 15px;
   }

   .about-image {
     background: wheat;
     height: 358px;
     padding: 30px;
     border-top-right-radius: 20px;
     border-top-left-radius: 20px;
   }

   .about-image img {
     position: relative;
     overflow: hidden;
     border-radius: 8px;
     height: 300px;
     background-color: #e0e0e0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #999;
   }

   .about-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: top;
   }

   /* Feature-card  */
   .feature-card {
     background: white;
     padding: 40px 20px;
     border-radius: 10px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
   }

   .feature-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
   }

   .feature-icon {
     font-size: 3rem;
     color: var(--gold);
     margin-bottom: 20px;
   }

   .feature-card h3 {
     font-size: 1.3rem;
     font-weight: 600;
     margin-bottom: 15px;
     color: var(--dark-text);
   }

   .feature-card ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }

   .feature-card li {
     margin-bottom: 12px;
     padding-left: 25px;
     position: relative;
     color: #666;
     font-size: 0.95rem;
     line-height: 1.5;
   }

   .feature-card li:before {
     content: '✓';
     position: absolute;
     left: 0;
     color: var(--primary-orange);
     font-weight: bold;
   }


   /* Features Section */
   .features-section {
     padding: 60px 0;
     background-color: var(--light-bg);
   }

   .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 30px;
     margin-top: 40px;
   }

   .feature-card {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
     height: 100%;

   }

   .feature-card a {
     text-decoration: none;
     color: inherit;
   }

   .feature-card ul {

     text-align: left;
   }

   .feature-circle {
     width: 150px;
     height: 150px;
     border-radius: 50%;
     background-color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     transition:
       transform 0.3s,
       box-shadow 0.3s;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     margin:0 auto;
   }

   .feature-circle:hover {
     transform: translateY(-5px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
   }

   .feature-icon {
     font-size: 50px;
     color: var(--secondary-orange);
   }

   .feature-icon img {
     max-width: 50%;
     object-fit: contain;
   }

   .feature-card h3 {
     font-size: 18px;
     font-weight: 600;
     color: var(--dark-text);
   }

   /* Events Section */
   .events-section {
     padding: 60px 0;
     background-color: #f5f5f5;
   }

   .section-title {
     font-size: 32px;
     font-weight: 700;
     color: var(--dark-text);
     margin-bottom: 40px;
   }

   .events-tabs {
     display: flex;
     gap: 30px;
     margin-bottom: 40px;
     border-bottom: 2px solid var(--border-color);
   }

   .event-tab {
     font-size: 18px;
     font-weight: 600;
     color: var(--muted-text);
     cursor: pointer;
     padding-bottom: 15px;
     transition: all 0.3s;
     border-bottom: 3px solid transparent;
     margin-bottom: -2px;
   }

   .event-tab.active {
     color: var(--dark-text);
     border-bottom-color: var(--primary-orange);
   }

   .events-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 30px;
   }

   .event-card {
     background-color: white;
     padding: 25px;
     border-radius: 8px;
     display: flex;
     gap: 15px;
     align-items: flex-start;
     transition: box-shadow 0.3s;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }

   .event-card:hover {
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
   }

   .event-icon {
     font-size: 40px;
     color: var(--secondary-orange);
     min-width: 50px;
     text-align: center;
   }

   .event-content h4 {
     font-size: 16px;
     font-weight: 600;
     color: var(--dark-text);
     margin-bottom: 8px;
   }

   .event-content p {
     font-size: 13px;
     color: var(--muted-text);
     line-height: 1.6;
     margin-bottom: 10px;
   }

   .event-date {
     font-size: 12px;
     color: #999;
   }

   .event-arrow {
     margin-left: auto;
     color: var(--primary-orange);
     font-size: 24px;
     align-self: center;
   }

   /* Our Section */
   .our-section {
     padding: 60px 0;
     background-color: white;
   }

   .our-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: center;
   }

   .our-circles {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
   }

   .circle-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
     text-align: center;
   }

   .circle-badge {
     width: 140px;
     height: 140px;
     border-radius: 50%;
     background-color: var(--light-bg);
     display: flex;
     align-items: center;
     justify-content: center;
     transition:
       transform 0.3s,
       box-shadow 0.3s;
     box-shadow: 0 4px 10px #cdcdcd;
   }

   .circle-badge svg {
     width: 55px;
   }

  .userIcons{
    max-width: 100%;
    padding: 30px;
   }

   .circle-badge:hover {
     transform: scale(1.05);
   }

   .circle-badge i {
     font-size: 45px;
     color: var(--secondary-orange);
   }

   .circle-item label {
     font-size: 14px;
     font-weight: 600;
     color: var(--dark-text);
     line-height: 1.4;
   }

   .our-image {
     position: relative;
     overflow: hidden;
     border-radius: 30px;
     height: 400px;
     background-color: #e0e0e0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #999;
   }

   .our-image img {
     width: 100%;

     object-fit: cover;

     object-position: center;

   }

   /* Contact Section */
   .contact-section {
     padding: 60px 0;
     background-color: var(--light-bg);
   }

   .contact-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
     align-items: start;
   }

   .contact-info h2 {
     font-size: 32px;
     font-weight: 700;
     margin-bottom: 20px;
     color: var(--dark-text);
   }

   .contact-info p {
     font-size: 14px;
     line-height: 1.8;
     color: var(--muted-text);
     margin-bottom: 15px;
   }

   .contact-details {
     margin-top: 30px;
   }

   .contact-detail {
     margin-bottom: 20px;
     font-size: 13px;
     color: var(--muted-text);
   }

   .contact-detail strong {
     display: block;
     color: var(--dark-text);
     font-size: 14px;
     margin-bottom: 5px;
   }

   .social-links {
     display: flex;
     gap: 15px;
     margin-top: 20px;
   }

   .social-link {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background-color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary-orange);
     text-decoration: none;
     transition: all 0.3s;
     border: 1px solid var(--border-color);
   }

   .social-link:hover {
     background-color: var(--primary-orange);
     color: white;
   }

   .contact-form {
     background-color: white;
     padding: 30px;
     border-radius: 8px;
   }

   .form-group {
     margin-bottom: 20px;
   }

   .contact-form label {
     display: block;
     font-size: 13px;
     font-weight: 600;
     color: var(--dark-text);
     margin-bottom: 8px;
   }

   .contact-form input,
   .contact-form textarea {
     width: 100%;
     padding: 12px;
     border: 1px solid var(--border-color);
     border-radius: 4px;
     font-size: 13px;
     font-family: inherit;
     color: var(--dark-text);
   }

   .contact-form input:focus,
   .contact-form textarea:focus {
     outline: none;
     border-color: var(--primary-orange);
     box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
   }

   .contact-form textarea {
     resize: vertical;
     min-height: 100px;
   }

   .submit-btn {
     background-color: var(--primary-orange);
     color: white;
     border: none;
     padding: 12px 30px;
     font-weight: 600;
     border-radius: 4px;
     cursor: pointer;
     font-size: 14px;
     transition: background-color 0.3s;
   }

   .submit-btn:hover {
     background-color: var(--secondary-orange);
   }

   /* Footer */
   /* footer {
     background-color: #2c3e50;
     color: white;
     padding: 30px 0;
     text-align: center;
     font-size: 12px;
   }

   footer p {
     margin: 0;
   } */

   /* Responsive */
   @media (max-width: 768px) {
     .hero-section {
       height: 400px;
     }

     .hero-content h1 {
       font-size: 32px;
     }

     .hero-content p {
       font-size: 16px;
     }

     .hero-buttons {
       flex-direction: column;
     }

     .about-content,
     .our-content,
     .contact-content {
       grid-template-columns: 1fr;
     }

     .features-grid {
       grid-template-columns: repeat(3, 1fr);
     }

     .our-circles {
       grid-template-columns: repeat(3, 1fr);
     }

     .section-title {
       font-size: 24px;
     }

     .about-image,
     .our-image {
       height: 250px;

     }

     .about-text {
       border-radius: 0
     }

     .event-card {
       flex-direction: column;
     }

     .event-arrow {
       margin-left: 0;
     }
   }

   @media (max-width: 576px) {
    .top-header .text {
        display: none;
    }
    .top-header i {
        font-size: 18px;
        margin: 0 8px;
    }
}


   @media (max-width: 480px) {
   

     .features-grid  {
     grid-template-columns: repeat(2, 1fr);
   }

   .our-circles {
     grid-template-columns: repeat(3, 1fr);
   }

   .feature-circle,
   .circle-badge {
     width: 80px;
     height: 80px;
   }
   .userIcons{
     padding: 15px;
   }

   .events-tabs {
     gap: 20px;
   }

   .event-tab {
     font-size: 14px;
   }
   }