/****** About Page ******/

/* Experience Section */

.experience-section {
	padding-top: 64px;
	padding-bottom: 96px;
	background: linear-gradient(
		180deg,
		var(--Background-Default-Primary, #fff) 0.11%,
		var(--Background-Accent-Blue-light, #eff8ff) 58.29%
	);
}

.main-hero-img {
    height: 300px !important;
    object-fit: fill;
}
.experience-section h2,
.experience-section h3 {
	line-height: 1.2;
}

.experience-section .bg-light {
	background-color: white !important;
}

/* Key Differentiators Section */
.differentiators-section {
	background: url("../../../../uploads/2025/04/modern-apartment-buildings-green-residential-area-city.webp")
		center/cover no-repeat;
}

.differentiators-section .swiper-ticker .swiper-slide {
	position: relative;
	padding: 0 0 24px 24px;
	margin-bottom: 30px;
	border-bottom: 1px solid #64b9f6;
	transition: transform 0.8s ease, opacity 0.8s ease;
}

.differentiators-section .swiper-ticker .swiper-slide.active {
	opacity: 1;
	transform: translateX(5px);
}

.differentiators-section .swiper-ticker .swiper-slide .title {
	font-weight: 600;
	font-size: 1.2rem;
	color: #fff;
}

.differentiators-section .swiper-ticker .swiper-slide .progress-line {
	position: absolute;
	left: 0px;
	top: 0;
	width: 5px;
	height: 60%;
	background-color: #fff; /* default white */
	transition: none;
}

.differentiators-section .swiper-ticker .swiper-slide.active .progress-line {
	background-color: #297de5;
	animation: fillLine 3.5s linear forwards;
}

@keyframes fillLine {
	from {
		height: 0%;
	}
	to {
		height: 90%;
	}
}

.differentiators-section .desc-item {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}
.differentiators-section .swiper-vertical {
    touch-action: pan-y !important;
}
.differentiators-section .desc-item.active {
	opacity: 1;
	transform: translateY(0);
	height: auto;
	overflow: visible;
	pointer-events: auto;
}

/* Visiom */

.vision-section {
	background: linear-gradient(
		152deg,
		var(--Background-Accent-Blue-light, #eff8ff) -19.51%,
		var(--Background-Default-Primary, #fff) 47.83%,
		var(--Background-Accent-Blue-medium, #dceefd) 165.42%
	);
	padding: 5rem;
}

.bg-light-blue {
	background: linear-gradient(
		117deg,
		var(--Background-Accent-Blue-light, #eff8ff) -7.92%,
		var(--Background-Accent-Blue-medium, #dceefd) 114.43%
	);
}

/*  Mission */
.mission-section {
	padding: 5rem;
}

/* About Testimonail Section */

.testimonial-component .swiper-button-custom {
	cursor: pointer;
	z-index: 2;
	position: relative;
}

.testimonial-component .swiper-pagination-testimonial {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
}

.testimonial-component .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background-color: #000;
	opacity: 0.3;
	border-radius: 50%;
	transition: opacity 0.3s ease;
}

.testimonial-component .swiper-pagination-bullet-active {
	opacity: 1;
}

.testimonial-component .testimonial-right-content {
	position: relative;
	margin-top: 35px;
	background: linear-gradient(141.33deg, #eff8ff -14.21%, #dceefd 58.74%);
	padding: 40px;
	border-radius: 4px;
}

.testimonial-component .testimonial-quote-img {
	position: absolute;
	top: -35px;
	right: 0;
}

.testiomonial-section .swiper-pagination-testimonial .swiper-pagination-bullet {
	height: 12px;
	width: 12px;
}
.testiomonial-section
.swiper-pagination-testimonial
.swiper-pagination-bullet-active {
	background: var(--bs-primary);
}

.testimonial-buttons .swiper-button-prev-schools-desktop,
.testimonial-buttons .swiper-button-next-schools-desktop,
.testimonial-buttons .swiper-button-prev-schools-mobile,
.testimonial-buttons .swiper-button-next-schools-mobile,
.swiper-button-prev-schools-desktop:active,.swiper-button-prev-schools-desktop:active,
.swiper-button-prev-schools-mobile:active,.swiper-button-prev-schools-mobile:active,
.swiper-button-prev-advisors:active,.swiper-button-next-advisors:active
{
	border: 0;
}

/* History Section */

.history-section {
	background: linear-gradient(97deg, #fff -14.28%, #f7f3ff 100.76%);
}

.swiper-slide-content div {
	background: linear-gradient(97deg, #fff -14.28%, #f7f3ff 100.76%);
	margin-left: -250px;
	box-shadow: none !important;
}

.btn-year {
	background: transparent;
	border: none;
	font-size: 2rem !important;
	color: #333;
	padding: 0.5rem 1rem;
}

.btn-year.active {
	border-radius: 0;
	color: #24b694;
	border-left: 5px solid #24b694 !important;
	font-weight: bold;
	border: none;
}

.history-tabs .swiper-slide {
	width: auto !important;
}

.history-slider .swiper-slide {
	padding-bottom: 40px;
}

.swiper-button-prev-history,
.swiper-button-next-history {
	border: none !important;
	padding: 0;
}

.btn-year:active {
	border-color: transparent !important;
}

.object-fit-cover {
	object-fit: cover;
	height: 100%;
	width: 100%;
}

.history-vertical-line {
	color: var(--Stroke-Purple-dark-1, #81629f);
	margin-bottom: 200px;
	border: 1px solid;
}

.history-content h2 {
	font-size: 3rem !important;
	font-weight: 400;
	line-height: 60px;
}

.history-content p {
	line-height: 25px;
}
/* Advisor Section */

.advisors-swiper {
	position: relative;
	padding-bottom: 60px !important; /* Increased from 40px to push pagination lower */
}

/* Customized pagination bar */
.swiper-pagination-progressbar {
	width: 80px !important;
	height: 6px !important;
	background-color: #e0e0e0 !important;
	border-radius: 50px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	bottom: 10px; /* Push closer to bottom */
}

/* Blue fill line */
.swiper-pagination-progressbar-fill {
	background-color: rgba(25, 46, 82, 1) !important;
	border-radius: 50px !important;
	height: 100%;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background-color: rgba(25, 46, 82, 1) !important;
	border-radius: 50px !important;
	height: 100%;
}

.notched-box {
	position: relative;
	overflow: hidden;

	/* Rounded corners on 3 sides only */
	border-top-left-radius: 8px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

/* Notch cutout (only bottom-left rounded to blend with box) */
.notched-box::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 45px;
	height: 45px;
	background-color: #fff; /* match outer page background */
	border-bottom-left-radius: 8px;
	z-index: 1;
}

/* Icon button placed inside the notch */
.notched-box .corner-btn {
	position: absolute;
	top: 2px;
	right: 2px;
	padding: 0;
	background-color: transparent;
	border: none;
	border-radius: 6px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Button icon image styling */
.notched-box .corner-btn img {
	width: 34px;
	height: 34px;
}

/* Banner Section */

.about-banner-section {
	height: 600px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	z-index: 1;
}

.banner-bg {
	background: rgb(25 46 82 / 56%);
}
.about-banner-section .explore-now {
    padding: 20px 70px;
    font-size: 1.25rem;
    font-weight: 500;
}

/* Ensure text is above background */
.about-banner-section .container {
	z-index: 2;
}

/* Optional: Smoother responsiveness */
@media (max-width: 768px) {
	.banner-section {
		height: auto;
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.banner-section h1 {
		font-size: 1.75rem;
	}
	.about-banner-section .explore-now {
        padding: 10px 0;
        font-size: 1rem;
        width: 90%;
        font-weight: 500;
    }
}

/* Explore our Schools */

.swiper-button-prev-schools,
.swiper-button-next-schools {
	border: 0 !important;
}

.swiper-pagination.schools-pagination.swiper-pagination-progressbar {
	width: 80px; /* slightly lon≠≠≠≠ger */
	height: 6px; /* thicker */
	background-color: #e0e0e0;
	border-radius: 50px !important;
	left: 50%;
	transform: translateX(-50%);
	bottom: 10px; /* Push closer to bottom */
}

/* Blue fill line */
.swiper-pagination-progressbar-fill {
	background-color: rgba(25, 46, 82, 1) !important;
	border-radius: 50px !important;
	height: 100%;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background-color: rgba(25, 46, 82, 1) !important;
	border-radius: 50px !important;
	height: 100%;
}

.schools-swiper {
    padding-bottom: 60px !important;
}
.swiper-button-prev-schools-desktop { border: 0 !important; }
.school-swiper-comp-img { height: 336px; object-fit: fill; }



/* Responsive Adjustments */
@media (max-width: 768px) {
        .container, .section-container {padding-left: 1rem;
    padding-right: 1rem}
	.experience-section { padding: 40px 0; }
	.experience-section h2, .experience-section h3 { font-size: 1.5rem;margin-bottom:20px !important; }
	.differentiators-section .swiper-ticker .swiper-slide { padding-left: 16px; }
	.vision-section, .mission-section { padding: 2rem 1rem; }
	.testimonial-component .testimonial-right-content { padding: 20px; margin-top: 20px; height: 50vh; }
	.testimonial-component .testimonial-quote-img { width: 30%; }
	.btn-year { font-size: 1.5rem !important; padding: 0.3rem 0.8rem; }
	.history-section .swiper-slide-content div {
        /*margin-left: 50px;*/
        margin-top: -80px;
        padding: 1rem;
        width: 85%;
        margin-left: auto;
        position: relative;
        right: 0;
    }
	.history-content h2 { font-size: 2rem !important; line-height: 1.4; }
	.about-banner-section { height: auto; padding: 60px 0; }
	.about-banner-section h2 { font-size: 1.75rem; }
	.related-btn { display: block !important; width: 100%; text-align: left; font-size: 0.9rem !important; }
	.history-vertical-line { display: none;}
	.swiper-pagination.swiper-pagination-progressbar {
        height: 6px;
        background-color: #ddd;
        border-radius: 50px;
        width: 100%;
    }

    .swiper-pagination-progressbar-fill {
        background-color: #1A73E8 !important;
        height: 100%;
        border-radius: 50px;
    }
    
    .swiper-pagination-progressbar {
        width: 80px !important;
        height: 6px !important;
        background-color: #e0e0e0 !important;
        border-radius: 50px !important;
        left: 13% !important;
        transform: translateX(-50%) !important;
        bottom: 25px;
        top: auto !important;
    }
    
    .notched-box .corner-btn, .notched-box::before {
        display:none;
    }
    
    .notched-box {
        border-top-right-radius:8px;
    }
    .advisors-swiper {
        padding-bottom: 0px !important;
    }
}
@media (max-width: 576px) {
	.history-content h2 { font-size: 1.5rem !important; }
	.testimonial-component .testimonial-right-content { margin-top: 50px;font-size: 0.95rem; }
	.notched-box .corner-btn img { width: 24px; height: 24px; }
	.school-swiper-comp-img {
        height: 215px;
        object-fit: fill;
    }
}