/*=========================================
            GOOGLE RESET
=========================================*/

:root{

    --primary:#0F766E;
    --secondary:#14B8A6;

    --dark:#0F172A;
    --text:#334155;
    --light:#F8FAFC;
    --white:#FFFFFF;
    --border:#E2E8F0;

    --shadow:0 20px 50px rgba(0,0,0,.08);

    --radius:20px;

    --transition:.35s ease;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;
background:var(--white);
color:var(--text);
line-height:1.7;

}

img{

display:block;
width:100%;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:min(1180px,90%);
margin:auto;

}

section{

padding:110px 0;

}

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

.header{

position:fixed;
top:0;
left:0;

width:100%;

z-index:999;

background:#fff;

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

}

/*========== TOP BAR ==========*/

.top-bar{

background:var(--primary);
color:#fff;

}

.top-container{

height:42px;

display:flex;

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

font-size:.9rem;

}

.top-left,
.top-right{

display:flex;
align-items:center;
gap:25px;

}

.top-left span,
.top-right span{

display:flex;
align-items:center;
gap:8px;

}

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

.navbar{

background:#fff;

}

.nav-container{

height:90px;

display:flex;

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

}

.logo{

font-family:'Playfair Display',serif;

font-size:2rem;

font-weight:700;

color:var(--dark);

}

.logo-accent{

color:var(--primary);

}
.nav-links{

display:flex;
align-items:center;
gap:45px;

}

.nav-links a{

font-weight:600;

color:var(--dark);

transition:.3s;

}

.nav-links a:hover{

color:var(--primary);

}

.nav-btn{

padding:15px 28px;

background:var(--primary);

color:#fff;

border-radius:40px;

font-weight:600;

transition:.3s;

}

.nav-btn:hover{

background:#0b5f59;

transform:translateY(-3px);

}

.menu-btn{

display:none;

background:none;

border:none;

font-size:26px;

cursor:pointer;

color:var(--dark);

}

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

.btn-primary{

display:inline-flex;

align-items:center;
justify-content:center;

padding:18px 36px;

background:var(--primary);

color:#fff;

border-radius:50px;

font-weight:600;

transition:var(--transition);

}

.btn-primary:hover{

background:#0B5F59;

transform:translateY(-4px);

}

.btn-secondary{

display:inline-flex;

align-items:center;
justify-content:center;

padding:18px 36px;

border:2px solid var(--primary);

border-radius:50px;

font-weight:600;

color:var(--primary);

transition:var(--transition);

}

.btn-secondary:hover{

background:var(--primary);

color:#fff;

}

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

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

padding-top:170px;

background:
linear-gradient(rgba(15,118,110,.72),
rgba(15,118,110,.72)),
url("https://images.unsplash.com/photo-1629909613654-28e377c37b09?auto=format&fit=crop&w=1800&q=80")
center center/cover no-repeat;

color:#fff;

}

.hero-content{

max-width:720px;

}

.hero-tag{

display:inline-block;

padding:10px 22px;

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

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

border-radius:40px;

margin-bottom:28px;

font-weight:600;

backdrop-filter:blur(10px);

}

.hero h1{

font-family:'Playfair Display',serif;

font-size:4.3rem;

line-height:1.1;

margin-bottom:25px;

}

.hero h1 span{

color:#A7F3D0;

}

.hero p{

font-size:1.1rem;

max-width:620px;

margin-bottom:45px;

color:#E2E8F0;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:70px;

}

.hero-stats{

display:flex;

gap:60px;

}

.stat h3{

font-size:2.2rem;

font-weight:700;

margin-bottom:8px;

}

.stat span{

font-size:.95rem;

color:#D1FAE5;

}

/*=========================================
        TRUST BAR
=========================================*/

.trust-bar{

padding:0;

margin-top:-70px;

position:relative;

z-index:20;

}

.trust-grid{

display:grid;

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

gap:25px;

}

