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

body{
    font-family:'Segoe UI', sans-serif;
    background:#f8fbff;
}

/* ================= HEADER ================= */

.header{
    background:white;
    padding:12px 0;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
    position:sticky;
    top:0;
    z-index:1000;
}

.logo{
width:45px;
height:45px;
object-fit:contain;
}
.navbar-toggler{
border:none;
}

.navbar-toggler:focus{
box-shadow:none;
}


/* NAVBAR */

.nav-links a{
    margin-left:20px;
    font-weight:600;
    color:#555;
    text-decoration:none;
    padding:6px 10px;
    position:relative;
    transition:0.3s;
}

/* Hover */
.nav-links a:hover{
    color:#2563eb;
}

/* ACTIVE PAGE */
.nav-links a.active{
    color:#2563eb;
    border-bottom:3px solid #2563eb;
}


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

.main-section{
    padding:80px 40px;
}

.hero-logo{
    width:260px;
    margin-bottom:20px;
}
.services-hero{
    padding:90px 20px;
    background:#2563eb;   /* Professional Blue */
    color:white;
}

.services-hero h1{
    font-weight:800;
    font-size:42px;
    color:white;
}

.services-hero p{
    color:#e0e7ff;   /* soft readable text */
    max-width:900px;
    margin:auto;
}


.left-content h1{
    font-weight:700;
}

.left-content h2{
    font-weight:650;
}

.tagline{
    margin-top:10px;
    letter-spacing:2px;
    font-size:12px;
    color:gray;
}

/* ================= SERVICE CARDS ================= */

.service-card{
    background:white;
    border-radius:28px;
    min-height:540px; /* better than fixed height */
    box-shadow:0 25px 40px rgba(0,0,0,0.08);
    overflow:hidden;
    position:relative;
    transition:0.3s;
}

.service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(37,99,235,0.18);
    border:1px solid #2563eb;
}

.card-img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.service-card hr{
    border:1.5px solid #e5e7eb;
    margin:0;
}

.card-body{
    padding:30px;
}

.card-body h4{
    margin-top:12px;
    font-weight:700;
}


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

.arrow{
    width:40px;
    height:40px;
    background:#101010;            /* FULL DARK BLACK */
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    bottom:10px;
    right:20px;
    text-decoration:none;
    transition:0.3s;
}

/* WHITE ARROW */
.arrow::after{
    content:"➜";               /* Visible arrow */
    color:#fff;
    font-size:20px;
    font-weight:bold;
}

/* HOVER EFFECT */
.arrow:hover{
    background:#060d8d;        /* Pink hover (matches your theme) */
    transform:scale(1.1);
}

/* ================= SERVICES PAGE ================= */

.services-section{
    background:#f4f6fb;
    padding:70px 0;
}

.service-title{
    color:#1e40af;
    font-weight:800;
    letter-spacing:1px;
}

.service-box{
    background:white;
    padding:25px;
    border-radius:16px;
    text-align:center;
    transition:0.35s;
    border:2px solid transparent;
}

.service-box:hover{

    border:2px solid #320bce;   /* Orange Outline */

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(23, 10, 211, 0.35); /* orange glow */
}


.service-box:hover{
    transform:translateY(-8px);
}
.service-box{
    transition:0.35s;
    border:2px solid transparent;
}
.service-box{
    transition:0.35s;
    border:2px solid transparent;
}

/* HOVER EFFECT */
.service-box:hover{

    background:#52525acf;   /* Orange background */

    border:2px solid #15078f;   /* Blue border */

    transform:translateY(-10px);

    box-shadow:0 20px 50px rgba(37, 113, 235, 0.35); /* Blue glow */
}
.service-box:hover h5,
.service-box:hover p{
    color:white;
}



/* HOVER */
.service-box:hover{

    transform:translateY(-10px);

    border:2px solid #042fbe;   /* Pink border */

    box-shadow:0 20px 40px rgba(239, 41, 220, 0.84); /* Pink glow */

}



.service-box img{
    width:100%;
    height:180px;       /* same height for all cards */
    object-fit:contain; /* shows entire image */
    background:#fff;    /* prevents empty transparency look */
    padding:10px;       /* gives breathing space */
    border-radius:10px;
    margin-bottom:15px;
}



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

button{
    transition:0.25s;
}

button:hover{
    background:#2563eb !important;
}


/* ================= LOGO SHAKE ================= */

.shake{
    animation:shake 2s infinite;
}

@keyframes shake{
    0%{transform:rotate(0);}
    25%{transform:rotate(2deg);}
    50%{transform:rotate(0);}
    75%{transform:rotate(-2deg);}
    100%{transform:rotate(0);}
}
/* CONTACT HERO */

.contact-hero{

    height:200px;

    background-image:url('contact.jpg');  
    /* 👉 Replace with your hero image */

    background-size:cover;
    background-position:center;

    position:relative;
}

/* Dark overlay for text visibility */

.hero-overlay{

    background:rgba(0,0,0,0.55);

    height:100%;
    width:100%;

    display:flex;
    align-items:center;
}
.contact-info-box{

    background:white;

    padding:40px;

    border-radius:18px;

    box-shadow:0 15px 40px rgba(0,0,0,0.06);

    height:100%;
}

/* Heading */

.contact-info-box h3{
    font-weight:50px;
}

/* Hover Effect (optional but recommended) */

.contact-info-box:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(37,99,235,0.15);
}
/* COMBINED CIRCLE + RECTANGLE */

.about-combo{
    position:relative;
}

