/* Basic Reset & Global Styles */
:root {
    --primary-color: #005A9C; /* Professional Blue */
    --secondary-color: #00AEEF; /* Lighter, Action Blue */
    --accent-color: #FFC107; /* Yellow for highlights/warnings if needed */
    --text-color: #333;
    --light-text-color: #f4f4f4;
    --bg-color: #FFFFFF;
    --light-gray-bg: #f9f9f9;
    --border-color: #ddd;
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --font-primary: 'Roboto', 'Open Sans', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    font-size: 16px;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 60px 0;
}

.section:nth-child(even) {
    background-color: var(--light-gray-bg);
}

h1, h2, h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    line-height: 1.3;
}

h1 { font-size: 2.8rem; text-align: center;}
h2 { font-size: 2.2rem; text-align: center; margin-bottom: 30px;}
h3 { font-size: 1.6rem; }

p {
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: var(--secondary-color);
}

a:hover {
    color: var(--primary-color);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.cta-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--light-text-color);
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: 2px solid var(--primary-color);
    margin: 5px;
}

.cta-button:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--light-text-color);
    transform: translateY(-2px);
}

.cta-button.secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.cta-button.secondary:hover {
    background-color: var(--primary-color);
    color: var(--light-text-color);
}

.cta-button-small {
    padding: 8px 18px;
    font-size: 0.9rem;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.cta-button-small:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.text-center {
    text-align: center;
}
.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


/* Header & Navigation */
#header {
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary-color);
}

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

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

.nav-links a {
    color: var(--text-color);
    font-weight: 500;
    padding: 5px 0;
    position: relative;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}
.nav-links a:hover::after, .nav-links a.active::after {
    width: 100%;
}

.nav-contact-btn {
    background-color: var(--secondary-color);
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.nav-contact-btn:hover {
    background-color: var(--primary-color);
}

.hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.8rem;
    cursor: pointer;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(0, 90, 156, 0.8), rgba(0, 90, 156, 0.7)), url('https://via.placeholder.com/1920x1080.png?text=IT+Training+Background') no-repeat center center/cover;
    color: var(--light-text-color);
    height: calc(100vh - 70px); /* Adjust based on header height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hero-section .container {
    max-width: 800px;
}
.hero-section h1 {
    color: var(--light-text-color);
    font-size: 3.5rem;
    margin-bottom: 1rem;
}
.hero-section h2 {
    color: var(--light-text-color);
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 2rem;
}
.hero-section p {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
}

/* About Us Section */
.about-content {
    display: flex;
    gap: 30px;
    align-items: center;
}
.about-text {
    flex: 1;
}
.about-text ul {
    list-style: none;
    padding-left: 0;
}
.about-text ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.about-text ul li i {
    color: var(--secondary-color);
    margin-right: 10px;
    font-size: 1.2rem;
}
.about-image {
    flex: 1;
    max-width: 450px;
}
.about-image img {
    border-radius: 8px;
    box-shadow: var(--box-shadow);
}


/* Courses Section */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.course-card {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.course-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow);
}
.course-card img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 15px;
}
.course-card h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}
.course-card p {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 15px;
    min-height: 50px; /* Adjust as needed */
}


/* Contact Section */
.contact-wrapper {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}
.contact-info, .contact-map {
    flex: 1;
    min-width: 300px;
}
.contact-info h3, .contact-map h3 {
    margin-bottom: 15px;
    color: var(--primary-color);
}
.contact-info p {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.contact-info p i {
    margin-right: 10px;
    color: var(--secondary-color);
    width: 20px; /* Ensure alignment */
    text-align: center;
}
.social-media {
    margin-top: 20px;
}
.social-media a {
    font-size: 1.8rem;
    margin-right: 15px;
    color: var(--primary-color);
    transition: color 0.3s ease;
}
.social-media a:hover {
    color: var(--secondary-color);
}
.contact-map iframe {
    border-radius: 8px;
    box-shadow: var(--box-shadow);
}

/* Footer */
#footer {
    background-color: var(--primary-color);
    color: var(--light-text-color);
    text-align: center;
    padding: 20px 0;
}
#footer p {
    margin-bottom: 5px;
}

/* Floating Action Buttons (Mobile Only) */
.floating-buttons-mobile {
    display: none; /* Hidden by default, shown via media query */
    position: fixed;
    bottom: 20px;
    width: 100%;
    padding: 0 15px;
    z-index: 998; /* Below modal, above most content */
    justify-content: space-between;
}