.trust-item{

background:#fff;

padding:35px 25px;

border-radius:22px;

box-shadow:var(--shadow);

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

gap:15px;

transition:var(--transition);

}

.trust-item:hover{

transform:translateY(-8px);

}

.trust-item i{

font-size:2rem;

color:var(--primary);

}

.trust-item span{

font-weight:600;

color:var(--dark);

}

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

.about{

background:#fff;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-image img{

height:650px;

object-fit:cover;

border-radius:30px;

box-shadow:var(--shadow);

}

.section-tag{

display:inline-block;

padding:8px 20px;

border-radius:40px;

background:#ECFEFF;

color:var(--primary);

font-weight:600;

margin-bottom:22px;

}

.about-content h2{

font-family:'Playfair Display',serif;

font-size:3rem;

line-height:1.2;

margin-bottom:25px;

color:var(--dark);

}

.about-content p{

margin-bottom:25px;

font-size:1.05rem;

color:var(--text);

}

.about-features{

display:grid;

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

gap:18px;

margin:40px 0;

}

.about-features div{

display:flex;

align-items:center;

gap:12px;

font-weight:600;

}

.about-features i{

color:var(--primary);

}

.about .btn-primary{

margin-top:10px;

}

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

.services{

background:var(--light);

}

.section-heading{

text-align:center;

max-width:700px;

margin:0 auto 70px;

}

.section-heading h2{

font-family:'Playfair Display',serif;

font-size:3rem;

color:var(--dark);

margin:20px 0;

line-height:1.2;

}

.section-heading p{

color:var(--text);

}

.services-grid{

display:grid;

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

gap:35px;

}

.service-card{

background:#fff;

border-radius:28px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;

}

.service-card:hover{

transform:translateY(-8px);

}

.service-card img{

width:100%;

height:280px;

object-fit:cover;

}

.service-content{

padding:30px;

}

.service-content h3{

font-family:'Playfair Display',serif;

font-size:1.8rem;

margin-bottom:15px;

color:var(--dark);

}

.service-content p{

color:var(--text);

line-height:1.8;

}

/*======================================
        WHY CHOOSE US
======================================*/

.why-us{

padding:120px 0;

background:#fff;

}

.why-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.why-image img{

width:100%;

height:650px;

object-fit:cover;

border-radius:30px;

box-shadow:var(--shadow);

}

.why-content h2{

font-family:'Playfair Display',serif;

font-size:3rem;

margin:20px 0;

line-height:1.2;

color:var(--dark);

}

.why-content>p{

margin-bottom:45px;

color:var(--text);

line-height:1.9;

}

.why-features{

display:grid;

gap:25px;

}

.feature-box{

display:flex;

align-items:flex-start;

gap:20px;

padding:25px;

border-radius:18px;

background:#fff;

box-shadow:0 10px 30px rgba(0,0,0,.05);

transition:.3s;

}

.feature-box:hover{

transform:translateY(-5px);

}

.feature-box i{

font-size:32px;

color:var(--primary);

margin-top:4px;

}

.feature-box h4{

margin-bottom:8px;

font-size:1.2rem;

font-family:'Playfair Display',serif;

color:var(--dark);

}

.feature-box p{

color:var(--text);

font-size:.95rem;

}

/*======================================
        PROCESS
======================================*/

.process{

background:var(--light);

}

.process-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.process-card{

position:relative;

background:#fff;

padding:45px 30px;

border-radius:24px;

box-shadow:var(--shadow);

text-align:center;

transition:.35s;

}

.process-card:hover{

transform:translateY(-8px);

}

.process-number{

position:absolute;

top:20px;

right:20px;

font-size:4rem;

font-weight:700;

color:rgba(15,118,110,.08);

font-family:'Playfair Display',serif;

}

.process-card i{

font-size:48px;

color:var(--primary);

margin-bottom:25px;

}

.process-card h3{

font-family:'Playfair Display',serif;

font-size:1.5rem;

margin-bottom:15px;

color:var(--dark);

}

