/* ===================================================
   AERIAL MAPPERS NEPAL
   MODERN GEOSPATIAL TECHNOLOGY DESIGN
=================================================== */


/* RESET */

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


html{
scroll-behavior:smooth;
}


body{

font-family:'Inter',sans-serif;

background:#f7fbff;

color:#1b263b;

overflow-x:hidden;

}


.container{

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

}



img{

width:100%;
display:block;

}




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


header{


position:fixed;

width:100%;

top:0;

z-index:1000;


background:

rgba(255,255,255,.75);


backdrop-filter:blur(18px);


border-bottom:

1px solid rgba(255,255,255,.4);



}



.nav-container{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}




.logo h2{

font-size:30px;

font-weight:700;

color:#063970;

}



.logo span{

color:#00b4d8;

}



.logo small{

display:block;

font-size:11px;

letter-spacing:4px;

color:#555;

}





nav ul{

display:flex;

gap:25px;

}



nav a{

padding:10px 22px;

border-radius:30px;

font-weight:600;

transition:.4s;

}



nav a:hover{


background:

linear-gradient(
45deg,#0077b6,#00b4d8
);


color:white;


box-shadow:

0 10px 25px rgba(0,180,216,.35);

}






/* ===================================================
   HERO FUTURE STYLE
=================================================== */


.hero{


height:100vh;


background:


linear-gradient(
120deg,
rgba(2,18,45,.85),
rgba(0,119,182,.65)
),


url("../images/drone-hero.jpg");



background-size:cover;

background-position:center;


position:relative;


display:flex;

align-items:center;


overflow:hidden;


}





/* Animated Grid */


.hero:before{


content:"";


position:absolute;

inset:0;


background-image:

linear-gradient(
rgba(255,255,255,.08) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.08) 1px,
transparent 1px
);


background-size:60px 60px;


animation:gridMove 20s linear infinite;


}




@keyframes gridMove{


from{

background-position:0 0;

}


to{

background-position:600px 600px;

}


}






.hero-content{


position:relative;

color:white;


animation:slideUp 1.2s ease;


}



.hero h1{


font-size:60px;


line-height:1.15;


}



.hero p{


font-size:20px;

max-width:750px;

margin:25px 0;


}





/* Floating Drone */


.hero:after{


content:"✈";


position:absolute;


right:12%;


top:25%;


font-size:90px;


animation:

floatingDrone 5s infinite;


}



@keyframes floatingDrone{


0%,100%{

transform:translateY(0) rotate(-5deg);

}


50%{

transform:translateY(-50px) rotate(5deg);

}

}






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


.btn{


display:inline-block;

font-size: 20px;        /* Smaller text */
    width: auto;   
padding:8px 18px;


border-radius:50px;


background:

linear-gradient(
45deg,
#00b4d8,
#0077b6
);


color:white;


font-weight:400;


box-shadow:

0 15px 30px rgba(0,119,182,.4);



transition:.4s;


}



.btn:hover{


transform:translateY(-5px);


box-shadow:

0 25px 45px rgba(0,119,182,.5);


}






/* ===================================================
 SECTION TITLES
=================================================== */


.section-title{

text-align:center;

margin-bottom:60px;

}


.section-title h2{

font-size:42px;

color:#063970;

}



.section-title p{

color:#64748b;

}







/* ===================================================
 GLASS CARDS
=================================================== */


.service-grid,
.project-grid,
.stat-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:35px;


}





.service-card,
.project-card,
.stat-card{


background:

rgba(255,255,255,.65);


backdrop-filter:

blur(20px);



border-radius:25px;


overflow:hidden;


box-shadow:


0 25px 60px rgba(0,0,0,.12);



transition:.5s;



}



.service-card:hover,
.project-card:hover,
.stat-card:hover{


transform:

translateY(-15px)
scale(1.03);



}


.service-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.service-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 60px rgba(0, 119, 182, 0.25);
}


.service-card img,
.project-card img{


height:0px;


object-fit:cover;


}



.service-card h3,
.project-card h3{


padding:20px 25px 5px;


color:#0077b6;


}



.service-card p,
.project-card p{


padding:0 25px 30px;


}







