html{
overflow-x: hidden;
scroll-behavior: smooth;
}
body{
margin: 0;
overflow-x: hidden;
background-color: #fff;
font-family: "Plus Jakarta Sans", sans-serif ! important;
}
h1,h2,h3,h4,h5,h6{
font-family: "Plus Jakarta Sans", sans-serif ! important;
/* font-size: 45px !important; */
}
p{
font-weight: normal !important;
font-family: "Plus Jakarta Sans", sans-serif ! important;
}
.activeli {
color: #feeb11 !important;
}
/* width */
::-webkit-scrollbar {
width:3px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 0px #000;
border-radius:0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #000;
border-radius:0px;
}
a{
text-decoration: none;
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
a:hover {
text-decoration: none;
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
button{
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
/* =========================================
GIPS PREMIUM PRELOADER
========================================= */
.gips-preloader {
position: fixed;
inset: 0;
z-index: 999999;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(
circle at center,
#101b2d 0%,
#050b14 45%,
#02050a 100%
);
color: #fff;
transition:
opacity 0.9s cubic-bezier(.77,0,.18,1),
visibility 0.9s;
}
/* EXIT */
.gips-preloader.is-loaded {
/* opacity: 0; */
/* visibility: hidden; */
/* pointer-events: none; */
}
/* =========================================
BACKGROUND GRID
========================================= */
.preloader-grid {
position: absolute;
inset: -50%;
background-image:
linear-gradient(
rgba(255, 196, 71, 0.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 196, 71, 0.025) 1px,
transparent 1px
);
background-size: 55px 55px;
transform: perspective(500px) rotateX(55deg);
transform-origin: center bottom;
animation: gridMove 15s linear infinite;
}
@keyframes gridMove {
from {
transform:
perspective(500px)
rotateX(55deg)
translateY(0);
}
to {
transform:
perspective(500px)
rotateX(55deg)
translateY(55px);
}
}
/* =========================================
GLOW
========================================= */
.preloader-glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(90px);
}
.glow-1 {
width: 350px;
height: 350px;
background: rgba(255, 174, 38, .12);
top: 15%;
left: 20%;
animation: glowFloat 6s ease-in-out infinite alternate;
}
.glow-2 {
width: 300px;
height: 300px;
background: rgba(0, 104, 255, .08);
bottom: 10%;
right: 20%;
animation: glowFloat 8s ease-in-out infinite alternate-reverse;
}
@keyframes glowFloat {
from {
transform: translate(0, 0) scale(1);
}
to {
transform: translate(50px, -30px) scale(1.2);
}
}
/* =========================================
CONTENT
========================================= */
.preloader-content {
position: relative;
z-index: 10;
width: min(90vw, 650px);
display: flex;
flex-direction: column;
align-items: center;
}
/* =========================================
LOGO STAGE
========================================= */
.logo-stage {position: relative;width: 300px;/* height: 300px; */display: flex;align-items: center;justify-content: center;margin-bottom: 35px;}
/* LOGO */
.logo-holder {
position: relative;
width: 205px;
height: 205px;
display: flex;
align-items: center;
justify-content: center;
animation:
logoReveal 1.4s cubic-bezier(.16,1,.3,1) both,
logoFloat 4s ease-in-out 1.4s infinite;
}
.gips-logo {
position: relative;
z-index: 3;
width: 190px;
/* height: 100%; */
/* object-fit: contain; */
filter:
drop-shadow(0 0 12px rgba(255,190,55,.25))
drop-shadow(0 20px 35px rgba(0,0,0,.6));
}
/* LOGO GLOW */
.logo-glow {
position: absolute;
width: 75%;
height: 75%;
border-radius: 50%;
background: rgba(255, 193, 58, .25);
filter: blur(35px);
animation: logoGlow 2.5s ease-in-out infinite alternate;
}
@keyframes logoGlow {
from {
opacity: .35;
transform: scale(.85);
}
to {
opacity: .75;
transform: scale(1.15);
}
}
/* =========================================
ORBIT RINGS
========================================= */
.orbit {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(255, 195, 68, .2);
}
.orbit::before {
content: "";
position: absolute;
width: 75px;
height: 3px;
top: -1px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(
90deg,
transparent,
#ffc94f,
transparent
);
box-shadow:
0 0 12px #ffc94f;
}
.orbit-1 {width: 270px;height: 270px;animation: orbitRotate 8s linear infinite;display: none;}
.orbit-2 {
width: 235px;
height: 235px;
border-color: rgba(255,255,255,.08);
animation:
orbitRotateReverse 12s linear infinite;
display: none;
}
@keyframes orbitRotate {
to {
transform: rotate(360deg);
}
}
@keyframes orbitRotateReverse {
to {
transform: rotate(-360deg);
}
}
/* ORBIT DOTS */
.orbit-dot {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ffc84a;
box-shadow:
0 0 10px #ffc84a,
0 0 25px rgba(255,200,74,.7);
display: none;
}
.dot-1 {
top: 22px;
right: 28px;
animation: dotRotate 8s linear infinite;
}
.dot-2 {
bottom: 35px;
left: 30px;
width: 5px;
height: 5px;
opacity: .7;
animation:
dotRotateReverse 12s linear infinite;
}
@keyframes dotRotate {
to {
transform: rotate(360deg);
}
}
@keyframes dotRotateReverse {
to {
transform: rotate(-360deg);
}
}
/* =========================================
LOGO REVEAL
=========================================
@keyframes logoReveal {
0% {
opacity: 0;
transform:
scale(.45)
rotate(-15deg);
filter:
blur(15px)
brightness(2);
}
70% {
opacity: 1;
transform:
scale(1.08)
rotate(2deg);
filter:
blur(0)
brightness(1.3);
}
100% {
opacity: 1;
transform:
scale(1)
rotate(0);
filter:
blur(0)
brightness(1);
}
}*/
@keyframes logoFloat {
0%,100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
/* =========================================
TEXT
========================================= */
.welcome-text {
text-align: center;
animation:
textReveal 1s .7s both;
}
.welcome-text span {display: block;margin-bottom: 10px;font-size: 15px;letter-spacing: 1px;color: rgba(255,255,255,.65);}
.welcome-text h1 {margin: 0;font-size: clamp(20px, 3vw, 40px);line-height: 41px;font-weight: 600;/* letter-spacing: 4px; */}
.welcome-text strong {
display: block;
margin-top: 5px;
color: #ffffff;
font-weight: 700;
text-shadow: 0 0 20px rgb(4 65 172 / 40%);
}
@keyframes textReveal {
from {
opacity: 0;
transform:
translateY(1px);
filter: blur(2px);
}
to {
opacity: 1;
transform:
translateY(0);
filter: blur(0);
}
}
/* =========================================
DIVIDER
========================================= */
.loader-divider {
width: 260px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin: 22px 0 28px;
animation:
dividerReveal 1s 1s both;
}
.loader-divider span {height: 1px;flex: 1;background: linear-gradient(
90deg,
transparent,
rgb(103 154 245)
);}
.loader-divider span:last-child {background: linear-gradient(
90deg,
rgb(103 154 245),
transparent
);}
.loader-divider i {
color: #4078dc;
font-size: 13px;
font-style: normal;
animation:
starPulse 1.5s ease-in-out infinite;
}
@keyframes starPulse {
0%,100% {
transform: scale(1);
opacity: .5;
}
50% {
transform: scale(1.5);
opacity: 1;
}
}
/* =========================================
LOADING BAR
========================================= */
.loading-area {
display: none;
width: min(360px, 80vw);
animation:
textReveal 1s 1.1s both;
}
.loading-top {display: flex;justify-content: space-between;margin-bottom: 9px;font-size: 11px;letter-spacing: 3px;color: rgba(255,255,255,.5);}
.loading-top strong {color: #ffffff;font-weight: 500;letter-spacing: 1px;}
.loading-track {
position: relative;
height: 3px;
overflow: hidden;
background: rgba(255,255,255,.12);
border-radius: 20px;
}
.loading-progress {
position: relative;
width: 0%;
height: 100%;
background:
linear-gradient(
90deg,
#c98b1b,
#ffe082,
#ffc342
);
border-radius: inherit;
box-shadow:
0 0 10px rgba(255,197,65,.7);
}
.progress-shine {
position: absolute;
inset: 0;
width: 80px;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.9),
transparent
);
animation:
progressShine 1.2s linear infinite;
}
@keyframes progressShine {
from {
transform: translateX(-100px);
}
to {
transform: translateX(450px);
}
}
/* =========================================
PARTICLES
========================================= */
.particles {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.particle {
position: absolute;
width: 2px;
height: 2px;
border-radius: 50%;
background: #ffc94e;
box-shadow:
0 0 7px #ffc94e;
opacity: 0;
animation:
particleFloat linear infinite;
}
@keyframes particleFloat {
0% {
opacity: 0;
transform:
translateY(30px)
scale(.5);
}
20% {
opacity: .7;
}
80% {
opacity: .5;
}
100% {
opacity: 0;
transform:
translateY(-100vh)
scale(1.3);
}
}
/* =========================================
BOTTOM WAVES
========================================= */
.bottom-wave {position: absolute;width: 120%;height: 180px;bottom: -150px;left: -10%;border-radius: 50% 50% 0 0;border-top: 1px solid rgba(255,190,55,.3);transform: rotate(-3deg);display: none;}
.wave-1 {
box-shadow:
0 -5px 30px rgba(255,180,40,.08);
}
.wave-2 {
bottom: -165px;
transform:
rotate(3deg);
border-color:
rgba(255,255,255,.08);
}
/* =========================================
TABLET
========================================= */
@media (max-width: 768px) {
.logo-stage {
width: 250px;
height: 250px;
margin-bottom: 25px;
}
.logo-holder {
width: 170px;
height: 170px;
}
.orbit-1 {
width: 225px;
height: 225px;
}
.orbit-2 {
width: 195px;
height: 195px;
}
.welcome-text span {
font-size: 10px;
letter-spacing: 5px;
}
.welcome-text h1 {
font-size: 21px;
letter-spacing: 2.5px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 480px) {
.preloader-content {
width: 92vw;
}
.logo-stage {
width: 210px;
height: 210px;
margin-bottom: 20px;
}
.logo-holder {
width: 140px;
height: 140px;
}
.orbit-1 {
width: 190px;
height: 190px;
}
.orbit-2 {
width: 165px;
height: 165px;
}
.orbit::before {
width: 50px;
}
.welcome-text span {
font-size: 8px;
letter-spacing: 3.5px;
}
.welcome-text h1 {
font-size: 17px;
letter-spacing: 1.5px;
}
.loader-divider {
width: 190px;
margin: 18px 0 22px;
}
.loading-area {
width: 75vw;
}
}
/* =========================================
REDUCED MOTION
========================================= */
@media (prefers-reduced-motion: reduce) {
.gips-preloader *,
.gips-preloader::before {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* MAIN HERO SECTION */
.hero-section {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
/* BACKGROUND SLIDER WITH ZOOM EFFECT */
.bg-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1);
transition: opacity 1.5s ease-in-out, transform 6s ease-out;
}
.bg-slide.active {
opacity: 1;
transform: scale(1.08);
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(8, 15, 29, 0.75) 0%, rgba(5, 10, 20, 0.85) 100%);
z-index: 2;
}
/* HEADER / NAVBAR */
.site-header {
position: relative;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
/* padding: 24px 60px; */
/* max-width: 1440px; */
/* margin: 0 auto; */
/* width: 100%; */
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
padding-top: 24px;
}
.logo-container {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
color: #ffffff;
}
.logo-emblem {
width: 60px;
height: 60px;
flex-shrink: 0;
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-title {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 800;
line-height: 1.1;
letter-spacing: 0.5px;
}
.logo-subtitle {
font-size: 10px;
color: #9ca3af;
margin-top: 4px;
font-weight: 500;
}
/* Desktop Navigation */
.nav-menu-desktop {
display: flex;
align-items: center;
gap: 39px;
list-style: none;
}
.nav-link {
color: #e5e7eb;
text-decoration: none;
font-size: 15px;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-link:hover, .nav-link.active {
color: #feeb11 !important;
}
/* CREATIVE NEWS TRIGGER BUTTON (TOGGLE) */
.news-menu-trigger {
/* display: flex; */
align-items: center;
gap: 10px;
background: rgb(255 255 255 / 0%);
/* border: 1px solid rgba(255, 255, 255, 0.2); */
/* padding: 8px 16px; */
/* border-radius: 30px; */
/* color: #ffffff; */
cursor: pointer;
/* backdrop-filter: blur(8px); */
transition: all 0.3s ease;
outline: none;
border: none;
width: 35px;
margin-top: 5px;
}
.news-menu-trigger:hover {
/* background: #0b57d0; */
/* border-color: #0b57d0; */
transform: translateY(-2px);
}
.trigger-text {
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.news-badge-dot {
width: 100%;
height: 1px;
background-color: #ffffff;
border-radius: 0px;
animation: pulseDot 1.5s infinite;
float: left;
}
/* FULLSCREEN CREATIVE NEWS / EDITORIAL MENU OVERLAY */
.news-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #080d16;
z-index: 999;
display: flex;
flex-direction: column;
justify-content: space-between;
/* padding: 40px 60px; */
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s ease;
transform: translateY(-20px);
}
.news-menu-overlay.active {
opacity: 1;
pointer-events: all;
transform: translateY(0);
}
/* Menu Top Bar Header */
.news-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
/* border-bottom: 2px solid rgba(255, 255, 255, 0.1); */
padding-bottom: 20px;
padding: 25px;
padding-top: 10px;
padding-bottom: 10px;
}
.editorial-tag {
/* font-family: 'Playfair Display', serif; */
/* font-style: italic; */
color: rgb(255 255 255 / 75%);
font-size: 15px;
/* padding-left: 30px; */
text-transform: uppercase;
}
.news-close-btn {
background: none;
border: none;
color: #ffffff;
font-size: 28px;
cursor: pointer;
transition: transform 0.3s ease;
}
.news-close-btn:hover {
transform: rotate(90deg);
color: #ef4444;
}
/* Menu Body Grid */
.news-menu-body {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 25px;
align-items: center;
margin: auto 0;
padding-left: 25px;
padding-right: 30px;
margin-top: 0px;
/* width: 50%; */
}
/* Left Column - Navigation Links */
.news-nav-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 17px;
display: grid;
grid-template-columns: repeat(2,1fr);
padding-left: 0px;
}
.news-nav-links li {
overflow: hidden;
}
.news-nav-links a {
/* font-family: 'Montserrat', sans-serif; */
font-size: 55px;
font-weight: 700;
color: rgb(255 255 255);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0px;
display: inline-block;
transition: all 0.3s ease;
position: relative;
background: rgba(255, 255, 255, 0.03);
/* border: 1px solid rgba(255, 255, 255, 0.1); */
/* border-radius: 16px; */
padding: 21px;
width: 100%;
float: left;
padding-top: 7px;
}
.news-nav-links a span{
font-size: 15px;
float: left;
width: 100%;
font-weight: 400;
padding-top: 5px;
}
.news-nav-links a:hover {
color: #ffffff;
transform: translateX(15px);
}
/* Right Column - Editorial News Ticker Widget */
.news-widget-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 5px;
padding: 20px;
}
.widget-category {
background: #0b57d0;
color: #ffffff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
display: inline-block;
margin-bottom: 16px;
}
.widget-headline {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.4;
margin-bottom: 12px;
color: #ffffff;
text-transform: uppercase;
margin-top: 5px;
}
.widget-date {
font-size: 13px;
color: #9ca3af;
display: block;
margin-bottom: 20px;
}
.widget-link {
color: #88a5e4;
text-decoration: none;
font-weight: 600;
font-size: 16px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.widget-link:hover {
text-decoration: underline;
}
/* Menu Footer */
.news-menu-footer {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 20px;
display: flex;
justify-content: space-between;
font-size: 13px;
color: #6b7280;
}
/* HERO CENTER CONTENT */
.hero-content {
position: relative;
z-index: 5;
text-align: center;
max-width: 900px;
margin: auto;
padding: 95px 20px;
padding-top: 160px;
}
.welcome-subtitle {
font-size: 13px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #d1d5db;
margin-bottom: 16px;
display: block;
}
.banner-title-wrapper {
min-height: 140px;
display: flex;
align-items: center;
justify-content: center;
}
.banner-title {
font-family: 'Montserrat', sans-serif;
font-size: 75px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.1;
/* letter-spacing: -1px; */
color: #ffffff;
transition: opacity 0.6s ease, transform 0.6s ease;
margin-top: 5px;
margin-bottom: 5px;
}
.banner-title.fade-out {
opacity: 0;
transform: translateY(-15px);
}
.banner-description {
font-size: 16px;
color: #c3c8d0;
max-width: 563px;
margin: 8px auto 32px auto;
line-height: 27px;
}
.cta-btn {
display: inline-block;
background-color: #0b57d0;
color: #ffffff;
font-size: 15px;
font-weight: 700;
padding: 14px 38px;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(11, 87, 208, 0.3);
}
.cta-btn:hover {
background-color: #0842a0;
transform: translateY(-2px);
}
/* BOTTOM FEATURES SECTION */
.features-container {
position: relative;
z-index: 5;
/* width: 100%; */
border-top: 1px solid rgba(255, 255, 255, 0.1);
/* background: rgba(8, 14, 26, 0.6); */
/* backdrop-filter: blur(10px); */
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
max-width: 1240px;
margin: 0 auto;
}
.feature-card {
position: relative;
padding: 10px 40px;
display: flex;
align-items: center;
gap: 30px;
cursor: pointer;
text-decoration: none;
color: inherit;
transition: background-color 0.3s ease;
padding-left: 0px;
padding-bottom: 45px;
padding-top: 30px;
}
.card-top-line {
position: absolute;
top: -1px;
left: 0;
width: 20%;
height: 5px;
background-color: #0b57d0;
opacity: 0;
transition: opacity 0.3s ease;
}
.feature-icon {
width: 75px;
/* height: 50px; */
stroke: #ffffff;
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
transition: stroke 0.3s ease;
flex-shrink: 0;
}
.feature-text-content {
display: flex;
flex-direction: column;
}
.feature-title {
font-size: 23px;
font-weight: 600;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 6px;
transition: color 0.3s ease;
margin-top: 6px;
}
.feature-desc {
font-size: 15px;
color: #9ca3af;
margin-bottom: 10px;
margin-top: 3px;
line-height: 23px;
margin-bottom: 17px;
}
.card-bottom-line {
width: 55px;
height: 6px;
background-color: #ffffff;
transition: background-color 0.3s ease;
}
/* Mouse Hover States for Feature Boxes */
.feature-card:hover .card-top-line {
opacity: 1;
}
.feature-card:hover .feature-icon {
-webkit-filter: none;
filter: none;
}
.feature-card:hover .feature-title {
color: #0b57d0;
}
.feature-card:hover .card-bottom-line {
background-color: #0b57d0;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.3); }
}
/* RESPONSIVE DESIGN BREAKPOINTS */
@media (max-width: 992px) {
.nav-menu-desktop {
display: none; /* Hide default nav link list on tablets & phones */
}
.news-menu-body {
grid-template-columns: 1fr;
gap: 30px;
}
.news-nav-links a {
font-size: 28px;
}
.news-menu-overlay {
padding: 30px 24px;
}
.features-grid {
grid-template-columns: 1fr;
}
.banner-title {
font-size:50px;
}
}
/* =========================================================
PRINCIPAL MESSAGE
========================================================= */
.principal-message {
position: relative;
width: 100%;
padding: 85px 0 90px;
background: #ffffff;
overflow: hidden;
}
.principal-container {
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
display: grid;
grid-template-columns: 1.08fr 0.92fr;
gap: 70px;
align-items: center;
}
/* =========================================================
LEFT SIDE
========================================================= */
.principal-left {
position: relative;
}
.principal-label {
margin-bottom: 11px;
color: #1552b5;
/* font-family: Arial, sans-serif; */
font-size: 15px;
font-weight: 600;
letter-spacing: 0.7px;
opacity: 0;
transform: translateY(25px);
transition:
opacity .8s ease,
transform .8s cubic-bezier(.16,1,.3,1);
font-family: "Plus Jakarta Sans", sans-serif ! important;
}
/* =========================================================
MAIN HEADING
========================================================= */
.principal-title {
margin: 0 0 25px;
color: #080b13;
/* font-family: Arial, Helvetica, sans-serif; */
font-size: clamp(48px, 4.1vw, 55px);
line-height: 61px;
font-weight: 700;
/* letter-spacing: -3.8px; */
opacity: 0;
transform: translateY(45px);
transition:
opacity 1s ease .12s,
transform 1s cubic-bezier(.16,1,.3,1) .12s;
}
/* =========================================================
DESCRIPTION
========================================================= */
.principal-description {
max-width: 600px;
color: #565b66;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.9;
opacity: 0;
transform: translateY(35px);
transition:
opacity .9s ease .25s,
transform .9s cubic-bezier(.16,1,.3,1) .25s;
}
.principal-description p {
margin: 0 0 25px;
font-size: 15px;
line-height: 27px;
color: black;
}
.principal-description a {
display: inline-block;
margin-left: 6px;
color: #2862c0;
text-decoration: underline;
text-underline-offset: 3px;
transition: color .3s ease;
}
.principal-description a:hover {
color: #0a3d91;
}
/* =========================================================
PRINCIPAL INFORMATION
========================================================= */
.principal-info {
display: flex;
align-items: center;
gap: 22px;
margin-top: 30px;
opacity: 0;
transform: translateY(35px);
transition:
opacity .9s ease .4s,
transform .9s cubic-bezier(.16,1,.3,1) .4s;
}
/* PHOTO */
.principal-photo-wrap {
width: 113px;
height: 113px;
flex: 0 0 113px;
overflow: hidden;
border-radius: 17px;
background: #f2f3f6;
}
.principal-photo {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform .7s cubic-bezier(.16,1,.3,1);
}
.principal-photo-wrap:hover .principal-photo {
transform: scale(1.07);
}
/* =========================================================
SIGNATURE
========================================================= */
.principal-signature {
display: flex;
flex-direction: column;
justify-content: center;
}
.principal-signature img {
width: 135px;
height: auto;
display: block;
margin-bottom: 14px;
object-fit: contain;
filter: contrast(1.15);
transform-origin: left center;
opacity: 0;
transform: scaleX(0);
transition:
opacity .8s ease .8s,
transform 1s cubic-bezier(.16,1,.3,1) .8s;
}
.principal-name {
/* display: flex; */
/* align-items: center; */
gap: 4px;
/* font-family: Arial, Helvetica, sans-serif; */
font-size: 18px;
color: #70747d;
margin-top: 54px;
}
.principal-name strong {
color: #11131a;
font-weight: 600;
float: left;
width: 100%;
font-size: 23px;
margin-bottom: 2px;
}
.principal-name span {
font-weight: 400;
font-size: 18px;
letter-spacing: 0px;
}
/* =========================================================
RIGHT CARD
========================================================= */
.principal-right {
position: relative;
}
.message-card {
position: relative;
/* min-height: 470px; */
padding: 48px 50px 75px;
background: #f2f5fa;
border-radius: 26px;
display: flex;
flex-direction: column;
justify-content: flex-start;
box-shadow:
0 15px 45px rgba(20, 42, 75, 0.04);
opacity: 0;
transform:
translateX(70px)
scale(.96);
transition:
opacity 1s ease .2s,
transform 1.1s cubic-bezier(.16,1,.3,1) .2s;
}
/* subtle animated glow */
.message-card::before {
content: "";
position: absolute;
width: 180px;
height: 180px;
right: -80px;
top: -80px;
border-radius: 50%;
background: rgba(255,255,255,.5);
pointer-events: none;
animation: cardGlow 5s ease-in-out infinite;
}
@keyframes cardGlow {
0%,
100% {
transform: scale(1);
opacity: .4;
}
50% {
transform: scale(1.25);
opacity: .7;
}
}
/* =========================================================
CARD TEXT
========================================================= */
.card-content {
position: relative;
z-index: 1;
}
.card-content p {
margin: 0;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 30px;
/* font-size: 15px; */
/* line-height: 27px; */
/* color: black; */
}
/* =========================================================
VIEW MORE BUTTON
========================================================= */
.view-more-btn {
position: absolute;
left: 66px;
bottom: -23px;
z-index: 3;
min-width: 110px;
height: 46px;
padding: 0 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #084db2;
color: #ffffff;
text-decoration: none;
/* font-family: Arial, Helvetica, sans-serif; */
font-size: 15px;
font-weight: 600;
/* box-shadow:
0 10px 25px rgba(8, 77, 178, .20); */
overflow: hidden;
transition:
transform .35s ease,
box-shadow .35s ease,
background .35s ease;
}
.view-more-btn::before {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 80%;
height: 100%;
background:
linear-gradient(
110deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transform: skewX(-20deg);
transition: left .6s ease;
}
.view-more-btn:hover::before {
left: 140%;
}
.view-more-btn:hover {
transform: translateY(-4px);
background: #e2362d;
/* box-shadow:
0 15px 30px rgba(8, 77, 178, .28); */
}
/* =========================================================
SCROLL REVEAL ACTIVE STATE
========================================================= */
.principal-message.is-visible .principal-label,
.principal-message.is-visible .principal-title,
.principal-message.is-visible .principal-description,
.principal-message.is-visible .principal-info {
opacity: 1;
transform: translateY(0);
}
.principal-message.is-visible .message-card {
opacity: 1;
transform: translateX(0) scale(1);
}
.principal-message.is-visible .principal-signature img {
opacity: 1;
transform: scaleX(1);
}
/* =========================================================
HEADING WORD EFFECT
========================================================= */
.principal-title {
overflow: hidden;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.principal-message {
padding: 70px 0 80px;
}
.principal-container {
width: min(900px, calc(100% - 50px));
grid-template-columns: 1fr;
gap: 65px;
}
.principal-description {
max-width: 750px;
}
.message-card {
min-height: auto;
padding: 45px 50px 75px;
}
.view-more-btn {
left: 50px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.principal-message {
padding: 55px 0 70px;
}
.principal-container {
width: calc(100% - 36px);
gap: 48px;
}
/* LABEL */
.principal-label {
font-size: 13px;
margin-bottom: 14px;
}
/* HEADING */
.principal-title {
font-size: clamp(39px, 11vw, 52px);
line-height: .93;
/* letter-spacing: -2.6px; */
margin-bottom: 23px;
}
/* DESCRIPTION */
.principal-description {
font-size: 14.5px;
line-height: 1.8;
}
.principal-description p {
margin-bottom: 21px;
}
/* PRINCIPAL INFO */
.principal-info {
gap: 16px;
margin-top: 25px;
}
.principal-photo-wrap {
width: 85px;
height: 85px;
flex-basis: 85px;
border-radius: 14px;
}
.principal-signature img {
width: 125px;
margin-bottom: 5px;
}
.principal-name {
font-size: 14px;
}
/* CARD */
.message-card {
min-height: auto;
padding: 35px 27px 70px;
border-radius: 21px;
}
.card-content p {
font-size: 14.5px;
line-height: 1.85;
}
/* BUTTON */
.view-more-btn {
left: 27px;
bottom: -22px;
min-width: 145px;
height: 44px;
padding: 0 25px;
font-size: 14px;
border-radius: 9px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.principal-container {
width: calc(100% - 28px);
}
.principal-title {
font-size: 37px;
letter-spacing: -2px;
}
.principal-photo-wrap {
width: 75px;
height: 75px;
flex-basis: 75px;
}
.principal-signature img {
width: 110px;
}
.principal-name {
font-size: 13px;
}
.message-card {
padding-left: 23px;
padding-right: 23px;
}
.view-more-btn {
left: 23px;
}
}
/* =========================================================
FACILITIES & HIGHLIGHTS
========================================================= */
.facilities-section {
position: relative;
width: 100%;
padding: 92px 0 100px;
background: #f3f6fb;
overflow: hidden;
}
/* =========================================================
CONTAINER
========================================================= */
.facilities-container {
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
}
/* =========================================================
HEADING
========================================================= */
.facilities-heading {
text-align: center;
margin-bottom: 52px;
opacity: 0;
transform: translateY(35px);
transition:
opacity .8s ease,
transform .8s cubic-bezier(.16, 1, .3, 1);
}
.facilities-label {
display: block;
margin-bottom: 17px;
color: #064bb5;
/* font-family: Arial, Helvetica, sans-serif; */
font-size: 17px;
font-weight: 700;
letter-spacing: -.3px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.7px;
}
.facilities-heading h2 {
margin: 0;
color: #080b13;
text-transform: uppercase;
line-height:70px;
font-size: clamp(45px, 4.1vw, 68px);
font-weight: 700;
/* letter-spacing: -4px; */
}
/* =========================================================
CARDS GRID
========================================================= */
.facilities-grid {
/* display: grid; */
/* grid-template-columns: repeat(3, 1fr); */
gap: 40px;
align-items: stretch;
/* perspective: 1200px; */
}
/* =========================================================
CARD
========================================================= */
.facility-card {
position: relative;
height: 360px;
padding: 23px;
background: #ffffff;
border-radius: 24px;
overflow: hidden;
display: flex;
flex-direction: column;
border-bottom: 9px solid #0648b2;
box-shadow:
0 15px 40px rgba(17, 42, 80, .035);
opacity: 0;
transform:
translateY(60px)
rotateX(5deg);
transition:
background-color .55s cubic-bezier(.16, 1, .3, 1),
color .4s ease,
transform .65s cubic-bezier(.16, 1, .3, 1),
box-shadow .55s ease,
border-color .45s ease;
}
/* =========================================================
CARD ACTIVE / HOVER
========================================================= */
.facility-card.active,
.facility-card:hover {background: #0848b2;color: #ffffff;transform:
translateY(-8px)
scale(1.015);border-color: #0848b2;/* box-shadow:
0 25px 55px rgba(8, 72, 178, .20); */}
/* =========================================================
CARD NUMBER
========================================================= */
.facility-number {
position: relative;
z-index: 3;
display: block;
/* font-family: Arial, Helvetica, sans-serif; */
font-size: 15px;
font-weight: 600;
line-height: 1;
color: #101217;
transition:
color .35s ease,
transform .4s ease;
padding-left: 20px;
padding-top: 16px;
}
.facility-card.active .facility-number,
.facility-card:hover .facility-number {
color: #ffffff;
}
/* =========================================================
CARD CONTENT
========================================================= */
.facility-content {
position: absolute;
left: 39px;
right: 40px;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: flex-start;
transition:
transform .55s cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
ICON
========================================================= */
.facility-icon {
width: 80px;
height: 80px;
margin-bottom: 25px;
border-radius: 50%;
background: #064bb5;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transform:
scale(1)
translateY(0);
transition:
opacity .3s ease,
transform .45s cubic-bezier(.16, 1, .3, 1),
margin .45s ease;
}
.facility-icon img {
width: 38px;
height: 38px;
object-fit: contain;
display: block;
}
/* =========================================================
HIDE ICON WHEN ACTIVE
========================================================= */
.facility-card.active .facility-icon,
.facility-card:hover .facility-icon {
opacity: 0;
transform:
scale(.55)
translateY(15px);
margin-bottom: 0;
height: 0;
}
/* =========================================================
TITLE
========================================================= */
.facility-card h3 {
margin: 0;
color: #292929;
text-transform:uppercase;
font-size: 24px;
font-weight: 700;
line-height: 31px;
/* letter-spacing: -1.8px; */
transition:
color .35s ease,
transform .5s cubic-bezier(.16, 1, .3, 1);
}
.facility-card.active h3,
.facility-card:hover h3 {
color: #ffffff;
transform: translateY(-3px);
}
/* =========================================================
DESCRIPTION
========================================================= */
.facility-card p {
max-width: 440px;
margin: 10px 0 0;
color: rgba(255,255,255,.90);
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 25px;
opacity: 0;
max-height: 0;
overflow: hidden;
transform: translateY(20px);
transition:
opacity .45s ease .08s,
max-height .55s ease,
transform .55s cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
SHOW DESCRIPTION
========================================================= */
.facility-card.active p,
.facility-card:hover p {
opacity: 1;
max-height: 180px;
transform: translateY(0);
}
/* =========================================================
ACTIVE CARD CONTENT POSITION
========================================================= */
.facility-card.active .facility-content,
.facility-card:hover .facility-content {
transform: translateY(0);
}
/* =========================================================
DECORATIVE LIGHT
========================================================= */
.facility-card::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
right: -100px;
display: none;
top: -100px;
border-radius: 50%;
background: rgba(255,255,255,.08);
opacity: 0;
transform: scale(.5);
transition:
opacity .6s ease,
transform .7s cubic-bezier(.16, 1, .3, 1);
}
.facility-card.active::after,
.facility-card:hover::after {
opacity: 1;
transform: scale(1.3);
}
/* =========================================================
BUTTON AREA
========================================================= */
.facilities-button-wrap {
display: flex;
justify-content: center;
margin-top: 68px;
opacity: 0;
transform: translateY(30px);
transition:
opacity .8s ease .4s,
transform .8s cubic-bezier(.16, 1, .3, 1) .4s;
float: left;
width: 100%;
}
/* =========================================================
BUTTON
========================================================= */
.facilities-button {
position: relative;
min-width: 140px;
height: 54px;
padding: 0 35px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 11px;
background: #0848b2;
color: #ffffff;
text-decoration: none;
/* font-family: Arial, Helvetica, sans-serif; */
font-size: 15px;
font-weight: 600;
overflow: hidden;
/* box-shadow:
0 12px 25px rgba(8,72,178,.18); */
transition:
transform .35s ease,
box-shadow .35s ease,
background .35s ease;
}
.facilities-button span {
position: relative;
z-index: 2;
}
.facilities-button i {
position: absolute;
width: 8px;
height: 8px;
right: 25px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform:
rotate(45deg)
translateX(-8px);
opacity: 0;
transition:
opacity .3s ease,
transform .35s ease;
margin-top: 3px;
}
.facilities-button:hover {
transform: translateY(-5px);
/* box-shadow:
0 18px 35px rgba(8,72,178,.28); */
background: #e2362d;
}
.facilities-button:hover i {
opacity: 1;
transform:
rotate(45deg)
translateX(0);
}
/* =========================================================
BUTTON SHINE
========================================================= */
.facilities-button::before {
content: "";
position: absolute;
left: -120%;
top: 0;
width: 80%;
height: 100%;
background:
linear-gradient(
110deg,
transparent,
rgba(255,255,255,.28),
transparent
);
transform: skewX(-20deg);
transition: left .65s ease;
}
.facilities-button:hover::before {
left: 140%;
}
/* =========================================================
SCROLL REVEAL
========================================================= */
.facilities-section.is-visible .facilities-heading {
opacity: 1;
transform: translateY(0);
}
.facilities-section.is-visible .facility-card {
opacity: 1;
transform:
translateY(0)
rotateX(0);
}
/* STAGGER */
.facilities-section.is-visible .facility-card:nth-child(1) {
transition-delay: .15s;
}
.facilities-section.is-visible .facility-card:nth-child(2) {
transition-delay: .28s;
}
.facilities-section.is-visible .facility-card:nth-child(3) {
transition-delay: .41s;
}
.facilities-section.is-visible .facilities-button-wrap {
opacity: 1;
transform: translateY(0);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.facilities-section {
padding: 75px 0 85px;
}
.facilities-container {
width: calc(100% - 45px);
}
.facilities-grid {
gap: 22px;
}
.facility-card {
height: 430px;
padding: 35px;
}
.facility-content {
left: 35px;
right: 35px;
bottom: 38px;
}
.facility-icon {
width: 75px;
height: 75px;
margin-bottom: 28px;
}
.facility-icon img {
width: 37px;
height: 37px;
}
.facility-card h3 {
font-size: 20px !important;
line-height: 28px;
}
.facility-card p {
font-size: 16px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.facilities-section {
padding: 60px 0 70px;
}
.facilities-container {
width: calc(100% - 32px);
}
/* HEADING */
.facilities-heading {
margin-bottom: 35px;
}
.facilities-label {
font-size: 14px;
margin-bottom: 13px;
}
.facilities-heading h2 {
font-size: clamp(35px, 10vw, 48px);
line-height: .98;
/* letter-spacing: -2.5px; */
}
/* GRID */
.facilities-grid {
grid-template-columns: 1fr;
gap: 18px;
}
/* CARD */
.facility-card {
height: 360px;
padding: 28px;
border-radius: 20px;
border-bottom-width: 7px;
transform:
translateY(40px);
}
/* CONTENT */
.facility-content {
left: 28px;
right: 28px;
bottom: 32px;
}
/* NUMBER */
.facility-number {
font-size: 16px;
}
/* ICON */
.facility-icon {
width: 70px;
height: 70px;
margin-bottom: 25px;
}
.facility-icon img {
width: 35px;
height: 35px;
}
/* TITLE */
.facility-card h3 {
font-size: 26px;
letter-spacing: -1.2px;
}
/* DESCRIPTION */
.facility-card p {
font-size: 14px;
line-height: 1.7;
margin-top: 18px;
}
/* ACTIVE */
.facility-card.active,
.facility-card:hover {
transform: translateY(-3px);
}
/* BUTTON */
.facilities-button-wrap {
margin-top: 48px;
}
.facilities-button {
min-width: 205px;
height: 50px;
font-size: 15px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.facility-card {
height: 340px;
}
.facility-card h3 {
font-size: 24px;
}
.facility-card p {
font-size: 13.5px;
}
}
.owl-highlights{
float:left;
width:100%;
}
/* Main Container Section */
.affiliation-section {
/* max-width: 1200px; */
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
/* padding: 20px; */
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
padding-top: 50px;
padding: 92px 0 100px;
}
/* LEFT SIDE CONTENT */
.content-left {
display: flex;
flex-direction: column;
gap: 24px;
animation: fadeInUp 0.8s ease-out forwards;
}
.sub-heading {
color: #1552b5;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.7px;
text-transform: uppercase;
}
.main-heading-news {
/* font-size: 44px; */
font-weight: 700;
color: #111827;
line-height: 1.15;
/* letter-spacing: -0.5px; */
text-transform: uppercase;
font-size: clamp(45px, 4.1vw, 50px);
margin-top: 0px;
margin-bottom: 0px;
font-size: clamp(45px, 4.1vw, 68px);
font-weight: 700;
line-height: 62px;
margin-bottom: 8px;
margin-top: 10px;
}
.main-heading-of {
/* font-size: 44px; */
font-weight: 700;
color: #111827;
line-height: 1.15;
/* letter-spacing: -0.5px; */
text-transform: uppercase;
font-size: clamp(45px, 4.1vw, 50px);
margin-top: 0px;
margin-bottom: 0px;
font-weight: 700;
line-height: 62px;
margin-bottom: 8px;
margin-top: 10px;
}
.description {
color: #4b5563;
font-size: 15px;
line-height: 29px;
margin-bottom: 0px;
margin-top: 0px;
padding-right: 100px;
}
/* Affiliation Badge Box */
.affiliation-badge {
display: inline-flex;
align-items: center;
gap: 23px;
background-color: #f2f5fa;
padding: 24px 45px;
border-radius: 16px;
width: max-content;
max-width: 100%;
margin-top: 8px;
/* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); */
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
border: solid 1px #e3e9f4;
}
.affiliation-badge:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(43, 86, 154, 0.12);
}
/* Verified Badge Icon (SVG Pure CSS Styling) */
.badge-icon {
width: 50px;
height: 50px;
background-color: #0b57d0;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.7l-3.61.81.34 3.68L1 12l2.44 2.79-.34 3.69 3.61.82 1.89 3.2 3.4-1.46 3.4 1.46 1.89-3.2 3.61-.82-.34-3.69L23 12zm-12.91 4.72l-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48-7.33 7.35z'/%3E%3C/svg%3E") center/contain no-repeat;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.7l-3.61.81.34 3.68L1 12l2.44 2.79-.34 3.69 3.61.82 1.89 3.2 3.4-1.46 3.4 1.46 1.89-3.2 3.61-.82-.34-3.69L23 12zm-12.91 4.72l-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48-7.33 7.35z'/%3E%3C/svg%3E") center/contain no-repeat;
flex-shrink: 0;
animation: float 4s ease-in-out infinite;
}
.badge-info {
display: flex;
flex-direction: column;
}
.badge-label {
font-size: 15px;
color: #6b7280;
font-weight: 500;
}
.badge-number {
font-size: 25px;
font-weight: 600;
color: #111827;
/* letter-spacing: 0.5px; */
}
/* RIGHT SIDE CARD CONTAINER */
.card-right {
background-image: url(../images/cbse.webp);
height: 478px;
border: 1px solid rgb(237 242 247 / 51%);
border-radius: 24px;
padding: 40px 24px 0 24px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
transition: transform 0.4s ease, box-shadow 0.4s ease;
animation: fadeInUp 0.8s ease-out 0.2s forwards;
opacity: 0;
background-repeat: no-repeat;
background-size: cover;
}
.card-right:hover {
transform: translateY(-8px);
/* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); */
}
/* CBSE Logo Animation */
.cbse-logo {
width: 150px;
height: auto;
/* margin-bottom: 24px; */
transition: transform 0.5s ease;
}
.card-right:hover .cbse-logo {
transform: scale(1.06);
}
.card-title {
font-family: 'Montserrat', sans-serif;
font-size: 23px;
font-weight: 600;
color: #111827;
line-height: 1.3;
max-width: 320px;
margin-bottom: 12px;
margin-top: 7px;
}
.card-subtitle {
font-size: 15px;
color: #232324;
margin-bottom: 30px;
font-weight: 500;
margin-top: 0px;
}
/* Classroom Image Wrapper with Zoom Animation */
.image-wrapper {
width: calc(100% + 48px); /* Extends full width of card */
margin-bottom: -5px; /* Removes white gap */
overflow: hidden;
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
}
.classroom-img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.card-right:hover .classroom-img {
transform: scale(1.05);
}
/* ANIMATION KEYFRAMES */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
/* RESPONSIVE DESIGN BREAKPOINTS */
@media (max-width: 992px) {
.affiliation-section {
grid-template-columns: 1fr;
gap: 40px;
}
.content-left {
text-align: left;
}
.main-heading {
/* font-size: 36px; */
}
}
@media (max-width: 576px) {
.main-heading {
/* font-size: 28px; */
}
.affiliation-badge {
width: 90%;
padding: 18px 20px;
}
.badge-number {
font-size: 22px;
}
.card-right {
padding: 30px 16px 0 16px;
}
.card-title {
font-size: 18px;
}
}
/* Section Container */
.bg-highlights{
background-color: #033fae;
padding-top:60px;
padding-bottom:60px;
}
.highlights-section {
/* max-width: 1200px; */
/* width: 100%; */
/* margin: 0 auto; */
text-align: center;
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
}
/* Header Styling */
.section-subtitle {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.7px;
text-transform: uppercase;
color: #e2e8f0;
margin-bottom: 12px;
/* font-family: "Plus Jakarta Sans", sans-serif ! important; */
}
.section-title {
font-size: 42px;
font-weight: 800;
text-transform: uppercase;
/* letter-spacing: 1px; */
margin-bottom: 60px;
color: #ffffff;
font-size: clamp(45px, 4.1vw, 68px);
font-weight: 700;
line-height: .95;
margin-top: 25px;
}
/* 6 Card Grid Layout */
.cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
/* Individual Card Style */
.card {
position: relative;
background-color: #2459a8; /* Default box color */
border-radius: 20px;
padding: 60px 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
z-index: 1;
/* Smooth Hover Animation */
transition: background-color 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
/* Fade-in Entrance Effect */
animation: fadeInUp 0.8s ease-out forwards;
}
/* Hover State - Darker Box Color like 2nd box */
.card:hover {
background-color: #00236a; /* Dark blue on hover */
transform: translateY(-8px);
/* box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25); */
}
/* Background Watermark SVG Icons */
.card-bg-icon {
position: absolute;
width: 180px;
height: 180px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.08;
pointer-events: none;
z-index: 0;
transition: transform 0.5s ease, opacity 0.4s ease;
}
/* Slightly enlarge and lighten watermark icon on hover */
.card:hover .card-bg-icon {
opacity: 0.12;
transform: translate(-50%, -50%) scale(1.1);
}
/* Text Inside Cards */
.card-title-new {
font-size: 22px;
font-weight: 600;
text-transform: uppercase;
line-height: 30px;
margin-bottom: 6px;
color: #ffffff;
position: relative;
z-index: 2;
/* margin-top: 0px; */
}
.card-desc {
font-size: 15px;
line-height: 28px;
color: rgb(255 255 255 / 76%);
font-weight: 400;
position: relative;
z-index: 2;
}
/* Keyframes for entrance animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Staggering card animations on load */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.card:nth-child(6) { animation-delay: 0.6s; }
/* RESPONSIVE DESIGN BREAKPOINTS */
@media (max-width: 992px) {
.cards-grid {
grid-template-columns: repeat(2, 1fr); /* 2 Columns on Tablets */
gap: 20px;
}
.section-title {
font-size: 32px;
margin-bottom: 40px;
}
}
@media (max-width: 600px) {
.cards-grid {
grid-template-columns: 1fr; /* 1 Column on Mobile */
}
.section-title {
font-size: 26px;
}
.card {
padding: 40px 20px;
}
}
.crd-img{
position: absolute;
width: 350px;
opacity: .5;
}
.card:hover .crd-img {
opacity: .3;
}
/* Section Container */
.news-section {
/* max-width: 1200px; */
/* width: 100%; */
/* margin: 0 auto; */
/* padding: 0 20px; */
overflow: hidden;
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
padding-top: 60px;
padding-bottom: 60px;
}
/* Top Header Bar */
.news-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 50px;
}
.header-left .sub-heading {
color: #2b569a;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 14px;
display: block;
color: #1552b5;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.7px;
text-transform: uppercase;
}
.header-left .main-heading {
font-family: 'Montserrat', sans-serif;
font-size: 42px;
font-weight: 900;
color: #111827;
text-transform: uppercase;
/* letter-spacing: -0.5px; */
line-height: 1.1;
font-size: clamp(45px, 4.1vw, 68px);
font-weight: 700;
line-height: .95;
}
/* Carousel Navigation Buttons */
.carousel-nav {
display: flex;
gap: 12px;
margin-right: 8px;
}
.nav-btn {
width: 48px;
height: 48px;
border-radius: 12px;
border: none;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
outline: none;
}
/* Inactive / Left Button */
.nav-btn.prev-btn {
background-color: #f3f4f6;
color: #9ca3af;
}
.nav-btn.prev-btn:hover {
background-color: #e5e7eb;
color: #374151;
transform: translateX(-3px);
}
/* Active / Right Button */
.nav-btn.next-btn {
background-color: #0b57d0;
color: #ffffff;
}
.nav-btn.next-btn:hover {
background-color: #0842a0;
transform: translateX(3px);
}
.nav-btn svg {
width: 20px;
height: 20px;
fill: currentColor;
}
/* Carousel Track Window */
.carousel-container {
width: 100%;
overflow: hidden;
}
.carousel-track {
display: flex;
gap: 30px;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
will-change: transform;
}
/* Individual News Card */
.news-card-new {
/* Show 3 cards per row by default with gap accounted for */
flex: 0 0 calc((100% - 60px) / 3);
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: transform 0.4s ease;
/* background: red; */
}
.news-card-new:hover {
/* transform: translateY(-8px); */
}
/* Card Image Styling */
.card-image-wrapper-new {
width: 100%;
height: 240px;
border-radius: 20px;
overflow: hidden;
margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.card-image-wrapper-new img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.news-card-new:hover .card-image-wrapper-new img {
transform: scale(1.08);
}
/* Card Text Content */
.card-date-new {
font-size: 14px;
font-weight: 400;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.card-title-news-new {
font-size: 20px;
font-weight: 600;
color: #1f2937;
line-height: 29px;
margin-bottom: 16px;
transition: color 0.3s ease;
margin-top: 0;
}
.news-card-new:hover .card-title-new {
color: #0b57d0;
}
.read-more-new {
font-size: 15px;
font-weight: 700;
color: #0b57d0;
text-decoration: underline;
text-underline-offset: 4px;
margin-top: auto;
transition: color 0.3s ease;
text-decoration: underline;
}
.news-card-new:hover .read-more-new {
color: #0842a0;
}
/* RESPONSIVE DESIGN BREAKPOINTS */
@media (max-width: 992px) {
.news-card-new {
/* 2 cards per row on Tablet */
flex: 0 0 calc((100% - 30px) / 2);
}
.header-left .main-heading {
font-size: 32px;
}
}
@media (max-width: 600px) {
.news-card-new {
/* 1 card per row on Mobile */
flex: 0 0 100%;
}
.news-header-new {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.header-left .main-heading {
font-size: 26px;
}
}
/* Banner Container */
.admission-banner {
position: relative;
width: 100%;
/* max-width: 1300px; */
/* min-height: 480px; */
/* border-radius: 20px; */
/* overflow: hidden; */
display: flex;
align-items: center;
justify-content: flex-end; /* Aligns text box to the right */
/* Background image with smooth horizontal gradient overlay */
background: url(../images/cta.webp) center left / cover no-repeat
}
/* Right Side Content Container */
.banner-content {
/* max-width: 620px; */
/* padding: 60px 80px 60px 20px; */
text-align: right;
/* display: flex; */
flex-direction: column;
align-items: flex-end;
z-index: 2;
animation: fadeInRight 0.8s ease-out forwards;
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
padding-top: 100px;
padding-bottom: 100px;
}
/* Small Category Header */
.sub-heading-cta {
font-size: 14px;
font-weight: 700;
color: #0b57d0;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 12px;
color: #1552b5;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.7px;
margin-bottom: 13px;
}
/* Bold Main Title */
.main-heading-cta {
font-size: 42px;
font-weight: 900;
color: #111827;
font-size: clamp(48px, 4.1vw, 55px);
line-height: 64px;
font-weight: 700;
letter-spacing: -0.5px;
text-transform: uppercase;
margin-bottom: 20px;
margin-top: 16px;
}
/* Description Paragraph */
.description-cta {
font-size: 15px;
color: #4b5563;
line-height: 1.7;
margin-bottom: 30px;
/* max-width: 500px; */
}
/* Animated "Get Admission" Button */
.cta-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 36px;
background-color: #0441ac;
color: #ffffff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
border-radius: 12px;
border: none;
cursor: pointer;
overflow: hidden;
/* box-shadow: 0 4px 15px rgba(4, 65, 172, 0.25); */
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Button Hover Lift & Glow */
.cta-btn:hover {
background-color: #e2362d;
transform: translateY(-3px);
/* box-shadow: 0 8px 25px rgba(4, 65, 172, 0.4); */
}
/* Shiny Shimmer Effect on Button */
.cta-btn::after {
content: '';
position: absolute;
top: -50%;
left: -60%;
width: 50%;
height: 200%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(30deg);
transition: all 0.6s ease;
}
.cta-btn:hover::after {
left: 130%;
}
/* Keyframe Entrance Animation */
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* RESPONSIVE DESIGN BREAKPOINTS */
@media (max-width: 992px) {
.admission-banner {
min-height: 420px;
}
.banner-content {
padding: 0;
/* max-width: 520px; */
}
.main-heading-cta {
font-size: 40px;
line-height: 52px;
}
}
@media (max-width: 768px) {
.admission-banner {
flex-direction: column;
justify-content: flex-end;
min-height: auto;
/* Vertical gradient for mobile */
background-position: right;
/* opacity: 0.1; */
}
.banner-content {
text-align: center;
align-items: center;
padding: 60px 24px 40px 24px;
max-width: 100%;
}
.main-heading-cta {
/* font-size: 28px; */
}
.description-cta {
/* font-size: 14px; */
}
}
/* Main Footer Container */
.site-footer {
width: 100%;
background-color: #ffffff;
padding-top: 30px;
border-top: 1px solid #eaeaea;
}
.footer-container {
/* max-width: 1240px; */
margin: 0 auto;
/* padding: 0 20px; */
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
}
/* Top Grid Layout */
.footer-top {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1.3fr;
gap: 30px;
padding-bottom: 60px;
position: relative;
}
/* Column Styling */
.footer-col {
padding-right: 20px;
padding-left: 25px;
position: relative;
}
/* Vertical Dividers between Columns */
.footer-col:not(:last-child)::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background-color: #e5e7eb;
}
/* Column 1: Logo Styling */
.logo-col {
display: flex;
align-items: center;
justify-content: center;
}
.footer-logo {
max-width: 200px;
height: auto;
display: block;
}
/* Column Headings */
.col-title {
font-size: 20px;
font-weight: 700;
color: #111827;
margin-bottom: 24px;
}
/* Footer Links & Navigation Lists */
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 15px;
padding-left: 0px;
}
.footer-links a {
text-decoration: none;
color: #57595d;
font-size: 15px;
font-weight: 400;
transition: color 0.3s ease, transform 0.2s ease;
display: inline-block;
}
.footer-links a:hover {
color: #0b57d0;
transform: translateX(4px);
}
/* Contact Details Info */
.contact-info {
display: flex;
flex-direction: column;
gap: 5px;
font-size: 15px;
color: #6b7280;
line-height: 1.6;
}
.contact-info strong {
color: #374151;
font-weight: 700;
}
.contact-info a {
color: #374151;
text-decoration: none;
font-weight: 700;
transition: color 0.3s ease;
}
.contact-info a:hover {
color: #0b57d0;
}
/* Bottom Copyright Bar */
.footer-bottom {
border-top: 1px solid #e5e7eb;
padding: 30px 0;
}
.bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
color: #374151;
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
}
.copyright-text {
color: #343538;
}
.designer-text {
color: #374151;
}
/* RESPONSIVE BREAKPOINTS */
@media (max-width: 992px) {
.footer-top {
grid-template-columns: 1fr 1fr;
gap: 40px 20px;
}
/* Hide vertical dividers on tablet split */
.footer-col:not(:last-child)::after {
display: none;
}
.logo-col {
justify-content: flex-start;
}
}
@media (max-width: 600px) {
.footer-top {
grid-template-columns: 1fr;
gap: 36px;
}
.bottom-content {
flex-direction: column;
gap: 12px;
text-align: center;
}
.col-title {
margin-bottom: 16px;
font-size: 18px;
}
}
.ftr-logo{
width: 190px;
}
.contact-info p{
float:left;
width:100%;
font-size:15px;
line-height:28px;
padding-top: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.ftr-lgp{
padding-left:0px;
}
.main-headers{float:left;
width:100%;
position: absolute;}
.logo-container img{ width: 255px;}
.mt7{margin-top:7px;}
/* =========================================================
PAGE HERO
========================================================= */
.about-hero{
min-height:78vh;
position:relative;
display:flex;
align-items:center;
overflow:hidden;
background: linear-gradient(89deg, rgba(2, 58, 162, 1) 0%, rgb(7 20 41) 100%);
/* background: #023aa2;
background: linear-gradient( 90deg, rgb(0 0 0 / 80%), rgb(0 0 0 / 75%), rgb(0 0 0 / 83%) ), url(../images/about-banner.webp) center/cover no-repeat;
background-size: 100%; */
}
.about-hero::after {
content: "";
position: absolute;
width: 420px;
height: 420px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 50%;
right: -130px;
bottom: -180px;
animation: circleBreath 8s ease-in-out infinite;
will-change: transform, opacity;
}
@keyframes circleBreath {
0%, 100% {
transform: translate(0, 0) scale(1);
opacity: .65;
}
50% {
transform: translate(-15px, -18px) scale(1.035);
opacity: .9;
}
}
.about-hero-content{position:relative;z-index:2;color:#fff;max-width:850px;padding-top: 99px;}
.hero-small-title{letter-spacing: 2px;display:flex;align-items:center;gap:14px;font-size: 12px;letter-spacing: -3px;letter-spacing:3px;text-transform:uppercase;margin-bottom:25px;}
.hero-small-title::before{
content:"";
width:45px;
height:1px;
background:#fff;
}
.about-hero h1{font-family:"Playfair Display",serif;font-size: clamp(55px,8vw,68px);line-height: 70px;font-weight: 600;letter-spacing: -1px;margin-bottom: 20px;text-transform: uppercase;margin-top: 2px;}
.about-hero h1 span{
display:block;
color:var(--cream);
}
.about-hero-description{max-width:620px;font-size: 15px;line-height: 26px;color: rgb(255 255 255 / 82%);}
/* =========================================================
SECTION COMMON
========================================================= */
.about-section{padding: 60px 0;}
.section-label{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;/* letter-spacing:3px; */text-transform:uppercase;color:#777;margin-bottom: 0px;color: #1552b5;font-size: 16px;font-weight: 600;/* letter-spacing: 0.7px; */text-transform: uppercase;}
.section-label::before{content:"";width:38px;height:1px;background:#111;display: none;}
.section-heading{font-family:"Playfair Display",serif;font-size:clamp(42px,5vw,76px);line-height:1;font-weight: 700;/* letter-spacing:-2px; */text-transform: uppercase;font-size: clamp(45px, 4.1vw, 50px);}
.section-heading span{color: #000000;}
.body-copy{font-size: 15px;line-height:1.9;color:#666;line-height: 28px;color: black;}
/* =========================================================
PHILOSOPHY
========================================================= */
.philosophy{
background:var(--light);
}
.philosophy-grid{
display:grid;
grid-template-columns:
1fr 1fr;
gap: 61px;
align-items:center;
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
}
.philosophy-image{position:relative;/* height: 430px; */overflow:hidden;/* background: aliceblue; */border-radius: 20px;}
.philosophy-image img{
width:100%;
/* height:100%; */
/* object-fit:cover; */
transition:
transform 1.2s cubic-bezier(.2,.7,.2,1);
border-radius: 20px;
}
.philosophy-image:hover img{
transform:scale(1.06);
}
.image-number{
position:absolute;
left:30px;
bottom:25px;
color:#fff;
font-size:12px;
letter-spacing:3px;
z-index:2;
}
.image-number::after{
content:"";
display:inline-block;
width:50px;
height:1px;
margin-left:12px;
vertical-align:middle;
background:#fff;
}
.philosophy-content{
max-width:560px;
}
.philosophy-content .section-heading{margin-bottom: 23px;margin-top: 23px;}
.philosophy-content p{margin-bottom: 0;margin-top: 10px;}
.philosophy-highlight{
margin-top:40px;
padding-top:25px;
border-top:1px solid #ccc;
display:grid;
grid-template-columns:100px 1fr;
gap:20px;
}
.philosophy-highlight strong{
font-size:48px;
font-weight:600;
}
.philosophy-highlight span{
color:#777;
font-size:14px;
line-height:1.7;
}
/* =========================================================
KG SYSTEM
========================================================= */
.kg-section{
background:#fff;
}
.kg-grid{
display:grid;
grid-template-columns:
42% 58%;
min-height:650px;
}
.kg-content{
padding:
90px 12% 90px 8%;
background:var(--black);
color:#fff;
display:flex;
flex-direction:column;
justify-content:center;
}
.kg-content .section-label{
color:#aaa;
}
.kg-content .section-label::before{
background:#aaa;
}
.kg-content .section-heading{
color:#fff;
margin-bottom:30px;
}
.kg-content .section-heading span{
color:var(--cream);
}
.kg-content p{
color:#bbb;
line-height:1.9;
margin-bottom:18px;
}
.kg-points{
margin-top:30px;
}
.kg-point{
display:flex;
gap:18px;
padding:18px 0;
border-top:1px solid rgba(255,255,255,.15);
}
.kg-point-number{
font-size:12px;
color:var(--cream);
letter-spacing:2px;
}
.kg-point-text{
font-size:14px;
color:#eee;
}
.kg-image{
overflow:hidden;
position:relative;
}
.kg-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 1.2s ease;
}
.kg-image:hover img{
transform:scale(1.05);
}
/* =========================================================
MOTTO
========================================================= */
.motto-section{position:relative;padding: 80px 0;background: #f3f6fb;overflow:hidden;}
.motto-section::before{content:"“";position:absolute;font-family:"Playfair Display",serif;font-size:400px;line-height:1;color:rgba(255,255,255,.28);left:-30px;top:-80px;display: none;}
.motto-content{
position:relative;
z-index:2;
text-align:center;
max-width:950px;
margin:auto;
}
.motto-content .section-label{
justify-content:center;
}
.motto-content .section-label::before{
display:none;
}
.motto-title{font-family:"Playfair Display",serif;font-size: clamp(45px, 4.1vw, 65px);line-height: 61px;/* letter-spacing:-3px; */text-transform: uppercase;margin: 20px 0;}
.motto-text{max-width:650px;margin:auto;color: #000000;line-height: 32px;font-size: 19px;}
/* =========================================================
AIMS & OBJECTIVES
========================================================= */
.objectives{background: #ffffff;}
.objectives-header{margin-bottom: 40px !important; display:grid;
grid-template-columns:1fr 1fr;gap:70px;
align-items:end; width: min(1160px, calc(100% - 60px));margin: 0 auto;}
.objectives-description{/* max-width:520px; */color: #000;line-height: 27px;font-size: 15px;text-align: right;}
.objectives-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
/* border-top:1px solid #ccc; */
/* border-left:1px solid #ccc; */
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
border-radius: 15px;
gap: 20px;
}
.objective-card{
min-height: 235px;
padding:35px;
/* border-right: 1px solid rgb(204 204 204 / 48%); */
/* border-bottom: 1px solid rgb(204 204 204 / 48%); */
position:relative;
overflow:hidden;
background: #ffffff;
transition:
background .45s ease,
color .45s ease;
border-radius: 10px;
border: 1px solid rgb(204 204 204 / 48%);
}
.objective-number{font-size:11px;letter-spacing:3px;color:#999;transition:color .45s ease;display: none;}
.objective-card h3{font-family:"Playfair Display",serif;font-size: 25px;line-height: 36px;margin-top: 26px;margin-bottom:20px;text-transform: uppercase;}
.objective-card p{color: #000;font-size: 15px;line-height: 24px;max-width:330px;transition:color .45s ease;}
.objective-arrow{
position:absolute;
right:28px;
bottom:28px;
width:42px;
height:42px;
border:1px solid #bbb;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
transition:
transform .4s ease,
background .4s ease,
color .4s ease;
display: none;
}
.objective-card:hover{background: #033fae;color:#fff;}
.objective-card:hover .objective-number{
color:var(--cream);
}
.objective-card:hover p{color: #fff;}
.objective-card:hover .objective-arrow{
background:var(--cream);
color:#111;
border-color:var(--cream);
transform:rotate(45deg);
}
/* =========================================================
MANAGEMENT MESSAGE
========================================================= */
.management-section{background:#fff;width: min(1160px, calc(100% - 60px));margin: 0 auto;}
.management-grid{
display:grid;
grid-template-columns:
1fr 1.15fr;
gap: 60px;
align-items:center;
}
.management-image{
position:relative;
}
.management-image-main{width: 100%;/* height: 500px; */border-radius: 20px;}
.management-image-box{position:absolute;right:0;bottom:30px;width:190px;height:190px;background: #033fae;padding:25px;display:flex;align-items:center;justify-content:center;display: none;text-align:center;border-radius: 25px;}
.management-image-box span{
font-family:"Playfair Display",serif;
font-size:23px;
line-height:1.1;
}
.management-content .section-heading{margin-bottom: 28px;line-height: 60px;margin-top: 15px;}
.management-content p{color: #000;line-height: 28px;margin-bottom:20px;font-size: 15px;}
.management-sign{display:flex;align-items:center;gap:25px;margin-top: 30px;padding-top:25px;border-top:1px solid #ddd;}
.management-sign img{
width:120px;
}
.management-sign strong{display:block;font-size: 22px;color: #0a4199;font-weight: 800;letter-spacing: 1px;}
.management-sign span{display:block;color: #000;font-size: 16px;margin-top: 7px;text-transform: uppercase;}
/* =========================================================
SLOGAN
========================================================= */
.slogan-section{
min-height: 460px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
overflow:hidden;
background: linear-gradient(
rgb(0 85 251 / 99%),
rgb(1 12 21 / 95%)
),
url(images/slogan-bg.webp)
center/cover fixed;
color:#fff;
}
.slogan-section::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 50%;
animation: sloganBreathing 8s ease-in-out infinite;
}
@keyframes sloganBreathing {
0%, 100% {
transform: scale(1);
opacity: .5;
}
50% {
transform: scale(1.06);
opacity: .85;
}
}
.slogan-inner{
position:relative;
z-index:2;
width:min(1100px,90%);
}
.slogan-label{font-size:12px;letter-spacing: 1px;text-transform:uppercase;color:#aaa;color: #ffffff;font-size: 16px;font-weight: 600;}
.slogan-inner h2{font-family:"Playfair Display",serif;font-size:clamp(48px,7vw,100px);line-height: 62px;/* letter-spacing:-3px; */margin:35px 0;text-transform: uppercase;font-size: clamp(45px, 4.1vw, 75px);margin-top: 16px;}
.slogan-inner h2 span{
color:var(--cream);
}
.slogan-inner p{max-width: 477px;margin:auto;color: #fff;line-height: 27px;font-size: 17px;}
/* =========================================================
CTA
========================================================= */
.about-cta{
padding:100px 0;
background:var(--cream);
}
.about-cta-inner{
display:flex;
justify-content:space-between;
align-items:center;
gap:50px;
}
.about-cta h2{
font-family:"Playfair Display",serif;
font-size:clamp(40px,5vw,70px);
line-height:1;
}
.about-cta h2 span{
color:#777;
}
.cta-button{
display:inline-flex;
align-items:center;
gap:25px;
background:#111;
color:#fff;
padding:17px 24px;
font-size:12px;
font-weight:700;
letter-spacing:1.5px;
text-transform:uppercase;
transition:.4s ease;
}
.cta-button i{
width:35px;
height:1px;
background:#fff;
position:relative;
}
.cta-button i::after{
content:"";
position:absolute;
right:0;
top:-3px;
width:7px;
height:7px;
border-top:1px solid #fff;
border-right:1px solid #fff;
transform:rotate(45deg);
}
.cta-button:hover{
background:#333;
transform:translateY(-3px);
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:991px){
.about-hero{
min-height:70vh;
}
.about-section{
padding:60px 0;
}
.philosophy-grid{
grid-template-columns:1fr;
gap:20px;
}
.philosophy-image{
height:500px;
}
.kg-grid{
grid-template-columns:1fr;
}
.kg-content{
padding:80px 8%;
}
.kg-image{
height:500px;
}
.objectives-header{
grid-template-columns:1fr;
gap:30px;
}
.objectives-grid{
grid-template-columns:
repeat(2,1fr);
}
.management-grid{grid-template-columns:1fr;gap: 30px;}
.management-image-main{width:90%;/* height:550px; */}
.principal-about-grid{
grid-template-columns:1fr;
}
.principal-about-content{
padding:80px 8%;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.container{/* width:88%; */}
.about-hero{
min-height:500px;
background-position:center;
}
.about-hero-content{
padding-top:60px;
}
.about-hero h1{
font-size:56px;
letter-spacing:-2px;
line-height:.94;
}
.about-hero-description{
font-size:14px;
}
.about-section{
padding:75px 0;
}
.section-heading{
font-size:45px;
letter-spacing:-1.5px;
}
.philosophy-image{
height:100%;
}
.philosophy-highlight{
grid-template-columns:80px 1fr;
}
.philosophy-highlight strong{
font-size:38px;
}
.kg-content{
padding:70px 7%;
}
.kg-image{
height:380px;
}
.motto-section{
padding:100px 0;
}
.motto-title{
font-size:50px;
letter-spacing:-2px;
}
.motto-section::before{
font-size:260px;
}
.objectives-grid{
grid-template-columns:1fr;
}
.objective-card{
min-height:240px;
}
.objective-card h3{
margin-top:45px;
}
.management-image-main{width:100%;/* height:450px; */}
.management-image-box{
width:145px;
height:145px;
padding:18px;
}
.management-image-box span{
font-size:18px;
}
.principal-about-content{
padding:70px 7%;
}
.slogan-section{
min-height:550px;
background-attachment:scroll;
}
.slogan-inner h2{font-size: 45px;/* letter-spacing:-2px; */line-height: 50px;}
.about-cta{
padding:75px 0;
}
.about-cta-inner{
flex-direction:column;
align-items:flex-start;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:480px){
.about-hero h1{
font-size: 38px;
line-height: 45px;
}
.section-heading{font-size: 36px;}
.body-copy{
font-size:14px;
}
.philosophy-image{
height:100%;
}
.kg-image{
height:320px;
}
.motto-title{
font-size: 36px;
line-height: 45px;
}
.motto-text{
line-height: 27px;
font-size: 16px;
}
.motto-section{
padding-left: 20px !important;
padding-right: 20px !important;
}
.objective-card{
padding:28px;
}
.objective-card h3{
font-size:25px;
}
.management-image-box{
right:10px;
bottom:15px;
}
.slogan-inner h2{font-size: 36px;line-height: 45px;}
}
/* =========================================================
ACCESSIBILITY / REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
*,
*::before,
*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}
/* =====================================================
MI BASED KG SYSTEM
===================================================== */
.mi-kg-section {
position: relative;
overflow: hidden;
padding: 70px 0;
background: #033fae;
color: #fff;
}
.mi-kg-section .container {
position: relative;
/* max-width: 1400px; */
margin: 0 auto;
padding: 0 9%;
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
}
.mi-kg-content {
position: relative;
z-index: 2;
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
/* Small Label */
.mi-kg-label {
display: inline-flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
color: #d8d1bf;
color: #ffffff;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.7px;
text-transform: uppercase;
}
.mi-kg-label::before {
content: "";
width: 45px;
height: 1px;
background: #d8d1bf;
display: none;
}
/* Heading */
.mi-kg-content h2 {
margin: 0 0 45px;
max-width: 850px;
font-family: "Playfair Display", serif;
/* font-size: clamp(48px, 6vw, 92px); */
font-weight: 700;
line-height: 60px;
/* letter-spacing: -3px; */
text-transform: uppercase;
font-size: clamp(45px, 4.1vw, 50px);
}
.mi-kg-content h2 span {
display: block;
color: #ffffff;
}
/* Decorative Line */
.mi-kg-line {
width: 100%;
height: 1px;
margin-bottom: 42px;
background: rgb(255 255 255 / 12%);
position: relative;
}
.mi-kg-line::before {
content: "";
position: absolute;
left: 0;
top: -2px;
width: 80px;
height: 5px;
background: #c0dfff;
}
/* Paragraph */
.mi-kg-content p {
max-width: 820px;
margin: -13px 0 23px;
font-size: 15px;
line-height: 30px;
font-weight: 400;
color: rgb(255 255 255);
}
.mi-kg-content p strong {
/* color: #fff; */
font-weight: normal;
}
/* Large Background MI */
.mi-kg-bg-text {
position: absolute;
right: -3%;
top: 50%;
transform: translateY(-50%);
/* font-family: "Playfair Display", serif; */
font-size: clamp(280px, 35vw, 600px);
line-height: 1;
font-weight: 700;
color: rgba(255,255,255,0.025);
pointer-events: none;
user-select: none;
display: none;
}
/* Section Number */
.mi-kg-number {
position: absolute;
right: 9%;
bottom: 45px;
z-index: 2;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
color: #d8d1bf;
display: none;
}
.mi-kg-number::before {
content: "";
display: inline-block;
width: 45px;
height: 1px;
margin-right: 15px;
vertical-align: middle;
background: #d8d1bf;
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 991px) {
.mi-kg-section {
padding: 110px 0;
}
.mi-kg-section .container {
padding: 0 7%;
}
.mi-kg-content h2 {
margin-bottom: 35px;
}
.mi-kg-content p {
font-size: 16px;
line-height: 1.8;
}
.mi-kg-bg-text {
right: -10%;
font-size: 400px;
}
.mi-kg-number {
right: 7%;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 767px) {
.mi-kg-section {
padding: 85px 0 100px;
}
.mi-kg-section .container {
padding: 0 25px;
}
.mi-kg-label {
/* margin-bottom: 25px; */
/* font-size: 10px; */
/* letter-spacing: 2px; */
gap: 10px;
}
.mi-kg-label::before {
width: 30px;
}
.mi-kg-content h2 {
font-size: 45px;
line-height: 53px;
/* letter-spacing: -1.5px; */
margin-bottom: 32px;
}
.mi-kg-line {
margin-bottom: 30px;
}
.mi-kg-content p {
font-size: 15px;
line-height: 1.8;
margin-bottom: 20px;
}
.mi-kg-bg-text {
right: -20%;
top: 40%;
font-size: 280px;
}
.mi-kg-number {
position: relative;
right: auto;
bottom: auto;
margin-top: 45px;
font-size: 10px;
}
}
/* =====================================================
SMALL MOBILE
===================================================== */
@media (max-width: 480px) {
.mi-kg-section {
padding: 70px 0 85px;
}
.mi-kg-section .container {
padding: 0 20px;
}
.mi-kg-content h2 {
font-size: 36px;
line-height: 42px;
}
.mi-kg-content p {
font-size: 14px;
line-height: 1.75;
}
.mi-kg-bg-text {
right: -25%;
font-size: 220px;
}
}
.container-hero{
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
}
.objectives-header .section-heading {
margin-bottom: 23px;
margin-top: 18px;
}
/* =========================================================
MODERN STAFF GRID
========================================================= */
.staff-grid-section {
position: relative;
padding: 60px 0 25px;
/* background: #f4f4f5; */
overflow: hidden;
}
.staff-grid-container {
/* width: min(1380px, 90%); */
/* margin: auto; */
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
}
/* -------------------------
HEADING
------------------------- */
.staff-section-heading {
max-width: 760px;
margin-bottom: 36px;
}
.staff-heading-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
font-size: 11px;
font-weight: 700;
/* letter-spacing: 2.5px; */
color: #777;
color: #1552b5;
font-size: 16px;
font-weight: 600;
/* letter-spacing: 0.7px; */
text-transform: uppercase;
}
.staff-heading-label span {
width: 38px;
height: 1px;
background: #111;
display: none;
}
.staff-section-heading h2 {
margin: 0;
font-family: "Playfair Display", serif;
font-size: clamp(45px, 4.1vw, 50px);
line-height: 60px;
font-weight: 700;
color: #111;
text-transform: uppercase;
text-align: left;
}
.staff-section-heading h2 strong {
display: block;
/* font-weight: 500; */
/* font-style: italic; */
}
.staff-section-heading p {
max-width: 600px;
margin: 18px 0 0;
color: #777;
font-size: 16px;
line-height: 1.8;
line-height: 28px;
color: black;
}
/* -------------------------
SEARCH
------------------------- */
.staff-search-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px; display:none;
margin-bottom: 35px;
}
.staff-search {
width: min(520px, 100%);
display: flex;
align-items: center;
background: #fff;
border: 1px solid #dedede;
padding: 0 20px;
height: 58px;
transition: .35s ease;
}
.staff-search:focus-within {
border-color: #111;
box-shadow: 0 15px 40px rgba(0,0,0,.07);
}
.staff-search svg {
width: 20px;
height: 20px;
color: #777;
flex-shrink: 0;
}
.staff-search input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
padding-left: 14px;
font-family: inherit;
font-size: 14px;
color: #111;
}
.staff-search input::placeholder {
color: #999;
}
.staff-count {
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: #777;
}
.staff-count span {
color: #111;
font-size: 18px;
font-weight: 700;
}
/* -------------------------
GRID
------------------------- */
.teacher-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 18px;
}
/* -------------------------
CARD
------------------------- */
.teacher-card {
position: relative;
/* min-height: 189px; */
background: #fff;
border: 1px solid #e4e4e4;
padding: 27px;
overflow: hidden;
transition:
transform .45s cubic-bezier(.2,.8,.2,1),
background .45s ease,
border-color .45s ease,
box-shadow .45s ease;
border-radius: 15px;
}
/* number */
.teacher-number {
position: absolute;
top: 20px;
right: 22px;
font-size: 18px;
letter-spacing: 0px;
color: #a7bef6;
transition: .4s ease;
display: none;
}
/* content */
.teacher-card-content {
display: flex;
align-items: center;
gap: 20px;
/* margin-top: 32px; */
}
/* avatar */
.teacher-avatar {
width: 68px;
height: 68px;
flex: 0 0 68px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #ddf3fb;
color: #111;
font-size: 19px;
transition:
transform .45s ease,
background .45s ease,
color .45s ease;
font-weight: 600;
}
/* info */
.teacher-info {
min-width: 0;
}
.teacher-info h3 {
margin: 0 0 7px;
font-size: 18px;
line-height: 1.2;
font-weight: 700;
color: #111;
transition: .35s ease;
}
.teacher-role {
display: inline-block;
font-size: 12px;
line-height: 1.4;
letter-spacing: 1.5px;
font-weight: 600;
color: #1d6ca2;
text-transform: uppercase;
transition: .35s ease;
}
.teacher-info p {
margin: 9px 0 0;
font-size: 14px;
line-height: 1.5;
color: #343131;
transition: .35s ease;
font-weight: 500 !important;
margin-top: 5px;
}
/* arrow */
.teacher-arrow {
position: absolute;
right: 24px;
bottom: 20px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ddd;
border-radius: 50%;
font-size: 16px;
color: #111;
opacity: .6;
transform: rotate(0deg);
transition:
.45s cubic-bezier(.2,.8,.2,1);
display: none;
}
/* -------------------------
HOVER
------------------------- */
.teacher-card::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background: #033fae;
transform: scaleX(0);
transform-origin: left;
transition: transform .5s ease;
}
.teacher-card:hover {
transform: translateY(-8px);
background: #033fae;
border-color: #033fae;
box-shadow: 0 25px 60px rgba(0,0,0,.15);
}
.teacher-card:hover::before {
transform: scaleX(1);
}
.teacher-card:hover .teacher-number {
color: #777;
}
.teacher-card:hover .teacher-avatar {
background: #ffffff;
color: #111;
transform: scale(1.08) rotate(-5deg);
}
.teacher-card:hover .teacher-info h3 {
color: #fff;
}
.teacher-card:hover .teacher-role {
color: #d8d1bf;
}
.teacher-card:hover .teacher-info p {
color: #aaa;
}
.teacher-card:hover .teacher-arrow {
color: #fff;
border-color: #555;
opacity: 1;
transform: rotate(45deg);
}
/* -------------------------
NO RESULT
------------------------- */
.no-teacher-result {
display: none;
text-align: center;
padding: 70px 20px;
background: #fff;
border: 1px solid #ddd;
}
.no-teacher-result > div {
font-size: 35px;
margin-bottom: 15px;
}
.no-teacher-result h3 {
margin: 0 0 8px;
font-family: "Playfair Display", serif;
font-size: 28px;
}
.no-teacher-result p {
margin: 0;
color: #777;
font-size: 14px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.teacher-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.staff-grid-section {
padding: 0px 0 90px;
padding-top: 60px;
}
.staff-grid-container {
width: 90%;
}
.staff-section-heading {
margin-bottom: 35px;
}
.staff-section-heading h2 {
font-size: 42px;
}
.staff-section-heading p {
/* font-size: 14px; */
/* line-height: 1.7; */
}
.staff-search-wrap {
display: block;
margin-bottom: 25px;
}
.staff-search {
width: 100%;
height: 54px;
}
.staff-count {
margin-top: 14px;
}
.teacher-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.teacher-card {
/* min-height: 155px; */
padding: 20px;
}
.teacher-card-content {
gap: 15px;
/* margin-top: 25px; */
}
.teacher-avatar {
width: 56px;
height: 56px;
flex-basis: 56px;
font-size: 16px;
}
.teacher-info h3 {
font-size: 18px;
padding-right: 35px;
}
.teacher-role {
/* font-size: 9px; */
letter-spacing: 1.2px;
}
.teacher-info p {
/* font-size: 11px; */
padding-right: 20px;
}
.teacher-number {
top: 15px;
right: 17px;
}
.teacher-arrow {
width: 29px;
height: 29px;
right: 17px;
bottom: 15px;
font-size: 13px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.staff-section-heading h2 {
font-size: 36px;
line-height: 45px;
}
.teacher-card {
/* min-height: 145px; */
}
.teacher-card-content {
align-items: flex-start;
}
.teacher-avatar {
margin-top: 2px;
}
.teacher-info h3 {
font-size: 14px;
}
}
/* =========================================================
GLOBAL
========================================================= */
.facilities-container {
/* width: 90%; */
/* max-width: 1380px; */
/* margin: 0 auto; */
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
}
/* =========================================================
HERO
========================================================= */
.facilities-hero {
min-height: 520px;
display: flex;
align-items: center;
}
/* =========================================================
INTRO
========================================================= */
.facilities-intro {
padding: 110px 0 80px;
background: #f5f5f3;
}
.facilities-intro-label,
.facilities-heading-label {
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.facilities-intro-label span,
.facilities-heading-label span {
width: 35px;
height: 2px;
background: #111;
display: block;
}
.facilities-intro h2 {
margin: 22px 0 18px;
font-size: clamp(42px, 5vw, 72px);
line-height: .98;
font-weight: 300;
letter-spacing: -2px;
}
.facilities-intro h2 strong {
font-weight: 700;
}
.facilities-intro p {
max-width: 780px;
margin: 0;
font-size: 17px;
line-height: 1.8;
color: #666;
}
/* =========================================================
FACILITIES SECTION
========================================================= */
.facilities-section-new {
padding: 100px 0;
background: #fff;
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
padding-top: 0px;
padding-bottom: 45px;
}
/* =========================================================
GRID
========================================================= */
.facilities-section-new .facilities-container-new {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 28px;
}
/* =========================================================
CARD
========================================================= */
.facility-card-new {
position: relative;
background: #ffffff;
overflow: hidden;
transition:
transform .5s cubic-bezier(.2,.7,.2,1),
box-shadow .5s ease;
border: 1px solid #e7e7e4;
border-radius: 15px;
}
.facility-card-new:hover {
transform: translateY(-8px);
/* box-shadow:
0 25px 60px rgba(0,0,0,.10); */
border: 1px solid rgb(21 82 181 / 41%);
}
/* =========================================================
IMAGE
========================================================= */
.facility-image-new {height: 330px;position: relative;overflow: hidden;background: #fff;border-radius: 15px;}
.facility-image-new img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition:
transform 1s cubic-bezier(.2,.7,.2,1);
}
.facility-card-new:hover
.facility-image-new img {
transform: scale(1.08);
}
/* =========================================================
DARK IMAGE OVERLAY
========================================================= */
.facility-image-new::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to bottom,
rgba(0,0,0,.05),
rgba(0,0,0,.45)
);
opacity: .7;
transition: .5s ease;
}
.facility-card-new:hover
.facility-image-new::after {
opacity: .45;
}
/* =========================================================
NUMBER
========================================================= */
.facility-number-new {position: absolute;z-index: 2;left: 25px;top: 25px;width: 58px;height: 58px;display: flex;align-items: center;justify-content: center;background: rgba(255,255,255,.95);color: #111;font-size: 14px;font-weight: 700;letter-spacing: 1px;transition: .4s ease;border-radius: 10px;}
.facility-card-new:hover
.facility-number-new {background: #033fae;color: #fff;transform: rotate(8deg);}
/* =========================================================
CONTENT
========================================================= */
.facility-content-new {
padding: 38px 40px 32px;
}
.facility-label-new {margin-bottom: 13px;font-size: 10px;font-weight: 700;letter-spacing: 2px;color: #8a8a8a;color: #1552b5;font-size: 14px;font-weight: 600;/* letter-spacing: 0.7px; */text-transform: uppercase;/* background: #1552b5; */}
.facility-content-new h3 {margin: 0 0 20px;font-size: 25px;line-height: 1.12;/* letter-spacing: -1px; */font-weight: 700;color: #151515;text-transform: uppercase;/* font-size: clamp(45px, 4.1vw,15px); */}
.facility-content-new p {margin: 0 0 13px;font-size: 15px;line-height: 29px;color: #000000;}
/* =========================================================
CARD BOTTOM
========================================================= */
.facility-bottom-new {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #d8d8d5;
}
.facility-bottom-new > span:first-child {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
color: #777;
}
.facility-arrow-new {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #111;
color: #fff;
font-size: 20px;
transition: .4s ease;
}
.facility-card-new-new:hover
.facility-arrow-new {
transform:
translate(3px,-3px)
rotate(5deg);
}
/* =========================================================
CLOSING SECTION
========================================================= */
.facilities-closing-new {
padding: 110px 0;
background: #151515;
color: #fff;
}
.facilities-closing-inner-new {
max-width: 850px;
}
.facilities-closing-new
.facilities-heading-label-new {
color: #aaa;
}
.facilities-closing-new
.facilities-heading-label-new span {
background: #fff;
}
.facilities-closing-new h2 {
margin: 25px 0;
font-size: clamp(42px, 5vw, 72px);
line-height: 1;
font-weight: 300;
letter-spacing: -2px;
}
.facilities-closing-new h2 strong {
display: block;
font-weight: 700;
}
.facilities-closing-new p {
max-width: 650px;
margin: 0;
font-size: 17px;
line-height: 1.8;
color: #aaa;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.facilities-intro-new {
padding: 80px 0 65px;
}
.facilities-section-new {
padding: 75px 0;
}
.facilities-section-new
.facilities-container-new {
grid-template-columns: 1fr;
gap: 25px;
}
.facility-image-new {
height: 380px;
}
.facility-content-new {
padding: 35px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.facilities-container-new {width: calc(100% - 0px);}
.facilities-hero-new {
min-height: 470px;
}
.facilities-intro-new {
padding: 65px 0 55px;
}
.facilities-intro-new h2 {
font-size: 39px;
letter-spacing: -1.5px;
}
.facilities-intro-new p {
font-size: 15px;
line-height: 1.7;
}
.facilities-section-new {padding: 0;}
.facilities-section-new
.facilities-container-new {gap: 20px;}
.facility-image-new {
height: 250px;
}
.facility-number-new {
left: 18px;
top: 18px;
width: 50px;
height: 50px;
font-size: 12px;
}
.facility-content-new {
padding: 28px 24px 25px;
}
.facility-content-new h3 {
font-size: 26px;
line-height: 1.15;
}
.facility-content-new p {/* font-size: 14px; *//* line-height: 1.7; */}
.facility-bottom {
margin-top: 25px;
}
.facility-bottom > span:first-child {
font-size: 9px;
letter-spacing: 1px;
}
.facility-arrow {
width: 38px;
height: 38px;
font-size: 17px;
}
.facilities-closing {
padding: 70px 0;
}
.facilities-closing h2 {
font-size: 40px;
line-height: 1.05;
}
.facilities-closing p {
font-size: 15px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.facilities-container-new {width: calc(100% - 0px);}
.facility-image-new {
height: 220px;
}
.facility-content-new {
padding: 25px 20px 23px;
}
.facility-content-new h3 {
font-size: 23px;
}
.facility-content-new p {/* font-size: 13.5px; */}
.facilities-intro h2 {
font-size: 34px;
}
.facilities-closing h2 {
font-size: 34px;
}
}
/* =========================================================
CONTACT MAIN
========================================================= */
.contact-main-section{padding: 60px 0 100px;/* background:#f7f7f5; */}
.contact-container{/* width:88%; *//* max-width:1400px; *//* margin:auto; */width: min(1160px, calc(100% - 60px));margin: 0 auto;}
.contact-heading{/* max-width:850px; *//* margin:0 auto 65px; */text-align:center;}
.contact-heading .staff-heading-label{justify-content: left;}
.contact-heading p{max-width:720px;margin:22px auto 0;text-align: left;margin-left: 0px;margin-top: 18px;}
/* =========================================================
CONTACT INFO GRID
========================================================= */
.contact-info-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:25px;
}
.contact-info-card{
position:relative;
background:#fff;
padding:45px 38px;
/* min-height:470px; */
border:1px solid #e7e7e7;
overflow:hidden;
transition:
transform .45s ease,
box-shadow .45s ease,
background .45s ease;
border-radius: 15px;
}
.contact-info-card:before{content:"";position:absolute;left:0;top:0;width: 3px;height:0;background: #4f52b5;transition:height .5s ease;}
.contact-info-card:hover{transform:translateY(-10px);/* box-shadow:
0 25px 60px rgba(0,0,0,.10); */}
.contact-info-card:hover:before{
height:100%;
}
.contact-icon{width:62px;height:62px;display:flex;align-items:center;justify-content:center;border-radius:50%;background: #ddf3fb;color:#111;font-size:21px;margin-bottom:30px;transition:
background .4s ease,
color .4s ease,
transform .4s ease;}
.contact-icon img{
width:35px;
}
.contact-info-card:hover .contact-icon{
background:#4f52b5;
color:#fff;
transform:rotate(8deg);
}
.contact-info-card:hover .contact-icon img{
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
.contact-card-number{position:absolute;top:30px;right:30px;font-size:55px;font-weight:700;line-height:1;color: rgb(221 243 251 / 31%);z-index:0;}
.contact-card-label{position:relative;z-index:1;font-size:11px;font-weight:700;/* letter-spacing:2px; */color:#777;margin-bottom: 9px;color: #1552b5;font-size: 13px;font-weight: 600;/* letter-spacing: 0.7px; */text-transform: uppercase;}
.contact-info-card h3{position:relative;z-index:1;font-size: 24px;line-height:1.25;margin:0 0 22px;color:#151515;text-transform: uppercase;font-weight: 700;}
.contact-address{font-size: 15px;line-height: 26px;color: #000;margin-bottom:25px;}
.contact-links{
display:flex;
flex-direction:column;
gap:18px;
}
.contact-links a{display:flex;align-items:center;gap:11px;color: #000;text-decoration:none;font-size: 15px;transition:.3s ease;}
.contact-links a i{
width:22px;
}
.contact-links a:hover{
transform:translateX(6px);
color:#777;
}
/* =========================================================
TIMING
========================================================= */
.timing-list{
display:flex;
flex-direction:column;
gap:0;
}
.timing-row{
display:flex;
justify-content:space-between;
gap:20px;
padding:14px 0;
border-bottom:1px solid #ededed;
font-size:13px;
}
.timing-row span{color: #000;font-size: 15px;}
.timing-row strong{color: #0b46bb;font-weight:600;text-align:right;}
.timing-note{font-size: 13px;color: #35353a;line-height:1.5;padding:12px 0 4px;background: aliceblue;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;padding: 12px;font-weight: 500;letter-spacing: 0px;}
.lunch-row{
margin-top:3px;
}
.office-offday{margin-top:28px;padding:18px;background:#f5f5f2;background: aliceblue;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;padding: 12px;font-weight: 500;letter-spacing: 0px;}
.offday-title{font-size: 12px;/* letter-spacing:2px; */font-weight:700;margin-bottom:7px;color: #e50000;}
.office-offday p{margin:0;color:#777;font-size:13px;line-height:1.6;font-size: 13px;color: #000000;line-height: 1.5;}
/* =========================================================
ENQUIRY SECTION
========================================================= */
.contact-enquiry-section{background: #033fae;padding: 60px 0;color:#fff;}
.contact-enquiry-container{
/* width:88%; */
/* max-width:1400px; */
margin:auto;
display:grid;
grid-template-columns:
.85fr 1.15fr;
gap:90px;
align-items:center;
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
}
.contact-enquiry-intro{
padding-right:30px;
}
.contact-enquiry-intro .staff-heading-label{color: #fff;}
.contact-enquiry-intro .staff-heading-label span{
background:#fff;
}
.contact-enquiry-intro h2{font-size:52px;line-height: 58px;margin:25px 0;font-weight: 700;font-size: clamp(45px, 4.1vw, 45px);text-transform: uppercase;margin-bottom: 18px;}
.contact-enquiry-intro h2 strong{
display:block;
font-weight:700;
}
.contact-enquiry-intro > p{max-width:520px;color: #fff;font-size: 15px;line-height:1.8;}
.enquiry-contact-details{
margin-top:45px;
display:flex;
flex-direction:column;
gap:22px;
}
.enquiry-detail{
display:flex;
align-items:center;
gap:18px;
}
.enquiry-detail-icon{
width:48px;
height:48px;
border:1px solid #444;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
}
.enquiry-detail small{
display:block;
font-size:9px;
letter-spacing:2px;
color:#777;
margin-bottom:5px;
}
.enquiry-detail a{
color:#fff;
text-decoration:none;
font-size:15px;
}
.contact-form-wrapper{background:#fff;color:#111;padding:45px;border-radius: 20px;}
.contact-form-top{
display:flex;
align-items:center;
justify-content:space-between;
padding-bottom:25px;
margin-bottom:25px;
border-bottom:1px solid #e5e5e5;
}
.contact-form-top span{font-size: 25px;/* letter-spacing:2px; */font-weight:700;}
.contact-form-top div{font-size:10px;color:#999;/* letter-spacing:1px; */color: #1552b5;font-size: 13px;font-weight: 600;}
.form-row{
display:grid;
grid-template-columns:
1fr 1fr;
gap:20px;
}
.form-group{
margin-bottom:22px;
}
.form-group label{display:block;font-size: 15px;font-weight: 500;/* letter-spacing:1.5px; */margin-bottom: 12px;color: #000;}
.form-group input,
.form-group textarea{width:100%;box-sizing:border-box;border:none;border-bottom:1px solid #d8d8d8;background:#fafafa;padding:14px 15px;font-family:inherit;font-size: 13px;color:#111;outline:none;transition:
border-color .3s ease,
background .3s ease;}
.form-group textarea{
resize:vertical;
min-height:135px;
}
.form-group input:focus,
.form-group textarea:focus{
border-color:#111;
background:#f4f4f2;
}
.contact-submit-btn{
width:100%;
border:none;
background:#111;
color:#fff;
padding:17px 22px;
display:flex;
align-items:center;
justify-content:space-between;
cursor:pointer;
font-size:11px;
font-weight:700;
letter-spacing:1.5px;
transition:.4s ease;
}
.contact-submit-btn i{
transition:.4s ease;
}
.contact-submit-btn:hover{
background:#333;
}
.contact-submit-btn:hover i{
transform:translateX(7px);
}
/* =========================================================
LOCATION
========================================================= */
.contact-location-section{padding: 60px 0;/* background:#f7f7f5; */}
.contact-location-container{
width:88%;
/* max-width:1400px; */
margin:auto;
display:grid;
grid-template-columns:
.75fr 1.25fr;
gap:70px;
align-items:center;
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
}
.location-content h2{font-size:50px;line-height: 55px;font-weight: 700;margin:25px 0;text-transform: uppercase;}
.location-content h2 strong{
display:block;
font-weight:700;
}
.location-content p{max-width:450px;color: #000;font-size: 15px;line-height: 27px;}
.location-button{
margin-top:25px;
display:inline-flex;
align-items:center;
gap:30px;
padding:16px 22px;
background:#111;
color:#fff;
text-decoration:none;
font-size:10px;
letter-spacing:1.5px;
font-weight:700;
transition:.4s ease;
}
.location-button i{
transition:.4s ease;
}
.location-button:hover{
background:#333;
}
.location-button:hover i{
transform:translateX(7px);
}
.location-map{position:relative;height:450px;overflow:hidden;/* background:#ddd; */border-radius: 20px;border: none;outline: none;}
.location-map iframe{width:100%;height:100%;border:0;/* filter:grayscale(100%); */}
.map-overlay{position:absolute;z-index:5;left:25px;bottom:25px;background:#fff;padding:20px 25px;box-shadow:0 15px 35px rgba(0,0,0,.12);border-radius: 10px;}
.map-pin{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
border-radius:50%;
margin-bottom:10px;
}
.map-overlay h4{
margin:0 0 4px;
font-size:15px;
}
.map-overlay p{
margin:0;
color:#777;
font-size:12px;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:1100px){
.contact-info-grid{
grid-template-columns:
1fr 1fr;
}
.contact-info-card:last-child{
grid-column:
1 / -1;
}
.contact-enquiry-container{
gap:45px;
}
}
@media(max-width:900px){
.contact-enquiry-container,
.contact-location-container{
grid-template-columns:1fr;
}
.contact-enquiry-intro{
padding-right:0;
}
.contact-form-wrapper{
padding:35px;
}
.contact-location-container{
gap:45px;
}
}
@media(max-width:700px){
.contact-main-section,
.contact-location-section{
padding:75px 0;
}
.contact-enquiry-section{
padding:75px 0;
}
.contact-container,
.contact-enquiry-container,
.contact-location-container{
width:90%;
}
.contact-info-grid{
grid-template-columns:1fr;
gap:18px;
}
.contact-info-card:last-child{
grid-column:auto;
}
.contact-info-card{
min-height:auto;
padding:35px 27px;
}
.contact-heading{
margin-bottom:40px;
}
.contact-enquiry-intro h2,
.location-content h2{
font-size:38px;
}
.contact-form-wrapper{
padding:27px 22px;
}
.form-row{
grid-template-columns:1fr;
gap:0;
}
.contact-form-top{
align-items:flex-start;
gap:10px;
flex-direction:column;
}
.location-map{
height:350px;
}
.map-overlay{
left:15px;
bottom:15px;
padding:15px 18px;
}
}
@media(max-width:480px){
.contact-info-card h3{
font-size:22px;
}
.timing-row{
flex-direction:column;
gap:5px;
}
.timing-row strong{
text-align:left;
}
.contact-enquiry-intro h2,
.location-content h2{font-size: 36px;line-height: 45px;}
.enquiry-detail a{
font-size:13px;
}
.location-map{
height:300px;
}
}
.contact-links strong {
color: #0b46bb;
font-weight: 600;
text-align: right;
}
.map-logo{
width: 40px;
}
/* =========================================================
NEWS MAIN
========================================================= */
.news-main-section {
padding-top: 60px;
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
padding-bottom: 60px;
}
.news-container {
max-width: 1400px;
margin: auto;
}
/* =========================================================
SECTION HEADING
========================================================= */
.news-section-heading {
max-width: 750px;
margin-bottom: 55px;
}
.news-heading-label {
display: flex;
align-items: center;
gap: 12px;
color: #777;
font-size: 12px;
font-weight: 700;
/* letter-spacing: 2.5px; */
color: #1552b5;
font-size: 16px;
font-weight: 600;
/* letter-spacing: 0.7px; */
text-transform: uppercase;
}
.news-heading-label span {
width: 35px;
height: 1px;
background: #222;
}
.news-section-heading h2 {
margin: 18px 0 15px;
font-size: clamp(38px, 4vw, 62px);
line-height: 1;
font-weight: 400;
color: #181818;
/* letter-spacing: -2px; */
font-size: clamp(45px, 4.1vw, 50px);
line-height: 60px;
font-weight: 700;
color: #111;
text-transform: uppercase;
}
.news-section-heading h2 strong {
font-weight: 700;
}
.news-section-heading p {
margin: 0;
max-width: 650px;
color: #000;
font-size: 16px;
line-height: 27px;
}
/* =========================================================
FEATURED NEWS
========================================================= */
.featured-news {
display: grid;
grid-template-columns: 1.35fr .65fr;
min-height: 480px;
margin-bottom: 80px;
background: #181818;
overflow: hidden;
}
.featured-image {
position: relative;
min-height: 480px;
overflow: hidden;
}
.featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.featured-news:hover .featured-image img {
transform: scale(1.06);
}
/* IMAGE OVERLAY */
.featured-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(0,0,0,.05),
rgba(0,0,0,.25)
);
}
/* FEATURED CONTENT */
.featured-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 55px;
}
.featured-category {
display: inline-flex;
width: fit-content;
padding: 8px 14px;
border: 1px solid rgba(255,255,255,.3);
color: #ffffff;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
.featured-date {
margin-top: 25px;
color: #999;
font-size: 12px;
letter-spacing: 1px;
}
.featured-content h3 {
margin: 18px 0;
color: #ffffff;
font-size: clamp(28px, 3vw, 42px);
line-height: 1.08;
font-weight: 600;
letter-spacing: -1px;
}
.featured-content p {
margin: 0;
color: #aaa;
font-size: 14px;
line-height: 1.8;
}
/* READ BUTTON */
.news-read-btn {
display: inline-flex;
align-items: center;
gap: 15px;
width: fit-content;
margin-top: 30px;
color: #ffffff;
text-decoration: none;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
transition: gap .3s ease;
}
.news-read-btn i {
font-size: 15px;
transition: transform .3s ease;
}
.news-read-btn:hover {
gap: 20px;
color: #ffffff;
}
.news-read-btn:hover i {
transform: translateX(4px);
}
/* =========================================================
NEWS GRID
========================================================= */
.news-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 30px;
}
/* =========================================================
NEWS CARD
========================================================= */
.news-card {
position: relative;
background: #ffffff;
overflow: hidden;
transition:
transform .45s cubic-bezier(.2,.7,.2,1),
box-shadow .45s ease;
border-radius: 15px;
border: solid 1px rgb(0 0 0 / 16%);
}
.news-card:hover {
transform: translateY(-10px);
/* box-shadow:
0 25px 55px rgba(0,0,0,.10); */
}
/* IMAGE */
.news-card-image {
position: relative;
height: 270px;
overflow: hidden;
}
.news-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition:
transform .7s cubic-bezier(.2,.7,.2,1);
}
.news-card:hover .news-card-image img {
transform: scale(1.08);
}
/* CATEGORY */
.news-card-category {
position: absolute;
left: 20px;
bottom: 20px;
padding: 8px 12px;
background: rgb(21 82 181);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
z-index: 2;
border-radius: 8px;
}
/* CONTENT */
.news-card-content {
padding: 28px 28px 30px;
}
.news-card-date {
color: #999;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #1552b5;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.7px;
text-transform: uppercase;
}
.news-card h3 {
margin: 13px 0 12px;
color: #1b1b1b;
font-size: 23px;
line-height: 1.25;
font-weight: 600;
transition: color .3s ease;
font-size: 20px;
font-weight: 600;
color: #1f2937;
line-height: 27px;
}
.news-card:hover h3 {
color: #555;
}
.news-card p {
margin: 0;
color: #000;
font-size: 15px;
line-height: 26px;
}
/* CARD FOOTER */
.news-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 25px;
padding-top: 18px;
border-top: 1px solid #eeeeee;
}
.news-card-read {
display: inline-flex;
align-items: center;
gap: 10px;
color: #1552b5;
text-decoration: none;
font-size: 15px;
font-weight: 700;
letter-spacing: 0px;
transition: gap .3s ease;
}
.news-card-read i {
transition: transform .3s ease;
}
.news-card-read:hover {
color: #222;
gap: 15px;
}
.news-card-read:hover i {
transform: translateX(3px);
}
/* =========================================================
PAGINATION
========================================================= */
.news-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 70px;
}
.news-page-number {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ddd;
color: #555;
text-decoration: none;
font-size: 12px;
font-weight: 600;
transition: all .3s ease;
}
.news-page-number:hover,
.news-page-number.active {
background: #1b1b1b;
border-color: #1b1b1b;
color: #ffffff;
}
.news-page-next {
width: auto;
padding: 0 18px;
gap: 8px;
}
/* =========================================================
NEWS CTA
========================================================= */
.news-bottom-cta {
position: relative;
padding: 95px 7%;
background: #dedbd3;
overflow: hidden;
}
.news-bottom-container {
max-width: 1400px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.news-bottom-content {
max-width: 700px;
}
.news-bottom-label {
display: flex;
align-items: center;
gap: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
color: #666;
}
.news-bottom-label span {
width: 35px;
height: 1px;
background: #222;
}
.news-bottom-content h2 {
margin: 18px 0 0;
color: #181818;
font-size: clamp(34px, 4vw, 58px);
line-height: 1;
font-weight: 400;
letter-spacing: -2px;
}
.news-bottom-content h2 strong {
font-weight: 700;
}
.news-bottom-content p {
max-width: 600px;
margin: 20px 0 0;
color: #666;
font-size: 14px;
line-height: 1.8;
}
/* CTA BUTTON */
.news-cta-btn {
display: inline-flex;
align-items: center;
gap: 20px;
padding: 17px 25px;
background: #181818;
color: #ffffff;
text-decoration: none;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.8px;
white-space: nowrap;
transition: all .35s ease;
}
.news-cta-btn i {
transition: transform .35s ease;
}
.news-cta-btn:hover {
background: #333;
color: #ffffff;
}
.news-cta-btn:hover i {
transform: translateX(5px);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width: 1100px) {
.news-main-section {
padding-left: 0;
padding-right: 0;
}
.news-bottom-cta {
padding-left: 5%;
padding-right: 5%;
}
.featured-news {
grid-template-columns: 1fr 1fr;
}
.featured-content {
padding: 40px;
}
.news-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media(max-width: 767px) {
/* HERO */
.news-hero {
min-height: 380px;
background-position: center;
}
.news-hero-container {
padding: 80px 25px;
}
.news-small-title {
font-size: 10px;
letter-spacing: 2px;
}
.news-small-title span {
width: 25px;
}
.news-hero h1 {
font-size: 52px;
letter-spacing: -2px;
}
.news-hero-description {
margin-top: 22px;
font-size: 14px;
line-height: 1.7;
}
/* MAIN */
.news-main-section {
padding: 70px 20px 80px;
padding-left: 0px;
padding-right: 0px;
}
.news-section-heading {
margin-bottom: 40px;
}
.news-heading-label {
/* font-size: 10px; */
}
.news-section-heading h2 {
font-size: 36px;
/* letter-spacing: -1.5px; */
line-height: 45px;
}
/* FEATURED */
.featured-news {
display: block;
margin-bottom: 55px;
}
.featured-image {
height: 280px;
min-height: 280px;
}
.featured-content {
padding: 32px 25px 38px;
}
.featured-content h3 {
font-size: 29px;
}
.featured-content p {
font-size: 13px;
}
/* GRID */
.news-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.news-card-image {
height: 235px;
}
.news-card-content {
padding: 24px 22px 25px;
}
.news-card h3 {
font-size: 21px;
}
/* PAGINATION */
.news-pagination {
margin-top: 50px;
}
.news-page-number {
width: 40px;
height: 40px;
}
.news-page-next {
padding: 0 14px;
}
/* CTA */
.news-bottom-cta {
padding: 65px 20px;
}
.news-bottom-container {
flex-direction: column;
align-items: flex-start;
}
.news-bottom-content h2 {
font-size: 39px;
}
.news-cta-btn {
margin-top: 5px;
}
}
@media(max-width: 420px) {
.news-hero h1 {
font-size: 46px;
}
.news-card-image {
height: 215px;
}
.featured-image {
height: 240px;
min-height: 240px;
}
}
/* =========================================================
MAIN SECTION
========================================================= */
.news-detail-section {/* padding: 110px 7% 120px; */width: min(1160px, calc(100% - 60px));margin: 0 auto;padding-top: 60px;}
.news-detail-container {
max-width: 1380px;
margin: auto;
display: grid;
grid-template-columns:
minmax(0, 1fr)
360px;
gap: 80px;
align-items: start;
}
/* =========================================================
ARTICLE
========================================================= */
.news-article {
min-width: 0;
}
.news-detail-image {width: 100%;/* height: 560px; */overflow: hidden;/* background: #ddd; */border-radius: 20px;}
.news-detail-image img {
width: 100%;
/* height: 100%; */
/* object-fit: cover; */
display: block;
transition:
transform .8s cubic-bezier(.2,.8,.2,1);
}
.news-detail-image:hover img {
transform: scale(1.04);
}
/* =========================================================
META
========================================================= */
.news-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 25px;
margin-top: 28px;
padding-bottom: 20px;
border-bottom: 1px solid #ddd;
}
.news-detail-meta span {display: flex;align-items: center;gap: 9px;font-size: 14px;font-weight: 600;letter-spacing: 0px;color: #1552b5;}
.news-detail-meta i {
font-size: 13px;
color: #171717;
}
/* =========================================================
TITLE
========================================================= */
.news-article h2 {max-width: 950px;margin: 30px 0 20px;font-size: clamp(38px, 4.2vw, 40px);line-height: 56px;/* letter-spacing: -2px; */font-weight: 600;text-transform: uppercase;}
/* =========================================================
CONTENT
========================================================= */
.news-detail-content {
max-width: 900px;
padding-bottom: 45px;
}
.news-detail-content p {margin: 0 0 25px;font-size: 15px;line-height: 28px;color: #000000;margin-bottom: 10px;}
.news-detail-content h3 {margin: 20px 0 20px;font-size: 23px;line-height: 1.2;/* letter-spacing: -.5px; */color: #09377f;}
/* =========================================================
QUOTE
========================================================= */
.news-detail-content blockquote {
position: relative;
margin: 45px 0;
padding: 38px 40px 38px 80px;
background: #dedbd3;
border-left: 4px solid #171717;
font-size: 22px;
line-height: 1.55;
font-weight: 600;
color: #222;
}
.quote-icon {
position: absolute;
left: 30px;
top: 35px;
font-size: 28px;
}
/* =========================================================
TAGS
========================================================= */
.news-detail-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 50px;
padding-top: 30px;
border-top: 1px solid #ddd;
}
.news-detail-tags span {
padding: 9px 15px;
background: #e8e7e3;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
/* =========================================================
SHARE
========================================================= */
.news-detail-share {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 30px;
padding-top: 25px;
border-top: 1px solid #ddd;
}
.news-detail-share > span {
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
.share-buttons {
display: flex;
gap: 8px;
}
.share-buttons a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #171717;
color: #fff;
text-decoration: none;
transition: all .3s ease;
}
.share-buttons a:hover {
background: #dedbd3;
color: #171717;
transform: translateY(-4px);
}
/* =========================================================
SIDEBAR
========================================================= */
.news-detail-sidebar {
position: sticky;
top: 120px;
}
.news-sidebar-box {padding: 25px;background: #fff;border: 1px solid #e4e4e1;border-radius: 20px;}
.sidebar-label {display: block;margin-bottom: 12px;font-size: 11px;font-weight: 600;letter-spacing: 2px;color: #1552b5;}
.news-sidebar-box > h3 {margin: 0 0 30px;font-size: 24px;/* letter-spacing: 1px; */text-transform: uppercase;}
/* =========================================================
RECENT NEWS
========================================================= */
.recent-news-item {
display: grid;
grid-template-columns: 95px 1fr;
gap: 15px;
padding: 20px 0;
border-top: 1px solid #e5e5e5;
text-decoration: none;
color: inherit;
}
.recent-news-item:first-of-type {
border-top: 0;
padding-top: 0;
}
.recent-news-image {height: 80px;overflow: hidden;border-radius: 8px;}
.recent-news-image img {width: 100%;height: 100%;object-fit: cover;transition: transform .5s ease;/* border-radius: 15px; */}
.recent-news-item:hover
.recent-news-image img {
transform: scale(1.08);
}
.recent-news-info span {display: block;margin-bottom: 7px;font-size: 9px;font-weight: 700;letter-spacing: 1px;color: #999;color: #1552b5;font-size: 13px;font-weight: 600;}
.recent-news-info h4 {margin: 0;font-size: 15px;line-height: 21px;font-weight: 600;transition: color .3s ease;}
.recent-news-item:hover h4 {
color: #777;
}
/* =========================================================
SIDEBAR CONTACT
========================================================= */
.news-sidebar-contact {margin-top: 25px;padding: 40px 35px;background: #033fae;border-radius: 15px;}
.news-sidebar-contact > span {font-size: 11px;font-weight: 500;letter-spacing: 1px;color: white;text-decoration: underline;}
.news-sidebar-contact h3 {margin: 15px 0;font-size: 27px;/* letter-spacing: -1px; */color: white;text-transform: uppercase;}
.news-sidebar-contact p {margin: 0 0 25px;font-size: 14px;line-height: 25px;color: #fff;}
.news-contact-btn {
display: inline-flex;
align-items: center;
gap: 15px;
padding: 14px 20px;
background: #171717;
color: #fff;
text-decoration: none;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
transition: all .3s ease;
}
.news-contact-btn:hover {
background: #fff;
color: #171717;
}
.news-contact-btn i {
transition: transform .3s ease;
}
.news-contact-btn:hover i {
transform: translateX(5px);
}
/* =========================================================
BOTTOM CTA
========================================================= */
.news-detail-bottom {
padding: 100px 7%;
background: #dedbd3;
text-align: center;
}
.news-detail-bottom-container {
max-width: 750px;
margin: auto;
}
.news-detail-bottom-container > span {
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
}
.news-detail-bottom h2 {
margin: 20px 0;
font-size: clamp(38px, 5vw, 65px);
line-height: 1;
letter-spacing: -2px;
}
.news-detail-bottom h2 strong {
display: block;
font-weight: 700;
}
.news-detail-bottom p {
max-width: 600px;
margin: 25px auto 35px;
font-size: 16px;
line-height: 1.8;
color: #555;
}
.news-back-btn {
display: inline-flex;
align-items: center;
gap: 18px;
padding: 16px 25px;
background: #171717;
color: #fff;
text-decoration: none;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
transition: all .3s ease;
}
.news-back-btn:hover {
background: #fff;
color: #171717;
}
.news-back-btn i {
transition: transform .3s ease;
}
.news-back-btn:hover i {
transform: translateX(6px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.news-detail-container {
grid-template-columns: 1fr;
gap: 60px;
}
.news-detail-sidebar {
position: static;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
.news-sidebar-contact {
margin-top: 0;
}
.news-detail-image {/* height: 500px; */}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.news-detail-hero {
min-height: 390px;
}
.news-detail-hero-container {
padding: 80px 6%;
}
.news-detail-hero h1 {
font-size: 47px;
letter-spacing: -2px;
}
.news-detail-hero p {
font-size: 14px;
line-height: 1.7;
margin-top: 20px;
}
.news-detail-section {
padding: 65px 5% 80px;
}
.news-detail-container {gap: 0px;}
.news-detail-image {/* height: 300px; */}
.news-detail-meta {
gap: 12px 20px;
}
.news-detail-meta span {/* font-size: 9px; */}
.news-article h2 {
margin-top: 25px;
font-size: 36px;
line-height: 1.08;
letter-spacing: -1.3px;
}
.news-detail-content p {
font-size: 15px;
line-height: 1.8;
}
.news-detail-content h3 {
margin-top: 40px;
font-size: 25px;
}
.news-detail-content blockquote {
padding: 30px 25px 30px 55px;
margin: 35px 0;
font-size: 18px;
}
.quote-icon {
left: 20px;
top: 28px;
font-size: 22px;
}
.news-detail-sidebar {
display: block;
}
.news-sidebar-box {
padding: 28px 22px;
}
.news-sidebar-contact {
margin-top: 20px;
padding: 32px 22px;
}
.recent-news-item {
grid-template-columns: 85px 1fr;
}
.recent-news-image {
height: 72px;
}
.news-detail-share {
align-items: flex-start;
flex-direction: column;
}
.news-detail-bottom {
padding: 75px 6%;
}
.news-detail-bottom h2 {
font-size: 42px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.news-detail-hero h1 {
font-size: 40px;
}
.news-detail-image {/* height: 250px; */}
.news-article h2 {
font-size: 31px;
}
.recent-news-item {
grid-template-columns: 75px 1fr;
gap: 12px;
}
.recent-news-info h4 {/* font-size: 13px; */}
}
.hqa-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 36px;
background-color: #e2362d;
color: #ffffff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
border-radius: 12px;
border: none;
cursor: pointer;
overflow: hidden;
/* box-shadow: 0 4px 15px rgba(4, 65, 172, 0.25); */
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Button Hover Lift & Glow */
.hqa-btn:hover {
background-color: #2e3032;
transform: translateY(-3px);
/* box-shadow: 0 8px 25px rgba(4, 65, 172, 0.4); */
}
/* Shiny Shimmer Effect on Button */
.hqa-btn::after {
content: '';
position: absolute;
top: -50%;
left: -60%;
width: 50%;
height: 200%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(30deg);
transition: all 0.6s ease;
}
.hqa-btn:hover::after {
left: 130%;
}
```css
/* =========================================================
MODERN ONLINE ADMISSION FORM
========================================================= */
.admission-section {
width: 100%;
padding: 110px 0;
background:
radial-gradient(circle at 10% 10%, rgba(215,25,32,.035), transparent 30%),
#f5f5f3;
}
.admission-container {
/* width: 90%; */
/* max-width: 1240px; */
/* margin: 0 auto; */
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
}
/* =========================================================
MAIN FORM CARD
========================================================= */
.admission-form-wrapper {
position: relative;
background: #ffffff;
/* padding: 65px; */
/* border-radius: 24px; */
/* box-shadow:
0 25px 80px rgba(0,0,0,.07),
0 4px 20px rgba(0,0,0,.025); */
overflow: hidden;
}
.admission-form-wrapper::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
/* background: linear-gradient(
90deg,
#111 0%,
#111 72%,
#d71920 72%,
#d71920 100%
); */
}
/* =========================================================
FORM INTRO
========================================================= */
.admission-intro {
max-width: 780px;
margin-bottom: 45px;
}
.admission-intro > span {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
font-size: 11px;
font-weight: 800;
/* letter-spacing: 2.5px; */
color: #d71920;
color: #1552b5;
font-size: 16px;
font-weight: 600;
/* letter-spacing: 0.7px; */
text-transform: uppercase;
}
.admission-intro > span::before {
content: "";
width: 28px;
height: 2px;
background: #d71920;
display: none;
}
.admission-intro h2 {
margin: 0 0 18px;
/* font-size: clamp(34px, 4vw, 52px); */
/* line-height: 1.05; */
/* font-weight: 600; */
/* letter-spacing: -1.5px; */
/* color: #111; */
font-size: clamp(45px, 4.1vw, 50px);
line-height: 60px;
font-weight: 700;
color: #111;
text-transform: uppercase;
}
.admission-intro p {
margin: 0;
max-width: 680px;
/* font-size: 15px; */
/* line-height: 1.8; */
/* color: #777; */
color: #000;
font-size: 16px;
line-height: 27px;
}
.admission-intro strong {
color: #d71920;
}
/* =========================================================
FORM SECTION
========================================================= */
.admission-form-section {
position: relative;
margin-bottom: 58px;
/* padding: 34px; */
/* background: #fafafa; */
/* border: 1px solid #eeeeee; */
border-radius: 18px;
}
.admission-form-section:last-child {
margin-bottom: 0;
}
/* =========================================================
SECTION HEADING
========================================================= */
.admission-section-heading {
display: flex;
align-items: center;
gap: 17px;
margin-bottom: 35px;
}
.admission-section-number {
position: relative;
width: 48px;
height: 48px;
min-width: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: rgb(21 82 181);
color: #fff;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.admission-section-heading h3 {
margin: 0;
font-size: 20px;
line-height: 1.2;
font-weight: 700;
/* letter-spacing: .5px; */
text-transform: uppercase;
color: #111;
}
.admission-section-heading::after {
content: "";
flex: 1;
height: 1px;
margin-left: 10px;
background: #e4e4e4;
}
/* =========================================================
GRID
========================================================= */
.admission-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
.admission-field {
position: relative;
}
.admission-field.full {
grid-column: 1 / -1;
}
/* =========================================================
MODERN LABEL
========================================================= */
.admission-field label {
display: block;
margin: 0 0 14px 4px;
font-size: 15px;
font-weight: 600;
/* letter-spacing: .35px; */
color: #333;
}
.required {
color: #d71920;
margin-left: 3px;
}
/* =========================================================
MODERN INPUT
========================================================= */
.admission-field input,
.admission-field select,
.admission-field textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #e3e3e3;
background: #fff;
color: #000000;
outline: none;
border-radius: 12px;
font-family: inherit;
font-size: 14px;
transition:
border-color .3s ease,
box-shadow .3s ease,
background .3s ease,
transform .3s ease;
}
/* INPUT / SELECT */
.admission-field input,
.admission-field select {
height: 58px;
padding: 0 18px;
}
/* TEXTAREA */
.admission-field textarea {
min-height: 145px;
padding: 17px 18px;
resize: vertical;
line-height: 1.7;
}
/* PLACEHOLDER */
.admission-field input::placeholder,
.admission-field textarea::placeholder {
color: #b5b5b5;
transition: opacity .25s ease;
}
/* FOCUS */
.admission-field input:focus,
.admission-field select:focus,
.admission-field textarea:focus {
border-color: #111;
background: #fff;
/* box-shadow:
0 0 0 4px rgba(17,17,17,.045),
0 10px 25px rgba(0,0,0,.055); */
transform: translateY(-1px);
}
.admission-field input:focus::placeholder,
.admission-field textarea:focus::placeholder {
opacity: .35;
}
/* HOVER */
.admission-field input:hover,
.admission-field select:hover,
.admission-field textarea:hover {
border-color: #cfcfcf;
}
/* SELECT */
.admission-field select {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
background-image:
linear-gradient(45deg, transparent 50%, #777 50%),
linear-gradient(135deg, #777 50%, transparent 50%);
background-position:
calc(100% - 20px) 25px,
calc(100% - 15px) 25px;
background-size:
5px 5px,
5px 5px;
background-repeat: no-repeat;
}
/* =========================================================
OPTIONAL FIELD VISUAL STATES
========================================================= */
.admission-field input:valid:not(:placeholder-shown),
.admission-field textarea:valid:not(:placeholder-shown) {
background: #fff;
}
/* =========================================================
SUBMIT AREA
========================================================= */
.admission-submit-area {
position: relative;
margin-top: 8px;
padding-top: 21px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
border-top: 1px solid #eeeeee;
}
.admission-note {
max-width: 520px;
margin: 0;
font-size: 14px;
line-height: 21px;
color: #000;
font-weight: 600 !important;
}
.admission-note .required {
font-size: 14px;
}
/* =========================================================
MODERN SUBMIT BUTTON
========================================================= */
.admission-submit-btn {
position: relative;
min-width: 245px;
height: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 30px;
border: none;
border-radius: 12px;
background: #111;
color: #fff;
font-family: inherit;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
cursor: pointer;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0,0,0,.14);
transition:
transform .35s ease,
box-shadow .35s ease;
}
.admission-submit-btn::before {
content: "";
position: absolute;
inset: 0;
width: 0;
background: #d71920;
transition: width .45s cubic-bezier(.77,0,.18,1);
}
.admission-submit-btn span {
position: relative;
z-index: 2;
}
.admission-submit-btn::after {
content: "→";
position: relative;
z-index: 2;
margin-left: 13px;
font-size: 18px;
font-weight: 400;
transition: transform .3s ease;
}
.admission-submit-btn:hover::before {
width: 100%;
}
.admission-submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 18px 38px rgba(0,0,0,.18);
}
.admission-submit-btn:hover::after {
transform: translateX(5px);
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 991px) {
.admission-section {
padding: 80px 0;
}
.admission-form-wrapper {
padding: 45px;
border-radius: 20px;
}
.admission-form-section {
/* padding: 28px; */
}
.admission-intro {
margin-bottom: 50px;
}
.admission-grid {
gap: 20px;
}
}
@media (max-width: 767px) {
.admission-section {
padding: 55px 0;
}
.admission-container {
width: 92%;
}
.admission-form-wrapper {
padding: 32px 18px;
border-radius: 17px;
}
.admission-form-wrapper::before {
height: 3px;
}
/* INTRO */
.admission-intro {
margin-bottom: 38px;
}
.admission-intro > span {
/* font-size: 10px; */
/* letter-spacing: 2px; */
}
.admission-intro h2 {
font-size: 31px;
letter-spacing: -.8px;
}
.admission-intro p {
font-size: 13px;
line-height: 1.75;
}
/* SECTION */
.admission-form-section {
padding: 0;
margin-bottom: 28px;
border-radius: 14px;
}
.admission-section-heading {
gap: 12px;
margin-bottom: 25px;
}
.admission-section-number {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 11px;
font-size: 10px;
}
.admission-section-heading h3 {
font-size: 16px;
}
.admission-section-heading::after {
margin-left: 3px;
}
/* GRID */
.admission-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.admission-field.full {
grid-column: auto;
}
/* INPUT */
.admission-field input,
.admission-field select {
height: 54px;
border-radius: 11px;
padding: 0 15px;
font-size: 13px;
}
.admission-field textarea {
min-height: 125px;
border-radius: 11px;
padding: 15px;
font-size: 13px;
}
.admission-field label {
/* font-size: 11px; */
margin-left: 2px;
}
/* SUBMIT */
.admission-submit-area {
flex-direction: column;
align-items: stretch;
gap: 22px;
padding-top: 25px;
}
.admission-note {
font-size: 11px;
}
.admission-submit-btn {
width: 100%;
min-width: 0;
height: 57px;
border-radius: 11px;
font-size: 10px;
}
}
@media (max-width: 420px) {
.admission-form-wrapper {
padding: 28px 13px;
}
.admission-intro h2 {
font-size: 28px;
}
.admission-form-section {
padding: 0px;
}
.admission-section-heading h3 {
font-size: 14px;
}
}
.admission-section{
float:left;
width:100%;
padding-top:60px;
padding-bottom:60px;
}
.cta-btn-adm {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 36px;
background-color: #0441ac;
color: #ffffff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
border-radius: 12px;
border: none;
cursor: pointer;
overflow: hidden;
/* box-shadow: 0 4px 15px rgba(4, 65, 172, 0.25); */
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Button Hover Lift & Glow */
.cta-btn-adm:hover {
background-color: #e2362d;
transform: translateY(-3px);
/* box-shadow: 0 8px 25px rgba(4, 65, 172, 0.4); */
}
/* Shiny Shimmer Effect on Button */
.cta-btn-adm::after {
content: '';
position: absolute;
top: -50%;
left: -60%;
width: 50%;
height: 200%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(30deg);
transition: all 0.6s ease;
}
.cta-btn-adm:hover::after {
left: 130%;
}
/* =========================================
GALLERY PAGE
========================================= */
.gallery-page {
background: #f7f7f5;
padding: 110px 0 100px;
}
.gallery-container {
width: min(1400px, 90%);
margin: 0 auto;
}
/* =========================================
PAGE HEADING
========================================= */
.gallery-heading {
text-align: center;
max-width: 850px;
margin: 0 auto 55px;
}
.gallery-label {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #777;
margin-bottom: 14px;
}
.gallery-heading h1 {
margin: 0;
font-size: clamp(38px, 5vw, 70px);
line-height: 1;
font-weight: 700;
color: #151515;
letter-spacing: -2px;
}
.gallery-heading p {
margin: 22px auto 0;
max-width: 700px;
font-size: 16px;
line-height: 28px;
color: #666;
}
/* =========================================
GALLERY GRID
========================================= */
.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
/* =========================================
GALLERY ITEM
========================================= */
.gallery-item {
position: relative;
width: 100%;
border-radius:10px !important;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #e9e9e9;
cursor: pointer;
border-radius: 0;
isolation: isolate;
}
.gallery-item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform .7s cubic-bezier(.2,.65,.3,1),
filter .5s ease;
}
/* Dark overlay */
.gallery-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,.55),
transparent 55%
);
opacity: 0;
transition: opacity .4s ease;
pointer-events: none;
z-index: 1;
}
/* Number */
.gallery-number {
position: absolute;
left: 18px;
bottom: 15px;
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
z-index: 2;
opacity: 0;
transform: translateY(10px);
transition: all .4s ease;
background: rgb(21 82 181);
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 9px;
border-radius: 5px;
}
/* View icon */
.gallery-view {
position: absolute;
top: 50%;
left: 50%;
width: 48px;
height: 48px;
transform: translate(-50%, -40%) scale(.7);
display: flex;
/* align-items: center; */
justify-content: center;
border: 1px solid rgba(255,255,255,.8);
border-radius: 50%;
color: #fff;
font-size: 25px;
opacity: 0;
transition: all .4s ease;
z-index: 3;
line-height: 40px;
font-weight: 400;
}
/* Hover */
.gallery-item:hover img {
transform: scale(1.07);
}
.gallery-item:hover::after {
opacity: 1;
}
.gallery-item:hover .gallery-number {
opacity: 1;
transform: translateY(0);
}
.gallery-item:hover .gallery-view {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* =========================================
LIGHTBOX
========================================= */
.gallery-lightbox {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background: rgba(8, 8, 8, .96);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition:
opacity .35s ease,
visibility .35s ease;
z-index: 99999;
}
.gallery-lightbox.active {
opacity: 1;
visibility: visible;
}
/* Image wrapper */
.lightbox-image-wrap {
position: relative;
width: min(88vw, 1250px);
height: min(82vh, 820px);
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-image {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
user-select: none;
-webkit-user-drag: none;
opacity: 0;
transform: scale(.96);
transition:
opacity .3s ease,
transform .3s ease;
}
.gallery-lightbox.active .lightbox-image {
opacity: 1;
transform: scale(1);
}
/* =========================================
CLOSE BUTTON
========================================= */
.lightbox-close {
position: absolute;
top: 25px;
right: 30px;
width: 50px;
height: 50px;
border: 1px solid rgba(255,255,255,.35);
border-radius: 50%;
background: rgba(255,255,255,.08);
color: #fff;
font-size: 27px;
font-weight: 300;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition:
background .3s ease,
transform .3s ease;
}
.lightbox-close:hover {
background: rgba(255,255,255,.2);
transform: rotate(90deg);
}
/* =========================================
PREVIOUS / NEXT
========================================= */
.lightbox-prev,
.lightbox-next {
position: absolute;
top: 50%;
width: 58px;
height: 58px;
margin-top: -29px;
border: 1px solid rgba(255,255,255,.35);
border-radius: 50%;
background: rgba(255,255,255,.08);
color: #fff;
font-size:20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition:
background .3s ease,
transform .3s ease;
}
.lightbox-prev {
left: 30px;
}
.lightbox-next {
right: 30px;
}
.lightbox-prev:hover {
background: rgba(255,255,255,.2);
transform: translateX(-4px);
}
.lightbox-next:hover {
background: rgba(255,255,255,.2);
transform: translateX(4px);
}
/* =========================================
COUNTER
========================================= */
.lightbox-counter {
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,.8);
font-size: 13px;
letter-spacing: 2px;
z-index: 10;
}
/* =========================================
BODY LOCK
========================================= */
body.gallery-open {
overflow: hidden;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1100px) {
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.gallery-page {
padding: 90px 0 80px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.gallery-page {
padding: 75px 0 65px;
}
.gallery-container {
width: 92%;
}
.gallery-heading {
margin-bottom: 35px;
}
.gallery-heading h1 {
font-size: 42px;
letter-spacing: -1.5px;
}
.gallery-heading p {
font-size: 14px;
line-height: 24px;
margin-top: 16px;
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.gallery-item {
aspect-ratio: 1 / 1;
}
.gallery-view {
width: 40px;
height: 40px;
font-size: 16px;
}
.gallery-number {
left: 10px;
bottom: 10px;
font-size: 10px;
}
/* Lightbox */
.lightbox-image-wrap {
width: 88vw;
height: 72vh;
}
.lightbox-close {
width: 42px;
height: 42px;
top: 15px;
right: 15px;
font-size: 23px;
}
.lightbox-prev,
.lightbox-next {
width: 44px;
height: 44px;
margin-top: -22px;
font-size: 22px;
}
.lightbox-prev {
left: 12px;
}
.lightbox-next {
right: 12px;
}
.lightbox-counter {
bottom: 18px;
font-size: 11px;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 420px) {
.gallery-grid {
gap: 7px;
}
.gallery-heading h1 {
font-size: 36px;
}
.gallery-view {
width: 36px;
height: 36px;
}
}
@media only screen and (max-width:991px) {
.mb-fsn{padding-top: 0px;}
}
@media only screen and (max-width:480px) {
.main-heading-cta {font-size:36px; line-height:45px;}
.management-content .section-heading{font-size:36px; line-height:45px !important;}
.principal-title {font-size:36px !important; line-height:45px;}
.facilities-heading h2 {font-size:36px !important; line-height:45px;}
.main-heading-of {font-size:36px !important; line-height:45px;}
.highlights-section .section-title {font-size:36px !important;line-height: 45px !important;}
.main-heading-news {font-size:36px !important; line-height:45px;}
.main-heading-cta {font-size:36px !important; line-height:45px;}
.admission-intro h2 {font-size:36px !important; line-height:45px;}
.logo-container img{width: 199px;}
.news-badge-dot {animation: none;}
.banner-title{font-size:36px !important; line-height:45px;}
.news-header{display:inline; margin-bottom:30px; float:left; width:100%;}
}
@media only screen and (max-width:340px) {
.banner-title{font-size: 30px !important; line-height: 38px;}
}
@media only screen and (max-width:600px) {
.main-heading-cta {font-size:36px; line-height:45px;}
.mb-sgs{padding-bottom: 50px;}
}
@media only screen and (max-width:991px) {
.philosophy-content{ max-width: 100%;}
.mi-kg-content{max-width: 100%;}
.mi-kg-section .container{padding: 0;}
.mi-kg-section{padding: 40px 0;}
.objectives-description{text-align:left;}
.objectives-header{gap: 0px;}
.objectives-header .section-heading{ margin-bottom:3px;}
}
@media only screen and (max-width:1149px) {
.nav-menu-desktop{ gap: 25px;}
}
@media only screen and (max-width:1065px) {
.nav-menu-desktop{ gap: 20px;}
.nav-link{font-size: 14px;}
}
@media only screen and (max-width:992px) {
.news-nav-links li{display:none;}
.news-widget-box {display:none;}
.news-nav-links{display:inline; margin-top:0px;}
.news-menu-body{padding-left: 0px; padding-right: 0px;}
.news-menu-body{ align-items: normal !important;}
.features-container{display:none !important;}
.hero-section{height:100%;}
.banner-title-wrapper{min-height:100%;}
.news-menu-header{padding:0px;}
.editorial-tag{display:none;}
.news-menu-overlay.active{padding-top:8px;}
.news-menu-body{margin-top:12px;}
.mt-225{margin-top:0px !important;}
}
@media (min-width:993px) and (max-width:2500px) {
.nav-mb-lnk {display:none !important;}
}
@media only screen and (max-width:767px) {
.principal-title{font-size:45px;}
.facilities-heading h2{font-size:45px;}
.main-heading-of{font-size:45px;}
.highlights-section .section-title{font-size:45px;}
.main-heading-news {font-size:45px;}
.card-right{background-position: bottom;}
.description{padding-right:15px;}
.content-left{ gap: 12px;}
.admission-intro h2{font-size: 42px; line-height: 48px;}
}
@media only screen and (max-width:600px) {
.footer-col{padding-left:0px !important;}
}
@media only screen and (max-width:600px) {
.ftr-logo{width:120px;}
.footer-top{gap: 10px;}
.blu-grid{display: inline !important;}
}
.nav-mb-lnk{
float: left !important;
width: 100% !important;
color: white !important;
font-size: 16px !important;
font-weight: 600 !important;
padding: 19px !important;
background: #080d16 !important;
padding-left: 0px !important;
}
.blu-bg{
float:left;
width:100%;
background:#023aa2;
padding-top:35px;
padding-bottom:35px;
}
.blu-container{
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
}
.blu-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 55px;
}
.blu-card{
float:left;
width:100%;
}
.blu-card h2{
float: left;
width: 100%;
color: white;
font-size: 20px;
font-weight: 600;
margin-bottom: 0px;
margin-top: 5px;
text-transform: uppercase;
line-height: 32px;
letter-spacing: 0px;
}
.blu-card p{
float:left;
width:100%;
color: rgb(255 255 255 / 79%);
font-size:15px;
line-height: 25px;
margin-top: 10px;
}
/* =========================================================
VISION & MISSION
========================================================= */
.vision-mission-section {
position: relative;
padding: 60px 0;
padding-top:0px;
/* background: #f4f4f2; */
overflow: hidden;
}
.vm-heading {
max-width: 850px;
margin-bottom: 40px;
}
.vm-heading .section-heading {
margin-bottom: 22px;
margin-top: 20px;
}
.vm-heading > p {
max-width: 760px;
margin: 0;
font-size: 16px;
line-height: 28px;
color: #000;
}
/* GRID */
.vm-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
/* CARD */
.vm-card {
position: relative;
min-height: 500px;
padding: 35px;
overflow: hidden;
display: flex;
align-items: flex-end;
transition: transform .5s ease;
}
.vm-card:hover {
transform: translateY(-8px);
}
/* VISION */
.vm-vision {
background: #eeeeee;
color: #fff;
border-radius: 19px;
}
/* MISSION */
.vm-mission {
background: #f4f1ea;
color: #1d2722;
border-radius: 19px;
}
/* LARGE NUMBER */
.vm-number {
position: absolute;
top: 25px;
right: 35px;
font-size: 90px;
line-height: 1;
font-weight: 700;
letter-spacing: -5px;
opacity: .08;
color: black;
}
/* CONTENT */
.vm-content {
position: relative;
z-index: 2;
max-width: 560px;
}
.vm-label {
display: inline-block;
margin-bottom: 18px;
font-size: 13px;
font-weight: 600;
/* letter-spacing: 2.5px; */
}
.vm-vision .vm-label {
color: #1552b5;
}
.vm-mission .vm-label {
color: #1552b5;
}
.vm-content h3 {
margin: 0 0 25px;
font-size: 40px;
line-height: 48px;
/* letter-spacing: -1.5px; */
color: black;
text-transform: uppercase;
}
.vm-content p {
margin: 0 0 18px;
font-size: 15px;
line-height: 1.85;
}
.vm-vision .vm-content p {
color: rgb(0 0 0);
}
.vm-mission .vm-content p {
color: #000000;
}
/* DECORATIVE LINE */
.vm-card::before {
content: "";
position: absolute;
left: 55px;
top: 55px;
width: 55px;
height: 1px;
background: rgb(0 0 0 / 54%);
opacity: .4;
display: none;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991px) {
.vision-mission-section {
padding: 10px 0;
}
.vm-grid {
grid-template-columns: 1fr;
}
.vm-card {
min-height: auto;
padding: 50px 40px;
}
.vm-content h3 {
font-size: 34px;
}
}
@media (max-width: 575px) {
.vision-mission-section {
padding: 10px 0;
}
.vm-heading {
margin-bottom: 45px;
}
.vm-heading > p {
font-size: 15px;
line-height: 1.8;
}
.vm-card {
padding: 45px 28px;
}
.vm-card::before {
left: 28px;
top: 35px;
}
.vm-number {
top: 20px;
right: 20px;
font-size: 65px;
}
.vm-content h3 {
font-size: 29px;
margin-bottom: 20px;
line-height: 36px;
}
.vm-content p {
font-size: 15px;
line-height: 1.8;
}
}
.vm-container{
width: min(1160px, calc(100% - 60px px ));
margin: 0 auto;
}
@media (max-width: 575px) {
.vm-number{font-size:35px;}
}
.lh70{
line-height:70px !important;
}
/* =========================================================
VALUES & CULTURE IN THE CAMPUS
========================================================= */
.values-campus-section {
position: relative;
padding: 60px 0;
background: #f5f7f8;
overflow: hidden;
}
.values-campus-container {
/* width: 90%; */
/* max-width: 1380px; */
/* margin: 0 auto; */
width: min(1160px, calc(100% - 60px));
margin: 0 auto;
}
/* ---------------------------------------------------------
SECTION HEADING
--------------------------------------------------------- */
.values-campus-heading {
max-width: 780px;
margin: 0 auto 65px;
text-align: center;
}
.values-campus-heading .section-label {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
color: #1684a5;
font-size: 12px;
font-weight: 700;
/* letter-spacing: 2.5px; */
text-transform: uppercase;
color: #1552b5;
font-size: 16px;
font-weight: 600;
/* letter-spacing: 0.7px; */
text-transform: uppercase;
}
.values-campus-heading .section-label::before,
.values-campus-heading .section-label::after {
content: "";
width: 28px;
height: 1px;
background: #1684a5;
display: none;
}
.values-campus-heading .section-heading {
margin: 0;
/* color: #17232b; */
/* font-size: clamp(38px, 4.5vw, 64px); */
line-height: 60px;
font-weight: 700;
/* letter-spacing: -2px; */
font-size: clamp(45px, 4.1vw, 50px);
}
.values-campus-heading .section-heading span {
display: block;
/* color: #1684a5; */
}
.values-campus-heading p {
max-width: 690px;
margin: 25px auto 0;
color: #000000;
font-size: 16px;
line-height: 1.8;
}
/* ---------------------------------------------------------
VALUES GRID
--------------------------------------------------------- */
.values-campus-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/* ---------------------------------------------------------
VALUE CARD
--------------------------------------------------------- */
.values-campus-card {
position: relative;
/* min-height: 360px; */
padding: 42px 35px 38px;
background: #ffffff;
/* border: 1px solid rgba(23, 35, 43, 0.08); */
overflow: hidden;
transition:
transform 0.45s ease,
background 0.45s ease,
box-shadow 0.45s ease;
border-radius: 10px;
}
.values-campus-card::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background: rgb(10 65 153);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s ease;
}
.values-campus-card:hover {
transform: translateY(-10px);
background: #ffffff;
/* box-shadow: 0 25px 60px rgba(23, 35, 43, 0.12); */
}
.values-campus-card:hover::before {
transform: scaleX(1);
}
/* ---------------------------------------------------------
CARD NUMBER
--------------------------------------------------------- */
.values-campus-number {
position: absolute;
top: 25px;
right: 28px;
color: rgba(22, 132, 165, 0.12);
font-size: 48px;
line-height: 1;
font-weight: 700;
display: none;
}
/* ---------------------------------------------------------
ICON / NUMBER CIRCLE
--------------------------------------------------------- */
.values-campus-icon {
position: relative;
width: 62px;
height: 62px;
margin-bottom: 45px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgb(10 65 153 / 55%);
border-radius: 50%;
transition: all 0.45s ease;
}
.values-campus-icon::before {
content: "";
position: absolute;
inset: 7px;
border: 1px solid rgb(10 65 153 / 55%);
border-radius: 50%;
}
.values-campus-icon span {
position: relative;
z-index: 2;
color: rgb(10 65 153);
font-size: 14px;
font-weight: 700;
}
.values-campus-card:hover .values-campus-icon {
background: #0a4199;
border-color: #0a4199;
transform: rotate(8deg);
}
.values-campus-card:hover .values-campus-icon span {
color: #ffffff;
}
.values-campus-card:hover .values-campus-icon::before {
border-color: rgba(255, 255, 255, 0.3);
}
/* ---------------------------------------------------------
CARD CONTENT
--------------------------------------------------------- */
.values-campus-card h3 {
margin: 0 0 18px;
color: #17232b;
font-size: 24px;
line-height: 1.29;
font-weight: 700;
/* letter-spacing: -0.5px; */
transition: color 0.35s ease;
text-transform: uppercase;
}
.values-campus-card p {
margin: 0;
color: #000000;
font-size: 15px;
line-height: 27px;
transition: color 0.35s ease;
}
.values-campus-card:hover h3 {
color: rgb(10 65 153);
}
/* ---------------------------------------------------------
DECORATIVE BACKGROUND
--------------------------------------------------------- */
.values-campus-section::before {
content: "";
position: absolute;
width: 420px;
height: 420px;
right: -180px;
top: -180px;
border: 1px solid rgba(22, 132, 165, 0.08);
border-radius: 50%;
}
.values-campus-section::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
left: -130px;
bottom: -130px;
border: 1px solid rgba(22, 132, 165, 0.08);
border-radius: 50%;
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (max-width: 1100px) {
.values-campus-section {
padding: 90px 0;
}
.values-campus-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.values-campus-card {
min-height: 330px;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 767px) {
.values-campus-section {
padding: 75px 0;
}
.values-campus-container {
width: 88%;
}
.values-campus-heading {
margin-bottom: 45px;
}
.values-campus-heading .section-label {
font-size: 10px;
letter-spacing: 2px;
}
.values-campus-heading .section-heading {
font-size: 38px;
letter-spacing: -1.5px;
line-height: 1.1;
}
.values-campus-heading p {
margin-top: 20px;
font-size: 14px;
line-height: 1.7;
}
.values-campus-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.values-campus-card {
min-height: auto;
padding: 35px 28px 32px;
}
.values-campus-icon {
width: 56px;
height: 56px;
margin-bottom: 35px;
}
.values-campus-card h3 {
font-size: 23px;
}
.values-campus-card p {
font-size: 14px;
}
.values-campus-number {
top: 22px;
right: 22px;
font-size: 40px;
}
}
/* ---------------------------------------------------------
SMALL MOBILE
--------------------------------------------------------- */
@media (max-width: 480px) {
.values-campus-section {
padding: 60px 0;
}
.values-campus-heading .section-heading {
font-size: 33px;
}
.values-campus-card {
padding: 30px 24px;
}
.values-campus-card h3 {
font-size: 21px;
}
}
/* =========================================================
CAMPUS RULES SECTION
========================================================= */
.campus-rules-section {
padding: 110px 0 120px;
background: #f5f5f3;
}
.campus-rules-container {
width: min(1380px, 90%);
margin: 0 auto;
}
/* =========================================================
SECTION HEADING
========================================================= */
.campus-rules-heading {
max-width: 820px;
margin: 0 auto 65px;
text-align: center;
}
.campus-rules-label {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
color: #777;
margin-bottom: 18px;
}
.campus-rules-label span {
width: 32px;
height: 2px;
background: #111;
display: inline-block;
}
.campus-rules-heading h2 {
margin: 0;
font-size: clamp(38px, 5vw, 68px);
line-height: 1;
font-weight: 300;
color: #111;
letter-spacing: -2px;
}
.campus-rules-heading h2 strong {
display: block;
font-weight: 700;
}
.campus-rules-heading p {
max-width: 720px;
margin: 25px auto 0;
font-size: 16px;
line-height: 1.8;
color: #666;
}
/* =========================================================
RULE GRID
========================================================= */
.campus-rules-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
margin-bottom: 35px;
}
/* =========================================================
RULE CARD
========================================================= */
.campus-rule-card {
position: relative;
display: flex;
align-items: stretch;
min-height: 255px;
background: #fff;
border: 1px solid rgba(0,0,0,.07);
overflow: hidden;
transition:
transform .45s ease,
box-shadow .45s ease,
background .45s ease;
border-radius: 10px;
}
.campus-rule-card:hover {
transform: translateY(-7px);
/* box-shadow:
0 20px 50px rgba(0,0,0,.10); */
}
/* =========================================================
LARGE BACKGROUND NUMBER
========================================================= */
.campus-rule-number {
position: absolute;
right: 22px;
top: -12px;
font-size: 110px;
line-height: 1;
font-weight: 800;
color: rgba(0,0,0,.035);
pointer-events: none;
transition:
color .4s ease,
transform .4s ease;
}
.campus-rule-card:hover .campus-rule-number {
color: rgba(0,0,0,.07);
transform: scale(1.05);
}
/* =========================================================
CARD CONTENT
========================================================= */
.campus-rule-content {
position: relative;
z-index: 2;
padding: 38px 42px 38px 42px;
max-width: 620px;
/* border-radius: 10px; */
}
.campus-rule-icon {
width: 42px;
height: 42px;
border: 1px solid #1552b5;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition:
background .35s ease,
color .35s ease;
border-radius: 7px;
}
.campus-rule-icon span {
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
}
.campus-rule-card:hover .campus-rule-icon {
background: #1552b5;
color: #fff;
}
.campus-rule-content h3 {
margin: 0 0 13px;
font-size: 22px;
line-height: 1.15;
color: #151515;
font-weight: 600;
/* letter-spacing: -.5px; */
text-transform: uppercase;
}
.campus-rule-content p {
margin: 0;
font-size: 15px;
line-height: 25px;
color: #000;
}
/* =========================================================
DISCIPLINARY ACTION
========================================================= */
.discipline-action-section {
padding: 110px 0;
background: #151515;
}
.discipline-action-container {
width: min(900px, 88%);
margin: 0 auto;
text-align: center;
}
.discipline-action-label {
font-size: 11px;
letter-spacing: 3px;
font-weight: 700;
color: rgba(255,255,255,.55);
margin-bottom: 22px;
}
.discipline-action-container h2 {
margin: 0;
color: #fff;
font-size: clamp(38px, 5vw, 64px);
line-height: 1;
font-weight: 300;
letter-spacing: -2px;
}
.discipline-action-container h2 span {
display: block;
font-weight: 700;
}
.discipline-action-container p {
max-width: 720px;
margin: 30px auto 0;
color: rgba(255,255,255,.68);
font-size: 16px;
line-height: 1.8;
}
.discipline-action-note {
display: inline-block;
margin-top: 35px;
padding: 13px 22px;
border: 1px solid rgba(255,255,255,.22);
color: rgba(255,255,255,.75);
font-size: 10px;
letter-spacing: 2.5px;
font-weight: 700;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.campus-rules-section {
padding: 80px 0 90px;
}
.campus-rules-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.campus-rule-card {
min-height: auto;
}
.discipline-action-section {
padding: 85px 0;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.principal-name{margin-top:0px;}
.campus-rules-container {
width: 88%;
}
.campus-rules-heading {
margin-bottom: 42px;
}
.campus-rules-heading h2 {
font-size: 40px;
letter-spacing: -1.5px;
}
.campus-rules-heading p {
font-size: 14px;
line-height: 1.7;
}
.campus-rule-card {
display: block;
}
.campus-rule-content {
padding: 30px 27px 32px;
}
.campus-rule-number {
right: 10px;
top: -5px;
font-size: 80px;
}
.campus-rule-icon {
width: 38px;
height: 38px;
margin-bottom: 20px;
}
.campus-rule-content h3 {
font-size: 22px;
padding-right: 30px;
}
.campus-rule-content p {
font-size: 14px;
line-height: 1.7;
}
.discipline-action-section {
padding: 75px 0;
}
.discipline-action-container h2 {
font-size: 40px;
}
.discipline-action-container p {
font-size: 14px;
line-height: 1.7;
}
.discipline-action-note {
font-size: 9px;
letter-spacing: 1.7px;
padding: 11px 15px;
}
}
.tnm{
color:#374151;
}
.tnm:hover{
color:#0b57d0;
}
.news-menu-form{
padding-left: 25px;
padding-right: 30px;
margin-top: 0px;
width: 50%;
}
.nqf{
color:white !important;
font-size:14px !important;
}
.mqf-form{
background: #191e27 !important;
border: none !important;
border-radius: 5px !important;
color:rgb(255 255 255 / 68%) !important;
}
.mt-225{
margin-top:-225px;
}
.mt260{
margin-top:-260px;
}
.enq-widget{
font-size: 19px;
padding: 0px;
background: #0f141d;
margin-bottom: 19px;
}
.gallery-lightbox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.lightbox-image-wrap {
display: flex !important;
justify-content: center;
align-items: center;
width: 100% !important;
height: auto !important;
}
.lightbox-image {
display: block;
max-width: 90vw !important;
max-height: 70vh !important;
width: auto;
height: auto;
object-fit: contain;
}
.lightbox-description {
display: block !important;
width: 90%;
max-width: 800px;
margin: 15px auto 0;
color: #fff;
text-align: left;
font-size: 16px;
line-height: 1.5;
}