/* CSS Variables */
:root {
    --primary-color   : #1A4B8C;
    --secondary-color : #E67E22;
    --light-color     : #F8F9FA;
    --dark-color      : #343A40;
    --text-color      : #333;
    --section-padding : 80px 0;
    --transition      : all 0.3s ease;
    --shadow-sm       : 0 5px 15px rgba(0, 0, 0, 0.05);
    --shadow-md       : 0 10px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg       : 0 15px 30px rgba(0, 0, 0, 0.1);
}

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

html {
    scroll-behavior    : smooth;
    scroll-padding-top : 70px;
}

body {
    font-family : "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    line-height : 1.6;
    color       : var(--text-color);
    overflow-x  : hidden;
}

.container {
    width     : 100%;
    max-width : 1200px;
    margin    : 0 auto;
    padding   : 0 15px;
}

/* Common Components */
.btn {
    display          : inline-block;
    padding          : 12px 30px;
    background-color : var(--secondary-color);
    color            : #FFF;
    border           : none;
    border-radius    : 30px;
    text-decoration  : none;
    font-weight      : 600;
    transition       : var(--transition);
    cursor           : pointer;
}

.btn:hover, .btn:focus {
    background-color : #D35400;
    transform        : translateY(-3px);
    box-shadow       : var(--shadow-md);
}

.section-title {
    text-align    : center;
    margin-bottom : 50px;
}

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

.section-title h2:after {
    content          : "";
    position         : absolute;
    width            : 60px;
    height           : 3px;
    background-color : var(--secondary-color);
    bottom           : -10px;
    left             : 50%;
    transform        : translateX(-50%);
}

/* Header */
header {
    background-color : #FFF;
    box-shadow       : 0 2px 10px rgba(0, 0, 0, 0.1);
    position         : fixed;
    width            : 100%;
    top              : 0;
    z-index          : 1000;
    transition       : var(--transition);
}

.header-content {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    padding         : 10px 0;
}

.logo {
    max-width : 160px;
    height    : auto;
}

.nav-links {
    display    : flex;
    list-style : none;
}

.nav-links li {
    margin-left : 30px;
}

.nav-links a {
    text-decoration : none;
    color           : var(--text-color);
    font-weight     : 500;
    transition      : color 0.3s;
    position        : relative;
}

.nav-links a:hover {
    color : var(--secondary-color);
}

.nav-links a:after {
    content          : "";
    position         : absolute;
    width            : 0;
    height           : 2px;
    bottom           : -5px;
    left             : 0;
    background-color : var(--secondary-color);
    transition       : width 0.3s;
}

.nav-links a:hover:after {
    width : 100%;
}

.menu-toggle {
    display   : none;
    cursor    : pointer;
    font-size : 24px;
}

/* Hero Section */
.hero {
    height              : 100vh;
    background          : linear-gradient(rgba(26, 75, 140, 0.8), rgba(26, 75, 140, 0.8)), url("https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80");
    background-size     : cover;
    background-position : center;
    display             : flex;
    align-items         : center;
    color               : #FFF;
    text-align          : center;
    padding-top         : 80px;
}

.hero-content {
    margin : 0 auto;
}

.hero h1 {
    font-size     : 3.5rem;
    margin-bottom : 20px;
    font-weight   : 700;
}

.hero p {
    font-size     : 1.2rem;
    margin-bottom : 30px;
    font-weight   : 300;
}

/* About Section */
.about {
    padding          : var(--section-padding);
    background-color : #FFF;
}

.about-content {
    display     : flex;
    align-items : center;
    flex-wrap   : wrap;
}

.about-text {
    flex          : 1;
    min-width     : 300px;
    padding-right : 30px;
}

.about-image {
    flex      : 1;
    min-width : 300px;
}

.about-image img {
    width         : 100%;
    border-radius : 10px;
    box-shadow    : var(--shadow-md);
}

/* Services Section */
.services {
    padding          : var(--section-padding);
    background-color : var(--light-color);
}

.services-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(300px, 1fr));
    gap                   : 30px;
}

.service-card {
    background-color : #FFF;
    padding          : 30px;
    border-radius    : 10px;
    box-shadow       : var(--shadow-sm);
    transition       : var(--transition);
}

.service-card:hover {
    transform  : translateY(-10px);
    box-shadow : var(--shadow-lg);
}

.service-icon {
    font-size     : 3rem;
    color         : var(--secondary-color);
    margin-bottom : 20px;
}

.service-card h3 {
    font-size     : 1.5rem;
    margin-bottom : 15px;
    color         : var(--primary-color);
}

/* Projects Section */
.projects {
    padding          : var(--section-padding);
    background-color : #FFF;
}

.projects-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(350px, 1fr));
    gap                   : 30px;
}

