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

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

       :root {
         /* Colors */
         --white-color: #fff;
         --dark-color: #252525;
         --primary-color: #3867d6;
         --secondary-color: #4b7bec;
         --light-pink-color: #f0f4fd;
         --medium-gray-color: #ccc;
         --accent-color: #fed330;
         --accent-color-dark: #f7b731;
         /* Font size */
         --font-size-s: 0.85rem;
         --font-size-n: 0.95rem;
         --font-size-m: 1rem;
         --font-size-l: 1.3rem;
         --font-size-xl: 1.8rem;
         --font-size-xxl: 2rem;
         /* Font weight */
         --font-weight-normal: 400;
         --font-weight-medium: 500;
         --font-weight-semibold: 600;
         --font-weight-bold: 700;
         /* Border radius */
         --border-radius-s: 5px;
         --border-radius-m: 5px;
         --border-radius-circle: 50%;
         /* Site max width */
         --site-max-width: 1300px;
       }

       html {
         scroll-behavior: smooth;
       }

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

       a {
         text-decoration: none;
       }

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

       img {
         width: 100%;
       }

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

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

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

       /* Navbar styling */
       header {
         z-index: 5;
         width: 100%;
         position: fixed;
         background: rgba(0, 0, 0, 0.7);
         backdrop-filter: blur(5px);
       }

       header .navbar {
         display: flex;
         padding: 20px;
         align-items: center;
         margin: 0 auto;
         justify-content: space-between;
         max-width: var(--site-max-width);
       }

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

       .navbar .nav-logo .logo-image {
         width: 40px;
         height: 40px;
         object-fit: contain;
       }

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

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

       .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(--dark-color);
         background: var(--accent-color);
       }

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

       /* Hero section styling with different images for desktop and mobile */
       .hero-section {
         min-height: 100vh;
         /* Desktop image */
         background: url('https://static.vecteezy.com/system/resources/previews/003/462/048/large_2x/business-partnership-meeting-concept-and-business-handshake-free-photo.jpg');
         background-size: cover;
         background-position: center;
         position: relative;
       }

       .hero-section::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.5);
         /* backdrop-filter: blur(5px); */
       }

       .hero-section .section-content {
         display: flex;
         padding-top: 40px;
         align-items: center;
         min-height: 100vh;
         justify-content: center;
         position: relative;
         z-index: 1;
       }

       .hero-section .hero-details {
         color: var(--white-color);
         text-align: center;
         max-width: 800px;
       }

       .hero-section .hero-details .title {
         font-size: var(--font-size-xxl);
         color: var(--accent-color);
         font-weight: var(--font-weight-bold);
       }

       .hero-section .hero-details .subtitle {
         margin-top: 0;
         max-width: 100%;
         font-size: calc(var(--font-size-xl) * 1.4);
         font-weight: var(--font-weight-bold);
         color: var(--accent-color);
         margin-bottom: 20px;
       }

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

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

       .hero-section .hero-details .button {
         padding: 12px 30px;
         display: block;
         border: 2px solid var(--accent-color);
         border-radius: var(--border-radius-m);
         background: var(--accent-color);
         color: var(--dark-color);
         font-size: var(--font-size-l);
         font-weight: var(--font-weight-semibold);
         transition: 0.3s ease;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
       }

       .hero-section .hero-details .button:hover {
         transform: translateY(-3px);
         box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
         background: var(--accent-color-dark);
         border-color: var(--accent-color-dark);
       }

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

       .hero-section .hero-image-wrapper {
         display: none;
       }

       /* About section styling */
       .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 {
         height: 400px;
         width: 400px;
         object-fit: cover;
         border-radius: var(--border-radius-circle);
         pointer-events: none;
       }

       .about-section .how-it-works-image-wrapper .how-it-works-image {
        height: 500px;
        width: 400px;
        object-fit: cover;
        /* border-radius: var(--border-radius-circle); */
        pointer-events: none;
      }

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

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

       .about-section .about-details .text {
         line-height: 1.7;
         margin: 20px 0;
         text-align: left;
         font-size: var(--font-size-m);
       }

       .about-section .about-details .text:first-of-type {
         margin-top: 50px;
       }

       .about-section .about-details .text:last-of-type {
         margin-bottom: 30px;
       }

       .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-l);
         transition: 0.2s ease;
       }

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

       /* Menu section styling */
       .menu-section {
         color: var(--white-color);
         background: var(--dark-color);
         padding: 50px 0 70px;
       }

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

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

       .menu-section .menu-list .menu-item .menu-image {
         width: 100%;
         aspect-ratio: 1;
         margin-bottom: -70px;
         object-fit: contain;
         font-size: 7rem;
         color: var(--accent-color);
         /* line-height: 0.8; */
         height: auto;
       }

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

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

       /* Why Choose Us section styling */
       .why-choose-section {
         padding: 80px 0;
         background: var(--light-pink-color);
       }

       .why-choose-section .why-choose-grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 40px;
         margin-top: 20px;
       }

       .why-choose-section .why-choose-item {
         display: flex;
         background: var(--white-color);
         border-radius: var(--border-radius-s);
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
         padding: 30px;
         transition: all 0.3s ease;
       }

       .why-choose-section .why-choose-item:hover {
         transform: translateY(-5px);
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
       }

       .why-choose-section .icon-wrapper {
         color: var(--accent-color);
         margin-right: 20px;
         min-width: 60px;
         display: flex;
         align-items: flex-start;
         justify-content: center;
       }

       .why-choose-section .content h3 {
         margin-bottom: 10px;
         font-size: var(--font-size-l);
         font-weight: var(--font-weight-semibold);
         color: var(--dark-color);
       }

       .why-choose-section .content p {
         font-size: var(--font-size-m);
         color: var(--dark-color);
         line-height: 1.6;
       }

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

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

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

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

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

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

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

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

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

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

       /* Footer section styling */
       .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 {
         font-size: var(--font-size-l);
       }

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

       .footer-section .policy-text .separator {
         color: #fff;
         margin: 0 5px;
       }

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

         .menu-section .menu-list .menu-item {
           width: calc(100% / 3 - 60px);
         }
       }

       /* 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 {
           overflow: hidden;
         }

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

         .navbar :is(#menu-open-button, #menu-close-button) {
           font-size: var(--font-size-l);
           display: block;
         }

         .navbar :is(#menu-open-button, #menu-close-button):hover {
           color: var(--accent-color) !important;
         }

         .navbar #menu-open-button {
           color: #fff;
         }

         .navbar .nav-menu #menu-close-button {
           position: absolute;
           right: 30px;
           top: 30px;
           color: var(--dark-color);
         }

         .navbar .nav-menu {
           display: flex;
           background: var(--white-color);
           position: fixed;
           top: 0;
           left: -300px;
           height: 100vh;
           width: 300px;
           align-items: center;
           flex-direction: column;
           padding-top: 100px;
           transition: left 0.3s ease;
           z-index: 10;
           box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
           overflow-y: auto;
         }

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

         .navbar .nav-menu .nav-link {
           display: block;
           margin-top: 17px;
           padding: 10px 22px;
           color: var(--dark-color);
           font-size: var(--font-size-l);
         }

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

         .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: 100%;
           aspect-ratio: 1;
           max-width: 250px;
         }

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

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

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

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

         .why-choose-section .why-choose-grid {
           grid-template-columns: 1fr;
           gap: 30px;
         }

         .why-choose-section .why-choose-item {
           padding: 25px;
         }

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

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

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

         .menu-section .menu-list {
           gap: 60px;
         }

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