/* ===== OUR BRANCHES SECTION ===== */

.branches-section {
    padding: 80px 20px;
    background: #f5f9ff;
    font-family: Arial, sans-serif;
}

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

.branches-title h2 {
    font-size: 38px;
    color: #1a237e;
    margin-bottom: 10px;
}

.branches-title p {
    color: #666;
    font-size: 17px;
}

/* ===== CARD CONTAINER ===== */

.branches-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* ===== BRANCH CARD ===== */

.branch-card {
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.12);
    transition: 0.4s;
    animation: fadeUp 1s ease forwards;
}

.branch-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.20);
}

/* ===== IMAGE ===== */

.branch-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: 0.5s;
}

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

/* ===== CARD CONTENT ===== */

.branch-content {
    padding: 20px;
    text-align: center;
}

.branch-content h3 {
    color: #1a237e;
    font-size: 21px;
    margin-bottom: 10px;
}

.branch-content p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

/* ===== BUTTON ===== */

.branch-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: #ff9800;
    color: white;
    text-decoration: none;
    border-radius: 25px;
    transition: 0.3s;
}

.branch-btn:hover {
    background: #e68900;
    transform: scale(1.05);
}

/* ===== ANIMATION ===== */

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

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

@media(max-width: 992px) {

    .branches-container {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media(max-width: 576px) {

    .branches-container {
        grid-template-columns: 1fr;
    }

    .branches-title h2 {
        font-size: 30px;
    }

}
/* END
about */

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

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

.about-ieit{
    padding: 90px 8%;
    background: linear-gradient(135deg, #f4f8ff, #ffffff);
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}

/* Main Container */
.about-container{
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* ================= IMAGE SECTION ================= */

.about-image{
    flex: 1;
    position: relative;
    animation: slideLeft 1s ease;
}

.about-image img{
    width: 100%;
    border-radius: 20px;
    display: block;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    transition: 0.5s;
}

.about-image:hover img{
    transform: scale(1.03);
}

/* Experience Box */
.experience-box{
    position: absolute;
    bottom: -25px;
    right: -20px;
    background: #ff9800;
    color: white;
    padding: 20px 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: float 3s ease-in-out infinite;
}

.experience-box h3{
    font-size: 28px;
}

.experience-box p{
    font-size: 13px;
}

/* ================= CONTENT SECTION ================= */

.about-content{
    flex: 1;
    animation: slideRight 1s ease;
}

.about-content .small-title{
    color: #ff9800;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.about-content h2{
    font-size: 38px;
    color: #132c5b;
    margin: 10px 0 20px;
    line-height: 1.3;
}

.about-content h2 span{
    color: #ff9800;
}

.about-content p{
    color: #666;
    line-height: 1.8;
    margin-bottom: 15px;
    font-size: 15px;
}

/* Features */

.about-features{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 25px 0;
}

.feature{
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    font-weight: 500;
    color: #132c5b;
    transition: 0.3s;
}

.feature:hover{
    transform: translateY(-5px);
    background: #132c5b;
    color: white;
}

/* Button */

.about-btn{
    display: inline-block;
    padding: 13px 28px;
    background: #132c5b;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    transition: 0.4s;
    font-weight: 500;
}

.about-btn:hover{
    background: #ff9800;
    transform: translateY(-3px);
}

/* ================= ANIMATIONS ================= */

@keyframes slideLeft{

    from{
        opacity: 0;
        transform: translateX(-80px);
    }

    to{
        opacity: 1;
        transform: translateX(0);
    }

}

@keyframes slideRight{

    from{
        opacity: 0;
        transform: translateX(80px);
    }

    to{
        opacity: 1;
        transform: translateX(0);
    }

}

@keyframes float{

    0%,100%{
        transform: translateY(0);
    }

    50%{
        transform: translateY(-10px);
    }

}

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

@media(max-width: 900px){

    .about-container{
        flex-direction: column;
        gap: 50px;
    }

    .about-content h2{
        font-size: 32px;
    }

}

@media(max-width: 500px){

    .about-ieit{
        padding: 60px 20px;
    }

    .about-features{
        grid-template-columns: 1fr;
    }

    .about-content h2{
        font-size: 27px;
    }

    .experience-box{
        right: 10px;
    }

}



/*---- contact us --->
  *{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-family:Arial, Helvetica, sans-serif;
        }

        body{
            background:#f4f8fc;
        }

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

        .contact-section{
            padding:80px 8%;
            background:
                linear-gradient(
                    rgba(4,30,66,0.94),
                    rgba(7,55,95,0.94)
                ),
                url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1600&q=80");

            background-size:cover;
            background-position:center;
            background-attachment:fixed;
            color:white;
            overflow:hidden;
        }

        /* HEADING */

        .section-heading{
            text-align:center;
            margin-bottom:50px;
            animation:fadeDown 1s ease;
        }

        .section-heading span{
            color:#ffbd2e;
            font-size:16px;
            font-weight:bold;
            text-transform:uppercase;
            letter-spacing:2px;
        }

        .section-heading h2{
            font-size:42px;
            margin:10px 0;
        }

        .section-heading p{
            color:#d7e3ef;
            max-width:650px;
            margin:auto;
            line-height:1.7;
            font-size:16px;
        }


        /* MAIN WRAPPER */

        .contact-container{
            max-width:1200px;
            margin:auto;
            display:grid;
            grid-template-columns:1fr 1.2fr;
            gap:45px;
            align-items:center;
        }


        /* LEFT IMAGE */

        .contact-image{
            position:relative;
            animation:slideLeft 1.1s ease;
        }

        .contact-image img{
            width:100%;
            height:480px;
            object-fit:cover;
            border-radius:20px;
            box-shadow:0 20px 45px rgba(0,0,0,0.35);
            transition:0.5s;
        }

        .contact-image:hover img{
            transform:scale(1.03);
        }


        /* SMALL IMAGE LABEL */

        .image-info{
            position:absolute;
            bottom:25px;
            left:25px;
            right:25px;

            background:rgba(0,0,0,0.65);
            backdrop-filter:blur(8px);

            padding:20px;
            border-radius:12px;
            border-left:5px solid #ffbd2e;
        }

        .image-info h3{
            margin-bottom:8px;
            font-size:21px;
        }

        .image-info p{
            color:#e8e8e8;
            line-height:1.6;
        }


        /* RIGHT CONTACT DETAILS */

        .contact-details{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:20px;
            animation:slideRight 1.1s ease;
        }


        /* CONTACT CARDS */

        .contact-card{
            position:relative;
            background:white;
            color:#333;
            padding:28px 24px;
            min-height:190px;
            border-radius:15px;

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

            transition:
                transform 0.4s ease,
                box-shadow 0.4s ease;

            overflow:hidden;
        }


        /* TOP LINE ANIMATION */

        .contact-card::before{
            content:"";
            position:absolute;
            top:0;
            left:0;

            width:0;
            height:5px;

            background:#ffbd2e;
            transition:0.5s;
        }

        .contact-card:hover::before{
            width:100%;
        }


        .contact-card:hover{
            transform:translateY(-10px);
            box-shadow:0 20px 40px rgba(0,0,0,0.25);
        }


        /* ICON */

        .contact-icon{
            width:55px;
            height:55px;

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

            border-radius:50%;

            background:#e7f1ff;
            color:#07569b;

            font-size:27px;
            margin-bottom:18px;

            transition:0.4s;
        }


        .contact-card:hover .contact-icon{
            background:#07569b;
            color:white;
            transform:rotateY(360deg);
        }


        .contact-card h3{
            color:#063c70;
            margin-bottom:10px;
            font-size:21px;
        }


        .contact-card p,
        .contact-card a{
            color:#555;
            font-size:15px;
            line-height:1.7;
            text-decoration:none;
        }


        .contact-card a:hover{
            color:#07569b;
        }


        /* ADDRESS CARD */

        .address-card{
            grid-column:span 2;
            min-height:auto;
        }


        /* =========================
           ANIMATIONS
        ========================== */

        @keyframes fadeDown{

            from{
                opacity:0;
                transform:translateY(-40px);
            }

            to{
                opacity:1;
                transform:translateY(0);
            }

        }


        @keyframes slideLeft{

            from{
                opacity:0;
                transform:translateX(-70px);
            }

            to{
                opacity:1;
                transform:translateX(0);
            }

        }


        @keyframes slideRight{

            from{
                opacity:0;
                transform:translateX(70px);
            }

            to{
                opacity:1;
                transform:translateX(0);
            }

        }


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

        @media(max-width:900px){

            .contact-container{
                grid-template-columns:1fr;
            }

            .contact-image img{
                height:400px;
            }

        }


        @media(max-width:600px){

            .contact-section{
                padding:60px 20px;
            }

            .section-heading h2{
                font-size:32px;
            }

            .contact-details{
                grid-template-columns:1fr;
            }

            .address-card{
                grid-column:span 1;
            }

            .contact-image img{
                height:320px;
            }

        }




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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            background: #f5f8fc;
            color: #1f2937;
        }

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

        .hero {
            min-height: 430px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, #061a40, #0b4da2, #4f46e5);
            color: white;
        }

        .hero-container {
            width: 90%;
            max-width: 1200px;
            margin: auto;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .hero-tag {
            display: inline-block;
            padding: 8px 20px;
            border: 1px solid rgba(255,255,255,.4);
            border-radius: 50px;
            font-size: 14px;
            margin-bottom: 20px;
            background: rgba(255,255,255,.1);
            animation: fadeDown 1s ease;
        }

        .hero h1 {
            font-size: 52px;
            margin-bottom: 18px;
            animation: fadeUp 1s ease;
        }

        .hero h1 span {
            color: #63e6ff;
        }

        .hero p {
            max-width: 700px;
            margin: auto;
            font-size: 18px;
            line-height: 1.7;
            color: #e5efff;
            animation: fadeUp 1.3s ease;
        }

        /* Background circles */

        .circle {
            position: absolute;
            border-radius: 50%;
            opacity: .15;
            animation: float 7s infinite ease-in-out;
        }

        .circle1 {
            width: 250px;
            height: 250px;
            background: #63e6ff;
            top: -80px;
            left: -60px;
        }

        .circle2 {
            width: 350px;
            height: 350px;
            background: #ffffff;
            right: -120px;
            bottom: -150px;
            animation-delay: 2s;
        }

        .circle3 {
            width: 120px;
            height: 120px;
            background: #ffdf6c;
            right: 20%;
            top: 40px;
            animation-delay: 1s;
        }


        .circle4 {
            width: 220px;
            height: 220px;
            background: #ffdf6c;
            right: 50%;
            top: 20px;
            animation-delay: 1s;
        }