/*==================================================

SWA MONTESSORI

STYLE.CSS

==================================================*/





/*==============================

GOOGLE FONTS

==============================*/



@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');





/*==============================

CSS VARIABLES

==============================*/



:root {



    --primary: #8AA05B;

    --primary-dark: #6C8445;

    --secondary: #F4E8C9;

    --accent: #C77D4E;



    --white: #ffffff;

    --black: #222222;



    --text: #555555;

    --heading: #232323;



    --bg: #FDFBF8;

    --light: #F8F6F2;

    --border: #ECE8E2;



    --radius: 14px;



    --shadow: 0 12px 35px rgba(0, 0, 0, .08);



    --transition: .35s ease;



    --container: 1280px;



}





/*==============================

RESET

==============================*/



* {



    margin: 0;

    padding: 0;

    box-sizing: border-box;



}



html {



    scroll-behavior: smooth;



}



body {



    font-family: 'Inter', sans-serif;

    font-size: 16px;

    line-height: 1.8;

    color: var(--text);

    background: var(--bg);

    overflow-x: hidden;



}



img {



    max-width: 100%;

    display: block;



}



a {



    text-decoration: none;

    color: inherit;

    transition: var(--transition);



}



ul {



    list-style: none;



}



button {



    border: none;

    cursor: pointer;

    font-family: inherit;



}



input,

textarea,

select {



    font-family: inherit;

    outline: none;



}



.image-card {

    position: relative;

    display: inline-flex;
    /* Forces container to strictly fit the image size */

}



.image-card img {

    display: block;

    max-width: 100%;

    height: auto;

}



.gradient-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    /*height: 100%;*/

    height: 56.2%;

    z-index: 2;
    /* Forces gradient to stay on top of the image */

    background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.8) 100%);

    pointer-events: none;
    /* Allows clicking through the gradient to the image */

}



/*==============================

CONTAINER

==============================*/



.container {



    width: 92%;

    max-width: var(--container);

    margin: auto;



}





/*==============================

TYPOGRAPHY

==============================*/



h1,

h2,

h3,

h4,

h5,

h6 {



    font-family: 'Cormorant Garamond', serif;

    color: var(--heading);

    font-weight: 700;

    line-height: 1.15;



}



h1 {



    font-size: 68px;



}



h2 {



    font-size: 48px;



}



h3 {



    font-size: 32px;



}



h4 {



    font-size: 24px;



}



p {



    margin-bottom: 20px;



}





/*==============================

SECTION

==============================*/



section {



    padding: 110px 0;

    position: relative;



}





/*==============================

SECTION HEADING

==============================*/



.section-heading {



    text-align: center;

    margin-bottom: 70px;



}



.section-heading span {



    display: inline-block;

    padding: 8px 22px;

    background: var(--secondary);

    border-radius: 50px;

    font-size: 14px;

    letter-spacing: 1px;

    text-transform: uppercase;

    font-weight: 600;

    color: var(--primary-dark);

    margin-bottom: 18px;



}



.section-heading h2 {



    margin-bottom: 22px;



}



.section-heading p {



    max-width: 720px;

    margin: auto;



}





/*==============================

LEFT HEADING

==============================*/



.section-tag {



    display: inline-block;

    padding: 8px 22px;

    background: var(--secondary);

    color: var(--primary-dark);

    border-radius: 50px;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 18px;

    text-transform: uppercase;

    letter-spacing: 1px;



}





/*==============================

DIVIDER

==============================*/



.line {



    width: 90px;

    height: 4px;

    background: var(--primary);

    border-radius: 30px;

    margin: 28px 0;



}



.section-heading .line {



    margin: 25px auto;



}





/*==============================

BUTTONS

==============================*/



.primary-btn {



    display: inline-flex;

    align-items: center;

    justify-content: center;



    padding: 16px 38px;



    background: var(--primary);



    color: #fff;



    border-radius: 60px;



    font-weight: 600;



    transition: var(--transition);



    box-shadow: var(--shadow);



}



.primary-btn:hover {



    background: var(--primary-dark);



    transform: translateY(-3px);



}





.secondary-btn {



    display: inline-flex;



    align-items: center;



    justify-content: center;



    padding: 16px 38px;



    border-radius: 60px;



    border: 2px solid var(--primary);



    color: var(--primary);



    font-weight: 600;



    margin-left: 15px;



    transition: var(--transition);



}



.secondary-btn:hover {



    background: var(--primary);



    color: #fff;



}





/*==============================

CARDS

==============================*/



.card {



    background: #fff;



    border-radius: 20px;



    padding: 40px;



    box-shadow: var(--shadow);



    transition: var(--transition);



}



.card:hover {



    transform: translateY(-10px);



}





/*==============================

IMAGE EFFECT

==============================*/



.image-box {



    overflow: hidden;



    border-radius: 22px;



}



.image-box img {



    transition: .7s;



}



.image-box:hover img {



    transform: scale(1.08);



}





/*==============================

TEXT ALIGNMENT

==============================*/



.text-center {



    text-align: center;



}



.text-left {



    text-align: left;



}



.text-right {



    text-align: right;



}





/*==============================

SPACING UTILITIES

==============================*/



.mt-20 {



    margin-top: 20px;



}



.mt-40 {



    margin-top: 40px;



}



.mt-60 {



    margin-top: 60px;



}



.mb-20 {



    margin-bottom: 20px;



}



.mb-40 {



    margin-bottom: 40px;



}



.mb-60 {



    margin-bottom: 60px;



}





/*==============================

BACKGROUND HELPERS

==============================*/



