.elementor-803 .elementor-element.elementor-element-5049dce{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-803 .elementor-element.elementor-element-5049dce.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-803 .elementor-element.elementor-element-573badc > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-803 .elementor-element.elementor-element-8352d24{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-803 .elementor-element.elementor-element-264dbd0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-55px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-803 .elementor-element.elementor-element-04bc14c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-803 .elementor-element.elementor-element-424a1c5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-803 .elementor-element.elementor-element-424a1c5.e-con{--flex-grow:0;--flex-shrink:0;}@media(min-width:768px){.elementor-803 .elementor-element.elementor-element-5049dce{--width:112.277%;}.elementor-803 .elementor-element.elementor-element-424a1c5{--width:119.811%;}}/* Start custom CSS for html, class: .elementor-element-573badc *//* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Section */
.page-header {
    background: 
        linear-gradient(135deg, rgba(235, 31, 39, 0.9) 0%, rgba(196, 30, 58, 0.9) 100%),
        url('https://images.unsplash.com/photo-1481627834876-b7833e8f5570?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;
    color: #ffffff;
    padding: 80px 0 60px;
    text-align: center;
    position: relative;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><polygon fill="%23ffffff" fill-opacity="0.05" points="0,20 100,0 100,20"/></svg>') repeat-x;
    background-size: 100px 20px;
}

.page-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    position: relative;
    z-index: 1;
}

.page-subtitle {
    font-size: 1.2rem;
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Responsive Design for Header */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .page-title {
        font-size: 2.2rem;
    }
    
    .page-subtitle {
        font-size: 1rem;
    }
}

/*==============================================================================================================================*//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-43d6c97 *//* Vision & Mission Component CSS - Astra Theme Colors */

/* CSS Variables for Astra Theme Colors */
:root {
    --theme-color: #eb1f27;
    --accent-color: #eb1f27;
    --link-color: #eb1f27;
    --link-hover-color: #2c3e50;
    --heading-color: #ffffff;
    --body-text-color: #34495e;
    --border-color: #e0e0e0;
    --site-background: #ffffff;
    --content-background: #ffffff;
    --button-bg-color: #eb1f27;
    --button-text-color: #ffffff;
    --button-hover-bg: #2c3e50;
    --button-hover-text: #ffffff;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.7;
    color: var(--body-text-color);
    background-color: var(--site-background);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Vision & Mission Section */
.vision-mission-section {
    padding: 60px 0;
    background-color: var(--content-background);
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-title {
    font-size: 2.5rem;
    color: var(--theme-color) !important;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent-color);
    border-radius: 2px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--body-text-color);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Vision Mission Grid */
.vision-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
}

/* Vision & Mission Cards */
.vision-card, 
.mission-card {
    background: var(--content-background);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    border-top: 4px solid var(--theme-color);
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vision-card:hover, 
.mission-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* Card Titles */
.card-title {
    font-size: 1.8rem;
    color: var(--theme-color);
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-icon {
    font-size: 1.5em;
}

/* Card Content */
.card-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--body-text-color);
}

.card-content p {
    margin-bottom: 16px;
}

.card-content p:last-child {
    margin-bottom: 0;
}

/* Highlight Box */
.highlight-box {
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--link-hover-color) 100%);
    color: var(--heading-color);
    padding: 30px;
    border-radius: 12px;
    margin-top: 20px;
    margin-bottom: -20px;
    text-align: center;
    
    box-shadow: 0 8px 25px rgba(235, 31, 39, 0.2);
}

