/*Imports Google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:ital,wght(10;400;0;500;0;600;0;700;1,400&display=swap)');

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

:root {
  /*Colors*/
  --white-color:white;
  --dark-color:rgb(43, 41, 41);
  --primary-color:rgba(5, 5, 49, 0.897);
  --secondary-color:#f3961c;
  --light-pink-color:#faf4f5;
  --medium-gray-color:#ccc;

  /*Font size*/
  --font-size-s:0.9rem;
  --font-size-n:1rem;
  --font-size-m:1.12rem;
  --font-size-l:1.5rem;
  --font-size-xl:2rem;
  --font-size-xxl:2.3rem;

  /*Font weight*/
  --font-weight-normal:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;

  /*Border radius*/
  --border-radius-s:8px;
  --border-radius-m:30px;
  --border-radius-circle:50%;

  /*Site max width*/
  --site-max-width:1300px;
}

html {
  scroll-behavior:smooth;
}

/*Styles for the whole site*/
ul {
  list-style:none;
}

a {
  text-decoration:none;
}

button {
  cursor:pointer;
  border:none;
  background:none;
}

img {
  width:100%;
}

.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);
}

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

/*Navbar Styles*/

.topic {
  color:var(--secondary-color);
  font-weight:bold;
}

header {
  position:fixed;
  width:100%;
  z-index:5;
  background:var(--primary-color);
}

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

.navbar .nav-logo .logo-text {
  color:var(--white-color);
  font-size:var(--font-size-xl);
  font-weight:var(--font-weight-semibold);
  font-family:Times;
  background:-webkit-linear-gradient(var(--secondary-color), white);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  cursor:default;
}

.navbar .nav-logo .logo-image {
  max-width:50px;
  margin-bottom:-14px;
  margin-right:-4px;
  border-radius:50%;
  border:1px solid var(--secondary-color);
  cursor:default;
}

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

.navbar .nav-menu .nav-link {
  padding:10px 18px;
  color:var(--white-color);
  font-size:var(--font-size-m);
  border-radius:var(--border-radius-m);
  transition:0.3s ease;
}
.navbar .nav-menu .nav-link:hover {
  color:var(--primary-color);
  background:var(--secondary-color);
}
 .navbar :where(#menu-close-button, #menu-open-button) {
  display:none;
 }

/*Hero Section Styles*/
.hero-section {
  min-height:100vh;
  background:rgb(65, 64, 64);
}

.hero-section .section-content {
  display:flex;
  align-items:center;
  min-height:100vh;
  color:var(--white-color);
  justify-content:space-between;
}

.hero-section .hero-details .title {
  font-size:var(--font-size-xxl);
  color:var(--secondary-color);
  font-family:"Miniver",sans-serif;
}

.hero-section .hero-details .subtitle {
  margin-top:8px;
  max-width:70%;
  font-size:var(--font-size-xl);
  font-weight:var(--font-weight-semibold);
}

.hero-section .hero-details .description {
  max-width:70%;
  margin:24px 0 40px;
  font-size:var(--font-size-m);
}

.hero-section .hero-details .buttons {
  display:flex;
  gap:23px;
}

.hero-section .hero-details .button {
  padding: 10px 26px;
  border:2px solid transparent;
  color:var(--primary-color);
  border-radius:var(--border-radius-m);
  background:var(--secondary-color);
  font-weight:var(--font-weight-medium);
  transition:0.3s ease;
}
.hero-section .hero-details .button:hover,
.hero-section .hero-details .contact-us {
  color:var(--white-color);
  border-color:var(--white-color);
  background:transparent;
}

.hero-section .hero-details .contact-us:hover {
  color:var(--primary-color);
  border-color:var(--secondary-color);
  background:var(--secondary-color);
}

.hero-section .hero-image-wrapper .hero-image {
  height:500px;
  width:500px;
  margin-bottom:none;
  border:5px solid var(--primary-color);
  border-radius:var(--border-radius-circle);
  opacity:0.5;
}

/*About Section Styles*/
.about-section {
  padding:120px 0;
  background:var(--light-pink-color);
}

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

.about-section .about-image-wrapper .about-image {
  width:350px;
  height:350px;
  object-fit:cover;
  border-radius:var(--border-radius-m);
  border:1px solid var(--secondary-color);
  cursor:zoom-in;
  transition:0.3s ease;
}

.about-image:hover {
  transform:scale(1.2);
}

.about-section .about-details .section-title {
  padding:0;
}

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

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

.about-section .social-link-list {
  display:flex;
  gap:25px;
  justify-content:center;
}

.about-section .social-link-list .social-link {
  color:var(--primary-color);
  font-size:var(--font-size-1);
  transition:0.2s ease;
}
  
.about-section .social-link-list .social-link:hover {
  color:var(--secondary-color);
}

/*Service Section Styles*/

.menu-section {
  color:var(--white-color);
  background:rgb(65, 64, 64);
  padding:50px 0 100px;
}

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

.menu-section .menu-list .menu-item {
  display:flex;
  align-items:center;
  text-align:center;
  flex-direction:row;
  justify-content:center;
  width:100%;
  margin-top:-70px;
}

.menu-section .menu-list .menu-item .menu-image {
  max-width:83%;
  aspect-ratio:1;
  margin-bottom:15px;
  object-fit:contain;
}

.menu-section .menu-list .menu-item .text {
  font-size:var(--font-size-m);
}

.instruction {
  text-align:center;
}

.decor1 {
  font-size:var(--font-size-l);
  color:var(--secondary-color);
  font-weight:bold;
  text-align:center;
}

.img1 {
  transition:01;
}
.img1:hover {
  opacity:0.4;
}
.img1:active {
  opacity:0.7;
}