.project-card {
    background-color : var(--light-color);
    border-radius    : 10px;
    overflow         : hidden;
    box-shadow       : var(--shadow-sm);
    transition       : var(--transition);
}

.project-card:hover {
    transform  : translateY(-10px);
    box-shadow : var(--shadow-lg);
}

.project-image {
    height   : 200px;
    overflow : hidden;
}

.project-image img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform 0.5s;
}

.project-card:hover .project-image img {
    transform : scale(1.1);
}

.project-info {
    padding : 20px;
}

.project-info h3 {
    font-size     : 1.5rem;
    margin-bottom : 10px;
    color         : var(--primary-color);
}

.project-info a {
    color           : var(--primary-color);
    text-decoration : none;
}

/* Team Section */

.team-container {
    display        : flex;
    flex-direction : column;
    gap            : 30px;
}

.team-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(200px, 1fr));
    gap                   : 30px;
    align-items           : center;
}

.team-member {
    height           : 200px;
    flex-direction   : column;
    background-color : #FFF;
    border-radius    : 10px;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    padding          : 20px;
    box-shadow       : var(--shadow-sm);
    transition       : var(--transition);
}

.team-member img {
    max-width       : 100%;
    max-height      : 100px;
    width           : auto;
    object-fit      : contain;
    transition      : transform 0.5s;
    flex-grow       : 1;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.team-member h3 {
    color           : var(--primary-color);
    margin-top      : 15px;
    font-size       : 1.2rem;
    text-align      : center;
    width           : 100%;
    height          : 40px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    line-height     : 1.2;
}

.team-member:hover {
    transform  : translateY(-10px);
    box-shadow : var(--shadow-lg);
}

.team-member:hover img {
    transform : scale(1.1);
}

/* Partners Section */
.partners {
    padding          : var(--section-padding);
    background-color : var(--light-color);
}

.partners-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(200px, 1fr));
    gap                   : 30px;
    align-items           : center;
}

.partner-logo {
    height           : 200px;
    flex-direction   : column;
    background-color : #FFF;
    border-radius    : 10px;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    padding          : 20px;
    box-shadow       : var(--shadow-sm);
    transition       : var(--transition);
}

.partner-logo img {
    max-width       : 100%;
    max-height      : 100px;
    width           : auto;
    object-fit      : contain;
    transition      : transform 0.5s;
    flex-grow       : 1;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.partner-logo h3 {
    margin-top      : 15px;
    font-size       : 1.2rem;
    text-align      : center;
    width           : 100%;
    height          : 40px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    line-height     : 1.2;
}

.partner-logo h3 a {
    color           : var(--primary-color);
    text-decoration : none;
    transition      : var(--transition);
    white-space     : nowrap;
    overflow        : hidden;
    text-overflow   : ellipsis;
    max-width       : 100%;
}

.partner-logo h3 a:hover {
    color : var(--secondary-color);
}

.partner-logo:hover {
    transform  : translateY(-10px);
    box-shadow : var(--shadow-lg);
}

.partner-logo:hover img {
    transform : scale(1.1);
}

.partners-container {
    display        : flex;
    flex-direction : column;
    gap            : 30px;
}

.partners-more {
    display         : flex;
    justify-content : center;
    margin-top      : 20px;
}

/* Newsfeed Section */
.newsfeed {
    padding          : var(--section-padding);
    background-color : var(--light-color);
}

.newsfeed-container {
    display        : flex;
    flex-direction : column;
    gap            : 30px;
}

.news-filters {
    display         : flex;
    justify-content : center;
    gap             : 15px;
    flex-wrap       : wrap;
    margin-bottom   : 10px;
}

.news-filter {
    padding          : 8px 16px;
    background-color : #FFF;
    border           : 2px solid var(--primary-color);
    border-radius    : 30px;
    color            : var(--primary-color);
    font-weight      : 600;
    cursor           : pointer;
    transition       : var(--transition);
}

.news-filter.active,
.news-filter:hover {
    background-color : var(--primary-color);
    color            : #FFF;
}

.news-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(350px, 1fr));
    gap                   : 30px;
}

.news-card {
    background-color : #FFF;
    border-radius    : 10px;
    overflow         : hidden;
    box-shadow       : var(--shadow-sm);
    transition       : var(--transition);
    display          : flex;
    flex-direction   : column;
    height           : 100%;
}

.news-card:hover {
    transform  : translateY(-10px);
    box-shadow : var(--shadow-lg);
}

.news-image {
    height   : 200px;
    overflow : hidden;
}

.news-image img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform 0.5s;
}

.news-card:hover .news-image img {
    transform : scale(1.1);
}

.news-content {
    padding        : 20px;
    flex-grow      : 1;
    display        : flex;
    flex-direction : column;
}

.news-meta {
    display         : flex;
    justify-content : space-between;
    margin-bottom   : 10px;
    font-size       : 0.9rem;
    color           : #777;
}