.fab-whatsapp, .fab-call {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}
.fab-whatsapp:hover, .fab-call:hover {
    transform: scale(1.1);
}

.fab-whatsapp {
    background-color: #25D366; /* WhatsApp Green */
    position: fixed; /* Individual fixed positioning */
    bottom: 20px;
    left: 20px;
}

.fab-call {
    background-color: var(--secondary-color); /* Or a distinct call color */
    position: fixed;
    bottom: 20px;
    right: 20px;
}


/* Floating Contact Icon (All Devices) */
.floating-contact-icon {
    position: fixed;
    bottom: 20px;
    right: 20px; /* Default position for desktop */
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 999;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.floating-contact-icon:hover {
    background-color: var(--secondary-color);
    transform: scale(1.05);
}


/* Contact Modal */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1001; /* Above everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6); /* Dim background */
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 25px;
    border: 1px solid #888;
    width: 90%;
    max-width: 550px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-modal-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
}

.close-modal-btn:hover,
.close-modal-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-content h3 {
    text-align: center;
    margin-bottom: 5px;
    color: var(--primary-color);
}
.modal-content p {
    text-align: center;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #666;
}

.modal-contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 1rem;
}
.modal-contact-item i {
    color: var(--secondary-color);
    margin-right: 12px;
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
}
.modal-contact-item a {
    color: var(--text-color);
}
.modal-contact-item a:hover {
    text-decoration: underline;
}

.modal-social-media {
    text-align: center;
    margin: 20px 0;
}
.modal-social-media a {
    font-size: 1.6rem;
    margin: 0 10px;
    color: var(--primary-color);
}
.modal-social-media a:hover {
    color: var(--secondary-color);
}

.modal-map {
    margin: 20px 0;
    border-radius: 6px;
    overflow: hidden; /* To clip iframe corners */
}
.modal-map iframe {
    width: 100%;
    height: 180px; /* Adjust as needed */
}

.modal-cta {
    text-align: center;
    margin-top: 20px;
}
.modal-cta .cta-button {
    margin: 5px;
}


/* Responsive Design */
@media (max-width: 768px) {
    h1 { font-size: 2.2rem; }
    .hero-section h1 { font-size: 2.5rem; }
    .hero-section h2 { font-size: 1.4rem; }
    h2 { font-size: 1.8rem; }

    .nav-links {
        display: none; /* Hidden by default on mobile */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 65px; /* Adjust based on header height */
        left: 0;
        background-color: var(--bg-color);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        padding-bottom: 10px;
    }
    .nav-links.active {
        display: flex; /* Shown when hamburger is clicked */
    }
    .nav-links li {
        margin: 10px 0;
        text-align: center;
    }
    .nav-links .nav-contact-btn {
        display: block;
        margin: 10px auto;
    }
    .hamburger {
        display: block;
    }

    .about-content {
        flex-direction: column;
    }
    .about-image {
        margin-top: 20px;
        max-width: 100%;
    }

    .contact-wrapper {
        flex-direction: column;
    }

    /* Show mobile FABs, hide desktop floating contact icon */
    .floating-buttons-mobile {
        display: flex; /* This will show them */
    }
    /* On mobile, the general .floating-contact-icon is hidden if we want dedicated call/whatsapp buttons.
       If we want all three, we need to adjust its position (e.g., bottom center).
       For this setup, let's assume the two FABs are enough and the modal is triggered from nav/other buttons.
       Or, we can keep it and adjust its position if it's meant to be the main pop-out trigger.
       Let's adjust it for mobile to be center bottom, slightly above the other two if they are also visible.
    */
    .floating-contact-icon {
        /* Example: position it above the other two if all are shown */
        /* bottom: 90px; */
        /* right: 50%; */
        /* transform: translateX(50%); */

        /* For simplicity, let's keep it at right, but perhaps smaller or adjust if it clashes */
        /* For this requirement, the call/whatsapp are separate and the floating-contact-icon is the modal trigger */
         right: 20px; /* Keep it on the right */
         bottom: 90px; /* Move it up to avoid clash with call button */
    }
    .fab-call {
        bottom: 20px;
        right: 20px;
    }
    .fab-whatsapp {
        bottom: 20px;
        left: 20px;
    }

    .modal-content {
        padding: 20px;
        max-height: 90vh;
        overflow-y: auto;
    }
}