:root {
     --primary-color: #133a4c;
     --primary-dark: #0782c6;
     --gradient-color: linear-gradient(to right top, rgb(18, 103, 102), rgb(43, 122, 121), rgb(64, 142, 141), rgb(84, 162, 161), rgb(104, 182, 182));
     --gradient-color1: linear-gradient(180deg, #acc02d, #193d51);
     --gradient-light: linear-gradient(90deg, #fdf2e5, #fdf2e5);
     --Secondary-color: #94e0f0;
     --light-color: #fff;
     --text-muted: #334155;
 }

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

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Rubik', sans-serif;
 }

 p {
     font-size: 1.1rem;
     line-height: 1.7;
 }

 body {
     font-family: 'Segoe UI', Arial, sans-serif;
 }

 /* --- DESKTOP STYLES --- */
 .utility-wrapper {
     background: #153b4f;
     width: 100%;
     color: white;
     padding: 8px 0;
 }

 .utility-inner {
     max-width: 1400px;
     margin: 0 auto;
     display: flex;
     justify-content: flex-end;
     gap: 30px;
     font-size: 11px;
     padding: 0 40px;
     text-transform: uppercase;
 }

 header {
     padding: 0px 40px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     max-width: 1400px;
     margin: 0 auto;
 }

 .logo-area {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .logo {
     height: 110px;
 }

 .title-text {
     display: flex;
     flex-direction: column;
 }

 .affiliation {
     color: #d32f2f;
     font-size: 10px;
     font-weight: 800;
     text-transform: uppercase;
     margin-bottom: 2px;
 }

 .school-name {
     color: #d32f2f;
     font-size: 26px;
     font-weight: 800;
     text-transform: uppercase;
     margin-bottom: 2px;
 }

 .address {
     color: #000;
     font-size: 12px;
     font-weight: 700;
 }

 .contact-area {
     font-size: 16px;
     color: #2c3e50;
     font-weight: 700;
     display: flex;
     gap: 30px;
     align-items: center;
 }

 .contact-area i {
     color: #d32f2f;
     margin-right: 8px;
     font-size: 18px;
 }

 .nav-wrapper {
     background: #148197;
     width: 100%;
     padding: 0 40px;
     z-index: 1000;
 }

 .navbar {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 5px;
}

.nav-item {
    position: relative;
    text-decoration: none;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 18px;
    text-transform: uppercase;
    transition: 0.3s;
    display: block;
}

.nav-item:hover {
    background: #153b4f;
}

.nav-item a {
    text-decoration: none;
    color: white;
}

/* Active (PROFILE & PROSPECTUS) */
.active-link > a {
    color: #2ea3f2;
    position: relative;
}

/* Underline effect */
.active-link > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background: #2ea3f2;
}
 .dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     background: #fff;
     color: #333;
     min-width: 180px;
     display: none;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
     z-index: 100;
     padding: 5px 0;
 }

 .nav-item:hover .dropdown {
     display: block;
 }

 .dropdown a {
     display: block;
     padding: 10px 15px;
     text-decoration: none;
     color: #333;
     font-size: 12px;
     border-bottom: 1px solid #eee;
 }

 .dropdown a:hover {
     background: #f0f0f0;
     color: #d32f2f;
 }

 /* --- MOBILE STYLES --- */
 .mobile-header-container {
     display: none;
     padding: 10px 15px;
     position: relative;
     height: 90px;
 }

 .mobile-brand-box {
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: #ffffff;
     padding: 8px 20px 8px 90px;
     border-radius: 20px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
     height: 65px;
     margin-top: 10px;
     position: relative;
     z-index: 5;
 }

 .mobile-logo {
     height: 90px;
     position: absolute;
     left: 0px;
     z-index: 10;
 }

 .mobile-text {
     display: flex;
     flex-direction: column;
     flex-shrink: 1;
     line-height: 1.1;
     margin-right: 10px;
 }

 .mobile-school-name {
     font-size: 13px;
     font-weight: 800;
     color: #007bff;
     white-space: nowrap;
 }

 .mobile-location {
     font-size: 10px;
     font-weight: 700;
     color: #d32f2f;
     text-transform: uppercase;
 }

 .navbar-toggler {
     z-index: 20;
     padding: 10px;
     cursor: pointer;
 }

 .offcanvas {
     background-color: #153b4f;
     color: white;
 }

 .mobile-nav-link {
     color: white !important;
     font-weight: 700;
     text-transform: uppercase;
     padding: 15px 20px !important;
     border-bottom: 1px solid #148197;
     display: block;
     text-decoration: none;
 }

 .mobile-sub-link {
     background: #148197;
     color: white !important;
     padding: 10px 40px !important;
     display: block;
     text-decoration: none;
     font-size: 0.9em;
 }

 /* --- UPDATED MOBILE HEADER FOR OVERLAY --- */
 @media (max-width: 1176px) {


     .utility-wrapper,
     header,
     .nav-wrapper {
         display: none !important;
     }

     .mobile-header-container {
         display: block !important;
         position: absolute !important;
         top: 0;
         left: 50%;
         transform: translateX(-50%);
         width: 100%;
         z-index: 1000;
         /* Keeps it above the carousel */
         padding-top: 10px;
         max-width: 500px;
     }

     .carousel {
         margin-top: 0 !important;
     }


     .carousel-item img {
         height: 100vh !important;

     }
 }



 /* Hero Carousel  */



 .carousel-item {
     height: 650px;
 }

 .carousel-item img {
     object-fit: cover;
     height: 100%;
     width: 100%;
     filter: brightness(0.7);
 }

 .carousel-control-prev,
 .carousel-control-next {
     width: 50px !important;
     height: 50px !important;
     background-color: rgba(255, 255, 255, 0.2) !important;
     backdrop-filter: blur(5px);
     border-radius: 50%;
     top: 50%;
     transform: translateY(-50%);
     opacity: 0.8;
     transition: all 0.4s ease;
     border: 2px solid rgba(255, 255, 255, 0.3);
     color: white;
     /* Ensures the icon color is white */
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .carousel-control-prev:hover,
 .carousel-control-next:hover {
     background-color: #d32f2f !important;
     opacity: 1;
     transform: translateY(-50%) scale(1.1);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 }

 .carousel-control-prev {
     left: 40px !important;
 }

 .carousel-control-next {
     right: 40px !important;
 }

 /* Card Styles */
 .features-wrapper {
     position: relative;
     margin-top: -100px;
     z-index: 10;
 }

 .info-card {
     padding: 20px 20px;
     border: none;
     border-radius: 30px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     background: white;
     text-align: center;
     height: 100%;
 }

 /* Updated Icon-Circle to Image-Circle */
 .img-circle {
     width: 80px;
     height: 80px;
     margin: 0 auto 20px auto;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .img-circle img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
 }

 .info-card h3 {
     font-size: 1.25rem;
     font-weight: 700;
     margin-bottom: 15px;
 }

 .info-card p {
     font-size: 1rem;
     color: #666;
     margin-bottom: 15px;
 }

 .read-more {
     color: #d32f2f;
     text-decoration: none;
     font-weight: bold;
     font-size: 0.9rem;
 }





 /* ========================About Us Section============================ */




 .custom-about-section {
     padding: 80px 0;
 }

 /* ==================== Left Side Balanced Image Collage ==================== */
 .collage-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
     align-items: center;
 }

 .collage-column {
     display: flex;
     flex-direction: column;
     gap: 16px;
     justify-content: center;
 }

 .collage-item {
     overflow: hidden;
     border-radius: 24px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     width: 100%;
 }

 .collage-item:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
 }

 /* Ensures media fills the container perfectly */
 .collage-item video,
 .collage-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 /* Height Variations */
 .img-tall-left {
     height: 320px;
 }

 .img-short-left {
     height: 180px;
 }

 .img-single-right {
     height: 400px;
 }

 /* ==================== Right Side Structured Typography ==================== */
 .content-wrapper {
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: 100%;
 }

 .school-tagline {
     color: #00add0;
     font-weight: 700;
     margin-bottom: 8px;
     align-self: flex-start;
 }

 .main-headline {
     color: #148197;
     font-weight: 800;
     font-size: 2rem;
     line-height: 1.2;
     margin-bottom: 20px;
     letter-spacing: -0.5px;
 }


 /* ==================== Vision & Mission Cards Component ==================== */
 .vm-cards-wrapper {
     display: flex;
     gap: 20px;
     margin-bottom: 30px;
 }

 .vm-card {
     flex: 1;
     background: rgba(255, 255, 255, 0.4);
     border: 1.5px solid var(--primary-color);
     border-radius: 16px;
     padding: 16px 20px;
     position: relative;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     flex-direction: column;
 }

 .vm-header-inline {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 10px;
 }

 .vm-badge {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background-color: var(--primary-color);
     color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.85rem;
 }

 .vm-title {
     color: var(--primary-dark);
     font-weight: 700;
     font-size: 1.15rem;
     margin: 0;
 }

 .vm-text {
     color: var(--text-muted);
     font-size: 0.85rem;
     line-height: 1.5;
     margin-bottom: 0;
     position: relative;
     padding-right: 25px;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }


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


 .vm-text a:hover {
     color: inherit;
     text-decoration: none;
 }

 .vm-link-arrow {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--primary-color);
     text-decoration: none;
     font-size: 0.85rem;
     transition: transform 0.2s ease;
     position: absolute;
     bottom: 2px;
     right: 0;
 }

 .vm-card:hover {
     background: #ffffff;
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(11, 94, 215, 0.08);
 }

 .vm-card:hover .vm-link-arrow {
     transform: translateX(3px);
 }

 /* ===========================Button Code==================== */


 .learn-more1 {
     padding: 9px 26px;
     border: 1px solid #fff;
     text-decoration: none;
     font-size: 14px;
     font-weight: 600;
     color: var(--primary-color);
     transition: 0.3s ease;
     border-radius: 60px;
     background: var(--gradient-color);
     color: #fff;
 }

 .learn-more1:hover {
     background: transparent;
     color: var(--primary-color);
     border: 1px solid var(--primary-color);
 }



 /* Mobile Responsive Adaptations */
 @media (max-width: 1176px) {
     .custom-about-section {
         padding: 60px 0;
     }

     .collage-container {
         margin-bottom: 40px;
         max-width: 500px;
         margin-left: auto;
         margin-right: auto;
     }

     .main-headline {
         font-size: 2.1rem;
     }

     .vm-cards-wrapper {
         flex-direction: column;
         gap: 20px;
     }

     .btn-more-about {
         display: flex;
         margin-left: auto;
         margin-right: auto;
     }

     .school-tagline {
         align-self: center;
     }

     .main-headline,
     .about-para {
         text-align: center;
     }
 }

 @media (max-width: 576px) {
     .collage-container {
         gap: 10px;
     }

     .collage-column {
         gap: 10px;
     }

     .img-tall-left {
         height: 220px;
     }

     .img-short-left {
         height: 130px;
     }

     .img-single-right {
         height: 260px;
     }
 }


 /* News Section  */




 .quick-link-gal {
     background: linear-gradient(90deg, #55a3a278 0%, #3c8a89b0 50%, #5dabab9c 100%), url(../images/image.png) center center / cover no-repeat;
     display: flex;
     align-items: center;
     padding: 50px 0;
 }


 .news-swiper-container {
     max-width: 1200px;
     padding: 20px 10px;
 }

 .news-card {
     background: #ffffff;
     color: #333;
     height: 340px;
     padding: 20px;
     border-radius: 16px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
     display: flex;
     flex-direction: column;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     border: 1px solid rgba(0, 0, 0, 0.05);
 }

 .news-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
 }

 .news-card-img {
     width: 100%;
     height: 160px;
     object-fit: cover;
     border-radius: 10px;
     margin-bottom: 15px;
 }

 .news-card-title {
     font-size: 1.2rem;
     margin: 0 0 10px 0;
     color: var(--primary-color);
     font-weight: 700;
 }

 .news-card-text {
     font-size: 0.9rem;
     color: #555;
     line-height: 1.5;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     flex-grow: 1;
     margin: 10px 0;
 }

 .news-read-more {
     font-weight: 600;
     color: #d32f2f;
     text-decoration: none;
     text-align: right;
     margin-top: auto;
     transition: opacity 0.3s;
 }

 .news-read-more:hover {
     opacity: 0.8;
 }

 .news-controls-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 25px;
     margin-top: 40px;
 }

 .news-nav-btn {
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.2);
     color: white;
     border: 2px solid white;
     border-radius: 50%;
     cursor: pointer;
     font-size: 1.2rem;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s;
 }

 .news-nav-btn:hover {
     background: white;
     color: var(--primary-color);
 }

 .news-view-more-btn {
     padding: 12px 35px;
     background: white;
     color: var(--primary-color);
     border: none;
     border-radius: 30px;
     font-weight: bold;
     cursor: pointer;
     text-transform: uppercase;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
     transition: transform 0.2s;
 }

 .news-view-more-btn:hover {
     transform: scale(1.05);
 }





 /* ========================== Message Section ========================== */



 .heading-shade.image-text {
     text-transform: uppercase;
     font-weight: 800;
     font-size: 35px;
     font-family: 'Rubik', sans-serif;
     margin-bottom: 2px;

     color: transparent;
     background: #237473;
     /* YOUR IMAGE */
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;

     -webkit-background-clip: text;
     background-clip: text;
 }

 .heading-shade.image-text1 {
     text-transform: uppercase;
     font-weight: 800;
     font-size: 35px;
     font-family: 'Rubik', sans-serif;
     margin-bottom: 2px;
     color: #fff;
 }

 .heding-under {
     font-size: 14px;
     font-weight: 100;
     width: 100%;
     max-width: 250px;
     margin: 0px auto;
     background: #fff;
     padding: 4px 0px;
     border-radius: 30px;
     border: 1px solid var(--primary-color);
 }

 .heding-under1 {
     font-size: 14px;
     font-weight: 100;
     width: 100%;
     color: #fff;
     max-width: 250px;
     margin: 0px auto;
     background: var(--primary-color);
     padding: 4px 0px;
     border-radius: 30px;
     border: 1px solid #fff;
 }

 .underline-img {
     width: 100%;
     max-width: 280px;
 }


 .message-tab {
     background: transparent !important;
     display: flex !important;
     align-items: center !important;
     padding: 4px 9px 4px 4px !important;
     border: 1px solid var(--primary-color) !important;
 }

 .message-tab span {
     color: var(--primary-color) !important;
 }

 .message-tab.active span {
     color: #fff !important;
 }

 .message-tab.active {
     background: var(--gradient-color) !important;
     display: flex !important;
     align-items: center !important;
     padding: 5px 10px 5px 5px !important;
     border: none !important;
 }

 .message-img-round {
     padding: 3px;
     border: 1px solid var(--primary-dark);
     border-radius: 50%;
 }




 /* ==========================Gallery Album========================== */

 .quick-link-gal1 {
     background: linear-gradient(90deg, #55a3a2f5 0%, #3c8a89 50%, #5dababed 100%), url(../images/image.png) center center / cover no-repeat;
     display: flex;
     align-items: center;
     padding: 50px 0;
 }



 .GallerySwiper {
     border-radius: 25px;
 }


 .gallery-button {
     width: 40px;
     height: 40px;
     border: 1px solid #fff;
     background: var(--gradient-color);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: 0.3s all ease-in-out;
     cursor: pointer;
     border-radius: 50%;
 }

 .gallery-button:hover {
     background: #fff;
     color: var(--primary-color);
     border: 1px solid var(--primary-color);
 }

 .gallery-prev {
     position: absolute;
     z-index: 99;
     left: 20px;
     top: 50%;
     transform: translateY(-50%);
 }

 .gallery-next {
     position: absolute;
     z-index: 99;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);
 }

 .single-gallery-img {
     object-fit: cover;
     width: 100%;
     height: 205px !important;
     border-radius: 20px;
 }

 .single-gallery-img-overlay {
     position: absolute;
     bottom: 0px;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
     padding: 30px 0px 10px 0px;
     border-radius: 0px 0px 20px 20px;
 }

 .image-container-single1 {
     height: 440px;
     /* Same height as column 7 images */
     overflow: hidden;
     width: 100%;
     border-radius: 25px;
 }

 .image-container-single1 img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* This ensures all images fill the container consistently */
 }





 /* facilities  */

 .item-container {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     height: 250px;
     margin-bottom: 20px;
 }

 .item-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(0.6);
 }


 .item-img:hover {
     transform: scale(1.05);
 }

 .item-text {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: white;
     font-weight: bold;
     font-size: 1.5rem;
     text-transform: uppercase;
 }



 /* footer  */

 .site-footer {
     background-color: #133a4c;
     /* --primary-color */
 }

 /* Ensure link hover color matches Secondary-color (#94e0f0) */
 .site-footer a:hover {
     color: #94e0f0 !important;
 }

 /* Ensure the border-info matches your theme */
 .border-info {
     border-color: #94e0f0 !important;
 }

 .text-info {
     color: #94e0f0 !important;
 }

 .btn-outline-info {
     color: #94e0f0;
     border-color: #94e0f0;
 }

 .btn-outline-info:hover {
     background-color: #94e0f0;
     color: #133a4c;
 }





 /* =========================Page Designs========================= */

 .hero-banner {
     background: linear-gradient(to right, #000000b0, #000000b0), url('../images/image.png') center / cover no-repeat;
     height: 350px;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 0px 0px 40px 0px;
 }


 .about-quote {
     color: var(--primary-dark);
     font-size: 24px;
     font-family: 'Rubik', sans-serif;
 }

 .hero-banner h6 {
     font-size: 14px !important;
 }

 .hero-banner h2 {
     color: #fff;
     text-transform: uppercase;
     font-family: 'Rubik', sans-serif;
 }

 .hero-banner i {
     font-size: 14px !important;
 }

 .breadcrumb {
     display: inline-block !important;
     padding: 6px 16px !important;
     font-size: 14px !important;
     margin: 0 !important;
     background: rgba(255, 255, 255, 0.18) !important;
     border-radius: 30px !important;
     position: relative !important;
     z-index: 1 !important;
     text-transform: uppercase;
 }

 .breadcrumb a {
     color: #fff;
     text-decoration: none;
     font-weight: 500;
     opacity: 0.85;
 }

 .breadcrumb span {
     margin: 0 8px;
     color: #fff;
     opacity: 0.85;
 }


 .hero-title {
     z-index: 3;
     padding: 15px;
     border-radius: 100px;
     width: 95%;
     max-width: 1100px;
     position: absolute;
     bottom: 30px;
     left: 50%;
     transform: translate(-50%);
     height: 100px;
 }

 .heading-shade1 {
     text-transform: uppercase;
     color: #fff;
 }

 .right-image {
     position: sticky;
     top: 100px;
     padding-top: 30px;
 }

 /* ------------------List-------------- */


 .list-group {
     padding: 0;
     margin: 0;
 }

 .list-group li {
     position: relative;
     padding: 8px 0px 0px 32px;
     list-style: none;
     margin: 4px 0;
 }

 .list-group li::before {
     content: "\f061";
     font-family: "Font Awesome 6 Free";
     font-weight: 900;
     position: absolute;
     left: 0;
     top: 20px;
     transform: translateY(-50%);
     width: 20px;
     height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--primary-dark);
     color: #ffffff;
     font-size: 12px;
     border-radius: 20px;
 }

 /* ---------------------------Accordian--------------------------------------- */
 /* Remove default accordion border */
 .accordion {
     border: none !important;
 }

 /* Accordion Item */
 .accordion-item {
     border: none !important;
     border-radius: 10px !important;
     margin-bottom: 15px !important;
     background: transparent !important;
     /* you wrote var(--); which is invalid */
 }

 /* Accordion Button */
 .accordion-button {
     position: relative !important;
     display: flex !important;
     align-items: center !important;
     width: 100% !important;
     padding: 8px 18px !important;
     font-size: 1rem !important;
     color: #ffffff !important;
     text-align: left !important;
     background: var(--gradient-color) !important;
     border: 0 !important;
     border-radius: 30px !important;
     box-shadow: none !important;
 }

 /* Remove focus */
 .accordion-button:focus {
     outline: none !important;
     box-shadow: none !important;
 }

 /* Hover text animation */
 .accordion-button span {
     position: relative !important;
     z-index: 1 !important;
     transition: transform 0.3s ease, text-shadow 0.3s ease !important;
     padding: 5px 0px !important;
     color: #ffffff !important;
     text-transform: uppercase;
 }

 .accordion-button:hover span {
     transform: translateX(5px) !important;
     text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2) !important;
 }

 /* Active (Opened) State */
 .accordion-button:not(.collapsed) {
     background: var(--primary-color) !important;
     color: #ffffff !important;
     border-radius: 30px !important;
 }

 /* Accordion Body */
 .accordion-body {
     background: #ffffff !important;
     border-radius: 10px !important;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14) !important;
     padding: 30px;
 }

 /* Image inside body */
 .accordion-body img {
     border-radius: 20px !important;
     /* box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.233) !important; */
     margin-bottom: 10px !important;
     width: 100%;
 }

 /* Default Arrow (Collapsed) */
 .accordion-button::after {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;

     transform: rotate(0deg) !important;
 }

 /* When Open */
 .accordion-button:not(.collapsed)::after {
     transform: rotate(180deg) !important;
 }



 /* =============Table=============== */

 thead th {
     background: var(--gradient-color1) !important;
     color: white !important;
 }

 thead th,
 td {
     padding: 10px 0px !important;
     font-family: 'Rubik', sans-serif;
 }

 table {
     position: relative;
     z-index: 9;
 }

 .table>tbody {
     vertical-align: middle !important;
 }