.process-card p{

color:var(--text);

line-height:1.8;

}

/*======================================
        TESTIMONIALS
======================================*/

.testimonials{

padding:120px 0;

background:#fff;

}

.testimonial-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.testimonial-card{

background:#fff;

padding:40px;

border-radius:24px;

box-shadow:var(--shadow);

transition:.35s;

}

.testimonial-card:hover{

transform:translateY(-8px);

}

.stars{

margin-bottom:25px;

}

.stars i{

color:#fbbf24;

margin-right:5px;

}

.testimonial-card p{

font-style:italic;

line-height:1.9;

margin-bottom:35px;

color:var(--text);

}

.testimonial-user{

display:flex;

align-items:center;

gap:18px;

}

.testimonial-user img{

width:70px;

height:70px;

border-radius:50%;

object-fit:cover;

}

.testimonial-user h4{

font-family:'Playfair Display',serif;

margin-bottom:5px;

color:var(--dark);

}

.testimonial-user span{

font-size:.9rem;

color:var(--gray);

}

/*=====================================
            GALLERY
======================================*/

.gallery{

padding:120px 0;

background:#F8FAFC;

}

.gallery-grid{

display:grid;

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

gap:20px;

margin-top:70px;

}

.gallery-grid img{

width:100%;

height:280px;

object-fit:cover;

border-radius:20px;

box-shadow:var(--shadow);

transition:.35s;

}

.gallery-grid img:hover{

transform:scale(1.03);

}

.gallery-grid img:nth-child(1){

grid-row:span 2;

height:580px;

}

.gallery-grid img:nth-child(4){

grid-column:span 2;

}

/*=====================================
FAQ
======================================*/

.faq{

padding:120px 0;

background:#fff;

}

.faq-container{

max-width:900px;

margin:70px auto 0;

}

.faq-item{

padding:30px;

margin-bottom:20px;

background:#F8FAFC;

border-radius:18px;

box-shadow:var(--shadow);

}

.faq-item h3{

margin-bottom:15px;

font-family:'Playfair Display',serif;

}

.faq-item p{

color:var(--gray);

line-height:1.8;

}

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

.cta{

padding:120px 0;

}