.bg-light {



    background: var(--light);



}



.bg-primary {



    background: var(--primary);



}



.bg-secondary {



    background: var(--secondary);



}

/*==================================================

HEADER

==================================================*/



header {



    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1030 !important;



    /* padding:22px 0; */



    background: rgba(255, 255, 255, .75);



    backdrop-filter: blur(16px);



    transition: .35s ease;



}



header.scrolled {



    padding: 14px 0;



    background: #fff;



    box-shadow: 0 8px 30px rgba(0, 0, 0, .08);



}



header .container {



    display: flex;



    align-items: center;



    justify-content: space-between;



}





/*==================================================

LOGO

==================================================*/



.logo {



    display: flex;



    align-items: center;



}



.logo img {



    height: 120px;



    width: auto;



    transition: .3s;



}



header.scrolled .logo img {



    height: 58px;



}





/*==================================================

NAVIGATION

==================================================*/



nav {



    display: flex;



    align-items: center;



}



nav ul {



    display: flex;



    align-items: center;



    gap: 20px;



}



nav ul li {



    position: relative;



}



nav ul li a {



    font-size: 16px;



    font-weight: 500;



    color: var(--heading);



    position: relative;



    padding: 8px 0;



    transition: .3s;



}





/* underline animation */



nav ul li a::after {



    content: "";



    position: absolute;



    left: 0;



    bottom: -4px;



    width: 0;



    height: 2px;



    background: var(--primary);



    transition: .35s;



}



nav ul li a:hover::after,



nav ul li a.active::after {



    width: 100%;



}



nav ul li a:hover {



    color: var(--primary);



}



nav ul li a.active {



    color: var(--primary);



}





/*==================================================

HEADER BUTTON

==================================================*/



.header-btn {



    padding: 14px 30px;



    background: var(--primary);



    color: #fff;



    border-radius: 50px;



    font-size: 15px;



    font-weight: 600;



    transition: .35s;



    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);



}



.header-btn:hover {



    background: var(--primary-dark);



    transform: translateY(-3px);



}





/*==================================================

MOBILE TOGGLE

==================================================*/



.mobile-toggle {



    display: none;



    width: 42px;



    height: 42px;



    cursor: pointer;



    justify-content: center;



    align-items: center;



    flex-direction: column;



    gap: 6px;



}



.mobile-toggle span {



    display: block;



    width: 26px;



    height: 3px;



    background: var(--heading);



    border-radius: 20px;



    transition: .35s;



}





/*==================================================

MOBILE MENU

==================================================*/



.mobile-menu {



    position: fixed;



    top: 0;



    right: -100%;



    width: 330px;



    height: 100vh;



    background: #fff;



    padding: 90px 35px;



    z-index: 1040 !important;



    transition: .45s ease;



    box-shadow: -10px 0 30px rgba(0, 0, 0, .08);



    overflow-y: auto;



}



.mobile-menu.active {



    right: 0;



}



.mobile-close {



    position: absolute;



    right: 22px;



    top: 22px;



    font-size: 32px;



    cursor: pointer;



    color: var(--heading);



    transition: .3s;



}



.mobile-close:hover {



    color: var(--primary);



    transform: rotate(90deg);



}



.mobile-menu ul {



    display: flex;



    flex-direction: column;



    gap: 22px;



    margin-bottom: 40px;



}



.mobile-menu ul li {



    border-bottom: 1px solid var(--border);



    padding-bottom: 14px;



}



.mobile-menu ul li a {



    font-size: 18px;



    font-weight: 500;



    transition: .3s;



}



.mobile-menu ul li a:hover {



    color: var(--primary);



    padding-left: 10px;



}



.mobile-menu .primary-btn {



    width: 100%;



    justify-content: center;



}





/*==================================================

DROPDOWN MENU

==================================================*/



nav ul li ul {



    position: absolute;



    left: 0;



    top: 120%;



    width: 240px;



    background: #fff;



    padding: 18px 0;



    border-radius: 14px;



    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);



    opacity: 0;



    visibility: hidden;



    transform: translateY(15px);



    transition: .35s;



}



nav ul li:hover ul {



    opacity: 1;



    visibility: visible;



    transform: translateY(0);



}



nav ul li ul li {



    padding: 0;



}



nav ul li ul li a {



    display: block;



    padding: 12px 24px;



    font-size: 15px;



}



nav ul li ul li a::after {



    display: none;



}



nav ul li ul li a:hover {



    background: var(--light);



    padding-left: 32px;



}





/*==================================================

HEADER SEARCH (OPTIONAL)

==================================================*/



.header-icons {



    display: flex;



    align-items: center;



    gap: 18px;



}



.header-icons i {



    font-size: 18px;



    cursor: pointer;



    transition: .3s;



    color: var(--heading);



}



.header-icons i:hover {



    color: var(--primary);



}





/*==================================================

HEADER SOCIAL (OPTIONAL)

==================================================*/



.header-social {



    display: flex;



    align-items: center;



    gap: 12px;



    margin-left: 25px;



}



.header-social a {



    width: 36px;



    height: 36px;



    display: flex;



    align-items: center;



    justify-content: center;



    border-radius: 50%;



    background: var(--light);



    transition: .3s;



}



.header-social a:hover {



    background: var(--primary);



    color: #fff;



    transform: translateY(-3px);



}





/*==================================================

HEADER SPACER

==================================================*/



.hero {



    padding-top: 150px;



}

/*==================================================

HERO SECTION

==================================================*/



