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

body{
  font-family:'Manrope', sans-serif;
  background:#f5f7fb;
  color:#1d1d1d;
}

img{
  width:100%;
  display:block;
}

a{
  text-decoration:none;
}

.header{
  width:100%;
  padding:30px 80px;

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

.logo{
  font-size:24px;
  font-weight:700;
}

.nav{
  display:flex;
  gap:40px;
}

.nav a{
  color:#222;
  font-weight:500;
}

.hero{
  padding:40px 80px;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:60px;
}

.hero-left{
  width:50%;
}

.small-text{
  color:#6f87ff;
  margin-bottom:20px;
}

.hero h1{
  font-size:72px;
  line-height:1.1;
  margin-bottom:20px;
}

.hero-description{
  color:#666;
  width:80%;
  margin-bottom:30px;
}

.main-btn{
  padding:18px 42px;
  border:none;
  border-radius:50px;
  background:#7d9bff;
  color:white;
  font-size:16px;
  cursor:pointer;

  transition:0.3s;
}

.main-btn:hover{
  background:#4f6fef;
  transform:translateY(-3px);
}

.hero-right{
  width:50%;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.grid-card{
  border-radius:30px;
  overflow:hidden;
  background:white;
  min-height:250px;
}

.grid-card img{
  height:100%;
  object-fit:cover;
}

.dark{
  background:#4f6fef;
  color:white;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.dark h2{
  font-size:52px;
}

.services{
  padding:100px 80px;
}

.section-title{
  font-size:42px;
  margin-bottom:50px;
}

.services-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

.service-card{
  background:#dce8ff;
  border-radius:30px;
  overflow:hidden;

  transition:0.4s;
}

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

.service-info{
  padding:25px;
}

.service-card h3{
  color:#222;
  font-size:24px;
}

.service-card img{
  height:350px;
  object-fit:cover;
}

.reviews{
  padding:100px 80px;
}

.slider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
}

/* =========================
   REVIEWS SLIDER
========================= */

.reviews{

    padding:120px 80px;
}

.slider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:40px;
}

.slides{

    width:900px;

    overflow:hidden;

    position:relative;

    height:320px;
}

.slide{

    position:absolute;

    inset:0;

    background:white;

    border-radius:40px;

    padding:70px;

    box-sizing:border-box;

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

    transition:
    transform 0.7s cubic-bezier(0.77,0,0.175,1);

    transform:translateX(100%);

}



/* ACTIVE */

.slide.active{

    transform:translateX(0);

    z-index:2;
}



/* LEFT */

.slide.to-left{

    transform:translateX(-120%);
}



/* RIGHT */

.slide.to-right{

    transform:translateX(120%);
}



/* TEXT */

.slide p{

    font-size:32px;

    line-height:1.5;

    margin-bottom:30px;
}

.slide h4{

    font-size:26px;

    font-weight:700;
}



/* BUTTONS */

.prev,
.next{

    width:70px;

    height:70px;

    border:none;

    border-radius:50%;

    background:#6f87ff;

    color:white;

    font-size:28px;

    cursor:pointer;

    transition:0.3s;
}

.prev:hover,
.next:hover{

    transform:scale(1.08);

    background:#4f6fef;
}

.booking{
  padding:100px 80px;

  display:flex;
  gap:40px;
}

.booking-left,
.booking-right{
  width:50%;
}

.booking-left img{
  border-radius:40px;
  height:100%;
  object-fit:cover;
}

.booking-right{
  background:#4f6fef;
  border-radius:40px;
  padding:60px;
  color:white;
}

.booking-right h2{
  font-size:42px;
  margin-bottom:40px;
}

form{
  display:flex;
  flex-direction:column;
  gap:20px;
}

input,
select{
  padding:18px;
  border:none;
  border-radius:20px;
  font-size:16px;
}

form button{
  padding:18px;
  border:none;
  border-radius:20px;
  background:white;
  color:#4f6fef;
  font-size:18px;
  cursor:pointer;
}

.footer{
  padding:60px 80px;

  display:flex;
  justify-content:space-between;
}


.service-page{
    background:#f5f7fb;
    font-family:'Manrope', sans-serif;
}

.service-header{
    padding:40px 80px;

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

.back-btn{
    color:#4f6fef;
    font-weight:600;
}

.service-header h1{
    font-size:42px;
}

.service-hero{
    margin:0 80px 80px;
    border-radius:40px;

    padding:60px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}

.blue-theme{
    background:#dce8ff;
}

.mint-theme{
    background:#dff8f2;
}

.purple-theme{
    background:#efe7ff;
}

.peach-theme{
    background:#e2dfff;
}

.service-text{
    width:50%;
}

.service-subtitle{
    margin-bottom:20px;
    color:#994b4b;
}

.service-text h2{
    font-size:58px;
    line-height:1.1;
    margin-bottom:20px;
}

.service-text p{
    font-size:18px;
    color:#555;
}

.service-image{
    width:45%;
}

.service-image img{
    border-radius:30px;
    height:500px;
    object-fit:cover;
}

.gallery-section,
.info-cards,
.products-grid,
.steps-section{
    padding:0 80px 100px;

    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
}

.gallery-card,
.info-card,
.product-card,
.step-card{
    background:white;
    border-radius:30px;
    overflow:hidden;

    transition:0.4s;
}

.gallery-card:hover,
.info-card:hover,
.product-card:hover,
.step-card:hover{
    transform:translateY(-10px);
}

.gallery-card img{
    height:350px;
    object-fit:cover;
}

.gallery-info{
    padding:25px;
}

.gallery-info h3{
    margin-bottom:10px;
}

.info-card,
.product-card,
.step-card{
    padding:40px;
}

.step-card span{
    font-size:52px;
    color:#cbc6f8;
    font-weight:700;
}
.success-card button{
    padding:16px 36px;

    border:none;

    border-radius:18px;

    background:#6f87ff;

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:0.3s;
}

.success-card button:hover{

    background:#4f6fef;

    transform:translateY(-3px);

}
.modal-content button{

    padding:16px 36px;

    border:none;

    border-radius:18px;

    background:#6f87ff;

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:0.3s;
}

.modal-content button:hover{

    background:#4f6fef;

    transform:translateY(-3px);

}
.success-overlay{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,0.4);

    backdrop-filter:blur(10px);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999;
}

.success-overlay.active{
    display:flex;
}

.success-card{
    width:500px;

    background:white;

    border-radius:40px;

    padding:60px;

    text-align:center;

    animation:popup 0.4s ease;
}

.success-icon{
    width:100px;
    height:100px;

    background:#dff8e7;

    border-radius:50%;

    margin:0 auto 30px;

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

    font-size:48px;
    color:#4fcf79;
    font-weight:700;
}

.success-card h2{
    font-size:42px;
    margin-bottom:20px;
}

.success-card p{
    color:#666;
    line-height:1.6;
    margin-bottom:30px;
}

.success-card button{

    padding:16px 36px;

    border:none;

    border-radius:18px;

    background:#6f87ff;

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:0.3s;
}

.success-card button:hover{

    background:#4f6fef;

    transform:translateY(-3px);

}

@keyframes popup{

    from{
        opacity:0;
        transform:scale(0.7);
    }

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

}
/* =========================
   HOVER ANIMATIONS
========================= */

.service-card,
.gallery-card,
.info-card,
.product-card,
.step-card,
.dynamic-card{

    transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;

    cursor:pointer;
}

.service-card:hover,
.gallery-card:hover,
.info-card:hover,
.product-card:hover,
.step-card:hover,
.dynamic-card:hover{

    transform:
    translateY(-12px)
    scale(1.02);

    box-shadow:
    0 20px 40px rgba(111, 135, 255, 0.2);
}



/* IMAGE ZOOM */

.service-card img,
.gallery-card img,
.service-image img{

    transition:
    transform 0.5s ease;
}

.service-card:hover img,
.gallery-card:hover img,
.service-image:hover img{

    transform:scale(1.08);
}



/* BUTTON HOVER */

button{

    transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

button:hover{

    transform:translateY(-3px);

    box-shadow:
    0 10px 20px rgba(111, 135, 255, 0.25);
}



/* NAVIGATION HOVER */

.nav a{

    position:relative;

    transition:0.3s;
}

.nav a::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;
    height:2px;

    background:#6f87ff;

    transition:0.3s;
}

.nav a:hover::after{

    width:100%;
}



/* FORM INPUTS */

input,
select{

    transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

input:focus,
select:focus{

    outline:none;

    transform:scale(1.02);

    box-shadow:
    0 0 0 4px rgba(111, 135, 255, 0.15);
}