:root {
     --primary-color: #ee861c;
     --secondary-color: #39a24a;
     --text-color: #1B1E31;
 }



 /* ==================== Global =====================  */
 img {
     width: 100%;
 }

 .theme-btn {
     display: inline-block;
     border-radius: 5px;
     padding: 10px 25px;
     font-size: 18px;
     text-decoration: none;
     font-weight: 500;
     text-align: center;
 }

 .theme-btn._primary {
     background-color: var(--primary-color);
     color: #fff;
     border: 1px solid var(--primary-color);
 }

 .theme-btn._secondary {
     background-color: var(--secondary-color);
     color: #fff;
     border: 1px solid var(--secondary-color);
 }

 .theme-btn._primary:hover {
     background-color: #fff;
     color: var(--primary-color);
     border: 1px solid var(--primary-color);
 }

 .theme-btn._secondary:hover {
     background-color: #fff;
     color: var(--secondary-color);
     border: 1px solid var(--secondary-color);
 }

 .hide-desktop {
     display: none;
 }

 @media screen and (max-width:991px) {
     .hide-desktop {
         display: block;
     }
 }

 @media screen and (max-width:768px) {
     .mobile-gap-20 {
         gap: 20px
     }
 }

 .dropdown-item.active,
 .dropdown-item:active {
     background-color: #fff !important;
     color: var(--primary-color) !important;
 }


 .form-control,
 .form-select {
     padding: 10px;
     border-color: #292929 !important;
 }

 .form-control:focus,
 .form-select:focus {
     box-shadow: none;
     border-color: var(--primary-color);
 }

 .sticky .navbar-brand img {
     width: 50%;
 }

 label.error {
     color: red;
 }


 /* 
 1. Header 
 2. Hero
 3. Hero Bottom Sec
 4. Footer
 5. Gallery
 6. Register
 */


 /* ======================= 1. Header ======================== */
 nav.navbar {
     transition: all 0.3s ease;
     /* height: 70px; */
 }

 .navbar.sticky {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     background: #fff !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     z-index: 1030;
 }

 .nav-link,
 .dropdown-item {
     color: var(--text-color);
     font-size: 18px;
 }

 .nav-link:hover,
 .dropdown-item:hover {
     color: var(--primary-color);
 }

 .navbar-nav .nav-link.active,
 .navbar-nav .nav-link.show {
     color: var(--primary-color);
     font-weight: 500;
 }

 .navbar-nav {
     gap: 20px;
 }

 .navbar-toggler,
 .navbar-toggler:focus {
     box-shadow: none;
     border: none;
     background-color: #fff;
 }

 .navbar-brand img {
     width: 100%;
     max-width: 400px;
 }

 .offcanvas.offcanvas-end {
     width: 90% !important;
 }

 @media screen and (max-width:991px) {
     .navbar-nav {
         gap: 5px;
     }
 }

 @media screen and (max-width:768px) {
     .navbar-brand img {
         width: 100%;
         max-width: 260px;
     }
 }

 @media screen and (max-width:370px) {
     .hero-buttons {
         flex-direction: column;
     }
 }


 /* ======================= 2. Hero ======================== */

 .hero {
     background-image:
         url(https://modi75.com/assets/images/modi-hero-1.png),
         radial-gradient(circle at 20% 30%, rgba(238, 134, 28, 0.3) 0%, transparent 60%),
         radial-gradient(circle at 70% 60%, rgba(57, 162, 74, 0.3) 0%, transparent 70%),
         radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
     background-repeat: no-repeat;
     background-size: contain, cover, cover, cover;
     background-position: right top, center, center, center;
 }


 .carousel-indicators [data-bs-target] {
     background-color: var(--primary-color);
 }

 .carousel-indicators .active {
     background-color: var(--secondary-color);
 }

 .hero-title {
     font-size: 64px;
     font-weight: 600;
     line-height: 1.2;
     letter-spacing: 0;
     margin-bottom: 20px;
     color: #000;
 }

 .carousel-item {
     height: 350px;
 }

 @media screen and (max-width:991px) {
     .hero {
         background-image:
             radial-gradient(circle at 20% 30%, rgba(238, 134, 28, 0.3) 0%, transparent 60%),
             radial-gradient(circle at 70% 60%, rgba(57, 162, 74, 0.3) 0%, transparent 70%),
             radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
     }

     .carousel-item {
         height: 100%;
     }

     .hero-title {
         font-size: 32px;
     }
 }


 @media screen and (max-width:768px) {
     .hero-buttons {
         justify-content: center;
     }
 }


 /* ======================= 3. Hero Bottom Sec ======================== */
 .hero-bottom-card-sec svg {
     width: 50px;
     height: 50px;
     margin-bottom: 10px;
 }

 .hero-bottom-card-sec h6 {
     font-size: 20px;
 }

 .hero-bottom-card-sec p {
     font-size: 18px;
 }

 /* ===================== 4. Footer ================= */

 footer {
     background-color: var(--primary-color);
     color: #fff;
     font-size: 12px;
 }



 /* ================= 5. Gallery ======================== */

 .gallery-card {
     margin-bottom: 20px;
     background: #fff;
     border-radius: 10px;
     /* overflow: hidden; */
     border: 1px solid var(--primary-color);
     position: relative;
 }

 .gallery-card-header {
     padding: 10px;
     background: var(--primary-color);
     margin-bottom: 10px;
     border-radius: 8px;
 }

 .gallery-card-header h2 {
     font-size: 18px;
     margin: 0;
     color: #fff;
     max-width: 85%;
 }

 .gallery-card-header p {
     font-size: 14px;
     margin: 0;
     color: #fff;
     max-width: 85%;
 }

 .gallery-card-body img {
     width: 100%;
     display: block;
     border-radius: 10px;
     margin: 0 0 10px 0;
 }

 .gallery-card-image-box {
     padding: 10px;
 }

 .gallery-card-profile-img {
     position: absolute;
     width: 80px;
     height: 80px;
     object-fit: cover;
     top: -10px;
     right: -10px;
     z-index: 5;
     border-radius: 100px;
 }

 .like-box svg {
     width: 15px;
     height: 15px;
 }


 /* ======================== 6. Register ===================== */

 .register-card {
     background: #fff;
     border-radius: 10px;
     padding: 20px;
     /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
 }

 .btn-option {
     border-color: var(--primary-color) !important;
 }

 .btn-option.active {
     background-color: var(--primary-color);
     color: #fff;
 }

 /* Make select2 box same size as normal bootstrap select */
 .select2-container .select2-selection--single,
 .select2-container .select2-selection--multiple {
     height: 45px !important;
     padding: 10px !important;
     border: 1px solid #292929 !important;
     border-radius: 6px !important;
     display: flex;
     align-items: center;
 }

 /* Adjust font and spacing inside */
 .select2-container .select2-selection__rendered {
     line-height: 25px !important;
     font-size: 14px;
 }

 /* Dropdown arrow alignment */
 .select2-container .select2-selection__arrow {
     height: 100% !important;
     right: 10px !important;
 }

 #school_id2+.select2 .select2-selection__placeholder,
 .select2-container--default .select2-selection--single .select2-selection__placeholder {
     color: var(--text-color) !important;
 }