.hero {



    position: relative;



    padding: 170px 0 120px;



    background: linear-gradient(180deg, #FFFDF8 0%, #F7F3EB 100%);



    overflow: hidden;



}



.hero::before {



    content: "";



    position: absolute;



    width: 650px;



    height: 650px;



    border-radius: 50%;



    background: rgba(138, 160, 91, .08);



    top: -220px;



    right: -180px;



}



.hero::after {



    content: "";



    position: absolute;



    width: 380px;



    height: 380px;



    border-radius: 50%;



    background: rgba(199, 125, 78, .08);



    left: -150px;



    bottom: -120px;



}





/*==================================================

HERO GRID

==================================================*/



.hero-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 80px;



    align-items: center;



    position: relative;



    z-index: 2;



}





/*==================================================

LEFT CONTENT

==================================================*/



.hero-left {



    animation: fadeUp 1s ease;



}



.sub-title {



    display: inline-block;



    padding: 10px 22px;



    background: var(--secondary);



    border-radius: 50px;



    font-size: 14px;



    font-weight: 600;



    letter-spacing: 1px;



    text-transform: uppercase;



    color: var(--primary-dark);



    margin-bottom: 25px;



}



.hero-left h1 {



    font-size: 72px;



    line-height: 1.05;



    margin-bottom: 25px;



    max-width: 650px;



}



.hero-left p {



    font-size: 18px;



    color: #666;



    max-width: 580px;



    margin-bottom: 40px;



}



.hero-buttons {



    display: flex;



    align-items: center;



    flex-wrap: wrap;



    gap: 18px;



    margin-bottom: 55px;



}





/*==================================================

HERO STATS

==================================================*/



.hero-stats {



    display: flex;



    gap: 45px;



    flex-wrap: wrap;



}



.hero-stats div {



    position: relative;



}



.hero-stats div::after {



    content: "";



    position: absolute;



    right: -22px;



    top: 12px;



    width: 1px;



    height: 45px;



    background: #ddd;



}



.hero-stats div:last-child::after {



    display: none;



}



.hero-stats h3 {



    font-size: 42px;



    color: var(--primary);



    margin-bottom: 5px;



}



.hero-stats p {



    margin: 0;



    font-size: 15px;



    color: #777;



}





/*==================================================

RIGHT IMAGE

==================================================*/



.hero-right {



    position: relative;



    animation: floatImage 7s ease-in-out infinite;



}



.hero-right img {



    width: 100%;



    border-radius: 30px;



    box-shadow: 0 30px 60px rgba(0, 0, 0, .12);



}





/*==================================================

FLOATING CARD

==================================================*/



.floating-box {



    position: absolute;



    left: -40px;



    bottom: 50px;



    background: #fff;



    padding: 28px;



    border-radius: 20px;



    width: 240px;



    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);



    animation: bounceCard 4s infinite;



}



.floating-box h4 {



    font-size: 24px;



    margin-bottom: 10px;



    color: var(--heading);



}



.floating-box p {



    margin-bottom: 16px;



    font-size: 15px;



    line-height: 1.6;



}



.floating-box a {



    font-weight: 600;



    color: var(--primary);



}



.floating-box a:hover {



    padding-left: 8px;



}





/*==================================================

DECORATIVE SHAPES

==================================================*/



.hero-shape-1 {



    position: absolute;



    top: 120px;



    right: 120px;



    width: 120px;



    opacity: .15;



}



.hero-shape-2 {



    position: absolute;



    bottom: 80px;



    left: 80px;



    width: 90px;



    opacity: .18;



}



.hero-shape-3 {



    position: absolute;



    top: 50%;



    left: 45%;



    width: 45px;



    height: 45px;



    border-radius: 50%;



    background: var(--accent);



    opacity: .15;



}





/*==================================================

BUTTON HOVER

==================================================*/



.primary-btn,



.secondary-btn {



    position: relative;



    overflow: hidden;



}



.primary-btn::before,



.secondary-btn::before {



    content: "";



    position: absolute;



    top: 0;



    left: -100%;



    width: 100%;



    height: 100%;



    background: rgba(255, 255, 255, .18);



    transition: .45s;



}



.primary-btn:hover::before,



.secondary-btn:hover::before {



    left: 100%;



}





/*==================================================

IMAGE HOVER

==================================================*/



.hero-right img:hover {



    transform: scale(1.02);



    transition: .5s;



}





/*==================================================

ANIMATIONS

==================================================*/



@keyframes floatImage {



    0% {



        transform: translateY(0);



    }



    50% {



        transform: translateY(-12px);



    }



    100% {



        transform: translateY(0);



    }



}



@keyframes bounceCard {



    0% {



        transform: translateY(0);



    }



    50% {



        transform: translateY(-10px);



    }



    100% {



        transform: translateY(0);



    }



}



@keyframes fadeUp {



    0% {



        opacity: 0;



        transform: translateY(40px);



    }



    100% {



        opacity: 1;



        transform: translateY(0);



    }



}

/*==================================================

OUR STORY

==================================================*/



.story {



    background: #fff;

    position: relative;



}



.story::before {



    content: "";

    position: absolute;

    top: 80px;

    right: 0;

    width: 180px;

    height: 180px;

    background: rgba(138, 160, 91, .05);

    border-radius: 50%;



}



.story-content {



    max-width: 900px;

    margin: auto;

    text-align: center;



}



.story-content p {



    font-size: 18px;

    line-height: 1.9;

    color: #666;



}





/*==================================================

PHILOSOPHY

==================================================*/



.philosophy {



    background: var(--light);



}



.philosophy-grid {



    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;



}



