/* ========================================= */
/* ROOT VARIABLES */
/* ========================================= */

:root{

  --primary:#f5bf23;
  --primary-dark:#e2a900;

  --bg:#fffaf1;
  --white:#ffffff;

  --text:#1d1d1d;
  --text-light:#5b5b5b;

  --card-radius:30px;
  --button-radius:999px;

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

  --transition:0.3s ease;

}

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

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

html{
  scroll-behavior:smooth;
}

body{

  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);

  overflow-x:hidden;

}

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

a{
  text-decoration:none;
}

ul{
  list-style:none;
}

/* ========================================= */
/* GLOBAL CONTAINER */
/* ========================================= */

.container{

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

}

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

.header{

  position:sticky;
  top:0;

  z-index:1000;

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

  backdrop-filter:blur(10px);

  border-bottom:1px solid rgba(0,0,0,0.05);

}

.header-container{

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

  padding:18px 0;

}

/* LOGO */

.logo{

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

}

.logo-image{

  width:52px;
  height:52px;

}

.logo-text h2{

  font-size:1.5rem;
  font-weight:900;

  font-family:'Playfair Display',serif;

}

.logo-text span{

  font-size:.7rem;
  letter-spacing:4px;

  color:#8a6c1d;
  font-weight:700;

}

/* NAVIGATION */

.nav-menu{

  display:flex;
  gap:32px;

}

.nav-menu a{

  color:var(--text);
  font-weight:600;

  transition:var(--transition);

}

.nav-menu a:hover{

  color:var(--primary);

}

/* HEADER BUTTON */

.header-btn{

  background:var(--primary);

  color:#111;

  padding:14px 24px;

  border-radius:var(--button-radius);

  font-weight:800;

  transition:var(--transition);

  box-shadow:var(--shadow);

}

.header-btn:hover{

  transform:translateY(-3px);

  background:var(--primary-dark);

}

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

.hero{

  position:relative;

  padding:100px 0;

  overflow:hidden;

}

/* BACKGROUND BLOB */

.hero::before{

  content:"";

  position:absolute;

  width:700px;
  height:700px;

  background:
    radial-gradient(circle,
    rgba(245,191,35,.25),
    transparent 70%);

  top:-200px;
  right:-200px;

  z-index:-1;

}

.hero-grid{

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

  align-items:center;

  gap:60px;

}

/* HERO CONTENT */

.hero-content h1{

  font-size:5rem;
  line-height:0.95;

  font-weight:900;

  margin-bottom:24px;

}

.hero-content h1 span{

  color:var(--primary);

}

.hero-script{

  font-family:'Caveat',cursive;

  font-size:2.3rem;

  color:#6d5120;

  margin-bottom:20px;

}

.hero-text{

  font-size:1.1rem;

  line-height:1.8;

  color:var(--text-light);

  max-width:540px;

}

/* BUTTON GROUP */

.hero-buttons{

  display:flex;
  gap:18px;

  margin-top:35px;

  flex-wrap:wrap;

}

/* BUTTONS */

.btn-primary{

  background:var(--primary);

  color:#111;

  padding:16px 30px;

  border-radius:999px;

  font-weight:800;

  display:inline-flex;

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

  transition:var(--transition);

  box-shadow:var(--shadow);

}

.btn-primary:hover{

  transform:translateY(-3px);

}

.btn-secondary{

  padding:16px 28px;

  border-radius:999px;

  border:2px solid rgba(0,0,0,0.08);

  color:var(--text);

  font-weight:700;

  transition:var(--transition);

}

.btn-secondary:hover{

  background:white;

}

/* HERO IMAGE */

.hero-image img{

  border-radius:40px;

  box-shadow:var(--shadow);

}

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

.section-header{

  text-align:center;

  margin-bottom:60px;

}

.section-header h2{

  font-size:3rem;

  font-weight:900;

  margin-bottom:16px;

}

.section-header p{

  max-width:700px;

  margin:auto;

  line-height:1.8;

  color:var(--text-light);

}

/* ========================================= */
/* LANGUAGE SWITCHER */
/* ========================================= */

.language-switcher{

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

}

.lang-btn{

  border:none;

  background:#fff4d1;

  padding:10px 16px;

  border-radius:999px;

  cursor:pointer;

  font-weight:700;

  transition:0.3s;

}

