@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Miniver&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:root{
  --white-color: #fff;
  --dark-color: #252525;
  --primary-color: #3b141c;
  --secondary-color: #f3961c;
  --light-pink-color: #faf4f5;

  --font-size-m: 1.12rem;
  --font-size-l: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 2.3rem;

  --border-radius-m: 30px;
  --border-radius-circle: 50%;
  --site-max-width: 1300px;
}

html{ scroll-behavior: smooth; }

ul{ list-style: none; }
a{ text-decoration: none; }
button{ cursor: pointer; border: none; background: none; }
img{ width: 100%; display: block; }

.section-content{
  margin: 0 auto;
  padding: 0 20px;
  max-width: var(--site-max-width);
}

.section-title{
  text-align: center;
  padding: 60px 0 100px;
  text-transform: uppercase;
  font-size: var(--font-size-xl);
}

html, body{
  max-width: 100%;
  overflow-x: hidden;
}

.section-title::after{
  content: "";
  width: 80px;
  height: 5px;
  display: block;
  margin: 10px auto 0;
  border-radius: 8px;
  background: var(--secondary-color);
}

/* ================= NAVBAR ================= */
header{
  position: fixed;
  width: 100%;
  z-index: 50;
  background: var(--primary-color);
}

header .navbar{
  display: flex;
  padding: 20px;
  align-items: center;
  justify-content: space-between;
}

.navbar .logo-text{
  color: var(--white-color);
  font-size: var(--font-size-xl);
  font-weight: 600;
}

.navbar .logo-text .k-gold{
  font-family: 'Cinzel Decorative', serif;  /* EXACT font from screenshot */
  font-weight: 400;     /* use 400 like your screenshot */
  font-size: 1.4em;
  color: #d4af37;
  padding-left: 4px;
  padding-right: 3.5px;


  display: inline;
  transform: translateY(2px);   /* small adjustment */
  margin-left: -10px;
  margin-right: -5px;             /* slight vertical adjustment */
}

.navbar .logo-text .gap{
  display: inline-flex;
  width: 7px;   /* increase this for more space */
}

.navbar .nav-menu{
  display: flex;
  gap: 10px;
  align-items: center;
}

.navbar .nav-link{
  color: var(--white-color);
  padding: 10px 18px;
  border-radius: var(--border-radius-m);
  font-size: var(--font-size-m);
  transition: 0.3s ease;
}

.navbar .nav-link:hover{
  color: var(--primary-color);
  background: var(--secondary-color);
}

.navbar :where(#menu-close-button, #menu-open-button){
  display: none;
}

/* ================= HERO ================= */
.hero-section{
  min-height: 100vh;
  background: var(--primary-color);
}

.hero-section .section-content{
  display: flex;
  align-items: center;
  min-height: 100vh;
  color: var(--white-color);
  justify-content: space-between;
  gap: 40px;
  padding-top: 110px;
  padding-bottom: 40px;
}

.hero-section .hero-details{
  width: 45%;
}

.hero-section .title{
  font-size: 50px;
  color: pink;
  font-family: "Times New Roman", serif;
}

.hero-section .title .k-gold{
  font-family: 'Cinzel Decorative', serif;  /* EXACT font from screenshot */
  font-weight: 400;     /* use 400 like your screenshot */
  font-size: 1.6em; 
  color: #d4af37;
  padding: 6px;

  display: inline;
  transform: translateY(3px);   /* small adjustment */
  margin-left: -10px;
  margin-right: -5px;             /* slight vertical adjustment */
}

.hero-section .subtitle{
  font-size: 25px;
  margin-top: 8px;
  font-weight: 600;
}

.hero-section .description{
  margin-top: 24px;
  font-size: var(--font-size-m);
}

.hero-section .hero-image-wrapper{
  width: 55%;
  max-width: 760px;
}

.hero-section .hero-image{
  height: 520px;
  object-fit: cover;
  border-radius: 20px;
}

/* ================= SERVICES ================= */
.menu-section{
  background-color: #353535;
  color: rgb(251, 249, 245);
  padding-bottom: 100px;
}

.menu-section .menu-list{
  display: flex;
  flex-wrap: wrap;
  gap: 110px;
  justify-content: space-between;
}

.menu-section .menu-items{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% / 3 - 110px);
  text-align: center;
}

/* SAME SIZE IMAGES */
.menu-section .menu-image{
  width: 180px;
  height: 180px;
  object-fit: contain;
  margin-bottom: 18px;
}

