/* ===========================
   GLOBAL SETTINGS
=========================== */


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


html {
    scroll-behavior: smooth;
}


body {

    font-family: 'Poppins', sans-serif;
    color: #333;
    line-height: 1.6;
    background: rgb(5, 245, 245);

}


.container {

    width: 90%;
    max-width: 1200px;
    margin: auto;

}


.section {

    padding: 80px 0;

}



.section-title {

    text-align: center;
    margin-bottom: 50px;

}


.section-title h2 {

    font-size: 38px;
    color: #174a7c;
    margin-bottom: 10px;

}


.section-title p {

    color: #666;
    font-size: 16px;

}






/* ===========================
   NAVIGATION
=========================== */


.header {

    position: sticky;
    top: 0;
    z-index: 1000;
    background: white;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);

}



.navbar {

    width: 90%;
    max-width: 1200px;
    margin: auto;

    height: 75px;

    display: flex;
    justify-content: space-between;
    align-items: center;

}



.logo h2 {

    color: #174a7c;
    font-size: 24px;

}



.nav-links {

    display: flex;
    list-style: none;
    gap: 30px;

}



.nav-links a {

    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: .3s;

}



.nav-links a:hover {

    color: #1aa36f;

}



.menu-toggle {

    display: none;
    font-size: 28px;
    cursor: pointer;

}






/* ===========================
   HERO SECTION
=========================== */


.hero {

    min-height: 90vh;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding: 70px 8%;

    background:

    linear-gradient(
    135deg,
    #0367a5,
    #ffffff
    );

}




.hero-content {

    flex: 1;

}



.hero-content h1 {

    font-size: 48px;
    line-height: 1.2;
    color: #174a7c;
    margin-bottom: 20px;

}



.hero-content p {

    font-size: 18px;
    margin-bottom: 30px;
    color: #555;

}



.btn {

    display: inline-block;

    background: #1aa36f;
    color:white;

    padding:14px 30px;

    border-radius:30px;

    text-decoration:none;

    border:none;

    cursor:pointer;

    font-size:16px;

    transition:.3s;

}



.btn:hover {

    background:#148457;

    transform:translateY(-3px);

}



.hero-image {

    flex:1;
    text-align:center;

}



.hero-image img {

    width:100%;
    max-width:450px;

    border-radius:20px;

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

}








/* ===========================
   ABOUT SECTION
=========================== */


.about {

    background:white;

}



.about-content {

    display:flex;
    gap:40px;
    align-items:center;

}



.about-text {

    flex:1;

}



.about-text p {

    margin-bottom:20px;

}



.about-box {

    flex:1;

    padding:35px;

    background:#f3faf7;

    border-radius:15px;

    border-left:5px solid #1aa36f;

}



.about-box h3 {

    color:#174a7c;

    margin-bottom:15px;

}








/* ===========================
   PROGRAMS
=========================== */


.programs {

    background:#f8fbfd;

}



.program-grid {

    display:grid;

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

    gap:30px;

}



.program-card {

    background:white;

    padding:35px;

    border-radius:15px;

    text-align:center;

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

    transition:.3s;

}



.program-card:hover {

    transform:translateY(-8px);

}



.program-card h3 {

    color:#174a7c;

    margin-bottom:15px;

}








/* ===========================
   WHY CHOOSE US
   GOLD BORDER CARDS
=========================== */


.why-grid {

    display:grid;

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

    gap:25px;

}



.why-card {

    padding:30px;

    background:white;

    text-align:center;

    border-radius:15px;


    border:3px solid #d4af37;


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


    transition:.3s;

}



.why-card:hover {

    transform:translateY(-8px);

    background:#fffdf5;

}



.why-card h3 {

    color:#174a7c;

    margin-bottom:15px;

}








/* ===========================
   GALLERY
=========================== */


.gallery {

    background:#f8fbfd;

}



.gallery-grid {

    display:grid;

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

    gap:25px;

}



.gallery-grid img {

    width:100%;

    height:250px;

    object-fit:cover;

    border-radius:15px;

    transition:.3s;

}



.gallery-grid img:hover {

    transform:scale(1.05);

}








/* ===========================
   CONTACT
=========================== */


.contact-container {

    display:flex;

    gap:50px;

}



.contact-info {

    flex:1;

}



.contact-info h3 {

    color:#174a7c;

    margin-bottom:20px;

}



.contact-info p {

    margin-bottom:12px;

}



#contact-form {

    flex:1;

    display:flex;

    flex-direction:column;

    gap:15px;

}



#contact-form input,
#contact-form textarea {


    width:100%;

    padding:15px;

    border:1px solid #ddd;

    border-radius:10px;

    font-family:inherit;

}



#contact-form input:focus,
#contact-form textarea:focus {


    outline:none;

    border-color:#1aa36f;

}








/* ===========================
   FOOTER
=========================== */


.footer {

    background:#174a7c;

    color:white;

    text-align:center;

    padding:40px 20px;

}



.footer h3 {

    font-size:25px;

    margin-bottom:10px;

}



.footer p {

    margin:8px 0;

}









/* ===========================
   RESPONSIVE DESIGN
=========================== */


@media(max-width:1000px){


.hero {

    flex-direction:column;

    text-align:center;

}



.hero-content h1 {

    font-size:38px;

}



.program-grid {

    grid-template-columns:1fr 1fr;

}



.why-grid {

    grid-template-columns:1fr 1fr;

}



.gallery-grid {

    grid-template-columns:1fr 1fr;

}


}





@media(max-width:768px){



.nav-links {


    position:absolute;

    top:75px;

    right:0;

    background:white;

    width:100%;

    flex-direction:column;

    text-align:center;

    padding:30px 0;

    display:none;

}



.nav-links.active {

    display:flex;

}



.menu-toggle {

    display:block;

}



.section-title h2 {

    font-size:30px;

}



.about-content {

    flex-direction:column;

}



.program-grid,
.why-grid,
.gallery-grid {


    grid-template-columns:1fr;

}



.contact-container {

    flex-direction:column;

}



.hero-content h1 {

    font-size:32px;

}



.hero-content p {

    font-size:16px;

}



}



@media(max-width:450px){


.logo h2 {

    font-size:18px;

}


.hero {

    padding:50px 5%;

}


}


/* ===========================
   HORIZONTAL AUTO SCROLL GALLERY
=========================== */


.gallery-slider {

    width:100%;

    max-width:900px;

    margin:auto;

    overflow:hidden;

    border-radius:15px;

}



.gallery-track {

    display:flex;

    width:max-content;

    animation: slideGallery 21s infinite linear;

}



.gallery-image {

    width:300px;

    height:220px;

    object-fit:cover;

    margin-right:20px;

    border-radius:15px;

}




@keyframes slideGallery {


from {

    transform:translateX(0);

}


to {

    transform:translateX(-960px);

}


}



@media(max-width:768px){


.gallery-image {

    width:250px;

    height:180px;

}


}