.philosophy-image {



    position: relative;



}



.philosophy-image img {



    width: 100%;

    border-radius: 30px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, .08);



}



.philosophy-content h2 {



    margin: 18px 0;



}



.philosophy-content p {



    font-size: 17px;



}



.philosophy blockquote {



    font-family: 'Cormorant Garamond', serif;



    font-size: 34px;



    line-height: 1.4;



    color: var(--primary);



    margin: 40px 0 20px;



    font-style: italic;



}



.philosophy h5 {



    font-size: 18px;

    color: #888;

    font-weight: 500;



}





/*==================================================

LEARNING AREA

==================================================*/



.learning-areas {



    background: #fff;



}



.learning-grid {



    display: grid;



    grid-template-columns:

        repeat(3, 1fr);



    gap: 35px;



    margin-top: 70px;



}



.learning-card {



    background: #fff;



    padding: 45px 35px;



    border-radius: 24px;



    text-align: center;



    transition: .35s;



    box-shadow: 0 15px 35px rgba(0, 0, 0, .06);



    border: 1px solid transparent;



}



.learning-card:hover {



    transform: translateY(-12px);



    border-color: var(--primary);



    box-shadow: 0 20px 50px rgba(0, 0, 0, .10);



}



.learning-card .icon {



    width: 90px;



    height: 90px;



    margin: auto;



    margin-bottom: 28px;



    border-radius: 50%;



    background: var(--secondary);



    display: flex;



    align-items: center;



    justify-content: center;



}



.learning-card .icon img {



    width: 48px;



    height: 48px;



    object-fit: contain;



}



.learning-card h3 {



    font-size: 28px;



    margin-bottom: 18px;



}



.learning-card p {



    font-size: 15px;



    margin: 0;



}





/*==================================================

WHY SWA

==================================================*/



.why-swa {



    background: linear-gradient(180deg,

            #FDFBF8,

            #F6F2EA);



}



.why-grid {



    display: grid;



    grid-template-columns:

        repeat(2, 1fr);



    gap: 35px;



    margin-top: 60px;



}



.why-box {



    background: #fff;



    padding: 40px;



    border-radius: 22px;



    box-shadow: 0 15px 35px rgba(0, 0, 0, .05);



    transition: .35s;



    position: relative;



    overflow: hidden;



}



.why-box::before {



    content: "";



    position: absolute;



    left: 0;



    top: 0;



    width: 5px;



    height: 100%;



    background: var(--primary);



    transition: .35s;



}



.why-box:hover {



    transform: translateY(-10px);



}



.why-box:hover::before {



    width: 100%;



    opacity: .08;



}



.why-box h3 {



    margin-bottom: 15px;



    font-size: 28px;



}



.why-box p {



    margin: 0;



}





/*==================================================

DECORATIVE LEAF

==================================================*/



.philosophy::after {



    content: "";



    position: absolute;



    bottom: 80px;



    right: 60px;



    width: 130px;



    height: 130px;



    background: url("../images/leaf.png") center/contain no-repeat;



    opacity: .10;



}





/*==================================================

CARD ANIMATION

==================================================*/



.learning-card,

.why-box {



    transition:

        transform .35s,

        box-shadow .35s;



}





/*==================================================

SECTION SPACING

==================================================*/



.learning-areas .section-heading {



    margin-bottom: 20px;



}



.philosophy-content .line {



    margin: 25px 0;



}





/*==================================================

TEXT HIGHLIGHT

==================================================*/



.highlight {



    color: var(--primary);

    font-weight: 600;



}





/*==================================================

LIST STYLE

==================================================*/



.check-list {



    margin-top: 30px;



}



.check-list li {



    display: flex;



    align-items: flex-start;



    margin-bottom: 16px;



}



.check-list li i {



    color: var(--primary);



    margin-right: 12px;



    font-size: 18px;



    margin-top: 4px;



}

/*==================================================

ABOUT SWA

==================================================*/



.about-swa {



    background: #fff;

    position: relative;

    overflow: hidden;



}



.about-grid {



    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;



}



.about-image {



    position: relative;



}



.about-image img {



    width: 100%;

    display: block;

    border-radius: 30px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, .08);



}



.experience-box {



    position: absolute;

    right: -30px;

    bottom: 40px;



    background: var(--primary);



    color: #fff;



    padding: 28px;



    width: 210px;



    border-radius: 22px;



    text-align: center;



    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);



}



.experience-box h2 {



    font-size: 56px;



    color: #fff;



    margin-bottom: 8px;



    line-height: 1;



}



.experience-box span {



    display: block;



    font-size: 15px;



    line-height: 1.6;



}



.about-content h2 {



    margin: 18px 0;



}



.about-content p {



    font-size: 17px;



    margin-bottom: 22px;



}





/*==================================================

ABOUT FEATURES

==================================================*/



.about-features {



    display: grid;



    grid-template-columns: repeat(2, 1fr);



    gap: 24px;



    margin: 45px 0;



}



.feature {



    display: flex;



    align-items: flex-start;



    gap: 18px;



    padding: 22px;



    background: #fff;



    border-radius: 18px;



    box-shadow: 0 10px 25px rgba(0, 0, 0, .05);



    transition: .35s;



}



.feature:hover {



    transform: translateY(-8px);



    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);



}



.feature .icon {



    width: 46px;

    height: 46px;



    border-radius: 50%;



    background: var(--secondary);



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 18px;



    font-weight: 700;



    color: var(--primary);



    flex-shrink: 0;



}



.feature h4 {



    font-size: 22px;



    margin-bottom: 8px;



}