/* ===================================================
 COUNTER STYLE
=================================================== */


.stat-card{


padding:45px;


text-align:center;


}


.stat-card h3{


font-size:55px;


color:#00b4d8;


animation:numberGlow 3s infinite;


}




@keyframes numberGlow{


50%{

text-shadow:

0 0 30px #00b4d8;

}


}







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


.about-grid{


display:grid;


grid-template-columns:

1fr 1fr;


gap:60px;


align-items:center;


}


.about-grid img{


border-radius:30px;


box-shadow:

0 30px 60px rgba(0,0,0,.2);


}







/* ===================================================
 GOOGLE MAP
=================================================== */


.map-container{


height:450px;


border-radius:30px;


overflow:hidden;


box-shadow:

0 25px 60px rgba(0,0,0,.2);


}



.map-container iframe{


width:100%;

height:100%;

border:0;


}








/* ===================================================
 WHATSAPP
=================================================== */


.whatsapp-btn{


position:fixed;


right:30px;


bottom:30px;



height:70px;

width:70px;



background:#25d366;



border-radius:50%;



display:flex;

align-items:center;

justify-content:center;



font-size:35px;


color:white;


z-index:2000;



box-shadow:

0 20px 40px rgba(0,0,0,.3);



animation:

pulse 2s infinite;


}




@keyframes pulse{


50%{

transform:scale(1.15);

}


}







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


footer{


background:#021b33;


color:white;


padding:60px 0;


}



footer h3{


color:#00b4d8;


}






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


@keyframes slideUp{


from{

opacity:0;

transform:translateY(60px);


}


to{

opacity:1;

transform:translateY(0);


}

}







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


@media(max-width:900px){



.hero h1{

font-size:38px;

}



.service-grid,
.project-grid,
.stat-grid,
.about-grid{


grid-template-columns:1fr;


}


nav ul{


display:none;


}


}

.phone-link{

    color:#0077b6;
    text-decoration:none;
    font-weight:600;

}

/* Compact Responsive Footer Map */

.footer-map .responsive-map{

    width:100%;
    height:350px;
    padding-bottom:0;
    overflow:hidden;
    border-radius:15px;

}


.footer-map .responsive-map iframe{

    width:100%;
    height:100%;
    border:0;

}

/* CONTACT PAGE */


.contact-page{

padding:120px 0 80px;

background:#f5faff;

}



.contact-layout{

display:grid;

grid-template-columns:

1fr 1fr;

gap:50px;

align-items:center;

}



.contact-info h1{

font-size:42px;

color:#063970;

}




.info-box{


background:black;

padding:20px;

margin:15px 0;

border-radius:15px;

box-shadow:

0 10px 25px rgba(0,0,0,.08);

}



.info-box a{

color:whitesmoke;

text-decoration:none;

}





.contact-form-box{


background:

rgba(255,255,255,.8);


backdrop-filter:blur(20px);


padding:40px;


border-radius:25px;


box-shadow:

0 20px 50px rgba(0,0,0,.15);


}





.contact-form-box input,
.contact-form-box textarea{


width:100%;


padding:15px;


margin-bottom:18px;


border-radius:12px;


border:1px solid #ddd;


font-size:16px;


}




.contact-form-box button{


width:100%;


padding:15px;


border:none;


border-radius:30px;


background:

linear-gradient(
45deg,
#0077b6,
#00b4d8
);


color:white;


font-size:18px;


font-weight:bold;


cursor:pointer;


}




.contact-form-box button:hover{


transform:translateY(-3px);


}




@media(max-width:900px){


.contact-layout{


grid-template-columns:1fr;


}


}

.contact-form-box button{

background:
linear-gradient(
45deg,
#0077b6,
#00b4d8
);

color:white;

padding:15px 40px;

border:none;

border-radius:50px;

font-size:18px;

font-weight:600;

cursor:pointer;

transition:.3s;

}


.contact-form-box button:hover{

transform:translateY(-5px);

box-shadow:
0 15px 30px rgba(0,180,216,.4);

}

/* =====================================================
   AERIAL MAPPERS NEPAL
   ABOUT PAGE COMPLETE STYLESHEET
   Drone | GIS | Photogrammetry Theme
===================================================== */


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

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