.menu-section .name{
  margin-bottom: 10px;
  font-size: var(--font-size-l);
  font-weight: 600;
}

.menu-section .text{
  max-width: 320px;
  font-size: var(--font-size-m);
  line-height: 1.5;
}

/* ================= ABOUT ================= */
.about-section{
  padding: 120px 0;
  background: #f4d6db;
}

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

.about-section .about-image{
  width: 400px;
  height: 400px;
  object-fit: cover;
  border-radius: var(--border-radius-circle);
}

.about-section .about-details{
  max-width: 50%;
}

.about-section .text{
  line-height: 30px;
  margin: 50px 0 30px;
  text-align: center;
  font-size: var(--font-size-m);
}

.about-section .about-image-wrapper .profile{
  font-size: 30px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Center social icons in About section */
.about-section .social-link-list{
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical align */
  gap: 20px;                 /* space between icons */
  margin-top: 20px;
}

.about-section .social-link{
  font-size: 24px;
  color: var(--primary-color);
  transition: 0.3s ease;
}

.about-section .social-link:hover{
  color: var(--secondary-color);
}

/* ================= CONTACT ================= */
.contact-section{
  padding: 50px 0 100px;
  background: var(--light-pink-color);
}

.contact-section .section-content{
  display: flex;
  gap: 48px;
  justify-content: space-between;
}

.contact-info{
  display: flex;
  gap: 20px;
  margin: 20px 0;
  align-items: center;
}

/* ================= FOOTER ================= */
.footer-section{
  padding: 20px 0;
  background: var(--dark-color);
  color: var(--white-color);
}

.footer-section .footer-content{
  display: flex;
  justify-content: space-between;
}

.footer-section .social-link{
  color: var(--white-color);
  font-size: var(--font-size-l);
  transition: 0.3s ease;
}

.footer-section .social-link:hover{
  color: var(--secondary-color);
}

/* ================= TABLET ================= */
@media screen and (max-width: 1024px){
  .hero-section .hero-image{ height: 440px; }

  .menu-section .menu-items{
    width: calc(100% / 2 - 60px);
  }
}

/* ================= MOBILE ================= */
@media screen and (max-width: 900px){

  /* Show icons */
  .navbar :where(#menu-close-button, #menu-open-button){
    display: block;
    font-size: 1.6rem;
  }

  #menu-open-button{ color: var(--white-color); }

  #menu-close-button{
    position: absolute;
    top: 25px;
    right: 25px;
    color: var(--dark-color);
  }

  .navbar .nav-menu{
    position: fixed;
    top: 0;
    left: calc(-1 * min(80vw, 300px));
    width: min(80vw, 300px);
    height: 100%;
    background: var(--white-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 90px;
    gap: 16px;
    transition: left 0.25s ease;
    z-index: 99;
  }



  body.show-mobile-menu .navbar .nav-menu{
    left: 0;
  }

  .navbar .nav-menu .nav-link{
    color: var(--dark-color);
    font-size: 1.2rem;
  }

  .navbar .logo-text{
    font-size: 1rem;
  }

  .navbar .logo-text .k-gold{
    padding-left: 4px;
    padding-right: 3px;
    display: inline;
  }


  /* HERO */
  .hero-section .section-content{
    flex-direction: column;
    text-align: center;
  }

  .hero-section .title{
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1.1;
  word-break: break-word;
}

  .hero-section .hero-image-wrapper{
    order: -1;
    width: 100%;
  }

  .hero-section .hero-details{
    width: 100%;
  }

  .hero-section .hero-image{
    height: auto;
    max-height: 70vh;
  }

  .menu-section .menu-items{
    width: 100%;
  }

  .about-section .section-content{
    flex-direction: column;
  }

  .about-section .about-details{
    max-width: 100%;
  }

 
  .about-section .about-image{
    width: 250px;
    height: 250px;
    border-radius: 50%;
    margin: 0 auto;
  }

  /* Profile text size for phone */
.about-section .profile{
  font-size: 20px;   /* adjust if needed */
  margin-top: 10px;
}
  

  .contact-section .section-content{
    flex-direction: column;
  }

  .footer-section .footer-content{
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}

@media screen and (max-width: 640px) {
    .menu-section .menu-list {
        gap: 60px;
    }


    .menu-section .menu-list .menu-items 
    {
        width: 100%;
    }
    .footer-section .footer-content {
        flex-direction: column;
        gap: 20px;
    }

}