.feature p {



    margin: 0;



    font-size: 15px;



}





/*==================================================

FOUNDER

==================================================*/



.founder {



    background: var(--light);



}



.founder-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 80px;



    align-items: center;



}



.founder-image {



    position: relative;



}



.founder-image img {



    width: 100%;



    border-radius: 28px;



    box-shadow: 0 25px 60px rgba(0, 0, 0, .08);



}



.founder-content h2 {



    margin: 20px 0;



}



.founder-content p {



    font-size: 17px;



    margin-bottom: 20px;



}





/*==================================================

VISION

==================================================*/



.vision {



    background: #fff;



}



.vision-grid {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 35px;



    margin-top: 65px;



}



.vision-card {



    background: #fff;



    padding: 45px 35px;



    border-radius: 24px;



    text-align: center;



    box-shadow: 0 15px 35px rgba(0, 0, 0, .05);



    transition: .35s;



    position: relative;



    overflow: hidden;



}



.vision-card:hover {



    transform: translateY(-12px);



}



.vision-card::before {



    content: "";



    position: absolute;



    left: 0;



    top: 0;



    width: 100%;



    height: 5px;



    background: var(--primary);



}



.vision-card .number {



    width: 75px;



    height: 75px;



    margin: auto;



    margin-bottom: 28px;



    border-radius: 50%;



    background: var(--secondary);



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 28px;



    font-weight: 700;



    color: var(--primary);



    font-family: 'Cormorant Garamond', serif;



}



.vision-card h3 {



    margin-bottom: 18px;



    font-size: 30px;



}



.vision-card p {



    margin: 0;



}





/*==================================================

DAILY EXPERIENCE

==================================================*/



.experience {



    background: linear-gradient(180deg, #FDFBF8, #F5F2EB);



}



.timeline {



    position: relative;



    margin-top: 70px;



    padding-left: 40px;



}



/* .timeline::before{



content:"";



position:absolute;



left:12px;



top:0;



bottom:0;



width:4px;



background:var(--primary);



border-radius:20px;



} */



.timeline-item {



    position: relative;



    padding: 45px 45px 45px 45px;



}



.timeline-item:last-child {



    padding-bottom: 0;



}



/*.timeline-item::before{



content:"";



position:absolute;



left:-2px;



top:5px;



width:28px;



height:28px;



border-radius:50%;



background:var(--primary);



border:6px solid #fff;



box-shadow:0 0 0 5px rgba(138,160,91,.12);



}*/



.timeline-item h4 {



    font-size: 28px;



    margin-bottom: 12px;



}



.timeline-item p {



    margin: 0;



    font-size: 16px;



}





/*==================================================

BACKGROUND DECORATION

==================================================*/



.about-swa::before {



    content: "";



    position: absolute;



    right: -120px;



    top: -120px;



    width: 320px;



    height: 320px;



    border-radius: 50%;



    background: rgba(138, 160, 91, .05);



}



.founder::after {



    content: "";



    position: absolute;



    left: -90px;



    bottom: -90px;



    width: 260px;



    height: 260px;



    border-radius: 50%;



    background: rgba(199, 125, 78, .06);



}

/*==================================================

GALLERY

==================================================*/



.gallery {



    background: #fff;

    position: relative;

    overflow: hidden;



}



.gallery-grid {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    grid-auto-rows: 280px;



    gap: 25px;



    margin-top: 70px;



}



.gallery-item {



    position: relative;



    overflow: hidden;



    border-radius: 22px;



    cursor: pointer;



    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);



}



.gallery-item.large {



    grid-column: span 2;

    grid-row: span 2;



}



.gallery-item img {



    width: 100%;

    height: 100%;



    object-fit: cover;



    transition: .7s;



}



.gallery-item:hover img {



    transform: scale(1.08);



}



.gallery-item::before {



    content: "";



    position: absolute;



    inset: 0;



    background: linear-gradient(transparent,

            rgba(0, 0, 0, .45));



    opacity: 0;



    transition: .35s;



    z-index: 1;



}



.gallery-item:hover::before {



    opacity: 1;



}



.gallery-item::after {



    content: "+";



    position: absolute;



    left: 50%;

    top: 50%;



    transform: translate(-50%, -50%) scale(.5);



    width: 70px;

    height: 70px;



    border-radius: 50%;



    background: #fff;



    display: flex;

    align-items: center;

    justify-content: center;



    font-size: 40px;



    color: var(--primary);



    opacity: 0;



    transition: .35s;



    z-index: 2;



}



.gallery-item:hover::after {



    opacity: 1;



    transform: translate(-50%, -50%) scale(1);



}



.gallery-btn {



    text-align: center;



    margin-top: 60px;



}





/*==================================================

TESTIMONIALS

==================================================*/



.testimonials {



    background: var(--light);



}



.testimonial-grid {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 35px;



    margin-top: 60px;



}



.testimonial-card {



    background: #fff;



    padding: 40px;



    border-radius: 22px;



    box-shadow: 0 15px 35px rgba(0, 0, 0, .06);



    transition: .35s;



    position: relative;



}



.testimonial-card:hover {



    transform: translateY(-10px);



}



.testimonial-card::before {



    content: "❝";



    position: absolute;



    top: 20px;



    right: 30px;



    font-size: 70px;



    opacity: .08;



    font-family: serif;



}



.testimonial-card p {



    font-size: 16px;



    font-style: italic;



    margin-bottom: 30px;



}



.client {



    display: flex;



    align-items: center;



    gap: 16px;



}