.highlight-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.highlight-content {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.95;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .vision-mission-section {
        padding: 40px 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
    }
    
    .vision-mission-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .vision-card, 
    .mission-card {
        padding: 30px;
    }
    
    .card-title {
        font-size: 1.6rem;
    }
    
    .card-content {
        font-size: 1rem;
    }
    
    .highlight-box {
        padding: 25px;
        margin: 25px 0;
    }
    
    .highlight-title {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 1.8rem;
    }
    
    .card-title {
        font-size: 1.4rem;
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    
    .card-icon {
        font-size: 2rem;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3ed2cec *//* Teachers Team Component CSS - Astra Theme Colors */

/* CSS Variables for Astra Theme Colors */
:root {
    --theme-color: #eb1f27;
    --accent-color: #eb1f27;
    --link-color: #eb1f27;
    --link-hover-color: #2c3e50;
    --heading-color: #ffffff;
    --body-text-color: #34495e;
    --border-color: #e0e0e0;
    --site-background: #ffffff;
    --content-background: #ffffff;
    --button-bg-color: #eb1f27;
    --button-text-color: #ffffff;
    --button-hover-bg: #2c3e50;
    --button-hover-text: #ffffff;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.7;
    color: var(--body-text-color);
    background-color: var(--site-background);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Teachers Section */
.teachers-section {
    padding: 60px 0;
    background-color: var(--content-background);
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-title {
    font-size: 2.5rem;
    color: var(--theme-color);
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent-color);
    border-radius: 2px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--body-text-color);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Teachers Grid - Even Distribution */
.teachers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 cards per row on desktop */
    gap: 30px;
    margin-top: 50px;
    justify-items: center;
}

/* Teacher Cards */
.teacher-card {
    background: var(--content-background);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 350px; /* Consistent card width */
}

.teacher-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* Teacher Avatar */
.teacher-avatar {
    width: 100%;
    height: 250px;
    background: linear-gradient(135deg, var(--theme-color), var(--link-hover-color));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--heading-color);
    position: relative;
}

/* Teacher Info */
.teacher-info {
    padding: 25px;
}

.teacher-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--theme-color) !important;
    margin-bottom: 8px;
    text-align: center;
}

.teacher-title {
    font-size: 1rem;
    color: var(--theme-color);
    font-weight: 500;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* Teacher Qualifications */
.teacher-qualifications {
    list-style: none;
    padding: 0;
}

.teacher-qualifications li {
    font-size: 0.95rem;
    color: var(--body-text-color);
    margin-bottom: 6px;
    padding-left: 20px;
    position: relative;
    line-height: 1.4;
}

.teacher-qualifications li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--theme-color);
    font-weight: bold;
    font-size: 1rem;
}

.teacher-qualifications li:last-child {
    margin-bottom: 0;
}

/* Responsive Design - Even Distribution Maintained */

/* Large Desktop (1200px+) - 2 cards per row */
@media (min-width: 1200px) {
    .teachers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .teacher-card {
        max-width: 400px;
    }
}

/* Desktop/Tablet (768px - 1199px) - 2 cards per row */
@media (min-width: 768px) and (max-width: 1199px) {
    .container {
        padding: 0 15px;
    }
    
    .teachers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .teacher-card {
        max-width: 320px;
    }
    
    .teacher-avatar {
        height: 220px;
        font-size: 3.5rem;
    }
    
    .teacher-info {
        padding: 20px;
    }
    
    .teacher-name {
        font-size: 1.3rem;
    }
    
    .teacher-title {
        font-size: 0.95rem;
    }
    
    .teacher-qualifications li {
        font-size: 0.9rem;
    }
}

/* Mobile (767px and below) - 1 card per row */
@media (max-width: 767px) {
    .container {
        padding: 0 15px;
    }
    
    .teachers-section {
        padding: 40px 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
    }
    
    .teachers-grid {
        grid-template-columns: 1fr; /* 1 card per row on mobile */
        gap: 25px;
        margin-top: 40px;
    }
    
    .teacher-card {
        max-width: 100%;
    }
    
    .teacher-avatar {
        height: 200px;
        font-size: 3rem;
    }
    
    .teacher-info {
        padding: 20px;
    }
    
    .teacher-name {
        font-size: 1.2rem;
    }
    
    .teacher-title {
        font-size: 0.9rem;
    }
    
    .teacher-qualifications li {
        font-size: 0.85rem;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .section-title {
        font-size: 1.8rem;
    }
    
    .teacher-avatar {
        height: 180px;
        font-size: 2.5rem;
    }
    
    .teacher-info {
        padding: 15px;
    }
    
    .teacher-name {
        font-size: 1.1rem;
    }
    
    .teacher-title {
        font-size: 0.85rem;
        margin-bottom: 12px;
    }
    
    .teacher-qualifications li {
        font-size: 0.8rem;
        margin-bottom: 5px;
    }
}

/* Ensure equal height cards in each row */
@media (min-width: 768px) {
    .teachers-grid {
        align-items: start; /* Align cards to top of grid cells */
    }
    
    .teacher-card {
        height: 100%; /* Make all cards in row same height */
        display: flex;
        flex-direction: column;
    }
    
    .teacher-info {
        flex-grow: 1; /* Allow info section to expand */
        display: flex;
        flex-direction: column;
    }
    
    .teacher-qualifications {
        flex-grow: 1; /* Push qualifications to fill space */
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2e35211 *//* Achievements & Commitments Component CSS - Astra Theme Colors */

/* CSS Variables for Astra Theme Colors */
:root {
    --theme-color: #eb1f27;
    --accent-color: #eb1f27;
    --link-color: #eb1f27;
    --link-hover-color: #2c3e50;
    --heading-color: #ffffff;
    --body-text-color: #34495e;
    --border-color: #e0e0e0;
    --site-background: #ffffff;
    --content-background: #ffffff;
    --button-bg-color: #eb1f27;
    --button-text-color: #ffffff;
    --button-hover-bg: #2c3e50;
    --button-hover-text: #ffffff;
    
    /* Additional bright colors for variety */
    --bright-blue: #3498db;
    --bright-green: #2ecc71;
    --bright-orange: #f39c12;
    --bright-purple: #9b59b6;
    --bright-teal: #1abc9c;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.7;
    color: var(--body-text-color);
    background-color: var(--site-background);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Achievements Section */
.achievements-section {
    padding: 60px 0;
    background-color: var(--content-background);
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-title {
    font-size: 2.5rem;
    color: var(--theme-color);
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent-color);
    border-radius: 2px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--body-text-color);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Achievements Grid - Even Distribution */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cards per row on desktop */
    gap: 30px;
    margin-top: 50px;
    justify-items: center;
}

/* Achievement Items */
.achievement-item {
    background: var(--content-background);
    padding: 35px 25px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    width: 100%;
    max-width: 320px;
    position: relative;
    overflow: hidden;
}

.achievement-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--theme-color), var(--bright-blue), var(--bright-green));
    transition: height 0.3s ease;
}