html{
    scroll-behavior:smooth;
}


body{

    font-family:
    "Inter",
    Arial,
    sans-serif;

    color:#1e293b;

    line-height:1.6;

}


.container{

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

}


img{

    max-width:100%;
    display:block;

}


a{

    text-decoration:none;

}





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


.main-header{

    position:absolute;
    top:0;
    width:100%;
    z-index:1000;

    background:
    rgba(255,255,255,0.10);

    backdrop-filter:
    blur(15px);

    border-bottom:
    1px solid rgba(255,255,255,.2);

}



.nav-container{

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.site-logo a{

    color:white;

}


.site-logo h2{

    font-size:32px;

}


.site-logo span{

    color:#00e5ff;

}


.site-logo p{

    letter-spacing:5px;

    font-size:12px;

    color:#dbeafe;

}





.main-nav ul{

    display:flex;

    list-style:none;

    gap:35px;

}


.main-nav a{

    color:white;

    font-weight:500;

    position:relative;

}



.main-nav a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    height:3px;

    width:0;

    background:#00e5ff;

    transition:.3s;

}



.main-nav a:hover::after,
.main-nav .active::after{

    width:100%;

}



.header-btn,
.primary-btn{

    display:inline-block;

    background:
    linear-gradient(
    45deg,
    #0077b6,
    #00b4d8
    );

    color:white;

    padding:13px 30px;

    border-radius:40px;

    font-weight:600;

    transition:.3s;

}


.header-btn:hover,
.primary-btn:hover{

    transform:translateY(-4px);

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

}




.menu-toggle{

    display:none;

    color:white;

    font-size:30px;

}





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


.about-hero{

    height:550px;

    display:flex;

    align-items:center;


    background:

    linear-gradient(
    135deg,
    rgba(2,25,50,.85),
    rgba(0,180,216,.65)
    ),

    url("../images/drone-hero.jpg");


    background-size:cover;

    background-position:center;

    color:white;

}



.hero-content{

    max-width:700px;

}



.hero-content h1{

    font-size:58px;

    line-height:1.2;

    margin-bottom:25px;

}



.hero-content p{

    font-size:20px;

    color:#e0f2fe;

}






/* =========================
 COMPANY INTRO
========================= */


.company-section{

    padding:90px 0;

}



.two-column{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}



.image-box img{

    border-radius:30px;

    box-shadow:

    0 25px 50px
    rgba(0,0,0,.2);

}



.content-box h2{

    font-size:42px;

    color:#063970;

    margin-bottom:20px;

}








/* =========================
 COMMON SECTION
========================= */


.section-title{

    text-align:center;

    font-size:42px;

    color:#063970;

    margin-bottom:20px;

}



.section-description{

    text-align:center;

    max-width:900px;

    margin:auto;

}





/* =========================
 INDUSTRY
========================= */


.industry{

    background:#f4faff;

    padding:80px 0;

}



.card-grid{

    display:grid;

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

    gap:25px;

    margin-top:40px;

}




.glass-card{


background:

rgba(0,0,0,1);


padding:35px;


border-radius:25px;


box-shadow:

0 15px 35px
rgba(0,0,0,.12);


transition:.4s;


}



.glass-card:hover{


transform:
translateY(-12px);


}





/* =========================
 MISSION VALUES
========================= */


.mission{

    padding:80px 0;

}



.mission-grid{


display:grid;

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

gap:25px;


}




