/* Reset base overflow issues */
html, body {
margin: 0;
padding: 0;
overflow-x: hidden; /* Prevents horizontal dragging */
box-sizing: border-box;
font-family: "Poppins", sans-serif !important;
color: #075fb8;
background-image: url(../images/body-bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
*, *::before, *::after {
box-sizing: inherit; /* Makes all elements respect border-box */
}
html {
scroll-behavior: smooth;
}
.layout_padding {
padding: 75px 0;
}
.layout_padding2 {
padding: 45px 0;
}
.layout_padding2-top {
padding-top: 45px;
}
.layout_padding-top {
padding-top: 75px;
}
.layout_padding-bottom {
padding-bottom: 75px;
}
/* Buttons */
.call_to-btn {
display: inline-block;
padding: 12px 20px;
border-radius: 10px;
font-size: 15px;
text-transform: uppercase;
background-color: #FF8C42;
border: 1px solid transparent;
color: #fff;
transition: all 0.3s ease 0s;
white-space: nowrap; /* Prevents text overflow */
}
.hero_section .call_to-btn {
padding: 12px 35px;
}
.call_to-btn img {
width: 18px;
margin-left: 10px;
}
.btn_on-hover {
transition: all 0.3s ease 0s;
}
.call_to-btn:hover,
.btn_on-hover:hover {
color: #fff;
-webkit-box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.7);
box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.7);
transform: translateY(-7px);
}
.main-heading {
color: #082465;
font-weight: bold;
text-align: center;
}
/*-------------------------------------------------------- header section ---------------------------------------------*/
/*.white-logo {*/
/* filter: brightness(0) invert(1);*/
/*}*/
/*.header_section {*/
/* padding-top: 10px;*/
/* background-color: #082469;*/
/* color: #fff !important;*/
/*}*/
/*nav.navbar.navbar-expand-lg {*/
/* padding: 18px 55px;*/
/* border-bottom-left-radius: 35px;*/
/* border-bottom-right-radius: 35px;*/
/*}*/
/* Nav links */
/*.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link {*/
/* padding: 10px 20px;*/
/* color: #075fb8;*/
/* font-size: 15px;*/
/* text-align: center;*/
/* text-transform: uppercase;*/
/*}*/
/*.custom_nav-container.navbar-expand-lg .navbar-nav .nav-item.active .nav-link {*/
/* color: #fec913; /* highlight active link */
/*}*/
/* General link reset */
/*a,*/
/*a:hover,*/
/*a:focus {*/
/* text-decoration: none;*/
/*}*/
/*a:hover,*/
/*a:focus {*/
/* color: initial;*/
/*}*/
/* Button reset */
/*.btn,*/
/*.btn:focus {*/
/* outline: none !important;*/
/* box-shadow: none;*/
/*}*/
/* Top container styles */
/*.top_container {*/
/* height: 95vh;*/
/* position: relative;*/
/*}*/
/*.top_container::before {*/
/* content: "";*/
/* position: absolute;*/
/* width: 48%;*/
/* height: 100%;*/
/* background: url(../images/hero-bg.png); */
/* background-size: cover;*/
/* background-position: right bottom;*/
/* background-repeat: no-repeat;*/
/* z-index: -1;*/
/*}*/
/*.top_container.sub_pages::before {*/
/* background-size: 400px 200px;*/
/* background-position: top left;*/
/*}*/
/*.top_container.sub_pages {*/
/* height: 35vh;*/
/*}*/
/*.top_container.sub_page {*/
/* height: auto;*/
/*}*/
/* Logo */
/*.navbar-brand {*/
/* display: flex;*/
/* align-items: center;*/
/*}*/
/*.navbar-brand img {*/
/* width: 65px;*/
/* margin-right: 25px;*/
/*}*/
/*.navbar-brand span {*/
/* font-size: 20px;*/
/* font-weight: 700;*/
/* color: #fefefe;*/
/*}*/
/* Navbar container */
/*.custom_nav-container {*/
/* z-index: 99999;*/
/* padding: 15px 30px;*/
/* display: flex;*/
/* align-items: center;*/
/* justify-content: space-between; /* logo left, menu right */
/* width: 100%;*/
/*}*/
/* Search button */
/*.custom_nav-container .nav_search-btn {*/
/* background-image: url(../images/search-icon.png);*/
/* background-size: 22px;*/
/* background-repeat: no-repeat;*/
/* background-position-y: 7px;*/
/* width: 35px;*/
/* height: 35px;*/
/* padding: 0;*/
/* border: none;*/
/*}*/
/* Collapse menu items to right */
/*.custom_nav-container .navbar-collapse {*/
/* justify-content: flex-end !important;*/
/*}*/
/* Nav items spacing */
/*.custom_nav-container .navbar-nav {*/
/* display: flex;*/
/* gap: 20px;*/
/*}*/
/* Mobile toggle button */
/*.custom_nav-container .navbar-toggler {*/
/* outline: none;*/
/*}*/
/*.custom_nav-container .navbar-toggler .navbar-toggler-icon {*/
/* background-image: url(../images/menu.png);*/
/* background-size: 40px;*/
/*}*/
/* Navbar base style */
/*.navbar {*/
/* background: #fff; /* #075fb8 #0B1C2C - rgb(23 110 200) - blue */
/* padding: 12px 30px;*/
/* position: fixed;*/
/* top: 0;*/
/* left: 0;*/
/* width: 100%;*/
/* z-index: 1000;*/
/*}*/
/*.search-container {*/
/* position: relative;*/
/* display: inline-block;*/
/* }*/
/* Search button (icon) */
/* .nav_search-btn i {*/
/* font-size: 18px;*/
/* color: #fff;*/
/* }*/
/* .hidden {*/
/* opacity: 0;*/
/* pointer-events: none;*/
/* transition: opacity 0.3s ease;*/
/* }*/
/* Search input wrapper */
/* .search-box {*/
/* position: relative;*/
/* display: inline-flex;*/
/* align-items: center;*/
/* width: 0;*/
/* opacity: 0;*/
/* overflow: hidden;*/
/* transition: width 0.3s ease, opacity 0.3s ease;*/
/* }*/
/* .search-box.active {*/
/*width: 220px; /* expanded width */
/* opacity: 1;*/
/* }*/
/* .search-box input {*/
/* width: 100%;*/
/* border: 1px solid #ccc;*/
/* border-radius: 20px;*/
/* padding: 6px 35px 6px 12px;*/
/* outline: none;*/
/* }*/
/* Close button inside input */
/* .close-btn {*/
/* position: absolute;*/
/* right: 10px;*/
/* background: transparent;*/
/* border: none;*/
/* font-size: 16px;*/
/* color: #666;*/
/* cursor: pointer;*/
/* }*/
/*.navbar ul {*/
/* list-style: none;*/
/* display: flex;*/
/* gap: 25px;*/
/* margin: 0;*/
/* padding: 0;*/
/*}*/
/*.navbar ul li a {*/
/* color: #fff;*/
/* text-decoration: none;*/
/* font-size: 16px;*/
/* font-weight: 500;*/
/* padding: 8px 12px;*/
/* position: relative;*/
/* transition: color 0.3s ease;*/
/*}*/
/* Hover underline animation */
/*.navbar ul li a::after {*/
/* content: '';*/
/* position: absolute;*/
/* left: 0;*/
/* bottom: 0;*/
/* width: 0%;*/
/* height: 2px;*/
/* background: #fec913; orange highlight
/* transition: width 0.3s ease;*/
/*}*/
/*.navbar ul li a:hover {*/
/* color: #fec913;*/
/*}*/
/*.navbar ul li a:hover::after {*/
/* width: 100%;*/
/*}*/
/*-------------------------------------------------------- end header section -----------------------------------------*/
/*---------------------------------------------------------- Hero Section ---------------------------------------------*/
/* ===== HERO BANNER UNIQUE ===== */
/* Overall Banner */
/* ===========================
HERO SECTION BASE STYLES
=========================== */
.hero-banner-modern {
padding: 100px 20px;
background: linear-gradient(135deg, #B3E5FC, #FFCDD2);
color: #333;
font-family: 'Poppins', sans-serif;
overflow: hidden;
}
.hero-container-modern {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 50px;
flex-wrap: wrap;
}
.hero-content-modern {
flex: 1;
min-width: 320px;
}
/* Title */
.hero-title-modern {
font-size: 3rem;
font-weight: 700;
margin-bottom: 20px;
color: #1a1a1a;
line-height: 1.3;
}
.hero-title-modern .highlight {
color: #1c90f3;
}
/* Subtitle */
.hero-subtitle-modern {
font-size: 1.15rem;
color: #444;
margin-bottom: 35px;
line-height: 1.7;
font-weight: 400;
text-align: justify;
}
/* Features */
.hero-features-modern {
display: flex;
gap: 30px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.feature-item {
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
font-size: 1rem;
color: #2a2a2a;
}
.feature-item i {
font-size: 1.5rem;
color: #1c90f3;
}
/* Buttons */
.hero-buttons-modern a {
display: inline-block;
padding: 12px 30px;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
margin-right: 15px;
}
.btn-primary {
background-color: #1c90f3;
color: #fff;
}
.btn-primary:hover {
background-color: #1678ce;
}
.btn-outline {
border: 2px solid #1c90f3;
color: #1c90f3;
background: transparent;
}
.btn-outline:hover {
background-color: #1c90f3;
color: #fff;
}
/* ===========================
IMAGE CAROUSEL
=========================== */
.hero-image-modern {
flex: 1;
min-width: 320px;
}
.hero-carousel-modern {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.hero-carousel-modern img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.hero-carousel-modern img.active {
opacity: 1;
z-index: 1;
}
/* ===========================
GRADIENT BACKGROUND FOR IMAGES
=========================== */
.gradient-bg {
background: linear-gradient(135deg, #B3E5FC, #FFCDD2);
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
/*padding: 30px;*/
object-fit: contain;
max-width: 100%;
height: auto;
top:10px;
}
/* ===========================
LOTTIE PLACEHOLDER
=========================== */
.hero-lottie-unique {
width: 120px;
height: 120px;
margin-bottom: 15px;
}
/* ===========================
RESPONSIVE BREAKPOINTS
=========================== */
/* Large Tablets / Small Laptops */
@media (max-width: 1200px) {
.hero-title-modern {
font-size: 2.5rem;
}
.hero-subtitle-modern {
font-size: 1.05rem;
}
.hero-carousel-modern {
height: 350px;
}
}
/* Tablets */
@media (max-width: 992px) {
.hero-container-modern {
flex-direction: column-reverse;
text-align: center;
gap: 30px;
}
.hero-title-modern {
font-size: 2.2rem;
}
.hero-subtitle-modern {
font-size: 1rem;
}
.hero-features-modern {
justify-content: center;
gap: 20px;
}
.hero-buttons-modern a {
margin: 10px 5px;
}
.hero-carousel-modern {
height: 300px;
}
}
/* Large Mobiles */
@media (max-width: 768px) {
.hero-title-modern {
font-size: 1.8rem;
}
.hero-subtitle-modern {
font-size: 0.95rem;
}
.hero-carousel-modern {
height: 250px;
}
.feature-item {
font-size: 0.9rem;
}
.feature-item i {
font-size: 1.3rem;
}
}
/* Small Mobiles */
@media (max-width: 576px) {
.hero-banner-modern {
padding: 60px 15px;
}
.hero-title-modern {
font-size: 1.5rem;
}
.hero-subtitle-modern {
font-size: 0.9rem;
}
.hero-carousel-modern {
height: 200px;
}
.hero-buttons-modern a {
padding: 10px 20px;
font-size: 0.9rem;
}
}
/* Extra Small Mobiles (≤ 320px) */
@media (max-width: 320px) {
.hero-banner-modern {
padding: 40px 10px; /* tighter padding */
}
.hero-title-modern {
font-size: 1.2rem; /* smaller title */
line-height: 1.4; /* better readability */
}
.hero-subtitle-modern {
font-size: 0.8rem;
}
.hero-carousel-modern {
height: 160px; /* shrink image carousel */
}
.hero-buttons-modern a {
padding: 8px 16px;
font-size: 0.8rem;
}
.feature-item {
font-size: 0.8rem;
}
.feature-item i {
font-size: 1.1rem;
}
}
/*-------------------------------------------------- end hero section -------------------------------------------------*/
/* --------------------------------------------- about section --------------------------------------------------------*/
.about-img {
width: 100%;
object-fit: cover;
border-radius: 20px;
height: 400px; /* default for large screens */
}
/* Medium devices (tablets, 768px and up) */
@media (max-width: 991px) {
.about-img {
height: 350px !important;
}
}
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767px) {
.about-img {
height: 300px !important;
}
}
/* Extra small devices (phones, less than 576px) */
@media (max-width: 575px) {
.about-img {
height: 250px !important;
margin-top:10px;
}
}
/* ========== BASE STYLING (Desktop First) ========== */
.about-school {
position: relative;
padding: 80px 111px 0 111px;
min-height: 90vh; /* allows growth if text expands */
overflow: hidden;
}
.section-title {
font-size: 50px;
font-weight: 700;
color: #075fb8;
margin-bottom: 20px;
}
.about-content p {
font-family: "Poppins", sans-serif;
font-size: 16px;
line-height: 1.7;
margin-bottom: 25px;
color: #000;
}
.btn-read-more {
background: linear-gradient(90deg, #71dfbe, #2f9bd0);
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 25px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-read-more:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
/* Lottie animation defaults */
.about-animation lottie-player {
max-width: 100%;
height: 400px;
}
/* ========== LARGE TABLETS & SMALL LAPTOPS (≤ 1200px) ========== */
@media (max-width: 1200px) {
.about-school {
padding: 70px 60px;
min-height: auto;
}
.section-title { font-size: 42px; }
.about-animation lottie-player { height: 350px; }
}
/* ========== TABLETS (≤ 992px) ========== */
@media (max-width: 992px) {
.about-school {
padding: 60px 40px;
text-align: center;
}
.section-title { font-size: 36px; }
.about-content p { font-size: 15px; }
.about-animation { margin-top: 30px; }
.about-animation lottie-player { height: 300px; }
}
/* ========== LARGE MOBILES (≤ 768px) ========== */
@media (max-width: 768px) {
.about-school { padding: 50px 25px; }
.section-title { font-size: 30px; }
.about-content p { font-size: 14px; }
.btn-read-more { padding: 8px 18px; font-size: 0.9rem; }
.about-animation lottie-player { height: 250px; }
}
/* ========== SMALL MOBILES (≤ 576px) ========== */
@media (max-width: 576px) {
.about-school { padding: 40px 20px; }
.section-title { font-size: 26px; }
.about-content p { font-size: 13px; line-height: 1.5; }
.btn-read-more { padding: 8px 16px; font-size: 0.85rem; }
.about-animation lottie-player { height: 200px; }
}
/* ========== EXTRA SMALL MOBILES (≤ 320px) ========== */
@media (max-width: 320px) {
.about-school { padding: 30px 15px; }
.section-title { font-size: 22px; }
.about-content p { font-size: 12px; }
.btn-read-more { padding: 6px 14px; font-size: 0.8rem; }
.about-animation lottie-player { height: 160px; }
}
/*--------------------------------------------------- Mini about section - Horizontal Angled Stripes -------------------------------------------- */
.mini-about-stripes-diagonal {
font-family: "Poppins", sans-serif;
overflow: hidden;
}
.mini-about-stripe {
position: relative;
padding: 100px 20px;
/*overflow: hidden;*/
}
.mini-about-stripe::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.40; /* opacity of svg */
pointer-events: none;
background-size: 60px 60px;
animation: none;
}
.mini-about-stripe-inner {
max-width: 800px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 1;
}
.mini-about-stripe h3 {
font-size: 30px;
font-weight: 600;
margin-bottom: 15px;
}
.mini-about-stripe p {
font-size: 1rem;
margin-bottom: 15px;
line-height: 1.6;
}
.mini-about-stripe-link {
font-weight: 600;
text-decoration: none;
padding: 10px 20px;
border-radius: 30px;
display: inline-block;
transition: all 0.3s ease;
}
/* Skew directions */
.skew-left { transform: skewY(-3deg); }
.skew-left .mini-about-stripe-inner { transform: skewY(3deg); }
.skew-right { transform: skewY(3deg); }
.skew-right .mini-about-stripe-inner { transform: skewY(-3deg); }
/* Backgrounds */
.mini-about-stripe-light {
background: linear-gradient(135deg, #B3E5FC, #FFCDD2);
}
.mini-about-stripe-dark {
background: linear-gradient(135deg, #B3E5FC, #FFCDD2);
}
.mini-about-stripe-accent {
background: linear-gradient(135deg, #B3E5FC, #FFCDD2);
}
/* Overlay patterns */
.pattern-dots::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.5'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/g%3E%3C/svg%3E");
animation: dotsFade 6s ease-in-out infinite alternate;
}
.pattern-lines::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cline x1='0' y1='60' x2='60' y2='0' stroke='%23ffffff' stroke-width='0.5'/%3E%3C/svg%3E");
background-size: 50px 50px;
animation: linesSlide 12s linear infinite;
}
.pattern-waves::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cpath d='M0 20 Q20 0, 40 20 T80 20 V40 H0 Z' fill='none' stroke='%23ffffff' stroke-width='0.6'/%3E%3C/svg%3E");
background-size: 80px 40px;
animation: wavesMove 8s linear infinite;
}
/* Animations */
@keyframes dotsFade {
0% { opacity: 0.08; }
100% { opacity: 0.18; }
}
@keyframes linesSlide {
from { background-position: 0 0; }
to { background-position: 100px 100px; }
}
@keyframes wavesMove {
from { background-position: 0 0; }
to { background-position: 80px 0; }
}
/* Text colors */
.mini-about-stripe-light h3 { color: #000; }
.mini-about-stripe-light p { color: #555; }
.mini-about-stripe-dark h3 { color: #000; }
.mini-about-stripe-dark p { color: #555; }
.mini-about-stripe-accent h3 { color: #000; }
.mini-about-stripe-accent p { color: #555; }
/* Button styles */
.mini-about-stripe-light .mini-about-stripe-link {
/*background: #075fb8; color: #fff;*/
background: #fff; color: #075fb8;
}
.mini-about-stripe-light .mini-about-stripe-link:hover {
/*background: #054a91;*/
background: #f0f0f0;
}
.mini-about-stripe-dark .mini-about-stripe-link {
/*background: #fff; color: #222;*/
background: #fff; color: #075fb8;
}
.mini-about-stripe-dark .mini-about-stripe-link:hover {
/*background: #ddd;*/
background: #f0f0f0;
}
.mini-about-stripe-accent .mini-about-stripe-link {
background: #fff; color: #075fb8;
}
.mini-about-stripe-accent .mini-about-stripe-link:hover {
background: #f0f0f0;
}
/* ===================== RESPONSIVE ===================== */
/* Large Tablets / Small Laptops */
@media (max-width: 1200px) {
.mini-about-stripe {
padding: 80px 20px;
}
.mini-about-stripe h3 {
font-size: 26px;
}
.mini-about-stripe p {
font-size: 0.95rem;
}
}
/* Tablets */
@media (max-width: 992px) {
.mini-about-stripe {
padding: 70px 20px;
}
.mini-about-stripe-inner {
max-width: 650px;
}
.mini-about-stripe h3 {
font-size: 24px;
}
.mini-about-stripe p {
font-size: 0.9rem;
line-height: 1.5;
}
.mini-about-stripe-link {
padding: 8px 18px;
font-size: 0.9rem;
}
}
/* Large Mobiles */
@media (max-width: 768px) {
.mini-about-stripe {
padding: 60px 15px;
}
.mini-about-stripe-inner {
max-width: 500px;
}
.mini-about-stripe h3 {
font-size: 22px;
}
.mini-about-stripe p {
font-size: 0.85rem;
}
}
/* Small Mobiles */
@media (max-width: 576px) {
.mini-about-stripe {
padding: 50px 15px;
}
.mini-about-stripe-inner {
max-width: 100%;
}
.mini-about-stripe h3 {
font-size: 20px;
}
.mini-about-stripe p {
font-size: 0.8rem;
}
.mini-about-stripe-link {
padding: 6px 14px;
font-size: 0.8rem;
}
}
/* Extra Small Mobiles (320px and below) */
@media (max-width: 320px) {
.mini-about-stripe {
padding: 40px 10px;
}
.mini-about-stripe h3 {
font-size: 18px;
}
.mini-about-stripe p {
font-size: 0.75rem;
line-height: 1.4;
}
.mini-about-stripe-link {
padding: 6px 12px;
font-size: 0.75rem;
}
}
/* ================================================== Floating Shapes - Global ================================================ */
.shape {
position: absolute;
opacity: 0.15;
animation: float 6s ease-in-out infinite alternate;
}
.shape-1 {
width: 150px;
height: 150px;
border-radius: 50%;
background: #0d6efd;
top: 10%;
left: -50px;
}
.shape-2 {
width: 100px;
height: 100px;
border-radius: 50%;
background: #4ea8de;
bottom: 15%;
right: -40px;
animation-delay: 2s;
}
.shape-3 {
width: 70px;
height: 70px;
border-radius: 50%;
background: #5c7cfa;
top: 50%;
right: 20%;
animation-delay: 4s;
}
/* Triangle */
.shape-4 {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 100px solid #ff6b6b;
top: 20%;
right: 10%;
opacity: 0.12;
animation-delay: 3s;
transform: rotate(45deg);
}
/* Star */
.shape-5 {
position: absolute;
bottom: 30%;
left: 25%;
width: 0;
height: 0;
opacity: 0.15;
color: #ffd43b;
background: transparent;
animation: float 6s ease-in-out infinite alternate;
}
.shape-5::before {
content: "★"; /* Unicode star */
font-size: 100px;
color: #ffd43b;
display: block;
line-height: 1;
}
@keyframes floatSquare {
from { transform: rotate(45deg) translateY(0px); }
to { transform: rotate(45deg) translateY(30px); }
}
.decorative-square {
position: absolute;
top: -40px;
right: -40px;
width: 100px;
height: 100px;
background: #6D007B;
transform: rotate(35deg);
opacity: 0.2;
animation: floatSquare 6s ease-in-out infinite alternate;
}
/* Floating animation */
@keyframes float {
from { transform: translateY(0px); }
to { transform: translateY(30px); }
}
/*--------------------------------------------------- stat section---------------------------------------------------- */
.stats-section {
padding: 60px 90px 90px 90px; /* top, right, bottom, left */
/*background: #075fb8; */
/* background: linear-gradient(90deg, #cce7f7 0%, #dffbf4 100%); lighter gradient */
/*border-radius: 10px;*/
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
text-align: center;
height : 80vh;
}
.stats-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
margin-bottom: 30px;
}
.stats-header h2 {
font-size: 50px;
font-weight: 700;
color: #fff ;
}
.stats-header p {
font-size: 14px;
color: #fff;
line-height: 1.6;
max-width: 600px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.stat-box {
border-right: 1px solid #ddd;
padding: 10px;
}
.stat-box:last-child {
border-right: none;
}
.stat-box h3 {
font-size: 28px;
font-weight: bold;
color: #0B1C2C;
}
.stat-box p {
font-size: 14px;
color: #fff;
}
.heading {
position: relative;
display: inline-block; /* so the ::after aligns properly */
}
.heading::after {
content: "";
display: block;
width: 100%;
height: 20px; /* adjust to match your SVG height */
margin-top: 10px; /* space between text and svg */
background: url("images\extrahttps://kokatechnology.com/assets/img/extra.svg") no-repeat center;
background-size: contain; /* keeps SVG proportions */
}
/*--------------------------------------------------- end stat section------------------------------------------------- */
/*--------------------------------------------------- admission section------------------------------------------------ */
/* ==========================
Base Styles (Desktop First)
========================== */
.admission-section {
padding: 50px 20px;
text-align: center;
}
.section-title {
font-size: 50px;
font-weight: 700;
color: #000;
}
.section-subtitle {
font-size: 15px;
color: #000;
margin-bottom: 30px;
}
/* Checklist */
.admission-checklist {
list-style: none;
padding-left: 0;
margin: 0 0 20px 0;
}
.admission-checklist li {
position: relative;
padding-left: 28px;
margin-bottom: 12px;
font-size: 1rem;
text-align: left;
font-family: "Poppins", sans-serif;
}
.admission-checklist li::before {
content: "✔";
position: absolute;
left: 0;
top: 0;
color: #28a745;
font-weight: bold;
}
/* Apply button */
.premium-btn {
background-color: #075fb8 !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
padding: 12px 35px !important;
font-weight: 600 !important;
font-size: 1rem !important;
transition: all 0.3s ease !important;
display: inline-block !important;
text-decoration: none !important;
/*width:50%;*/
}
.premium-btn:hover {
background: #218838 !important;
color: #fff !important;
}
.premium-btn-wrapper {
text-align: center; /* centers inline/inline-block child */
/*width:50%;*/
}
/* Flip Cards */
.features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.feature-box {
width: 100%;
height: 250px;
perspective: 1000px;
}
.feature-box-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.feature-box:hover .feature-box-inner {
transform: rotateY(180deg);
}
.feature-box-front,
.feature-box-back {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.feature-box-front { text-align: center; }
.feature-box-back { transform: rotateY(180deg); text-align: center; }
.feature-box .icon {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 15px;
}
.feature-box .icon i {
font-size: 40px;
color: #f7c618;
}
.feature-box.green .feature-box-front,
.feature-box.green .feature-box-back {
background: #2d6fb2;
color: #fff;
}
.feature-box.white .feature-box-front,
.feature-box.white .feature-box-back {
background: #fff;
color: #333;
}
.feature-box h3 {
margin: 10px 0;
font-size: 18px;
font-weight: 700;
}
.feature-box p {
font-size: 14px;
line-height: 1.5;
}
/* Admission form */
.admission-form {
background: #fff;
padding: 25px;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
text-align: left;
height: 518px;
}
.admission-form h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
color: black;
}
.admission-form input {
width: 100%;
padding: 10px 12px;
margin-bottom: 15px;
border-radius: 8px;
border: 1px solid #ccc;
font-size: 14px;
}
.admission-form button {
width: 100%;
background: #000;
color: #fff;
padding: 12px;
font-size: 16px;
font-weight: 600;
border: none;
border-radius: 40px;
cursor: pointer;
transition: 0.3s;
border: 2px solid #fff;
}
.admission-form button:hover {
background: white;
color: #0960ae;
border: 2px solid #0960ae;
}
/* ==========================
Responsive Breakpoints
========================== */
/* Laptops & Large Tablets */
@media (max-width: 1200px) {
.section-title { font-size: 40px; }
.feature-box { height: 220px; }
}
/* Tablets */
@media (max-width: 992px) {
.features {
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.feature-box { height: 200px; }
.section-title { font-size: 35px; }
.section-subtitle { font-size: 14px; }
.admission-checklist li { font-size: 0.95rem; }
}
/* Large Mobiles */
@media (max-width: 768px) {
.features {
grid-template-columns: 1fr;
}
.feature-box { height: 180px; }
.section-title { font-size: 30px; }
.premium-btn { width: 50%; font-size: 0.95rem; }
.admission-checklist li { font-size: 0.9rem; }
}
/* Small Mobiles */
@media (max-width: 576px) {
.section-title { font-size: 26px; }
.section-subtitle { font-size: 13px; }
.feature-box { height: 160px; }
.feature-box h3 { font-size: 16px; }
.feature-box p { font-size: 13px; }
.admission-checklist li { font-size: 0.85rem; }
.premium-btn { font-size: 0.9rem; padding: 10px 20px !important; }
}
/* Extra Small Mobiles (320px and below) */
@media (max-width: 360px) {
.section-title { font-size: 22px; }
.section-subtitle { font-size: 12px; }
.feature-box { height: 150px; }
.feature-box h3 { font-size: 14px; }
.feature-box p { font-size: 12px; }
.admission-checklist li { font-size: 0.8rem; }
.premium-btn { font-size: 0.85rem; padding: 8px 16px !important; }
}
/* Ensure icons stay inside cards on small screens */
@media (max-width: 425px) {
.feature-box .icon {
margin-bottom: 10px; /* less spacing */
margin-top: 0; /* remove push outside */
position: relative; /* keep inside card */
top: 0;
}
.feature-box .icon i {
font-size: 32px;
}
}
@media (max-width: 375px) {
.feature-box .icon {
margin-bottom: 8px;
margin-top: 0;
position: relative;
top: 0;
}
.feature-box .icon i {
font-size: 28px;
}
}
@media (max-width: 320px) {
.feature-box .icon {
margin-bottom: 6px;
margin-top: 0;
position: relative;
top: 0;
}
.feature-box .icon i {
font-size: 24px;
}
}
/*--------------------------------------------------- Assisted Living section------------------------------------------- */
/* ---------------------------
Base Styles (Desktop First)
---------------------------- */
.assisted-living-section {
background: #f9f9f9;
position: relative;
}
.carousel-inner img {
height: 750px !important;
object-fit: cover;
border-radius: 0.5rem;
}
.carousel-overlay {
height: 300px;
border-radius: 0.5rem;
}
.assisted-living-section .row {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.assisted-living-section .carousel-inner img {
height: 400px;
object-fit: cover;
border-radius: 0.5rem 0 0 0.5rem;
}
.assisted-living-section .content-card {
margin: 0;
}
/* Make sure parent div stretches */
.assisted-living-section .col-lg-6.p-0.d-flex.align-items-center {
align-items: stretch !important;
}
/* Content card */
.content-card {
height: 750px; /* Match left carousel height */
display: flex;
flex-direction: column;
justify-content: center;
/*background: #fff;*/
border-radius: 1rem;
max-width: 90%;
margin-left: auto;
margin-right: auto;
padding: 30px;
box-sizing: border-box;
z-index: 10;
}
.content-card h2 {
color: black;
font-size: 50px;
font-weight: 700;
}
.content-card ul {
padding-left: 1.2rem;
list-style-type: disc;
}
.content-card ul li {
margin-bottom: 10px;
}
.content-card .d-flex .btn {
width: 50%;
text-align: center;
}
/* ---------------------------
Responsive Breakpoints
---------------------------- */
/* ---------- Large Tablets / Small Laptops ---------- */
@media (max-width: 1200px) {
.carousel-inner img {
height: 350px;
}
.content-card {
height: auto;
max-width: 95%;
padding: 25px;
}
.content-card h2 {
font-size: 40px;
}
}
/* ---------- Tablets ---------- */
@media (max-width: 992px) {
.assisted-living-section .row {
flex-direction: column;
}
.carousel-inner img {
height: 300px !important;
border-radius: 0.5rem;
}
.content-card {
height: auto;
margin-top: 25px;
max-width: 100%;
padding: 25px 20px;
justify-content: flex-start;
}
.content-card h2 {
font-size: 32px;
text-align: center;
}
.content-card p,
.content-card ul {
text-align: center;
}
.content-card ul {
list-style: none;
padding-left: 0;
}
.content-card ul li {
margin-bottom: 8px;
}
.content-card .d-flex {
flex-direction: column;
gap: 15px;
}
.content-card .btn {
width: 100%;
text-align: center;
}
}
/* ---------- Large Mobiles (add 50% centered buttons) ---------- */
@media (max-width: 768px) {
.carousel-inner img {
height: 440px !important;
}
.content-card {
padding: 20px;
}
.content-card h2 {
font-size: 26px;
}
.content-card p {
font-size: 0.95rem;
}
.content-card ul li {
font-size: 0.95rem;
}
/* ✅ Buttons: 50% width & center aligned */
.content-card .d-flex {
justify-content: center; /* center the stacked buttons */
align-items: center;
}
.content-card .d-flex .btn {
width: 50%;
text-align: center;
}
}
/* ---------- Small Mobiles ---------- */
@media (max-width: 576px) {
.carousel-inner img {
height: 250px !important;
}
.content-card {
padding: 18px;
}
.content-card h2 {
font-size: 22px;
}
.content-card p,
.content-card ul li {
font-size: 0.9rem;
}
.content-card .btn {
font-size: 0.9rem;
padding: 10px 15px;
}
}
/* ---------- Extra Small Mobiles (320–360px) ---------- */
@media (max-width: 360px) {
.carousel-inner img {
height: 180px !important;
}
.content-card {
padding: 15px;
}
.content-card h2 {
font-size: 20px;
}
.content-card p,
.content-card ul li {
font-size: 0.85rem;
}
.content-card .btn {
font-size: 0.85rem;
padding: 8px 12px;
}
}
/* ---------- Responsive Heading ---------- */
.responsive-heading {
font-size: 50px; /* default for large screens */
font-weight: 700;
}
/* Large desktops */
@media (max-width: 1200px) {
.responsive-heading {
font-size: 42px;
}
}
/* Medium devices (tablets) */
@media (max-width: 992px) {
.responsive-heading {
font-size: 36px;
}
}
/* Small devices (large phones) */
@media (max-width: 768px) {
.responsive-heading {
font-size: 36px;
}
}
/* Extra small devices (phones) */
@media (max-width: 576px) {
.responsive-heading {
font-size: 24px;
}
}
/* Extra extra small devices */
@media (max-width: 375px) {
.responsive-heading {
font-size: 20px;
}
}
/*----------------------------------------------- Feature container ---------------------------------------------------*/
/* Radial Container with Vignette */
.radial-container {
position: relative;
width: 100%;
height: 900px;
display: flex;
justify-content: center;
align-items: center;
/* Vignette Mask */
-webkit-mask-image: radial-gradient(ellipse closest-side, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 100% 100%;
mask-image: radial-gradient(ellipse closest-side, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 100% 100%;
overflow: hidden; /* hides floating shapes overflow */
}
/* Floating Background Shapes */
.shape {
position: absolute;
border-radius: 50%;
opacity: 0.15;
animation: float 6s ease-in-out infinite alternate;
}
.shape-1 { width: 150px; height: 150px; background: #0d6efd; top: 10%; left: -50px; }
.shape-2 { width: 100px; height: 100px; background: #4ea8de; bottom: 15%; right: -40px; animation-delay: 2s; }
.shape-3 { width: 70px; height: 70px; background: #5c7cfa; top: 50%; right: 20%; animation-delay: 4s; }
@keyframes float {
from { transform: translateY(0px); }
to { transform: translateY(30px); }
}
/* Center Card */
.feature-card.centered {
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
border-radius: 78px;
width: 140px;
height: 138px;
display: flex;
background: #fff;
color: black;
padding: 20px;
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
pointer-events: none;
margin-top: -20px;
}
.feature-card.centered img {
max-width: 140px;
height: auto;
}
/* Feature Cards Circular Layout */
.feature-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.feature-circle .feature-card {
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(90deg, #cce7f7 0%, #dffbf4 100%);
border: 1px solid #e0e0e0;
text-align: center;
padding: 15px;
transition: all 0.3s ease;
}
.feature-circle .feature-card:hover {
border-color: #6D007B;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transform: translateY(-5px) scale(1.05);
}
.feature-circle .feature-icon {
font-size: 20px;
color: #176ec8;
margin-bottom: 5px;
}
.feature-circle .feature-title {
font-size: 0.85rem;
font-weight: 500;
color: #333;
}
.feature-circle.layer2 .feature-card .feature-icon i {
color: #FF8C42; /* make all icons orange */
}
.feature-circle.layer2 .feature-title {
color: #FF8C42; /* make the titles orange */
}
/* ===== RESPONSIVENESS ===== */
/* Tablet */
@media (max-width: 768px) {
.radial-container { height: 650px; }
.feature-card.centered {
width: 110px;
height: 110px;
padding: 15px;
}
.feature-circle .feature-card {
width: 95px;
height: 95px;
padding: 12px;
}
.feature-circle .feature-icon { font-size: 18px; }
.feature-circle .feature-title { font-size: 0.75rem; }
}
/* Large Mobile (425px) */
@media (max-width: 425px) {
.radial-container {
display: none; /* hide radial structure */
}
/* optional: adjust other elements if needed */
}
/* Small Mobile (375px) */
@media (max-width: 375px) {
.radial-container {
display: none; /* hide radial structure */
}
}
/* Extra Small (320px) */
@media (max-width: 320px) {
.radial-container {
display: none; /* hide radial structure */
}
}
/*----------------------------------------------- end feature container -----------------------------------------------*/
/* =============================================== Teachers Section ================================================== */
/* Teacher Section */
.teacher_section {
padding: 80px 20px;
text-align: center;
background: #f5faff; /* subtle background color */
}
.teacher_section .main-heading {
font-weight: 700;
color: #000;
font-size: 50px;
margin-bottom: 10px;
}
.teacher_section .sub-heading {
font-size: 18px;
color: #000;
margin-bottom: 50px;
}
/* Grid Layout */
.teacher-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 per row */
gap: 20px;
justify-items: center;
}
/* Teacher Card */
.teacher-card {
background: #fff;
border-radius: 14px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
width: 100%;
max-width: 300px; /* max width for cards */
}
.teacher-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}
.teacher-image img {
width: 100%;
height: 220px; /* adjust height for bigger screens */
object-fit: cover;
display: block;
}
.teacher-info {
padding: 18px;
}
.teacher-info h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 6px;
color: #333;
}
.teacher-info p {
font-size: 15px;
color: #777;
}
/* See More Button */
.see-more {
margin-top: 40px;
}
.see-more-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(90deg, #71dfbe, #2f9bd0);
color: #000;
font-weight: 600;
border-radius: 30px;
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.see-more-btn:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
background-color: rgba(255, 255, 255, 0.25);
}
/* ===== RESPONSIVE ===== */
/* Large Laptops/Tablets */
@media (max-width: 1200px) {
.teacher_grid {
gap: 18px;
}
.teacher-card {
max-width: 280px;
}
.teacher-image img {
height: 200px;
}
}
/* Medium Tablets */
@media (max-width: 992px) {
.teacher-grid {
grid-template-columns: repeat(2, 1fr); /* 2 per row */
gap: 15px;
}
.teacher-card {
max-width: 260px;
}
.teacher-image img {
height: 190px;
}
.teacher_section .main-heading {
font-size: 40px;
}
.teacher_section .sub-heading {
font-size: 16px;
margin-bottom: 35px;
}
}
/* Mobile / Small Tablets (≤768px) */
@media (max-width: 768px) {
.teacher-grid {
grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
gap: 20px;
}
.teacher-card {
max-width: 280px; /* keep cards neat */
margin: 0 auto; /* center them if row isn’t full */
}
.teacher-image img {
height: 180px;
}
.teacher_section .main-heading {
font-size: 36px;
}
.teacher_section .sub-heading {
font-size: 15px;
margin-bottom: 30px;
}
}
/* Small Mobile (425px) */
@media (max-width: 425px) {
.teacher_section {
padding: 60px 15px;
}
.teacher_section .main-heading {
font-size: 30px;
}
.teacher_section .sub-heading {
font-size: 14px;
margin-bottom: 25px;
}
.teacher-card {
max-width: 280px;
}
.teacher-image img {
height: 160px;
}
}
/* Extra Small Mobile (375px) */
@media (max-width: 375px) {
.teacher_section {
padding: 50px 10px;
}
.teacher_section .main-heading {
font-size: 26px;
}
.teacher_section .sub-heading {
font-size: 13px;
margin-bottom: 20px;
}
.teacher-card {
max-width: 260px;
}
.teacher-image img {
height: 150px;
}
}
/* Extra Extra Small (320px) */
@media (max-width: 320px) {
.teacher_section {
padding: 40px 8px;
}
.teacher_section .main-heading {
font-size: 22px;
}
.teacher_section .sub-heading {
font-size: 12px;
margin-bottom: 18px;
}
.teacher-card {
max-width: 240px;
}
.teacher-image img {
height: 140px;
}
.see-more-btn {
padding: 10px 20px;
font-size: 14px;
}
}
/*-------------------------------------------------- client section --------------------------------------------------*/
/* Testimonial Section */
.testimonial-carousel-section {
padding: 80px 20px;
background: #f4f6f8;
}
/* Heading */
.testimonial-carousel-section h2 {
font-weight: 700;
font-size: 45px;
margin-bottom: 40px;
}
/* Carousel */
.testimonial-carousel {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-behavior: smooth;
padding-bottom: 10px;
}
.testimonial-carousel::-webkit-scrollbar {
height: 8px;
}
.testimonial-carousel::-webkit-scrollbar-thumb {
background: #075fb8;
border-radius: 4px;
}
/* Testimonial Card */
.testimonial-card {
flex-shrink: 0;
width: 300px;
background: #fff;
border-radius: 20px;
padding: 25px 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
.testimonial-card img {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 15px;
}
.testimonial-card h5 {
font-weight: 700;
color: #075fb8;
margin-bottom: 10px;
}
.testimonial-card p {
color: #555;
font-size: 0.9rem;
line-height: 1.4;
}
/* === Carousel Navigation Buttons === */
/* === Carousel Navigation Buttons === */
.carousel-prev,
.carousel-next {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #075fb8; /* blue circle */
color: #fff; /* white icon */
border: none;
border-radius: 50%;
opacity: 0.95;
box-shadow: 0 4px 8px rgba(0,0,0,0.25);
cursor: pointer;
z-index: 9999; /* <<< bring on top of cards */
pointer-events: auto; /* ensure it’s clickable */
}
.carousel-prev { left: -20px; } /* pull slightly outside cards */
.carousel-next { right: -20px; }
.carousel-prev:hover,
.carousel-next:hover {
opacity: 1;
}
.carousel-prev i,
.carousel-next i {
font-size: 1.6rem;
color: #fff;
line-height: 1;
}
/* ===== RESPONSIVE ===== */
/* Large Tablets / Small Desktops */
@media (max-width: 1200px) {
.testimonial-card {
width: 280px;
padding: 22px 18px;
}
.testimonial-carousel {
gap: 18px;
}
}
/* Tablets */
@media (max-width: 992px) {
.testimonial-card {
width: 260px;
padding: 20px 16px;
}
.testimonial-carousel {
gap: 16px;
}
}
/* Mobile Landscape (768px) */
@media (max-width: 768px) {
.testimonial-section h2 {
font-size: 36px;
margin-bottom: 30px;
}
.testimonial-card {
width: 220px;
padding: 18px 14px;
}
.testimonial-carousel {
gap: 14px;
}
.carousel-prev, .carousel-next {
width: 40px;
height: 40px;
}
}
/* Mobile Portrait (425px) */
@media (max-width: 425px) {
.testimonial-section h2 {
font-size: 28px;
margin-bottom: 25px;
}
.testimonial-card {
width: 200px;
padding: 15px 12px;
}
.testimonial-card p {
font-size: 0.85rem;
}
.testimonial-carousel {
gap: 12px;
}
.carousel-prev, .carousel-next {
width: 35px;
height: 35px;
}
}
/* Small Mobile (375px) */
@media (max-width: 375px) {
.testimonial-section h2 {
font-size: 24px;
margin-bottom: 20px;
}
.testimonial-card {
width: 180px;
padding: 14px 10px;
}
.testimonial-card img {
width: 60px;
height: 60px;
}
.testimonial-card p {
font-size: 0.8rem;
}
.carousel-prev, .carousel-next {
width: 30px;
height: 30px;
}
}
/* Extra Small Mobile (320px) */
@media (max-width: 320px) {
.testimonial-section h2 {
font-size: 20px;
margin-bottom: 15px;
}
.testimonial-card {
width: 160px;
padding: 12px 8px;
}
.testimonial-card img {
width: 55px;
height: 55px;
}
.testimonial-card p {
font-size: 0.75rem;
}
.carousel-prev, .carousel-next {
width: 28px;
height: 28px;
}
}
/*------------------------------------------------- end client section ------------------------------------------------*/
/*-------------------------------------------------- contact section --------------------------------------------------*/
.contact_section {
background-image: url(../images/shape-2.png);
background-repeat: no-repeat;
background-size: 14%;
background-position: left center;
}
.contact-form {
padding: 25px;
border-radius: 20px;
}
.contact-form input {
border: none;
outline: none;
background-color: #dedee0;
width: 100%;
margin: 10px 0;
padding: 7px 10px;
}
.contact-form .input_message {
height: 120px;
}
.contact-form input::placeholder {
color: #fff;
}
.contact-form button {
border: none;
outline: none;
padding: 7px 50px;
text-transform: uppercase;
margin-top: 25px;
background-color: #fec913;
color: #fff;
}
/*------------------------------------------------------ end contact section ------------------------------------------*/
/*----------------------------------------------------- admission section ---------------------------------------------*/
.admission_section .container-fluid.position-relative {
height: 500px;
}
.admission_container {
width: 770px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.admission_img-box {
width: 50%;
border-radius: 25px 0 0 25px;
overflow: hidden;
}
.admission_detail {
width: 50%;
background-color: #082465;
padding: 20px;
color: #fefeff;
border-radius: 0 25px 25px 0;
}
.admission_img-box img {
width: 100%;
}
.admission_detail .admission_btn {
background-color: #fec913;
padding: 7px 35px;
color: #fefeff;
font-size: 15px;
border-radius: 5px;
}
/*------------------------------------------------- end admission section --------------------------------------------*/
/*----------------------------------------------------- call section --------------------------------------------------*/
.call_section h2 {
text-align: center;
margin: 15px 0;
}
.landing_section .number_heading {
color: #fec913;
}
.landing_section p {
text-align: center;
margin-top: 15px;
}
/*------------------------------------------------- Donate section --------------------------------------------------*/
.services-line {
border: none; /* remove default border */
height: 1px; /* thickness of the line */
width: 60%; /* length relative to container */
background-color: #d9e6f5; /* line color */
margin: 1px auto 2px; /* top / left-right / bottom spacing */
}
/* ===== Donate Premium Section ===== */
/* ===== Donate Premium Section ===== */
.donate-premium-section {
position: relative;
padding: 100px 20px;
background: linear-gradient(to bottom, #00c2cb 20%, #0e64b0 90%, #075fb8 100%);
overflow: hidden;
}
/* Background Curve */
.bg-curve {
height: 250px;
background: #fff;
border-bottom-left-radius: 50% 100px;
border-bottom-right-radius: 50% 100px;
z-index: 1;
}
/* Floating Cards */
.donate-floating-card {
background: #fff;
color: #1a1a1a;
border-radius: 25px;
box-shadow: 0 25px 50px rgba(0,0,0,0.2);
padding: 30px;
position: relative;
z-index: 2;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.donate-floating-card:hover {
transform: translateY(-15px);
box-shadow: 0 35px 60px rgba(0,0,0,0.25);
}
.donate-floating-card h3 {
font-weight: 700;
margin-bottom: 15px;
color: #075fb8;
}
.donate-floating-card p {
margin-bottom: 10px;
font-size: 1rem;
}
.qr-img {
width: 150px;
height: 150px;
object-fit: contain;
}
/* Donate Info Section */
.donate-info {
z-index: 2;
color: #fff;
text-align: left;
}
.donate-info h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.donate-info p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
}
.donate-info ul {
list-style: none;
padding-left: 0;
margin-bottom: 20px;
}
.donate-info ul li {
position: relative;
padding-left: 25px;
margin-bottom: 12px;
font-size: 1rem;
}
.donate-info ul li::before {
content: "★";
position: absolute;
left: 0;
color: #ffd700;
font-size: 1rem;
}
/* Button */
.btn-light {
background: #ffd700;
color: #075fb8;
font-weight: 600;
padding: 12px 25px;
border-radius: 50px;
transition: all 0.3s ease;
}
.btn-light:hover {
background: #ffc107;
color: #fff;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
.donate-floating-card {
padding: 25px;
}
.donate-info h2 {
font-size: 2.2rem;
}
.qr-img {
width: 140px;
height: 140px;
}
}
@media (max-width: 992px) {
.row.justify-content-center {
flex-direction: column-reverse;
align-items: center;
}
.col-lg-5 {
max-width: 100%;
text-align: center;
margin-bottom: 40px;
}
.donate-floating-card {
margin: 0 auto;
width: 90%;
}
.donate-info h2 {
font-size: 2rem;
}
.donate-info p, .donate-info ul li {
font-size: 0.95rem;
}
.qr-img {
width: 130px;
height: 130px;
}
}
@media (max-width: 768px) {
.bg-curve {
display: none; /* Hide curve entirely */
}
.donate-premium-section {
padding: 80px 15px;
}
.donate-floating-card {
width: 95%;
padding: 20px;
}
/* h2 in white and above paragraph */
.donate-info {
text-align: center;
margin-top: 0;
}
.donate-info h2 {
position: relative;
top: auto;
left: auto;
transform: none;
color: #fff !important;
font-size: 2rem;
margin-bottom: 20px;
padding: 0;
background: transparent;
}
.donate-info p, .donate-info ul li {
font-size: 0.9rem;
}
.qr-img {
width: 120px;
height: 120px;
}
}
@media (max-width: 425px) {
.donate-premium-section {
padding: 60px 10px;
}
.donate-floating-card {
width: 100%;
padding: 18px;
}
.donate-info h2 {
font-size: 1.5rem;
}
.donate-info p, .donate-info ul li {
font-size: 0.85rem;
}
.qr-img {
width: 100px;
height: 100px;
}
}
@media (max-width: 375px) {
.donate-floating-card {
padding: 15px;
}
.donate-info h2 {
font-size: 1.4rem;
}
.donate-info p, .donate-info ul li {
font-size: 0.8rem;
}
.qr-img {
width: 90px;
height: 90px;
}
}
@media (max-width: 320px) {
.donate-floating-card {
padding: 12px;
}
.donate-info h2 {
font-size: 1.2rem;
}
.donate-info p, .donate-info ul li {
font-size: 0.75rem;
}
.qr-img {
width: 80px;
height: 80px;
}
}
/*-------------------------------------------------- footer section ---------------------------------------------------*/
/*.school-footer {*/
/*background: #fff; /*linear-gradient(135deg, #064a8c, #075fb8)*/
/* padding: 60px 5% 40px;*/
/* font-family: 'Poppins', sans-serif;*/
/* color: #075fb8;*/
/* position: relative;*/
/* z-index: 1;*/
/*}*/
/*.footer-container {*/
/* display: flex;*/
/* justify-content: space-between;*/
/* align-items: flex-start;*/
/* flex-wrap: wrap;*/
/* gap: 40px;*/
/*}*/
/* Logo + Info */
/*.footer-logo {*/
/* flex: 1;*/
/* min-width: 260px;*/
/*}*/
/*.footer-logo img {*/
/* width: 80px;*/
/* margin-bottom: 16px;*/
/*}*/
/*.footer-logo h2 {*/
/* font-size: 22px;*/
/* font-weight: 700;*/
/* margin: 0 0 5px;*/
/*}*/
/*.footer-logo p {*/
/* font-size: 14px;*/
/* margin: 3px 0;*/
/* color: #075fb8;*/
/* line-height: 1.6;*/
/*}*/
/*.footer-contact p {*/
/* font-size: 13px;*/
/* margin: 6px 0;*/
/* color: #075fb8;*/
/*}*/
/* Footer Links */
/*.footer-links {*/
/* display: flex;*/
/* flex: 3;*/
/* justify-content: space-between;*/
/* flex-wrap: wrap;*/
/* gap: 30px;*/
/*}*/
/*.footer-col {*/
/* min-width: 160px;*/
/*}*/
/*.footer-col h4 {*/
/* font-size: 15px;*/
/* font-weight: 700;*/
/* color: #075fb8;*/
/* margin-bottom: 15px;*/
/* text-transform: uppercase;*/
/* letter-spacing: 0.5px;*/
/*}*/
/*.footer-col a {*/
/* display: block;*/
/* font-size: 13px;*/
/* color: #075fb8;*/
/* text-decoration: none;*/
/* margin-bottom: 8px;*/
/* transition: all 0.3s ease;*/
/*}*/
/*.footer-col a:hover {*/
/* color: #fec913;*/
/* transform: translateX(4px);*/
/*}*/
/*.social-media {*/
/* display: flex;*/
/* gap: 12px;*/
/*}*/
/* Default circular social icons (only for FB, Insta, YT) */
/*.social-media a:not(.location-btn) {*/
/* display: inline-flex;*/
/* align-items: center;*/
/* justify-content: center;*/
/* width: 42px;*/
/* height: 42px;*/
/* background: #075fb8;*/
/* color: #fff;*/
/*border-radius: 50%; /* circle only */
/* font-size: 18px;*/
/* text-decoration: none;*/
/* transition: all 0.3s ease;*/
/*}*/
/*.social-media a:not(.location-btn):hover {*/
/* background: #fec913;*/
/* color: #075fb8;*/
/*}*/
/* Location button (pure rectangle, no circle styles) */
/*.location-btn {*/
/* display: inline-flex;*/
/* align-items: center;*/
/* gap: 8px;*/
/* background: #075fb8;*/
/* color: #fff;*/
/* font-size: 14px;*/
/* text-decoration: none;*/
/* padding: 0 15px;*/
/* height: 42px;*/
/*border-radius: 30px;*/ /* PURE rectangle */
/* transition: all 0.3s ease;*/
/*}*/
/*.location-btn:hover {*/
/* background: #fec913;*/
/* color: #075fb8;*/
/*}*/
/* Copyright */
/*.copyright-bar {*/
/* text-align: center;*/
/* font-size: 13px;*/
/* color: #f1f1f1;*/
/* background: #05396c;*/
/* padding: 14px 0;*/
/* border-top: 1px solid rgba(255, 255, 255, 0.1);*/
/*}*/
.white-logo {
filter: brightness(0) invert(1);
}
.school-footer {
background: linear-gradient(135deg, #064a8c, #075fb8);
padding: 60px 5% 40px;
font-family: 'Poppins', sans-serif;
color: #fff;
position: relative;
z-index: 1;
}
.footer-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 40px;
}
/* Logo + Info */
.footer-logo {
flex: 1;
min-width: 300px;
}
.footer-logo img {
width: 70px;
margin-bottom: 15px;
}
.footer-logo h2 {
font-size: 25px;
font-weight: 700;
margin: 0 0 5px;
}
.footer-logo p {
font-size: 15px;
margin: 3px 0;
color: #e2e2e2;
line-height: 1.6;
font-weight:700;
}
.footer-contact p {
font-size: 14px;
margin: 6px 0;
color: #f1f1f1;
font-weight:700;
}
/* Footer Links */
.footer-links {
display: flex;
flex: 3;
justify-content: space-between;
flex-wrap: wrap;
gap: 30px;
}
.footer-col {
min-width: 130px;
}
.footer-col h4 {
font-size: 22px;
font-weight: 700;
color: #fec913;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.footer-col a {
display: block;
font-size: 20px;
color: #d9e6f5;
text-decoration: none;
margin-bottom: 8px;
transition: all 0.3s ease;
font-weight: 700;
}
.footer-col a:hover {
color: #fec913;
transform: translateX(4px);
}
.social-media {
display: flex;
gap: 12px;
}
/* Default circular social icons (only for FB, Insta, YT) */
.social-media a:not(.location-btn) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
background: #075fb8;
color: #fff;
border-radius: 50%; /* circle only */
font-size: 18px;
text-decoration: none;
transition: all 0.3s ease;
}
.social-media a:not(.location-btn):hover {
background: #fec913;
color: #075fb8;
}
/* Location button (pure rectangle, no circle styles) */
.location-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #075fb8;
color: #fff;
font-size: 14px;
text-decoration: none;
padding: 0 15px;
height: 42px;
border-radius: 30px; /* PURE rectangle */
transition: all 0.3s ease;
}
.location-btn:hover {
background: #fec913;
color: #075fb8;
}
/* Copyright */
.copyright-bar {
text-align: center;
font-size: 13px;
color: #f1f1f1;
background: #05396c;
padding: 14px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* ------------------------------- */
.footer-col.services {
text-align: center;
}
.footer-col.services h4 {
text-align: left;
margin-left: 105px;
font-size: 22px;
font-weight: 700;
margin-bottom: 20px;
}
.services-wrapper {
display: flex;
justify-content: center;
gap: 40px;
text-align: left;
}
.service-col a {
display: block;
font-size: 20px;
color: #d9e6f5;
text-decoration: none;
margin-bottom: 8px;
transition: all 0.3s ease;
font-weight: 700; /* bold links */
}
.service-col a:hover {
color: #fec913;
transform: translateX(4px);
}
/*------------------------------------------------ end footer section -------------------------------------------------*/
.button-container {
position: relative;
width: 100%;
display: flex;
justify-content: center;
margin-top: 20px;
}
.button {
background: #2B2D2F;
height: 50px;
width: 180px;
text-align: center;
cursor: pointer;
border-radius: 8px;
position: relative;
}
.button:hover{
background: #fff;
color: #0B1C2C;
}
.text {
font: bold 1rem/1 poppins;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.progress-bar {
position: absolute;
height: 10px;
width: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 200px;
background: #0960ae;
}
svg {
width: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.check {
fill: none;
stroke: #1D1F20;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
}
/*------------------------------------------------ CSR section -------------------------------------------------*/
.img-fluid {
max-width: 100%;
height: 600px !important; /* override Bootstrap's height:auto */
object-fit: cover; /* keeps image proportions nicely */
}
/* ---------------------------
Base Styles (Desktop First)
---------------------------- */
.csr-section-unique {
padding: 80px 0;
background: linear-gradient(135deg, #f9f9ff, #eef4ff);
position: relative;
/*overflow-x: hidden; prevent scroll inside section */
}
.csr-section-unique .row {
margin-left: 0; /* remove Bootstrap row negative margins */
margin-right: 0;
}
.csr-title-unique {
font-size: 50px;
font-weight: 700;
color: #222;
margin-bottom: 20px;
}
.csr-title-unique span {
color: #075fb8;
}
.csr-text-unique {
font-size: 1.1rem;
color: #555;
margin-bottom: 15px;
line-height: 1.7;
font-family: "Poppins", sans-serif;
}
.csr-info-box-unique {
background: #fff;
border-left: 5px solid #007bff;
padding: 20px;
margin-top: 20px;
border-radius: 10px;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
}
.csr-btns-unique .btn-csr-unique {
display: inline-block;
padding: 12px 28px;
background: #007bff;
color: #fff;
border-radius: 30px;
font-weight: 600;
text-decoration: none;
transition: 0.3s;
}
.csr-btns-unique .btn-csr-unique:hover {
background: #0056b3;
}
.csr-btns-unique .btn-csr-outline-unique {
display: inline-block;
padding: 12px 28px;
border: 2px solid #007bff;
color: #007bff;
border-radius: 30px;
font-weight: 600;
margin-left: 15px;
text-decoration: none;
transition: 0.3s;
}
.csr-btns-unique .btn-csr-outline-unique:hover {
background: #007bff;
color: #fff;
}
/* ✅ responsive image fix */
.csr-image-unique {
max-width: 100%;
width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
margin: 0 auto;
}
/* ---------------------------
Responsive Breakpoints
---------------------------- */
/* Large Tablets / Small Laptops */
@media (max-width: 1200px) {
.csr-title-unique {
font-size: 42px;
}
.csr-text-unique {
font-size: 1rem;
}
.csr-image-unique {
max-width: 350px;
}
}
/* Tablets */
@media (max-width: 992px) {
.csr-section-unique {
padding: 60px 20px;
}
.csr-title-unique {
font-size: 36px;
text-align: center;
}
.csr-text-unique {
text-align: center;
font-size: 1rem;
}
.csr-info-box-unique {
text-align: center;
}
.csr-btns-unique {
text-align: center;
}
.csr-image-unique {
max-width: 320px;
margin-top: 30px;
}
}
/* Large Mobiles */
@media (max-width: 768px) {
.csr-title-unique {
font-size: 30px;
}
.csr-text-unique {
font-size: 0.95rem;
line-height: 1.6;
}
.csr-btns-unique .btn-csr-unique,
.csr-btns-unique .btn-csr-outline-unique {
display: block; /* keeps them stacked vertically */
width: 50%; /* half the container width */
margin: 10px auto; /* vertical spacing + horizontal centering */
text-align: center; /* centers text inside the button */
}
.csr-image-unique {
max-width: 280px;
}
}
/* Small Mobiles */
@media (max-width: 576px) {
.csr-section-unique {
padding: 50px 15px;
}
.csr-title-unique {
font-size: 26px;
}
.csr-text-unique {
font-size: 0.9rem;
}
.csr-info-box-unique {
padding: 15px;
font-size: 0.9rem;
}
.csr-image-unique {
max-width: 240px;
}
}
/* Extra Small Mobiles (320px and below) */
@media (max-width: 360px) {
.csr-section-unique {
padding: 40px 10px;
}
.csr-title-unique {
font-size: 22px;
}
.csr-text-unique {
font-size: 0.85rem;
}
.csr-btns-unique .btn-csr-unique,
.csr-btns-unique .btn-csr-outline-unique {
font-size: 0.85rem;
padding: 10px 18px;
}
.csr-image-unique {
max-width: 200px;
}
}
/* ===================*/
/* ============= Modern Premium Card Styles ============= */
/* ===== Grand Background for the section ===== */
:root {
--primary: #075fb8;
--primary-light: #4a88d0;
--primary-dark: #054a92;
--accent: #ff8c3a;
--light: #f8f9ff;
--dark: #0f172a;
--gradient-primary: linear-gradient(135deg, #075fb8 0%, #4a88d0 100%);
--gradient-accent: linear-gradient(135deg, #ff8c3a 0%, #ffb74d 100%);
--card-radius: 20px;
--shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
--shadow-md: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.15);
--orangew: #FF6B00;
}
body {
background-color: #fafbff;
/*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
font-family: 'Poppins', sans-serif;
}
/* ==================== Therapy Cards ===================== */
.mschool-cards {
background: radial-gradient(circle at top left, rgba(232, 240, 255, 0.7), rgba(247, 249, 252, 0.7) 60%);
padding: 6rem 0;
position: relative;
overflow: hidden;
}
.mschool-cards::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: var(--gradient-accent);
opacity: 0.05;
border-radius: 50%;
z-index: 0;
}
.mschool-cards::after {
content: "";
position: absolute;
bottom: -150px;
left: -150px;
width: 400px;
height: 400px;
background: var(--gradient-primary);
opacity: 0.05;
border-radius: 50%;
z-index: 0;
}
/* Section Heading */
.mschool-section-heading {
font-size: 2.8rem;
font-weight: 800;
color: var(--dark);
letter-spacing: 1px;
margin-bottom: 3rem;
position: relative;
padding-bottom: 15px;
text-align: center;
}
.mschool-section-heading::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--primary);
border-radius: 2px;
}
/* ===== Card Container ===== */
.mschool-card {
border: none;
border-radius: var(--card-radius);
background: #fff;
transition: all 0.4s ease;
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
z-index: 1;
display: flex;
flex-direction: column;
height: 100%;
}
/* Top stripe effect */
.mschool-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: var(--primary);
transition: height 0.5s ease, opacity 0.5s ease;
z-index: 2;
}
/* Hover card effect */
.mschool-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-md);
}
.mschool-card:hover::before {
height: 100%;
opacity: 0.05;
}
/* ===== Card Icon ===== */
.mschool-card-icon {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
border-radius: 18px;
background: var(--gradient-primary);
color: white;
font-size: 28px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: all 0.4s ease;
}
.mschool-card:hover .mschool-card-icon {
transform: scale(1.15) rotate(5deg);
background: var(--orangew);
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
/* Card Content */
.mschool-card-body {
padding: 2.5rem 2rem;
background: transparent;
position: relative;
z-index: 3;
flex-grow: 1;
}
.mschool-card-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--dark);
margin-bottom: 1rem;
text-align: center;
}
.mschool-card-text {
font-size: 17px;
color: #64748b;
line-height: 1.7;
text-align: center;
margin-bottom: 2rem;
font-family: "Poppins", sans-serif;
}
/* Buttons */
.mschool-btn-outline {
display: inline-block;
color: var(--primary);
border: 2px solid var(--primary);
font-weight: 600;
padding: 0.6rem 1.5rem;
border-radius: 50px;
transition: all 0.3s ease;
background: transparent;
font-size: 0.9rem;
position: relative;
overflow: hidden;
z-index: 1;
text-align: center;
}
.mschool-btn-outline::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: var(--primary);
transition: all 0.4s ease;
z-index: -1;
}
.mschool-btn-outline:hover {
color: white !important;
border-color: var(--primary);
}
.mschool-btn-outline:hover::before {
width: 100%;
}
/* Modal Styling */
.mschool-modal .modal-content {
border-radius: var(--card-radius);
border: none;
background: #ffffff;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.mschool-modal .modal-content::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: var(--primary);
}
.mschool-modal .modal-header {
border-bottom: 1px solid #e2e8f0;
padding: 1.5rem 2rem;
}
.mschool-modal .modal-title {
font-size: 1.6rem;
font-weight: 700;
color: var(--dark);
}
.mschool-modal .btn-close {
font-size: 1.2rem;
opacity: 0.7;
transition: all 0.2s ease;
}
.mschool-modal .btn-close:hover {
opacity: 1;
transform: rotate(180deg);
}
.mschool-modal .modal-body {
padding: 2rem;
font-size: 1rem;
color: #4a5568;
line-height: 1.8;
}
.mschool-modal .modal-body::-webkit-scrollbar {
width: 8px;
}
.mschool-modal .modal-body::-webkit-scrollbar-thumb {
background: #cbd5e0;
border-radius: 4px;
}
.mschool-modal .modal-body::-webkit-scrollbar-thumb:hover {
background: #a0aec0;
}
/* Responsive tweaks */
/* Large tablets */
@media (max-width: 992px) {
.mschool-section-heading {
font-size: 2.4rem;
}
.mschool-card-icon {
width: 65px;
height: 65px;
font-size: 26px;
}
}
/* Tablets - Fixed this breakpoint */
@media (max-width: 768px) {
.mschool-cards {
padding: 4rem 1rem;
}
.mschool-card-body {
padding: 1.5rem;
}
.mschool-card-title {
font-size: 1.3rem;
}
.mschool-section-heading {
font-size: 2rem;
}
.mschool-card-icon {
width: 60px;
height: 60px;
font-size: 24px;
}
/* Fix for 2 cards per row on tablets */
.col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
}
/* Mobile */
@media (max-width: 576px) {
.mschool-cards {
padding: 3rem 0.5rem;
}
.mschool-section-heading {
font-size: 1.8rem;
}
.mschool-card-title {
font-size: 1.2rem;
}
.mschool-card-text {
font-size: 0.95rem;
}
.mschool-card-icon {
width: 55px;
height: 55px;
font-size: 22px;
}
.mschool-btn-outline {
font-size: 0.85rem;
padding: 0.45rem 1.1rem;
}
/* Single column on mobile */
.col-md-6 {
flex: 0 0 100%;
max-width: 100%;
}
}
p i {
margin-right: 8px; /* spacing between icon and text */
}