/* ==================================================
   VISAKHAPATNAM LANDING PAGE CSS
   Trimerous Technology
================================================== */

=============================================
   CTA SECTION
================================================== */

.cta-section{
    padding:100px 0;
    background:
        linear-gradient(135deg,
        #0d6efd 0%,
        #6610f2 50%,
        #0f172a 100%);
    position:relative;
    overflow:hidden;
}

.cta-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    top:-150px;
    left:-150px;
}

.cta-section::after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    bottom:-120px;
    right:-120px;
}

.cta-section .container{
    position:relative;
    z-index:2;
}

.cta-title{
    font-family:'Playfair Display',serif;
    font-size:3rem;
    font-weight:700;
    color:#fff;
    line-height:1.2;
    margin-bottom:20px;
}

.cta-subtitle{
    max-width:850px;
    margin:auto;
    font-size:1.15rem;
    color:rgba(255,255,255,.9);
    line-height:1.8;
}

/* ==================================================
   GLASS CARD
================================================== */

.glass-card{
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:24px;
    padding:40px;
    height:100%;
    box-shadow:
    0 10px 30px rgba(0,0,0,.15);
    transition:.4s ease;
     overflow:hidden;
    box-sizing:border-box;
}

.glass-card:hover{
    transform:translateY(-8px);
    box-shadow:
    0 20px 50px rgba(0,0,0,.25);
}

.glass-card h2{
    color:#fff;
    font-size:1.8rem;
    font-weight:700;
    margin-bottom:20px;
}

.glass-card p{
    color:rgba(255,255,255,.92);
    line-height:1.8;
    margin-bottom:30px;
}

/* ==================================================
   BUTTONS
================================================== */

.custom-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    max-width:320px;
    padding:14px 24px;
    margin:10px 0;
    border-radius:50px;
    font-weight:600;
    text-decoration:none;
    box-sizing:border-box;
    transition:.35s ease;
}

.custom-btn i{
    flex-shrink:0;
}

.btn-contact{
    background:#ffffff;
    color:#0d6efd;
}

.btn-contact:hover{
    background:#f1f5f9;
    color:#0d6efd;
    transform:translateY(-3px);
}

.btn-call{
    background:#22c55e;
    color:#fff;
}

.btn-call:hover{
    background:#16a34a;
    color:#fff;
    transform:translateY(-3px);
}

.btn-chat{
    background:#25d366;
    color:#fff;
}

.btn-chat:hover{
    background:#1da851;
    color:#fff;
    transform:translateY(-3px);
}

/* ==================================================
   SERVICES LIST
================================================== */

.service-list{
    list-style:none;
    padding:0;
    margin:0;
}

.service-list li{
    position:relative;
    padding:14px 0 14px 38px;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.15);
    font-weight:500;
}

.service-list li:last-child{
    border-bottom:none;
}

.service-list li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:12px;
    width:24px;
    height:24px;
    background:#22c55e;
    color:#fff;
    border-radius:50%;
    text-align:center;
    line-height:24px;
    font-size:14px;
    font-weight:700;
}

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

.city-content{
    padding:90px 0;
    background:#f8fafc;
}

.city-content .row{
    max-width:1200px;
    margin:auto;
}

.city-content h2{
    text-align:center;
    font-size:2.5rem;
    font-weight:700;
    color:#0f172a;
    margin-bottom:35px;
    position:relative;
}

.city-content h2::after{
    content:"";
    width:90px;
    height:4px;
    background:var(--primary);
    display:block;
    margin:15px auto 0;
    border-radius:10px;
}

.city-content p{
    color:#475569;
    font-size:1.08rem;
    line-height:1.9;
    margin-bottom:25px;
    text-align:center;
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
}

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

.glass-card,
.city-content h2,
.city-content p{
    animation:fadeUp .8s ease forwards;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

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

@media (max-width:992px){

    .cta-title{
        font-size:2.4rem;
    }

    .glass-card{
        padding:30px;
    }

    .city-content h2{
        font-size:2rem;
    }
}

@media (max-width:768px){

    .cta-section{
        padding:70px 0;
    }

    .cta-title{
        font-size:2rem;
    }

    .cta-subtitle{
        font-size:1rem;
    }

    .glass-card{
        padding:25px;
    }

    .glass-card h2{
        font-size:1.5rem;
    }

    .custom-btn{
        width:100%;
        margin-bottom:12px;
    }

    .city-content{
        padding:60px 20px;
    }

    .city-content h2{
        font-size:1.7rem;
    }

    .city-content p{
        text-align:left;
    }
}

@media (max-width:576px){

    .cta-title{
        font-size:1.8rem;
    }

    .cta-subtitle{
        line-height:1.7;
    }

    .service-list li{
        font-size:.95rem;
    }
}
.cta-image-wrapper{
    text-align:center;
    margin-top:20px;
}

.cta-image{
    width:100%;
    max-width:450px;
    height:auto;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.25);
    transition:.4s ease;
}

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