/* Circle */
.about-circle{
    width:130px;
    height:130px;
    border-radius:50%;
    object-fit:cover;
    z-index:2;

    /* This pulls the circle INTO the rectangle */
    margin-right:-60px;

    border:6px solid white;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* Rectangle */
.about-rect{
    background:white;
    padding:30px 30px 30px 80px;
    border-radius:14px;
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
    width:100%;
}

/* Hover (optional but looks premium) */
.about-combo:hover .about-rect{
    transform:translateY(-6px);
    transition:0.3s;
    box-shadow:0 25px 60px rgba(37,99,235,0.18);
}
/* ABOUT PAGE WATERMARK BACKGROUND */

.about-watermark{
    position:relative;
    overflow:hidden;
}

/* Logo background */
.about-watermark::before{
    content:"";
    position:absolute;

    top:50%;
    left:50%;
    transform:translate(-50%, -50%);

    width:500px;     /* adjust size here */
    height:500px;

    background:url("hero.png") no-repeat center;
    background-size:contain;

    opacity:0.05;   /* VERY IMPORTANT for watermark look */

    pointer-events:none;
}
/* PLACEMENT CARDS */

.placement-card{
    padding:20px;
    transition:0.3s;
}

.student-img{
    width:150px;
    height:150px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:5px;
}

/* Hover Effect */
.placement-card:hover{
    transform:translateY(-8px);
}
/* CONTACT FORM HOVER EFFECT */

.form-control{
    border:1.5px solid #d1d5db;
    transition:0.3s;
}

/* Hover */
.form-control:hover{
    border-color:#2563eb;
    box-shadow:0 0 8px rgba(37,99,235,0.25);
}

/* When User Clicks (Focus) */
.form-control:focus{
    border-color:#2563eb;
    box-shadow:0 0 10px rgba(37,99,235,0.35);
    outline:none;
}
/* CONTACT FORM HOVER EFFECT */

.form-control{
    border:1.5px solid #d1d5db;
    transition:0.3s;
}

/* Hover */
.form-control:hover{
    border-color:#2563eb;
    box-shadow:0 0 8px rgba(37,99,235,0.25);
}

/* When User Clicks (Focus) */
.form-control:focus{
    border-color:#2563eb;
    box-shadow:0 0 10px rgba(37,99,235,0.35);
    outline:none;
}
.gallery-card img{
height:220px;
object-fit:cover;
border-radius:12px;
}
.placement-card{
    padding:25px;
    border-radius:14px;
    background:white;
    border:2px solid transparent;   /* important */
    transition:0.35s;
}
.placement-card:hover{
    border:2px solid #ff7a00;
    transform:translateY(-12px) scale(1.02);
    box-shadow:0 25px 60px rgba(255,122,0,0.35);
}
.gallery-wrapper{
    padding:70px 0;
}

/* Title */
.gallery-title{
    color:#2563eb;
    font-weight:800;
}

/* Description */
.gallery-desc{
    max-width:850px;
    margin:auto;
}

/* BIG IMAGE */
.main-image{
    width:100%;
    height:520px;
    object-fit:cover;
    border-radius:18px;
}

/* SMALL IMAGES */
.thumb{
    width:100%;
    height:160px;
    object-fit:cover;
    border-radius:12px;
    cursor:pointer;
    transition:0.3s;
}

.thumb:hover{
    transform:scale(1.05);
}
/* ================= GALLERY HOVER EFFECT ================= */

.thumb{
    border:3px solid transparent;
    transition:0.35s ease;
}

.thumb:hover{

    border:3px solid #0e1ce4;   /* Pink Border */

    transform:scale(1.05);

    box-shadow:0 10px 25px rgba(47, 4, 204, 0.886); /* Pink glow */
}



/* BIG IMAGE HOVER (Optional but looks PREMIUM) */

.main-image{
    transition:0.3s;
}

.main-image:hover{

    border:3px solid #210ef6;

    box-shadow:0 15px 40px rgba(255,77,166,0.35);

}
/* ABOUT BOX SIMPLE HOVER */

.about-rect{
    border:2px solid transparent;
    transition:0.25s ease;
}

/* Hover */
.about-combo:hover .about-rect{

    border:2px solid #2563eb;   /* Blue outline */

    box-shadow:0 8px 20px rgba(37,99,235,0.18); /* Soft glow */

}
/* MAKE ALL SERVICE CARDS EQUAL HEIGHT */

.services-section .row{
    display:flex;
    flex-wrap:wrap;
}

.service-box{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    padding:25px;
    border-radius:20px;
    background:#fff;
}

/* Make text area expand evenly */
.service-box p{
    flex-grow:1;
}
.evolution {
    padding: 60px 8%;
    background-color: #f4f6f8;
}

.evolution h2 {
    font-size: 36px;
    margin-bottom: 15px;
}

.evolution-text {
    max-width: 750px;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* ISO Layout */
.iso-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.iso-logo {
    width: 200px;   /* adjust if needed */
    height: auto;
}

.iso-text {
    font-size: 20px;
    font-weight: 600;
}
/* MENU LINKS */
.nav-links a{
    color: #555;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* HOVER EFFECT */
.nav-links a:hover{
    color: #2563eb;   /* Blue Color */
}

/* ACTIVE PAGE */
.nav-links a.active{
    color: #2563eb;
    font-weight: 600;
}

.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 55px;
    height: 55px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    z-index: 999;
    animation: pulse 2s infinite;
}
.whatsapp-float img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.whatsapp-float:hover {
    
    transform: scale(1.1);
    @keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}
}