.cta-box{

background:linear-gradient(135deg,var(--primary),#0d9488);

padding:80px;

border-radius:30px;

text-align:center;

color:#fff;

}

.cta-box h2{

font-family:'Playfair Display',serif;

font-size:3rem;

margin-bottom:20px;

}

.cta-box p{

max-width:700px;

margin:0 auto 40px;

line-height:1.8;

}

.cta-box .btn-primary{

background:#fff;

color:var(--primary);

}

/*====================================
CONTACT
====================================*/

.contact{

padding:120px 0;

background:#f8fafc;

}

.contact-grid{

display:grid;

grid-template-columns:380px 1fr;

gap:60px;

margin-top:70px;

align-items:start;

}

.contact-info{

display:flex;

flex-direction:column;

gap:25px;

}

.contact-card{

display:flex;

gap:20px;

padding:30px;

background:#fff;

border-radius:20px;

box-shadow:var(--shadow);

transition:.3s;

}

.contact-card:hover{

transform:translateY(-6px);

}

.contact-card i{

font-size:32px;

color:var(--primary);

margin-top:5px;

}

.contact-card h3{

margin-bottom:8px;

font-family:'Playfair Display',serif;

}

.contact-card a{

color:var(--text);

transition:.3s;

word-break:break-word;

}

.contact-card a:hover{

color:var(--primary);

}

.contact-form{

background:#fff;

padding:40px;

border-radius:24px;

box-shadow:var(--shadow);

}

.contact-form form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form input,

.contact-form textarea{

padding:18px;

border:1px solid #ddd;

border-radius:12px;

font-family:inherit;

font-size:1rem;

outline:none;

transition:.3s;

}

.contact-form input:focus,

.contact-form textarea:focus{

border-color:var(--primary);

}

.contact-form textarea{

height:180px;

resize:none;

}

.contact-form button{

border:none;

cursor:pointer;

}



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

.footer{

background:#0f172a;

color:#fff;

padding:90px 0 30px;

}

.footer-grid{

display:grid;

grid-template-columns:1.3fr .8fr 1fr 1.4fr;

gap:50px;

}

.footer-logo{

width:140px;

margin-bottom:25px;

}

.footer h3{

margin-bottom:22px;

font-family:'Playfair Display',serif;

font-size:1.3rem;

}

.footer p{

line-height:1.9;

color:#cbd5e1;

}

.footer-links,
.footer-contact{

display:flex;

flex-direction:column;

gap:16px;

}

.footer-links a,
.footer-contact a{

color:#cbd5e1;

transition:.3s;

}

.footer-links a:hover,
.footer-contact a:hover{

color:var(--primary);

}

.footer-contact li{

display:flex;

gap:12px;

align-items:flex-start;

line-height:1.7;

}

.footer-contact i{

color:var(--primary);

margin-top:3px;

width:20px;

}

.footer iframe{

width:100%;

height:230px;

border:none;

border-radius:16px;

box-shadow:var(--shadow);

}

.footer-bottom{

margin-top:60px;

padding-top:30px;

border-top:1px solid rgba(255,255,255,.08);

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

color:#94a3b8;

font-size:.95rem;

}

.developer{

text-align:right;

}

.developer>a{

color:var(--primary);

font-weight:600;

}

.developer-links{

margin-top:10px;

display:flex;

justify-content:flex-end;

gap:10px;

flex-wrap:wrap;

}

.developer-links a{

color:#94a3b8;

transition:.3s;

}

.developer-links a:hover{

color:#fff;

}



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

@media(max-width:992px){

.top-bar{

display:none;

}

.nav-links{

display:none;

}

.nav-btn{

display:none;

}

.menu-btn{

display:block;

}

.nav-container{

height:80px;

}

.logo img{

height:60px;

}

}

@media(max-width:992px){

.hero{

text-align:center;

}

.hero-content{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

flex-wrap:wrap;

gap:40px;

}

.trust-grid{

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

}

.about-grid{

grid-template-columns:1fr;

}

.about-image{

order:2;

}

.about-content{

order:1;

}

.about-image img{

height:500px;

}

}

@media(max-width:768px){

.hero h1{

font-size:3rem;

}

.hero-buttons{

flex-direction:column;

}

.trust-grid{

grid-template-columns:1fr;

}

.about-content h2{

font-size:2.3rem;

}

.about-features{

grid-template-columns:1fr;

}

}

@media(max-width:576px){

.hero{

padding-top:150px;

}

.hero h1{

font-size:2.4rem;

}

.hero-stats{

flex-direction:column;

gap:25px;

}

section{

padding:90px 0;

}

}

@media(max-width:992px){

.services-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.section-heading h2{

font-size:2.4rem;

}

.service-card img{

height:240px;

}

}

@media(max-width:992px){

.why-grid{

grid-template-columns:1fr;

}

.why-image{

order:2;

}

.why-content{

order:1;

}

.why-image img{

height:500px;

}

}

@media(max-width:768px){

.why-content h2{

font-size:2.3rem;

}

}

@media(max-width:992px){

.process-grid{

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

}

}

@media(max-width:768px){

.process-grid{

grid-template-columns:1fr;

}

}

@media(max-width:992px){

.testimonial-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-grid img,

.gallery-grid img:nth-child(1),

.gallery-grid img:nth-child(4){

grid-column:auto;

grid-row:auto;

height:260px;

}

}

@media(max-width:900px){

.contact-grid{

grid-template-columns:1fr;

}

}

@media(max-width:900px){

.contact-grid{

grid-template-columns:1fr;

}

}

@media(max-width:992px){

.footer-grid{

grid-template-columns:1fr;

}

.footer iframe{

height:300px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.developer{

text-align:center;

}

.developer-links{

justify-content:center;

}

}