.achievement-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.achievement-item:hover::before {
    height: 6px;
}

/* Colorful Achievement Icons */
.achievement-icon {
    font-size: 4rem;
    margin-bottom: 25px;
    display: inline-block;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
    transition: all 0.3s ease;
    position: relative;
}

/* Individual icon colors and effects */
.achievement-item:nth-child(1) .achievement-icon {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(255, 179, 0, 0.3);
}

.achievement-item:nth-child(2) .achievement-icon {
    color: var(--bright-blue);
    text-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
}

.achievement-item:nth-child(3) .achievement-icon {
    color: var(--bright-purple);
    text-shadow: 0 2px 4px rgba(155, 89, 182, 0.3);
}

.achievement-item:nth-child(4) .achievement-icon {
    color: var(--bright-green);
    text-shadow: 0 2px 4px rgba(46, 204, 113, 0.3);
}

.achievement-item:nth-child(5) .achievement-icon {
    color: var(--theme-color);
    text-shadow: 0 2px 4px rgba(235, 31, 39, 0.3);
}

.achievement-item:nth-child(6) .achievement-icon {
    background: linear-gradient(135deg, #ffd700, #ff6b6b, #4ecdc4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
}

.achievement-item:hover .achievement-icon {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.2));
}

/* Achievement Titles */
.achievement-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--link-hover-color);
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Achievement Descriptions */
.achievement-desc {
    color: var(--body-text-color);
    line-height: 1.6;
    font-size: 1rem;
}

/* Responsive Design - Even Distribution Maintained */

/* Large Desktop (1200px+) - 3 cards per row */
@media (min-width: 1200px) {
    .achievements-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 35px;
    }
    
    .achievement-item {
        max-width: 350px;
        padding: 40px 30px;
    }
}

/* Desktop/Large Tablet (900px - 1199px) - 3 cards per row */
@media (min-width: 900px) and (max-width: 1199px) {
    .achievements-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
    
    .achievement-item {
        max-width: 300px;
        padding: 30px 20px;
    }
    
    .achievement-icon {
        font-size: 3.5rem;
        margin-bottom: 20px;
    }
    
    .achievement-title {
        font-size: 1.3rem;
    }
    
    .achievement-desc {
        font-size: 0.95rem;
    }
}

/* Tablet (600px - 899px) - 2 cards per row */
@media (min-width: 600px) and (max-width: 899px) {
    .container {
        padding: 0 15px;
    }
    
    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .achievement-item {
        max-width: 100%;
        padding: 30px 20px;
    }
    
    .achievement-icon {
        font-size: 3.5rem;
        margin-bottom: 20px;
    }
    
    .achievement-title {
        font-size: 1.3rem;
    }
    
    .achievement-desc {
        font-size: 0.95rem;
    }
}