.img2 {
  transition:01;
}
.img2:hover {
  opacity:0.4;
}
.img2:active {
  opacity:0.7;
}

/*Gallery Section Styles*/
.gallery-section {
  padding:50px 0 100px;
}

.gallery-section .gallery-list {
  display:flex;
  flex-wrap:wrap;
  gap:32px;
}

.gallery-section .gallery-list .gallery-item {
  overflow:hidden;
  border-radius:var(--border-radius-s);
  width: calc(100% / 3 - 32px);
}

.gallery-section .gallery-item .gallery-image {
  width:100%;
  height:100%;
  cursor:zoom-in;
  transition: 0.3s ease;
}

.gallery-section .gallery-item:hover .gallery-image {
  transform:scale(1.3);
}

.scrap {
  border:1px solid var(--secondary-color);
}
/*Contact Section Styles*/
.contact-section {
  padding:50px 0 100px;
  background:rgb(65, 64, 64);
}

.contact-section-1 {
  color:white;
}

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

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

.contact-section .contact-info-list .contact-info {
  font-size:var(--font-size-m);
}

.contact-section .contact-form .form-input {
  width:100%;
  height:50px;
  padding:0 12px;
  outline:none;
  margin-bottom:16px;
  background:var(--white-color);
  border-radius:var(--border-radius-s);
  border:1px solid var(--medium-gray-color);
}

.contact-section .contact-form {
  max-width:50%;
}

.contact-section .contact-form .form-input:focus {
  border-color:var(--secondary-color);
}

.contact-section .contact-form textarea.form-input {
  height:100px;
  padding:12px;
  resize:vertical;
}

.contact-section .contact-form .submit-button {
  padding:10px 26px;
  margin-top:10px;
  color:var(--white-color);
  font-size:var(--font-size-m);
  font-weight:var(--font-weight-medium);
  background:var(--primary-color);
  border-radius:var(--border-radius-m);
  border:1px solid var(--primary-color);
  transition:0.3 ease;
}

.contact-section .contact-form .submit-button:hover {
  color:var(--white-color);
  border-color:white;
  background:transparent;
}

/*Footer Section Styles*/
.footer-section {
  padding:20px 0;
  background:var(--dark-color);
}

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

.footer-section :where(.copyright-text, .social-link, .policy-link) {
  color:var(--white-color);
  transition:0.2s ease;
}

.footer-section .social-link-list {
  display:flex;
  gap:25px;
}

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

.footer-section .policy-text .separator {
  margin:0 5px;
  color:var(--white-color);
}


/*Responsive media query code for max width 1024px*/
@media screen and (max-width:1024px) {

  .menu-section .menu-list .menu-item .name {
    margin:12px 0;
    font-size:var(--font-size-l);
    font-weight:var(--font-weight-semibold);
  }

  .menu-section .menu-list {
    gap:60px;
  }
  
  .menu-section .menu-list .menu-item {
    width:100%;
  }


}

/*Responsive media query code for max width 900px*/
@media screen and (max-width:900px) {
   :root {
  --font-size-m:1rem;
  --font-size-l:1.3rem;
  --font-size-xl:1.5rem;
  --font-size-xxl:1.8rem;
  }

  body.show-mobile-menu header::before {
  content:"";
  position:fixed;
  left:0;
  top:0;
  height:100%;
  width:100%;
  backdrop-filter:blur(4px);
  background:rgba(0, 0, 0, 0.2);
}

  .navbar :where(#menu-close-button, #menu-open-button) {
    display:block;
    font-size:var(--font-size-1);
  }
  
  .navbar #menu-close-button {
    position:absolute;
    right:30px;
    top:30px;
  }

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

  .navbar .nav-menu {
    display:block;
    position:fixed;
    left:-300px;
    top:0;
    width:300px;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top:100px;
    background:var(--white-color);
    transition:left 0.2s ease;
  }

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

  .navbar .nav-menu .nav-link {
    color:var(--dark-color);
    display:block;
    margin-top:aut17px;
    font-size:var(--font-size-1);
  }

  .hero-section .section-content {
    gap:50px;
    text-align:center;
    padding:30px 20px 20px;
    flex-direction:column-reverse;
    justify-content:center;
   }

  .hero-section .hero-details :is(.subtitle, .description), 
  .about-section .about-details, .contact-section .contact-form {
    max-width:100%;
   }

   .hero-section .hero-details .buttons {
    justify-content:center;
   }

  .hero-section .hero-image-wrapper{
   max-width:270px;
   margin-right:0;
  }

  .about-section .section-content {
    gap:70px;
    flex-direction:column-reverse;
  }

  .about-section .about-image-wrapper .about-image {
    width:100%;
    height:100px;
    max-width:250px;
    aspect-ratio:1;
  }

  .menu-section .menu-list {
    gap:30px;
  }
  
  .menu-section .menu-list .menu-item {
    width:100%;
  }

  .menu-section .menu-list .menu-item .menu-image {
    max-width:200px;
  }

  .hero-section .hero-image-wrapper .hero-image {
    width:300px;
    height:300px;
    margin-bottom:none;
    margin-left:-20px;
    margin-top:50px;
  }

  .gallery-section .gallery-list .gallery-item {
    width:calc(100% / 2 - 30px);
  }

  .gallery-section .gallery-list {
    gap: 30px;
  }

  .contact-section .section-content {
    align-item:center;
    flex-direction:column-reverse;
  }
}

/*Responsive media query code for max width 640px*/
@media screen and (max-width:640px) {
  .menu-section .menu-list {
    gap:60px;
  }

  .menu-section .menu-list .menu-item,
  .gallery-section .gallery-list .gallery-item {
    width:100%;
  }

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