.client img {



    width: 70px;



    height: 70px;



    border-radius: 50%;



    object-fit: cover;



}



.client h4 {



    font-size: 22px;



    margin-bottom: 5px;



}



.client span {



    font-size: 14px;



    color: #777;



}





/*==================================================

ADMISSION

==================================================*/



.admission {



    background: url("sld3.jpg") center center no-repeat;



    background-size: cover;



    opacity: .12;



    z-index: 0;



    mask-image: linear-gradient(to left, #000 60%, transparent);

    -webkit-mask-image: linear-gradient(to left, #000 60%, transparent);



}



.admission-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 70px;



    align-items: center;



}



.admission-image {



    position: relative;



}



.admission-image img {



    width: 100%;



    border-radius: 30px;



    box-shadow: 0 25px 60px rgba(0, 0, 0, .08);



}



.admission-content span {



    display: inline-block;



    padding: 8px 20px;



    background: var(--secondary);



    border-radius: 40px;



    font-size: 14px;



    font-weight: 600;



    margin-bottom: 18px;



    color: var(--primary-dark);



}



.admission-content h2 {



    margin-bottom: 20px;



}



.admission-content p {



    margin-bottom: 25px;



}



.admission-content ul {



    margin-bottom: 35px;



}



.admission-content ul li {



    padding: 12px 0;



    font-size: 17px;



    border-bottom: 1px dashed #ddd;



}



.admission-content ul li:last-child {



    border: none;



}





/*==================================================

CALL TO ACTION

==================================================*/



.cta {



    padding: 120px 0;



    background: linear-gradient(135deg,

            var(--primary),

            var(--primary-dark));



}



.cta-box {



    padding: 80px;



    border-radius: 30px;



    text-align: center;



    color: #fff;



    position: relative;



    overflow: hidden;



}



.cta-box::before {



    content: "";



    position: absolute;



    width: 300px;

    height: 300px;



    border-radius: 50%;



    background: rgba(255, 255, 255, .08);



    left: -100px;

    top: -100px;



}



.cta-box::after {



    content: "";



    position: absolute;



    width: 220px;

    height: 220px;



    border-radius: 50%;



    background: rgba(255, 255, 255, .06);



    right: -70px;

    bottom: -70px;



}



.cta-box h2 {



    color: #fff;



    font-size: 56px;



    margin-bottom: 20px;



    position: relative;



    z-index: 2;



}



.cta-box p {



    max-width: 700px;



    margin: 0 auto 40px;



    font-size: 18px;



    color: rgba(255, 255, 255, .92);



    position: relative;



    z-index: 2;



}



.cta-buttons {



    display: flex;



    justify-content: center;



    gap: 20px;



    position: relative;



    z-index: 2;



}



.cta .primary-btn {



    background: #fff;



    color: var(--primary);



}



.cta .primary-btn:hover {



    background: var(--secondary);



}



.cta .secondary-btn {



    border: 2px solid #fff;



    color: #fff;



}



.cta .secondary-btn:hover {



    background: #fff;



    color: var(--primary);



}

/*==================================================

FAQ

==================================================*/



.faq {



    background: var(--light);



}



.faq-wrapper {



    max-width: 900px;



    margin: 60px auto 0;



}



.faq-item {



    background: #fff;



    border-radius: 18px;



    margin-bottom: 20px;



    overflow: hidden;



    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);



    transition: .35s;



}



.faq-item.active {



    border-left: 5px solid var(--primary);



}



.faq-question {



    display: flex;



    justify-content: space-between;



    align-items: center;



    padding: 28px 35px;



    cursor: pointer;



}



.faq-question h4 {



    font-size: 24px;



    margin: 0;



}



.faq-question span {



    font-size: 32px;



    font-weight: 300;



    color: var(--primary);



}



.faq-answer {



    display: none;



    padding: 0 35px 30px;



}



.faq-item.active .faq-answer {



    display: block;



}



.faq-answer p {



    margin: 0;



    font-size: 16px;



    line-height: 1.8;



}





/*==================================================

CONTACT

==================================================*/



.contact {



    background: #fff;



}



.contact-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 70px;



    align-items: start;



}



.contact-info h2 {



    margin: 18px 0;



}



.contact-box {



    margin-top: 30px;



    padding: 25px;



    background: var(--light);



    border-radius: 18px;



    transition: .35s;



}



.contact-box:hover {



    transform: translateY(-6px);



}



.contact-box h4 {



    margin-bottom: 10px;



}



.contact-box p {



    margin: 0;



}





/*==================================================

FORM

==================================================*/



.contact-form {



    background: #fff;



    padding: 45px;



    border-radius: 24px;



    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);



}



.form-group {



    margin-bottom: 22px;



}



.contact-form input,



.contact-form textarea {



    width: 100%;



    padding: 18px 22px;



    border: 1px solid var(--border);



    border-radius: 14px;



    font-size: 16px;



    background: #fff;



    transition: .35s;



}



.contact-form input:focus,



.contact-form textarea:focus {



    border-color: var(--primary);



    box-shadow: 0 0 0 4px rgba(138, 160, 91, .12);



}



.contact-form textarea {



    resize: vertical;



    min-height: 170px;



}



.contact-form button {



    width: 100%;



}





/*==================================================

MAP

==================================================*/



.map {



    padding: 0;



}



.map iframe {



    width: 100%;



    height: 520px;



    border: none;



    display: block;



}





/*==================================================

NEWSLETTER

==================================================*/



.newsletter {



    background: var(--primary);



    padding: 70px 0;



}



