/* Global Reset and Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  background-color: #FFFFFF;
}

p {
  margin: 0;
}

/* Layout Container */
.container {
  width: 1440px;
  margin: 0 auto;
  position: relative;
}

/* Hero Section */
.hero {
  height: 417px;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero-bg img {
  width: 100%;
  object-fit: cover;
}

.hero-title {
  position: absolute;
  top: 50%;
  color: #FFFFFF;
  font-size: 36px;
  font-family: 'Bellefair', serif;
  text-align: center;
  line-height: 41px;
  letter-spacing: 4.32px;
  text-align: center;
  width: 100%;
  letter-spacing: 0.12em;
}

/* Header */
.header {
  height: 65px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.header-content {
  width: 1216px;
  height: 33px;
  margin: 21.5px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-logo {
  width: 163px;
  height: 33px;
  position: relative;
}

.logo-element {
  position: absolute;
}

.logo-dot {
  width: 2.51px;
  height: 21.14px;
  background: #FFFFFF;
  position: absolute;
  left: 81.96px;
  top: 11.91px;
}

.logo-line {
  position: absolute;
  background: #FFFFFF;
}

.logo-line-1 {
  width: 0.94px;
  height: 16.32px;
  left: 98.23px;
  top: 0.05px;
}

.logo-line-2 {
  width: 0.94px;
  height: 16.32px;
  left: 150.44px;
  top: 0.05px;
}

.logo-line-3 {
  width: 0.94px;
  height: 9.99px;
  left: 102.71px;
  top: 6.37px;
}

.logo-line-4 {
  width: 0.94px;
  height: 1.01px;
  left: 102.71px;
  top: 3.63px;
}

.header-menu {
  
}

.menu-icon {
  width: 16px;
  height: 16px;
  position: relative;
}

/* About Section */
.about {
  height: 619px;
  position: relative;
  overflow: hidden;
}

.about-bg {
  object-fit: cover;
}

.about-content {
  width: 695px;
  height: 319px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 55px;
}

.about-title {
  color: #000000;
  font-size: 48px;
  font-family: 'Felix Titling', serif;
  text-align: center;
  letter-spacing: 2px;
}

.about-text {
  width: 100%;
  color: #000000;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  line-height: 25px;
  letter-spacing: 1px;
}

/* Products Section */
.products {
  height: 4558px;
  padding-top: 216px;
  background: #FFFFFF;
}

.products-container {
  width: 1216px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 150px;
}

.products-intro {
  color: #3D3D3D;
  font-size: 48px;
  font-family: 'Felix Titling', serif;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 2px;
}

.products-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 150px;
}

.product-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.product-item {
  position: relative;
}

.product-item img {
  object-fit: cover;
}

.product-item-1 {
  width: 600px;
  height: 507.1px;
}

.product-item-2 {
  width: 293px;
  height: 508px;
}

.product-item-2 img:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 293px;
  height: 247px;
}

.product-item-2 img:last-child {
  position: absolute;
  top: 260px;
  left: 0;
  width: 293px;
  height: 248px;
}

.product-item-3 {
  width: 298.88px;
  height: 508px;
}

.product-item-4 {
  width: 600.83px;
  height: 508px;
}

.product-item-5 {
  width: 1216px;
  height: 511px;
  position: relative;
}

.product-row-2 {
  width: 100%;
  height: 244px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
}

.product-row-3 {
  width: 100%;
  height: 244px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 267px;
  left: 0;
}

.product-item-6 {
  width: 289px;
  height: 244px;
}

.product-item-7 {
  width: 595px;
  height: 506px;
}

.product-item-8 {
  width: 299px;
  height: 506px;
}

.product-item-8 img:first-child {
  position: absolute;
  top: 253px;
  left: 0;
  width: 298px;
  height: 253px;
}

.product-item-8 img:last-child {
  position: absolute;
  top: 0;
  left: 1px;
  width: 298px;
  height: 251px;
}

.product-item-9 {
  width: 298px;
  height: 506px;
}

.product-item-10 {
  width: 590px;
  height: 499px;
  position: relative;
}

.product-item-10 .top-row {
  width: 100%;
  height: 248.11px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
}

.product-item-10 .top-row img {
  width: 293.22px;
  height: 248.11px;
}

.product-item-10 .bottom-img {
  position: absolute;
  top: 250.89px;
  left: 0;
  width: 590px;
  height: 248.11px;
}

.product-item-11 {
  width: 590px;
  height: 499px;
}

.product-item-12 {
  width: 1216px;
  height: 512.08px;
  position: relative;
}

.product-grid-2x3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.grid-row {
  width: 100%;
  height: 256px;
  display: flex;
  position: absolute;
}

.grid-row:first-child {
  top: 0;
  left: 0;
}

.grid-row:last-child {
  top: 256px;
  left: 0;
}

.grid-item {
  object-fit: cover;
}

.grid-item-1 {
  width: 303.29px;
  height: 255.63px;
}

.grid-item-2 {
  width: 303.29px;
  height: 256.04px;
}

.grid-item-3 {
  width: 609.43px;
  height: 256.04px;
}

/* Contact Section */
.contact {
  background: #F9FAFB;
  padding: 144px 0;
  position: relative;
}

.contact-container {
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-title {
  color: #1F2937;
  font-size: 48px;
  font-family: 'Felix Titling', serif;
  text-align: center;
  margin: 0;
  line-height: 40px;
  margin-bottom: 60px;
  letter-spacing: 2px;
}

.contact-info {
  width: 672px;
  height: 256px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05);
  padding: 32px;
}

.contact-details {
  width: 608px;
  height: 192px;
  position: relative;
}

.contact-item {
  width: 100%;
  height: 48px;
  position: absolute;
  display: flex;
  align-items: flex-start;
}

.contact-item:first-child {
  top: 0;
  left: 0;
}

.contact-item:nth-child(2) {
  top: 72px;
  left: 0;
}

.contact-item:last-child {
  top: 144px;
  left: 0;
}

.contact-icon {
  width: 20px;
  height: 20px;
  margin-right: 16px;
  flex-shrink: 0;
}

.contact-label {
  color: #111827;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.contact-value {
  color: #4B5563;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

/* Footer */
.footer {
  height: 128px;
  background: #FFFFFF;
  position: relative;
}

.footer-content {
  width: 1216px;
  height: 33px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-logo {
  width: 163px;
  height: 33px;
  position: relative;
}

.footer-logo .logo-dot {
  background: #002FA7;
}

.footer-logo .logo-line {
  background: #002FA7;
}

.footer-copyright {
  color: #9CA3AF;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  line-height: 24px;
  text-align: right;
}

/* Responsive Design */
/* @media (max-width: 1440px) {
  .container {
    width: 100%;
    max-width: 1440px;
  }
  
  .hero-bg img {
    width: 100%;
    height: auto;
    top: 0;
  }
  
  .about-bg {
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
  }
  
  .products-container {
    width: 90%;
  }
  
  .product-row {
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .product-item {
    flex: 1 1 calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 24px;
    line-height: 1.2;
  }
  
  .about-content {
    width: 90%;
    height: auto;
    gap: 30px;
  }
  
  .about-title {
    font-size: 32px;
  }
  
  .products-intro {
    font-size: 32px;
  }
  
  .contact-title {
    font-size: 32px;
  }
  
  .contact-info {
    width: 90%;
    height: auto;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 20px;
    height: auto;
    padding: 20px 0;
  }
  
  .footer-copyright {
    text-align: center;
  }
} */