.value-card{


padding:35px;


border-radius:25px;


background: linear-gradient(145deg, #708090, #4b5563);


box-shadow:

0 15px 30px
rgba(0,0,0,.1);


transition:.3s;


}



.value-card:hover{

transform:scale(1.03);

}








/* =========================
 TECHNOLOGY
========================= */


.technology{

    padding:80px 0;

    background:#f5faff;

}



.tech-grid{


display:grid;

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

gap:20px;

margin-top:40px;


}



.tech-card{


background:BLACK;


padding:30px;


border-radius:20px;


box-shadow:

0 10px 25px
rgba(0,0,0,.1);


transition:.3s;


}



.tech-card:hover{


transform:
translateY(-10px);


background:#063970;

color:white;


}





/* =========================
 COUNTERS
========================= */


.stats{


padding:70px 0;


background:

linear-gradient(
135deg,
#003566,
#0077b6
);


color:white;


}



.stats-grid{


display:grid;

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

text-align:center;


}



.counter{


font-size:55px;

color:#00e5ff;

font-weight:800;


}







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


.about-cta{


padding:90px 20px;


text-align:center;


background:

linear-gradient(
135deg,
#eef8ff,
#ffffff
);


}



.about-cta h2{


font-size:42px;


color:#063970;


margin-bottom:15px;


}






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


.simple-footer{


background:#020617;

color:white;

text-align:center;

padding:25px;


}





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


@media(max-width:1000px){


.main-nav,
.header-btn{

display:none;

}


.menu-toggle{

display:block;

}



.hero-content h1{

font-size:42px;

}



.two-column,
.card-grid,
.mission-grid,
.tech-grid,
.stats-grid{


grid-template-columns:1fr;


}



.section-title{

font-size:34px;

}



.counter{

font-size:45px;

}


}



@media(max-width:600px){


.about-hero{

height:600px;

}


.hero-content h1{

font-size:34px;

}



.hero-content p{

font-size:16px;

}



.site-logo h2{

font-size:24px;

}


}

/* =====================================================
   AERIAL MAPPERS NEPAL
   SERVICES PAGE STYLE
   Drone Survey | GIS | Photogrammetry
===================================================== */



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


.service-hero{


height:650px;

display:flex;

align-items:center;

position:relative;


background:


linear-gradient(

135deg,

rgba(0,35,70,.90),

rgba(0,180,216,.65)

),


url("../images/drone-hero.jpg");



background-size:cover;

background-position:center;


color:white;


}





.service-hero .hero-content{


max-width:750px;


}



.service-hero h1{


font-size:58px;

line-height:1.2;

margin-bottom:25px;


}



.service-hero p{


font-size:20px;

color:#e0f2fe;

margin-bottom:30px;


}





/* ===============================
INTRO SECTION
================================ */


.service-intro{


padding:90px 0;


background:#ffffff;


}




.section-title{


text-align:center;

font-size:42px;

font-weight:700;

color:#063970;

margin-bottom:20px;


}



.section-description{


max-width:900px;

margin:auto;

text-align:center;

font-size:18px;

color:#64748b;


}








/* ===============================
SERVICES GRID
================================ */


.services-area{


padding:80px 0;


background:#f5faff;


}




.service-grid{


display:grid;

grid-template-columns:

repeat(3,1fr);


gap:30px;


}







/* ===============================
SERVICE CARD
================================ */


.service-card{


background:white;


border-radius:25px;


overflow:hidden;


box-shadow:


0 15px 40px

rgba(0,0,0,.12);



transition:.4s;


position:relative;


}



.service-card:hover{


transform:

translateY(-12px);


box-shadow:


0 25px 60px

rgba(0,119,182,.25);


}






.service-card img{


width:100%;



height:200px;


object-fit:cover;


transition:.5s;
 


}




.service-card:hover img{


transform:scale(1.08);


}




.service-content{


padding:30px;


}




.service-content h3{


font-size:25px;


color:#063970;


margin-bottom:15px;


}





.service-content p{


color:#64748b;


margin-bottom:15px;


}




.service-content ul{


padding-left:20px;


}




.service-content li{


margin-bottom:8px;


color:#334155;


}





.service-content li::marker{


color:#00b4d8;


}








/* ===============================
GLASS EFFECT FEATURE
================================ */


.service-card::after{


content:"";


position:absolute;


top:0;


left:0;


width:100%;


height:0px;


background:


linear-gradient(

90deg,

#0077b6,

#00e5ff

);


}








/* ===============================
WORKFLOW SECTION
================================ */


.workflow{


padding:90px 0;


background:white;


}



.workflow-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


margin-top:40px;


}




.workflow-grid div{


background:


linear-gradient(

145deg,

#ffffff,

#eef8ff

);



padding:40px 25px;


border-radius:25px;


text-align:center;


box-shadow:


0 15px 30px

rgba(0,0,0,.08);



transition:.3s;


}