.lang-btn:hover{

  background:#f5bf23;

  color:#111;

}

/* ========================================= */
/* PLANS */
/* ========================================= */

.plans{

  padding:100px 0;

}

.plans-grid{

  display:grid;

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

  gap:30px;

}

/* PLAN CARD */

.plan-card{

  background:var(--white);

  padding:40px;

  border-radius:var(--card-radius);

  box-shadow:var(--shadow);

  transition:var(--transition);

}

.plan-card:hover{

  transform:translateY(-8px);

}

/* FEATURED PLAN */

.plan-card.featured{

  background:
    linear-gradient(
      180deg,
      #ffe7a0,
      #fff8ee
    );

  transform:translateY(-12px);

}

/* LABEL */

.plan-label{

  display:inline-block;

  background:#fff1c7;

  padding:8px 18px;

  border-radius:999px;

  font-size:.75rem;

  font-weight:800;

  margin-bottom:24px;

}

/* PLAN TITLE */

.plan-card h3{

  font-size:2rem;

  margin-bottom:14px;

}

/* PRICE */

.price{

  font-size:3rem;

  font-weight:900;

  color:var(--primary-dark);

  margin-bottom:24px;

}

/* PLAN FEATURES */

.plan-card ul{

  display:flex;
  flex-direction:column;

  gap:16px;

  margin-bottom:30px;

}

.plan-card li{

  color:#444;

}

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

.services{

  padding:40px 0 100px;

}

.service-grid{

  display:grid;

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

  gap:24px;

}

.service-box{

  background:white;

  padding:35px;

  border-radius:24px;

  box-shadow:var(--shadow);

  text-align:center;

}

.service-box h3{

  margin-bottom:14px;

  font-size:1.3rem;

}

.service-box p{

  line-height:1.7;

  color:var(--text-light);

}

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

.contact{

  padding:80px 0;

}

.contact-wrapper{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:40px;

  align-items:center;

  background:white;

  border-radius:40px;

  padding:50px;

  box-shadow:var(--shadow);

}

.contact-left h2{

  font-size:3rem;

  margin-bottom:18px;

}

.contact-left p{

  line-height:1.8;

  color:var(--text-light);

}

/* CONTACT LINKS */

.contact-right{

  display:flex;

  flex-direction:column;

  gap:18px;

}

.contact-right a{

  background:#fff8ea;

  padding:18px 22px;

  border-radius:22px;

  color:#111;

  font-weight:700;

  transition:var(--transition);

}

.contact-right a:hover{

  transform:translateX(6px);

}

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

.footer{

  background:#1e1d1c;

  color:white;

  margin-top:80px;

  padding-top:70px;

}

.footer-container{

  display:grid;

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

  gap:50px;

  padding-bottom:50px;

}

/* FOOTER BRAND */

.footer-brand{

  display:flex;

  gap:18px;

}

.footer-brand img{

  width:60px;
  height:60px;

}

.footer-brand h3{

  margin-bottom:12px;

}

.footer-brand p{

  color:#d0d0d0;

  line-height:1.7;

}

/* FOOTER LINKS */

.footer-links h4,
.footer-contact h4{

  margin-bottom:20px;

}

.footer-links ul{

  display:flex;

  flex-direction:column;

  gap:14px;

}

.footer-links a{

  color:#d8d8d8;

  transition:var(--transition);

}

.footer-links a:hover{

  color:var(--primary);

}

/* FOOTER CONTACT */

.footer-contact p{

  margin-bottom:12px;

  color:#d8d8d8;

}

/* BOTTOM */

.footer-bottom{

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

  padding:24px 0;

  text-align:center;

  color:#cfcfcf;

}

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

@media(max-width:992px){

  .hero-grid,
  .plans-grid,
  .service-grid,
  .contact-wrapper,
  .footer-container{

    grid-template-columns:1fr;

  }

  .hero-content h1{

    font-size:4rem;

  }

}

@media(max-width:768px){

  .header-container{

    flex-direction:column;

    gap:20px;

  }

  .nav-menu{

    gap:18px;

    flex-wrap:wrap;

    justify-content:center;

  }

  .hero{

    padding:70px 0;

  }

  .hero-content h1{

    font-size:3rem;

  }

  .section-header h2{

    font-size:2.3rem;

  }

  .contact-left h2{

    font-size:2.2rem;

  }

}