/* ===== ABOUT MAIN CARD ===== */
.about-main-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    transition: 0.3s;
}

.about-main-card:hover {
    transform: translateY(-6px);
}

/* ===== IMAGE ===== */
.about-img-box {
    height: 100%;
    overflow: hidden;
}

.about-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.about-main-card:hover img {
    transform: scale(1.08);
}

/* ===== CONTENT ===== */
.about-content {
    line-height: 1.8;
}

.about-content p {
    color: #555;
    margin-bottom: 15px;
}

/* ===== HIGHLIGHT TEXT ===== */
.highlight-text {
    font-size: 1.4rem;
    font-weight: 700;
}

/* ===== SERVICE CARDS ===== */
.service-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.12);
}

/* ===== ICON ===== */
.icon-box {
    width: 65px;
    height: 65px;
    margin: auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9800, #ff5722);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
}

/* ===== CUSTOM COLORS ===== */
.text-orange {
    color: #ff7a00;
}

.text-dark-blue {
    color: #1a2b49;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .about-img-box img {
        height: 300px;
    }
}

/* CARD WIDTH + STYLE */
.about-main-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}

/* FLOAT IMAGE */
.about-float-img {
    float: left;
    width: 350px; /* image width control */
    margin-right: 25px;
    margin-bottom: 15px;
}

.about-float-img img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* TEXT */
.about-content {
    line-height: 1.8;
}

.about-content p {
    color: #555;
    margin-bottom: 15px;
}

/* HIGHLIGHT */
.highlight-text {
    font-size: 1.4rem;
    font-weight: 700;
}

/* CLEAR FLOAT FIX */
.about-main-card::after {
    content: "";
    display: block;
    clear: both;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .about-float-img {
        float: none;
        width: 100%;
        margin-right: 0;
    }
}



/* hover  */
/* MAIN ABOUT CARD */
.about-main-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.about-main-card:hover {
    background: #fff7f0; /* light orange */
    box-shadow: 0 20px 60px rgba(255, 122, 0, 0.35); /* orange shadow */
    transform: translateY(-6px);
}

/* SERVICE CARD */
.service-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.service-card:hover {
    background: #fff7f0; /* light orange */
    box-shadow: 0 20px 50px rgba(255, 122, 0, 0.4); /* orange glow */
    transform: translateY(-10px);
}

/* OPTIONAL: ICON HOVER */
.service-card:hover .icon-box {
    background: linear-gradient(135deg, #ff7a00, #ff3d00);
}

/* OPTIONAL: TEXT COLOR SLIGHT CHANGE */
.service-card:hover h4 {
    color: #ff7a00;
}



/* DEFAULT (NO BORDER VISIBLE) */
.team-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent; /* important */
}

/* HOVER EFFECT */
.team-card:hover {
    background: #fff7f0;
    box-shadow: 0 10px 25px rgba(255, 122, 0, 0.3);
    transform: translateY(-6px);
    border: 2px solid #ff7a00; /* ORANGE BORDER */
}

/* IMAGE (FULL WIDTH - NO GAP) */
.team-img-wrapper {
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.team-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* IMPORTANT (same as your image design) */
    display: block;
}

/* CONTENT (BOTTOM GREY BOX) */
.team-body {
    background: #f1f1f1;
    padding: 18px 20px;
}

/* NAME */
.team-name {
    font-size: 28px;
    font-weight: 700;
    color: #ff7a00; /* ORANGE SAME */
    margin-bottom: 5px;
}

/* ROLE */
.team-role {
    font-size: 15px;
    /* color: #ff7a00; ORANGE SAME */
    margin: 0;
}

/* HOVER EFFECT */
.team-card:hover {
    background: #fff7f0;
    box-shadow: 0 20px 50px rgba(255, 122, 0, 0.35);
    transform: translateY(-6px);
}


/* media pages  */
/* CARD DEFAULT SHADOW */
.card-3d {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* normal shadow */
    border: 2px solid transparent;
}

/* HOVER SHADOW (STRONG + ORANGE) */
.card-3d:hover {
    background: #fff7f0;
    box-shadow: 
        0 20px 50px rgba(255, 122, 0, 0.35),  /* orange glow */
        0 12px 30px rgba(0,0,0,0.15);        /* depth */
    transform: translateY(-8px);
    border: 2px solid #ff7a00;
}

/* ICON */
.card-icon {
    font-size: 40px; /* bigger */
    color: #ff7a00;
    margin-bottom: 15px;
}

/* TITLE */
.card-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* TEXT */
.card-text {
    font-size: 15px;
    color: #666;
}

/* BUTTON (ORANGE THEME) */
.btn-orange {
    background: #ff7a00;
    color: #fff;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 14px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

/* BUTTON HOVER */
.btn-orange:hover {
    background: #fff;
    color: #ff7a00;
    border: 2px solid #ff7a00;
    box-shadow: 0 10px 25px rgba(255, 122, 0, 0.3);
}
/* DEFAULT ACTIVE CARD */
.active-card {
    background: #fff7f0;
    /* box-shadow: 
        0 20px 50px rgba(255, 122, 0, 0.35),
        0 12px 30px rgba(0,0,0,0.15); */
    border: 2px solid #0059ff;
    transform: translateY(-6px);
}


/* pop up  */
.popup-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
}

.popup-box{
background:#fff;
padding:25px;
width:90%;
max-width:400px;
border-radius:8px;
position:relative;
}

.popup-title{
margin-bottom:15px;
font-size:20px;
font-weight:600;
}

.popup-close{
position:absolute;
top:10px;
right:15px;
font-size:22px;
cursor:pointer;
}

.popup-box input,
.popup-box textarea{
width:100%;
padding:10px;
margin:6px 0;
border:1px solid #ccc;
border-radius:5px;
font-size:14px;
}

.popup-box textarea{
height:90px;
resize:none;
}

.popup-box button{
width:100%;
padding:10px;
background:#e65100;
color:#fff;
border:none;
border-radius:5px;
margin-top:10px;
cursor:pointer;
}

.popup-box button:hover{
background:#c94a00;
}

.popup-hidden{
display:none;
}


/* home pages */
.gallery-card {
    transition: all 0.4s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* default light shadow */
    border-radius: 15px;
}

/* Hover effect */
.gallery-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 15px 35px rgba(0,0,0,0.25); /* strong shadow */
}

/* First card highlight (selected feel) */
.gallery-card.active {
    box-shadow: 0 12px 30px rgba(255, 140, 0, 0.35);
    border: 1px solid rgba(255,140,0,0.3);
}

/* Image zoom effect */
.gallery-card img {
    transition: transform 0.4s ease;
}

.gallery-card:hover img {
    transform: scale(1.05);
}


.why-card {
    background: #fff;
    border-radius: 20px;
    padding: 35px;
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* default shadow */
}

/* Hover effect */
.why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2); /* strong shadow */
}

/* Image styling */
.why-img {
    border-radius: 15px;
    transition: all 0.4s ease;
}

.why-card:hover .why-img {
    transform: scale(1.05);
}

/* List hover */
.why-list li {
    transition: 0.3s;
}

.why-list li:hover {
    transform: translateX(6px);
}


.card-3d {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.card-3d:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(255,122,0,0.25);
    background: #fff7f0;
}

.card-3d img {
    height: 200px;
    object-fit: cover;
}