.workflow-grid div:hover{


transform:translateY(-10px);


background:#063970;


color:white;


}





.workflow-grid h3{


font-size:45px;


color:#00b4d8;


margin-bottom:10px;


}





.workflow-grid p{


font-weight:600;
color:#00b4d8;


}








/* ===============================
INDUSTRY SECTION (OPTIONAL)
================================ */


.industries{


padding:80px 0;


background:#f5faff;


}





.industry-list{


display:flex;


flex-wrap:wrap;


justify-content:center;


gap:20px;


margin-top:40px;


}





.industry-list span{


background:white;


padding:15px 30px;


border-radius:50px;


box-shadow:


0 10px 25px

rgba(0,0,0,.1);



font-weight:600;


transition:.3s;


}



.industry-list span:hover{


background:#0077b6;


color:white;


}








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


.service-cta{


padding:100px 20px;


text-align:center;


background:


linear-gradient(

135deg,

#003566,

#0077b6

);



color:white;


}





.service-cta h2{


font-size:42px;


margin-bottom:15px;


}



.service-cta p{


font-size:18px;


margin-bottom:25px;


}






.service-cta .primary-btn{


background:#00e5ff;


color:#003566;


}




.service-cta .primary-btn:hover{


background:white;


}








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



@media(max-width:1100px){



.service-grid{


grid-template-columns:

repeat(2,1fr);


}



.workflow-grid{


grid-template-columns:

repeat(2,1fr);


}



.service-hero h1{


font-size:45px;


}



}






@media(max-width:700px){



.service-grid,


.workflow-grid{


grid-template-columns:

1fr;


}



.service-hero{


height:600px;


}



.service-hero h1{


font-size:34px;


}



.service-hero p{


font-size:16px;


}



.section-title{


font-size:32px;


}



.service-card img{


height:px;


}



}
/* =========================
   GLOBAL RESET
========================= */

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

body {
    font-family: "Inter", sans-serif;
    background: #07111f;
    color: #ffffff;
    overflow-x: hidden;
}


/* =========================
   FLOATING GRADIENT BACKGROUND
========================= */

.gradient-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    background:
        linear-gradient(135deg,
        #06121f,
        #0b1d33,
        #07101c);
}


.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .45;
    animation: float 12s infinite alternate;
}


.blob1 {
    width: 400px;
    height: 400px;
    background: #00c6ff;
    top: -100px;
    left: -100px;
}


.blob2 {
    width: 450px;
    height: 450px;
    background: #0072ff;
    right: -120px;
    top: 30%;
}


.blob3 {
    width: 350px;
    height: 350px;
    background: #00ff99;
    bottom: -100px;
    left: 40%;
}


@keyframes float {

    from {
        transform: translateY(0) scale(1);
    }

    to {
        transform: translateY(60px) scale(1.2);
    }

}


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


.services {

    width: 90%;
    max-width: 1400px;
    margin: auto;
    padding: 80px 0;

}


.section-title {

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

}


.section-title h2 {

    font-size: 42px;
    font-weight: 700;
    letter-spacing: 2px;
    background: linear-gradient(
        90deg,
        #00eaff,
        #00ff99
    );

    -webkit-background-clip: text;
    color: transparent;

}


.underline {

    width: 90px;
    height: 4px;
    background: #00eaff;
    margin: 15px auto;
    border-radius: 10px;

}


.section-title p {

    color: #b8c7d9;
    font-size: 17px;

}



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


.filter-buttons {

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 50px;

}


.filter-buttons button {

    padding: 12px 28px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.2);

    background:
    rgba(255,255,255,.08);

    color:white;

    cursor:pointer;
    font-size:14px;

    transition:.3s;

}


.filter-buttons button:hover,
.filter-buttons .active {

    background:#00d9ff;
    color:#001018;
    box-shadow:
    0 0 20px rgba(0,217,255,.6);

}



/* =========================
   CARD GRID
========================= */


.service-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}



/* =========================
   SERVICE CARD
========================= */


