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

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

body{
font-family: "Segoe UI", Arial, sans-serif;
color:#333;
background:#ffffff;
line-height:1.6;
}


/* ===================================== */
/* COLOR VARIABLES (BRAND PALETTE)      */
/* ===================================== */

:root{

--primary:#24618F;
--accent:#33C4F1;
--light-blue:#8DC9E5;
--background-blue:#E5F5FB;
--dark-gray:#494644;
--light-gray:#F3F3F3;

}


/* ===================================== */
/* GENERAL LAYOUT                        */
/* ===================================== */

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}


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

header{

position:sticky;
top:20px;
z-index:100;

}

.nav{

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

height:70px;

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

padding:0 25px;

border-radius:40px;

/* Glass effect */
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

box-shadow:0 8px 25px rgba(0,0,0,0.08);

}


.logo{

font-weight:700;
font-size:20px;
color:var(--primary);

}


nav a{

margin-left:25px;
text-decoration:none;
color:#333;
font-weight:500;

transition:0.2s;

}

nav a:hover{

color:var(--primary);

}


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

.btn{

display:inline-block;

background:var(--primary);
color:white;

padding:12px 25px;

border-radius:30px;

text-decoration:none;
font-weight:600;

transition:0.25s;

}

.btn:hover{

background:#1d4e72;

}


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

.hero{

padding:120px 0;

/* gradient overlay + glass style background */

background:
linear-gradient(
90deg,
rgba(229,245,251,0.95) 0%,
rgba(229,245,251,0.85) 35%,
rgba(229,245,251,0.0) 70%
);

}


.hero-grid{

display:grid;
grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;

}


.hero-subtitle{

color:var(--primary);
font-weight:600;
margin-bottom:10px;

}


.hero-text h1{

font-size:52px;
line-height:1.1;

margin-bottom:20px;

}


.hero-description{

font-size:18px;
color:#555;

margin-bottom:25px;

}


.hero-image img{

width:100%;
border-radius:16px;

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

}


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

.services{

padding:90px 0;

background:var(--light-gray);

text-align:center;

}


.services h2{

font-size:34px;
margin-bottom:40px;

}


.service-grid{

display:grid;

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

gap:30px;

}


.service-card{

background:white;

padding:30px;

border-radius:10px;

box-shadow:0 10px 25px rgba(0,0,0,0.06);

transition:0.25s;

}


.service-card:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(0,0,0,0.12);

}


.service-card h3{

color:var(--primary);

margin-bottom:10px;

}


/* ===================================== */
/* GALLERY (placeholder)                 */
/* ===================================== */

.gallery{

padding:90px 0;

background:white;

text-align:center;

}


/* ===================================== */
/* ABOUT SECTION (placeholder)           */
/* ===================================== */

.about{

padding:90px 0;

background:var(--background-blue);

text-align:center;

}


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

.cta{

padding:70px 0;

background:var(--primary);

color:white;

text-align:center;

}

.cta h2{

margin-bottom:20px;

}


/* ===================================== */
/* CONTACT SECTION (placeholder)         */
/* ===================================== */

.contact{

padding:90px 0;

background:white;

text-align:center;

}


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

footer{

padding:30px;

text-align:center;

background:#222;

color:white;

font-size:14px;

}


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

@media (max-width:900px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

nav{
display:none;
}

}