.news-category {
    background-color : var(--primary-color);
    color            : #FFF;
    padding          : 3px 10px;
    border-radius    : 15px;
    font-size        : 0.8rem;
    text-transform   : uppercase;
}

.news-title {
    font-size     : 1.3rem;
    margin-bottom : 10px;
    color         : var(--primary-color);
}

.news-excerpt {
    margin-bottom : 15px;
    color         : var(--text-color);
    flex-grow     : 1;
}

.news-link {
    align-self      : flex-start;
    color           : var(--secondary-color);
    font-weight     : 600;
    text-decoration : none;
    transition      : var(--transition);
}

.news-link:hover {
    color : var(--primary-color);
}

.news-more {
    display         : flex;
    justify-content : center;
    margin-top      : 20px;
}

/* Contact Section */
.contact {
    padding       : var(--section-padding);
    border-radius : 14px;
    max-width     : 600px;
    margin        : 40px auto 0;
    text-align    : center;
}

.contact-container {
    display   : flex;
    flex-wrap : wrap;
    gap       : 30px;
}

.contact-info {
    flex      : 1;
    min-width : 300px;
}

.contact-item {
    display        : flex;
    align-items    : center;
    margin-bottom  : 20px;
    flex-direction : column;
}

.contact-icon {
    font-size : 1.5rem;
    color     : var(--secondary-color);
}

.contact h3 {
    margin-top    : 0;
    margin-bottom : 12px;
    font-size     : 1.3rem;
}

.contact p {
    margin    : 0 0 10px;
    font-size : 1.07rem;
}

.contact a {
    text-decoration : underline;
    font-weight     : bold;
    color           : var(--primary-color);
}

/* Footer */
footer {
    background-color : var(--dark-color);
    color            : #FFF;
    padding          : 50px 0 20px;
}

.footer-content {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-between;
    margin-bottom   : 30px;
}

.footer-column {
    flex          : 1;
    min-width     : 250px;
    margin-bottom : 30px;
}

.footer-column h3 {
    font-size     : 1.3rem;
    margin-bottom : 20px;
    color         : var(--secondary-color);
}

.footer-column .logo {
    max-width : 160px;
    filter    : brightness(0) invert(1);
}

.footer-links {
    list-style : none;
}

.footer-links li {
    margin-bottom : 10px;
}

.footer-links a {
    color           : #DDD;
    text-decoration : none;
    transition      : color 0.3s;
}

.footer-links a:hover {
    color : var(--secondary-color);
}

.contact-item a:hover {
    color : var(--secondary-color);
}

.social-links {
    display : flex;
    gap     : 15px;
}

.social-links a {
    display          : inline-flex;
    align-items      : center;
    justify-content  : center;
    width            : 40px;
    height           : 40px;
    background-color : rgba(255, 255, 255, 0.1);
    color            : #FFF;
    border-radius    : 50%;
    transition       : var(--transition);
}

.social-links a:hover {
    background-color : var(--secondary-color);
    transform        : translateY(-3px);
}

.copyright {
    text-align  : center;
    padding-top : 20px;
    border-top  : 1px solid rgba(255, 255, 255, 0.1);
    font-size   : 0.9rem;
    color       : #AAA;
}

/* Animations */
.fade-in {
    opacity    : 0;
    transform  : translateY(20px);
    transition : opacity 0.6s, transform 0.6s;
}

.fade-in.active {
    opacity   : 1;
    transform : translateY(0);
}

/* Responsive Design */
@media (max-width : 992px) {
    .hero h1 {
        font-size : 2.8rem;
    }

    .about-content {
        flex-direction : column;
    }

    .about-text {
        padding-right : 0;
        margin-bottom : 30px;
    }
}

@media (max-width : 768px) {
    .menu-toggle {
        display : block;
    }

    .nav-links {
        position         : fixed;
        top              : 70px;
        left             : -100%;
        width            : 100%;
        height           : calc(100vh - 70px);
        background-color : #FFF;
        flex-direction   : column;
        align-items      : center;
        justify-content  : center;
        transition       : left 0.3s;
    }

    .nav-links.active {
        left : 0;
    }

    .nav-links li {
        margin : 15px 0;
    }

    .hero h1 {
        font-size : 2.2rem;
    }

    .section-title h2 {
        font-size : 2rem;
    }

    .news-grid {
        grid-template-columns : repeat(auto-fill, minmax(300px, 1fr));
    }

    .partner-logo h3 {
        font-size : 1rem;
    }

    .team-member h3 {
        font-size : 1rem;
    }
}

@media (max-width : 576px) {
    .hero h1 {
        font-size : 1.8rem;
    }

    .btn {
        padding : 10px 20px;
    }

    .projects-grid,
    .news-grid {
        grid-template-columns : 1fr;
    }
}