/* Mobile (599px and below) - 1 card per row */
@media (max-width: 599px) {
    .container {
        padding: 0 15px;
    }
    
    .achievements-section {
        padding: 40px 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
    }
    
    .achievements-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 40px;
    }
    
    .achievement-item {
        max-width: 100%;
        padding: 25px 20px;
    }
    
    .achievement-icon {
        font-size: 3rem;
        margin-bottom: 18px;
    }
    
    .achievement-title {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }
    
    .achievement-desc {
        font-size: 0.9rem;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .section-title {
        font-size: 1.8rem;
    }
    
    .achievement-item {
        padding: 20px 15px;
    }
    
    .achievement-icon {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }
    
    .achievement-title {
        font-size: 1.1rem;
    }
    
    .achievement-desc {
        font-size: 0.85rem;
    }
}

/* Animation for icons on page load */
@keyframes iconBounce {
    0% { transform: scale(0) rotate(-180deg); }
    50% { transform: scale(1.2) rotate(-10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.achievement-icon {
    animation: iconBounce 0.6s ease-out;
}

/* Stagger the animation timing for each icon */
.achievement-item:nth-child(1) .achievement-icon { animation-delay: 0.1s; }
.achievement-item:nth-child(2) .achievement-icon { animation-delay: 0.2s; }
.achievement-item:nth-child(3) .achievement-icon { animation-delay: 0.3s; }
.achievement-item:nth-child(4) .achievement-icon { animation-delay: 0.4s; }
.achievement-item:nth-child(5) .achievement-icon { animation-delay: 0.5s; }
.achievement-item:nth-child(6) .achievement-icon { animation-delay: 0.6s; }

/* Ensure equal height cards in each row */
@media (min-width: 600px) {
    .achievements-grid {
        align-items: stretch;
    }
    
    .achievement-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .achievement-desc {
        margin-top: auto; /* Push description to bottom if needed */
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8a4c527 *//* Strategic Partners Component CSS - Astra Theme Colors */

/* CSS Variables for Astra Theme Colors */
:root {
    --theme-color: #eb1f27;
    --accent-color: #eb1f27;
    --link-color: #eb1f27;
    --link-hover-color: #2c3e50;
    --heading-color: #ffffff;
    --body-text-color: #34495e;
    --border-color: #e0e0e0;
    --site-background: #ffffff;
    --content-background: #ffffff;
    --button-bg-color: #eb1f27;
    --button-text-color: #ffffff;
    --button-hover-bg: #2c3e50;
    --button-hover-text: #ffffff;
    
    /* Additional bright colors for partners */
    --oxford-blue: #002147;
    --cambridge-blue: #a3c1ad;
    --british-red: #ce1126;
    --nat-geo-yellow: #ffcc00;
    --university-green: #2ecc71;
    --vietnam-red: #da251d;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.7;
    color: var(--body-text-color);
    background-color: var(--site-background);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Partners Section */
.partners-section {
    padding: 60px 0;
    background-color: var(--content-background);
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-title {
    font-size: 2.5rem;
    color: var(--theme-color);
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent-color);
    border-radius: 2px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--body-text-color);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Partners Grid - Even Distribution for 8 Partners */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 partners per row on desktop */
    gap: 30px;
    margin-top: 50px;
    justify-items: center;
    align-items: start;
}

/* Partner Items */
.partner-item {
    background: var(--content-background);
    padding: 35px 25px;
    border-radius: 16px;
    text-align: center;
    border: 2px solid var(--border-color);
    transition: all 0.4s ease;
    width: 100%;
    max-width: 250px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.partner-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.partner-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-color: var(--theme-color);
}

.partner-item:hover::before {
    left: 100%;
}

/* Colorful Partner Logos */
.partner-logo {
    font-size: 4rem;
    margin-bottom: 25px;
    display: inline-block;
    transition: all 0.4s ease;
    position: relative;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

/* Individual partner logo colors */
.partner-item:nth-child(1) .partner-logo {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(30, 58, 138, 0.3);
}

.partner-item:nth-child(2) .partner-logo {
    color: #059669;
    text-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
}

.partner-item:nth-child(3) .partner-logo {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

.partner-item:nth-child(4) .partner-logo {
    color: #7c3aed;
    text-shadow: 0 2px 4px rgba(124, 58, 237, 0.3);
}

.partner-item:nth-child(5) .partner-logo {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(30, 64, 175, 0.3);
}

.partner-item:nth-child(6) .partner-logo {
    background: linear-gradient(135deg, #059669, #34d399);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
}

.partner-item:nth-child(7) .partner-logo {
    background: linear-gradient(135deg, #dc2626, #fbbf24);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

.partner-item:nth-child(8) .partner-logo {
    background: linear-gradient(135deg, #dc2626, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

.partner-item:hover .partner-logo {
    transform: scale(1.2) rotate(10deg);
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2));
}

/* Partner Names */
.partner-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--link-hover-color);
    margin-bottom: 15px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.partner-item:hover .partner-name {
    color: var(--theme-color);
}

/* Partner Descriptions */
.partner-desc {
    font-size: 1rem;
    color: var(--body-text-color);
    line-height: 1.6;
    transition: color 0.3s ease;
}

.partner-item:hover .partner-desc {
    color: var(--link-hover-color);
}

/* Responsive Design - Even Distribution Maintained */

/* Large Desktop (1200px+) - 4 partners per row */
@media (min-width: 1200px) {
    .partners-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
    }
    
    .partner-item {
        max-width: 250px;
        padding: 35px 25px;
    }
}

/* Desktop/Large Tablet (900px - 1199px) - 4 partners per row */
@media (min-width: 900px) and (max-width: 1199px) {
    .partners-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    
    .partner-item {
        max-width: 220px;
        padding: 25px 15px;
    }
    
    .partner-logo {
        font-size: 3rem;
        margin-bottom: 15px;
    }
    
    .partner-name {
        font-size: 1.1rem;
    }
    
    .partner-desc {
        font-size: 0.85rem;
    }
}

/* Tablet (600px - 899px) - 2 partners per row */
@media (min-width: 600px) and (max-width: 899px) {
    .container {
        padding: 0 15px;
    }
    
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .partner-item {
        max-width: 100%;
        padding: 30px 20px;
    }
    
    .partner-logo {
        font-size: 3.5rem;
        margin-bottom: 20px;
    }
    
    .partner-name {
        font-size: 1.2rem;
    }
    
    .partner-desc {
        font-size: 0.95rem;
    }
}

/* Mobile (599px and below) - 1 partner per row */
@media (max-width: 599px) {
    .container {
        padding: 0 15px;
    }
    
    .partners-section {
        padding: 40px 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
    }
    
    .partners-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 40px;
    }
    
    .partner-item {
        max-width: 100%;
        padding: 25px 20px;
    }
    
    .partner-logo {
        font-size: 3rem;
        margin-bottom: 18px;
    }
    
    .partner-name {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }
    
    .partner-desc {
        font-size: 0.9rem;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .section-title {
        font-size: 1.8rem;
    }
    
    .partner-item {
        padding: 20px 15px;
    }
    
    .partner-logo {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }
    
    .partner-name {
        font-size: 1rem;
    }
    
    .partner-desc {
        font-size: 0.85rem;
    }
}

/* Animation for logos on page load */
@keyframes logoFloat {
    0% { 
        transform: translateY(20px); 
        opacity: 0; 
    }
    50% { 
        transform: translateY(-5px); 
        opacity: 0.8; 
    }
    100% { 
        transform: translateY(0); 
        opacity: 1; 
    }
}

.partner-logo {
    animation: logoFloat 0.8s ease-out;
}

/* Stagger the animation timing for each logo */
.partner-item:nth-child(1) .partner-logo { animation-delay: 0.1s; }
.partner-item:nth-child(2) .partner-logo { animation-delay: 0.2s; }
.partner-item:nth-child(3) .partner-logo { animation-delay: 0.3s; }
.partner-item:nth-child(4) .partner-logo { animation-delay: 0.4s; }
.partner-item:nth-child(5) .partner-logo { animation-delay: 0.5s; }
.partner-item:nth-child(6) .partner-logo { animation-delay: 0.6s; }
.partner-item:nth-child(7) .partner-logo { animation-delay: 0.7s; }
.partner-item:nth-child(8) .partner-logo { animation-delay: 0.8s; }

/* Ensure equal height cards in each row */
@media (min-width: 600px) {
    .partners-grid {
        align-items: stretch;
    }
    
    .partner-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .partner-name {
        margin-top: auto; /* Push name towards center */
    }
    
    .partner-desc {
        margin-top: auto; /* Push description to bottom */
    }
}

/* Additional hover effects */
.partner-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--theme-color), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.partner-item:hover::after {
    opacity: 0.05;
}/* End custom CSS */