.newsletter-box {



    display: flex;



    justify-content: space-between;



    align-items: center;



    gap: 40px;



}



.newsletter-box h2 {



    color: #fff;



    margin-bottom: 10px;



}



.newsletter-box p {



    color: rgba(255, 255, 255, .90);



    margin: 0;



}



.newsletter-box form {



    display: flex;



    width: 500px;



    max-width: 100%;



}



.newsletter-box input {



    flex: 1;



    padding: 18px 24px;



    border: none;



    border-radius: 60px 0 0 60px;



    font-size: 16px;



}



.newsletter-box button {



    padding: 18px 35px;



    border: none;



    background: var(--heading);



    color: #fff;



    font-weight: 600;



    border-radius: 0 60px 60px 0;



    transition: .35s;



}



.newsletter-box button:hover {



    background: #000;



}





/*==================================================

FOOTER

==================================================*/



footer {



    background: var(--light);



    color: #CFCFCF;



    padding: 90px 0 0;



}



.footer-grid {



    display: grid;



    grid-template-columns: 2fr 1fr 1fr 1.3fr;



    gap: 55px;



}



.footer-about img {



    height: 140px;



    margin-bottom: 25px;



}



.footer-about p {



    line-height: 1.9;



    margin-bottom: 30px;



}





/*==================================================

SOCIAL

==================================================*/



.social-links {



    display: flex;



    gap: 14px;



}



.social-links a {



    width: 44px;



    height: 44px;



    display: flex;



    align-items: center;



    justify-content: center;



    border-radius: 50%;



    background: rgba(255, 255, 255, .08);



    transition: .35s;



}



.social-links a:hover {



    background: var(--primary);



    transform: translateY(-5px);



}





/*==================================================

FOOTER LINKS

==================================================*/

footer p {

    color: #0d0d0d;

}



.footer-links h4,



.footer-contact h4 {



    color: #046a59;



    margin-bottom: 25px;



}



.footer-links ul li {



    margin-bottom: 15px;



}



.footer-links a {



    color: #0d0d0d;



    transition: .3s;



}



.footer-links a:hover {



    color: #fff;



    padding-left: 8px;



}





/*==================================================

FOOTER CONTACT

==================================================*/



.footer-contact ul {



    padding: 0;



    margin: 0;



}



.footer-contact li {



    display: flex;



    gap: 12px;



    margin-bottom: 18px;



    line-height: 1.8;

    color: #0d0d0d !important;



}



.footer-contact i {



    /*color:var(--primary);*/

    color: #0d0d0d;



    margin-top: 4px;



    width: 18px;



}





/*==================================================

BOTTOM BAR

==================================================*/



.footer-divider {



    border: none;



    height: 1px;



    background: rgba(255, 255, 255, .08);



    margin: 60px 0 30px;



}



.footer-bottom {



    display: flex;



    justify-content: space-between;



    align-items: center;



    padding-bottom: 30px;



    gap: 20px;



    flex-wrap: wrap;



}



.footer-bottom p {



    margin: 0;



    font-size: 15px;



}



.footer-bottom-links {



    display: flex;



    gap: 25px;



    flex-wrap: wrap;



}



.footer-bottom-links a {



    color: #cfcfcf;



    font-size: 15px;



    transition: .3s;



}



.footer-bottom-links a:hover {



    color: #fff;



}

/*==================================================

BACK TO TOP

==================================================*/



.back-to-top {



    position: fixed;



    left: 30px;



    bottom: 30px;



    width: 55px;



    height: 55px;



    border-radius: 50%;



    background: var(--primary);



    color: #fff;



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 20px;



    cursor: pointer;



    z-index: 999;



    opacity: 0;



    visibility: hidden;



    transition: .35s;



    box-shadow: 0 15px 35px rgba(0, 0, 0, .18);



}



.back-to-top.show {



    opacity: 1;



    visibility: visible;



}



.back-to-top:hover {



    background: var(--primary-dark);



    transform: translateY(-6px);



}





/*==================================================

PRELOADER

==================================================*/



.preloader {



    position: fixed;



    left: 0;



    top: 0;



    width: 100%;



    height: 100%;



    background: #fff;



    display: flex;



    align-items: center;



    justify-content: center;



    z-index: 999999;



    transition: .5s;



}



.preloader.hide {



    opacity: 0;



    visibility: hidden;



}



.loader {



    display: flex;



    gap: 12px;



}



.loader span {



    width: 18px;



    height: 18px;



    border-radius: 50%;



    background: var(--primary);



    animation: loaderBounce 1s infinite ease-in-out;



}



.loader span:nth-child(2) {



    animation-delay: .15s;



}



.loader span:nth-child(3) {



    animation-delay: .3s;



}





/*==================================================

COMMON HOVER EFFECTS

==================================================*/



img {



    transition: .45s ease;



}



img:hover {



    transform: scale(1.02);



}



a {



    transition: .3s;



}



button {



    transition: .3s;



}





/*==================================================

SELECTION

==================================================*/



::selection {



    background: var(--primary);



    color: #fff;



}



::-moz-selection {



    background: var(--primary);



    color: #fff;



}





/*==================================================

SCROLLBAR

==================================================*/



::-webkit-scrollbar {



    width: 10px;



}



::-webkit-scrollbar-track {



    background: #f4f4f4;



}



::-webkit-scrollbar-thumb {



    background: var(--primary);



    border-radius: 30px;



}



::-webkit-scrollbar-thumb:hover {



    background: var(--primary-dark);



}





/*==================================================

HELPER CLASSES

==================================================*/



.d-flex {



    display: flex;



}