.service-card {

    position:relative;

    min-height:0px;

    padding:30px;

    border-radius:25px;

    background:
    rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    border:
    1px solid rgba(255,255,255,.15);

    overflow:hidden;

    transition:.4s;

}


.service-card:hover {

    transform:translateY(-10px);

    border-color:#00eaff;

    box-shadow:
    0 20px 50px rgba(0,0,0,.4),
    0 0 25px rgba(0,234,255,.25);

}



.service-card::before {

    content:"";

    position:absolute;

    width:150px;
    height:150px;

    background:#00eaff;

    filter:blur(80px);

    top:-50px;
    right:-50px;

    opacity:.4;

}



/* =========================
   CATEGORY LABELS
========================= */


.category {

    position:absolute;

    top:20px;
    right:20px;

    padding:6px 15px;

    border-radius:20px;

    font-size:12px;
    font-weight:600;

    background:#00eaff;
    color:#00131f;

}



.mining {
    background:#ffb703;
}


.forest {
    background:#22c55e;
}


.agriculture {
    background:#84cc16;
}


.disaster {

    background:#ef4444;
    color:white;

}


.transport,
.roads {

    background:#38bdf8;

}


.energy {

    background:#facc15;

}


.urban {

    background:#a78bfa;
}



/* =========================
   LOTTIE AREA
========================= */


.lottie {

    width:130px;
    height:0px;

    margin:30px auto 15px;

}



/* =========================
   CARD TEXT
========================= */


.service-card h3 {

    text-align:center;

    font-size:22px;

    margin-bottom:15px;


}


.service-card p {

    text-align:center;

    color:#cbd5e1;

    font-size:14px;

    line-height:1.7;


}



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


.learn-btn {

    display:block;

    margin:25px auto 0;

    padding:11px 25px;

    border-radius:25px;

    border:none;

    cursor:pointer;

    background:
    linear-gradient(
        90deg,
        #00eaff,
        #00ff99
    );

    color:#00131f;

    font-weight:600;

    transition:.3s;

}


.learn-btn:hover {

    transform:scale(1.08);

    box-shadow:
    0 0 25px rgba(0,255,153,.5);

}



/* =========================
   MODAL
========================= */


.modal {

    display:none;

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.7);

    backdrop-filter:blur(8px);

    align-items:center;

    justify-content:center;

    z-index:1000;

}



.modal-content {

    width:90%;
    max-width:550px;

    padding:40px;

    border-radius:25px;

    background:#0c1c30;

    border:
    1px solid rgba(255,255,255,.2);

    text-align:center;

    animation:
    popup .4s ease;

}


@keyframes popup {

    from {
        transform:scale(.7);
        opacity:0;
    }

    to {
        transform:scale(1);
        opacity:1;
    }

}



.close {

    position:absolute;

    right:35px;

    top:25px;

    font-size:30px;

    cursor:pointer;

    color:white;

}



.contact-btn {

    display:inline-block;

    margin-top:25px;

    padding:12px 30px;

    border-radius:25px;

    background:#00eaff;

    color:#001018;

    text-decoration:none;

    font-weight:600;

}



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


@media(max-width:768px){


.section-title h2 {

    font-size:30px;

}


.services {

    width:92%;
    padding:50px 0;

}



/* =========================
   SERVICE BOX
========================= */
.service-box{
    background: green; /* Change to your preferred background color */
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    transition: 0.4s;

    /* Shadow matching the background */
    box-shadow:
        0 10px 25px rgba(0,0,0,0.35),
        0 0 30px rgba(0,0,0,0.25);
}

.service-box:hover{
    transform: translateY(-10px);

    /* Colored glow on hover */
    box-shadow:
        0 20px 40px rgba(0,0,0,0.45),
        0 0 35px rgba(0,0,0,0.45);
}

.service-content{
    padding: 20px;
    text-align: center;   /* Center all text */
}

.service-content h3{
    margin: 0 0 12px;
    color: #ffffff;
    text-align: center;
}

.service-content p{
    margin: 0;
    color: #d1d5db;
    text-align: center;
    line-height: 1.6;
}

.service-box img{
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: 0.5s;
}

.service-box:hover img{
    transform: scale(1.05);
}

/* =========================
   FONT
========================= */