.align-center {



    align-items: center;



}



.justify-center {



    justify-content: center;



}



.justify-between {



    justify-content: space-between;



}



.flex-column {



    flex-direction: column;



}



.w-100 {



    width: 100%;



}



.h-100 {



    height: 100%;



}



.rounded {



    border-radius: 20px;



}



.shadow {



    box-shadow: var(--shadow);



}



.overflow-hidden {



    overflow: hidden;



}



.position-relative {



    position: relative;



}





/*==================================================

SPACING HELPERS

==================================================*/



.py-80 {



    padding: 80px 0;



}



.py-120 {



    padding: 120px 0;



}



.pt-0 {



    padding-top: 0;



}



.pb-0 {



    padding-bottom: 0;



}



.mt-auto {



    margin-top: auto;



}



.mb-0 {



    margin-bottom: 0;



}





/*==================================================

FADE ANIMATIONS

==================================================*/



.fade-up {



    animation: fadeUp .8s ease both;



}



.fade-left {



    animation: fadeLeft .8s ease both;



}



.fade-right {



    animation: fadeRight .8s ease both;



}



.zoom-in {



    animation: zoomIn .8s ease both;



}





/*==================================================

KEYFRAMES

==================================================*/



@keyframes fadeLeft {



    0% {



        opacity: 0;



        transform: translateX(-60px);



    }



    100% {



        opacity: 1;



        transform: translateX(0);



    }



}



@keyframes fadeRight {



    0% {



        opacity: 0;



        transform: translateX(60px);



    }



    100% {



        opacity: 1;



        transform: translateX(0);



    }



}



@keyframes zoomIn {



    0% {



        opacity: 0;



        transform: scale(.85);



    }



    100% {



        opacity: 1;



        transform: scale(1);



    }



}



@keyframes loaderBounce {



    0%,
    80%,
    100% {



        transform: scale(.6);



        opacity: .5;



    }



    40% {



        transform: scale(1);



        opacity: 1;



    }



}



@keyframes rotate {



    from {



        transform: rotate(0deg);



    }



    to {



        transform: rotate(360deg);



    }



}





/*==================================================

TRANSITIONS

==================================================*/



* {



    transition:

        background-color .3s ease,

        color .3s ease,

        border-color .3s ease;



}





/*==================================================

PRINT

==================================================*/



@media print {



    header,

    footer,

    .back-to-top,

    .mobile-menu,

    .mobile-toggle,

    .preloader {



        display: none !important;



    }



    body {



        background: #fff;



        color: #000;



    }



    section {



        padding: 30px 0;



    }



    a {



        text-decoration: none;



        color: #000;



    }



}

/*********/

.admission {



    position: relative;



    overflow: hidden;



    background: #faf7f0;



}



.admission-bg {



    position: absolute;



    top: 0;



    right: 0;



    width: 45%;



    height: 100%;



    background: url('sld3.jpg') center center no-repeat;



    background-size: cover;



    opacity: .12;



    z-index: 0;



    mask-image: linear-gradient(to left, #000 60%, transparent);

    -webkit-mask-image: linear-gradient(to left, #000 60%, transparent);



}



.admission .container {



    position: relative;



    z-index: 2;



}



#enroll-section {

    padding: 100px 0;

    background: #f8f6f0;

}



#enroll-section .wrapper {

    max-width: 1280px;

    margin: auto;

    padding: 0 20px;

}



.enroll-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;

}



.enroll-tag {

    display: inline-block;

    color: #8c9a63;

    font-size: 15px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 15px;

}



.enroll-title {

    font-size: 48px;

    line-height: 1.2;

    margin-bottom: 18px;

    color: #2b2b2b;

}



.enroll-divider {

    width: 80px;

    height: 4px;

    background: #8c9a63;

    border-radius: 50px;

    margin: 25px 0;

}



.enroll-description {

    font-size: 18px;

    color: #666;

    line-height: 1.9;

    margin-bottom: 30px;

}



.enroll-features {

    list-style: none;

    padding: 0;

    margin: 0 0 35px;

}



.enroll-features li {

    margin-bottom: 16px;

    font-size: 17px;

    color: #444;

}



.enroll-btn {

    display: inline-block;

    padding: 16px 38px;

    background: #8c9a63;

    color: #fff;

    text-decoration: none;

    border-radius: 8px;

    font-weight: 600;

    transition: .3s;

}



.enroll-btn:hover {

    background: #6f7f4c;

}



.enroll-photo img {

    width: 100%;

    display: block;

    border-radius: 18px;

    object-fit: cover;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .15);

}



@media(max-width:992px) {



    .enroll-layout {

        grid-template-columns: 1fr;

    }



    .enroll-photo {

        order: -1;

    }



    .enroll-title {

        font-size: 38px;

    }



}



@media(max-width:576px) {



    #enroll-section {

        padding: 70px 0;

    }



    .enroll-title {

        font-size: 30px;

    }



    .enroll-description {

        font-size: 16px;

    }



}

/*************/

/* Bootstrap backdrop */

.modal-backdrop {

    z-index: 1050 !important;

}



/* Bootstrap modal */

.modal {

    z-index: 1060 !important;

}



/* Modal dialog */

.modal-dialog {

    position: relative;

    z-index: 1065;

}



/* Flatpickr calendar */

.flatpickr-calendar {

    z-index: 999999 !important;

}



/* Don't override Bootstrap overflow */

.modal-content {

    overflow: hidden;

}



a,

a:hover,

a:focus,

a:active,

a:visited {

    text-decoration: none !important;

}