@import url('https://fonts.cdnfonts.com/css/aileron');

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

    html { scroll-behavior: smooth; }

    body {
      background: #2b2a29;
      color: #f0ece4;
      font-family: 'Aileron', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      overflow-x: hidden;
    }

    /* ===== NAVBAR ===== */
    #navbar {
      position: fixed;
	  top:0;
      width: 100%;
      z-index: 100;
      height: 70px;
      padding: 0 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #b3b3b3;
    }
    #navbar.sticky {
      position: fixed;
      top: 0; left: 0;
      background: rgba(179, 179, 179, 0.95);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 1px 0 rgba(0,0,0,0.1);
    }
    .nav-logo {
      height: 40px;
      width: auto;
      object-fit: contain;
    }
    .nav-links {
      display: flex;
      gap: 48px;
      list-style: none;
    }
    .nav-links a {
      font-weight: 100;
      font-size: 13px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #1a1a1a;
      text-decoration: none;
      position: relative;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -3px; left: 0;
      width: 0; height: 1px;
      background: #1a1a1a;
      transition: width 0.35s;
    }
    .nav-links a:hover::after { width: 100%; }

    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 8px;
    }
    .hamburger span {
      display: block;
      width: 24px; height: 1px;
      background: #1a1a1a;
      transition: all 0.3s;
    }
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }

    .mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      top: 70px;
      background: rgba(179,179,179,0.98);
      z-index: 99;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 44px;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      font-weight: 100;
      font-size: 36px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #1a1a1a;
      text-decoration: none;
    }

    @keyframes bounce {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-10px); }
    }

    /* ===== CONTACT ===== */
    #contact { background: #2b2a29; }

    .inquire-bar {
      width: 100%;
      padding: 30px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .inquire-bar h2 {
      font-weight: 900;
      font-size: 300px;
      line-height: 1;
      letter-spacing: -0.02em;
      color: #f0ece4;
      text-transform: uppercase;
      white-space: nowrap;
      display: block;
    }

    .contact-grid {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 100px;
      padding: 60px 80px;
    }

    .contact-left,
    .contact-right {
      flex: 1;
      max-width: 480px;
    }

    .contact-left {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .contact-logo {
      height: 100px;
      width: auto;
      object-fit: contain;
      object-position: left top;
    }

    .addr-block { display: flex; flex-direction: column; margin-top: 60px; }

    .addr-line {
      font-weight: 400;
      font-size: 16px;
      line-height: 1.4;
      color: #f0ece4;
    }

    .addr-dot { color: #c0392b; }

    .contact-phone {
      font-weight: 700;
      font-size: 28px;
      color: #f0ece4;
      letter-spacing: 0.04em;
    }

    /* FORM */
    .contact-right {
      display: flex;
      flex-direction: column;
      gap: 26px;
    }

    .form-field {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid rgba(255,255,255,0.15);
      padding-bottom: 14px;
    }

    .form-field label {
      font-weight: 400;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(240, 236, 228, 0.5);
      margin-bottom: 6px;
    }

    .form-field label .req { color: #c0392b; }

    .form-field input {
      background: transparent;
      border: none;
      outline: none;
      color: #f0ece4;
      font-family: 'Aileron', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight: 400;
      font-size: 15px;
      width: 100%;
      padding: 2px 0;
    }

    .submit-btn {
      margin-top: 8px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Aileron', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #f0ece4;
      transition: opacity 0.3s;
    }
    .submit-btn:hover { opacity: 0.55; }
    .submit-btn .arr { font-size: 1.1em; transition: transform 0.3s; }
    .submit-btn:hover .arr { transform: translate(3px,-3px); }

    footer {
      padding: 18px 80px;
      border-top: 1px solid rgba(255,255,255,0.07);
      font-weight: 100;
      font-size: 10px;
      letter-spacing: 0.18em;
      color: rgba(240,236,228,0.28);
      text-transform: uppercase;
    }

    /* ===== RESPONSIVE — TABLET (max 900px) ===== */
    @media (max-width: 900px) {
      .contact-grid {
        flex-direction: column;
        align-items: center;
        gap: 50px;
        padding: 40px 30px;
      }
      .contact-left,
      .contact-right {
        max-width: 100%;
        width: 100%;
      }
      footer {
        padding: 16px 30px;
      }
	  .inquire-bar{
		display:flex;
		justify-content:flex-start;
		padding:30px 15px;
	  }
	  .inquire-bar h2{
		font-size:150px;

	  }
    }

    /* ===== RESPONSIVE — MOBILE (max 640px) ===== */
    @media (max-width: 640px) {
      #navbar {
        height: 56px;
        padding: 0 20px;
      }
      .mobile-menu {
        top: 56px;
      }
      .nav-links {
        display: none;
      }
      .hamburger {
        display: flex;
      }
      .contact-grid {
        padding: 30px 20px;
        gap: 36px;
      }
      .contact-phone {
        font-size: 20px;
      }
      footer {
        padding: 14px 20px;
      }
    }



    /* ============================================
       MAIN PARTS — your original styles (unchanged)
    ============================================ */

    .content-with img{
        height:40px;
        width: auto;

    }

    .part1 {
      width: 100%;
      height: auto;
    }
    .part1 img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
    }

    .part2 {
      padding: 4rem;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-direction: row;
      gap: 20px;
    }
    .img-1 img {
      width: 100%;

      height: auto;
      object-fit: cover;
      display: block;
    }
    .text-1 img {
      height: auto;
      width: 70%;
      padding-left: 100px;
    }

    .part3 {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      padding: 4rem;
      text-align: right;
	  padding-top:0px;
    }
    .img-2 img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
      padding-left: 220px;
    }
    .text-2 img {
      height: auto;
      width: 70%;
      padding-right: 100px;
    }

    .part4 {
      padding: 4rem;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-direction: row;
      gap: 20px;
	  padding-top:0px;
    }
    .img-3 img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
      padding-right: 250px;
    }
    .text-3 img {
      height: auto;
      width: 70%;
      padding-left: 100px;
    }

    .part5,
    .part7 {
      width: 100%;
      height: auto;

    }
    .part5 img,
    .part7 img {
      width: 100%;
      height: auto;
      padding: 4rem;
     padding-top:0px;
      object-fit: cover;
      display: block;
    }

    .part8,
    .part10 {
      width: 100%;
      height: auto;

    }
    .part8 img,
    .part10 img {
      width: 100%;
      height: auto;
      padding: 4rem;
      object-fit: cover;
      display: block;
	  padding-top:0px;
    }

    .part6 {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      padding: 4rem;
      text-align: right;
	  padding-top:0px;
    }
    .img-5 img {
      width: 95%;
      height: auto;
      object-fit: cover;
      display: block;
      padding-left: 220px;
    }
    .text-5 img {
      height: auto;
      width: 70%;
      padding-right: 100px;
    }

    .part9 {
      padding: 4rem;

      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-direction: row;
      gap: 20px;
	  padding-top:0px;
    }
    .img-8 img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
    }
    .text-8 img {
      height: auto;
      width: 70%;
      padding-left: 100px;
    }


    /* ============================================
       RESPONSIVE FOR MAIN PARTS — added only
       (your layout is preserved on desktop,
        stacks on mobile: image first, PNG second)
    ============================================ */

    /* ===== TABLET FIX — 769px to 1024px ===== */
    @media (min-width: 769px) and (max-width: 1024px) {
		.part2,
		.part3,
		.part4,
		.part6,
		.part9,
		.part5 img,
		.part7 img,
		.part8 img,
		.part10 img{
			padding:20px !important;
		}

      /* Fix JPG images — remove large offsets so they show fully */
      .img-2 img {
        padding-left: 100px;
      }
      .img-3 img {
        padding-right: 100px;

      }
      .img-5 img {
        padding-left: 100px;
      }

      /* Increase PNG sizes on tablet */
      .text-1 img {
        width: 95%;
        padding-left: 20px;
      }
      .text-2 img {
        width: 95%;
        padding-right: 20px;
      }
      .text-3 img {
        width: 95%;
        padding-left: 20px;
      }
      .text-5 img {
        width: 95%;
        padding-right: 20px;
      }
      .text-8 img {
        width: 95%;
        padding-left: 20px;
      }

	  .inquire-bar h2{
		font-size:200px;

	  }

    }

    /* ===== PNG SIZE INCREASE — 769px to 1920px ===== */
    @media (min-width: 769px) and (max-width: 1920px) {

	.part2,
		.part3,
		.part4,
		.part6,
		.part9,
		.part5 img,
		.part7 img,
		.part8 img,
		.part10 img{
			padding:3.5rem;
		}


      .text-1 img {
        width: 80%;
        padding-left: 60px;
      }
      .text-2 img {
        width: 80%;
        padding-right: 60px;
      }
      .text-3 img {
        width: 80%;
        padding-left: 60px;
      }
      .text-5 img {
        width: 80%;
        padding-right: 60px;
      }
      .text-8 img {
        width: 80%;
        padding-left: 60px;
      }
    }

    @media (max-width: 768px) {

      /* Part 2 */
      .part2 {
        flex-direction: column;
        padding: 24px 20px;
        gap: 48px;
      }
      .part2 .img-1,
      .part2 .text-1 {
        width: 100%;
      }
      .text-1 img {
        width: 70%;
        height: auto;
        padding-left: 0;
      }
      /* image first on mobile */
      .part2 .img-1 { order: 1; }
      .part2 .text-1 { order: 2; }

      /* Part 3 */
      .part3 {
        flex-direction: column;
        padding: 24px 20px;
        gap: 48px;
        text-align: left;
      }
      .part3 .img-2,
      .part3 .text-2 {
        width: 100%;
      }
      .img-2 img {
        padding-left: 0;
      }
      .text-2 img {
        width: 70%;
        height: auto;
        padding-right: 0;
      }
      /* image first on mobile */
      .part3 .img-2 { order: 1; }
      .part3 .text-2 { order: 2;
		display:flex;
		justify-content:flex-end;
	  }

      /* Part 4 */
      .part4 {
        flex-direction: column;
        padding: 24px 20px;
        gap: 48px;
      }
      .part4 .img-3,
      .part4 .text-3 {
        width: 100%;
      }
      .img-3 img {
        padding-right: 0;
      }
      .text-3 img {
        width: 70%;
        height: auto;
        padding-left: 0;
      }
      /* image first on mobile */
      .part4 .img-3 { order: 1; }
      .part4 .text-3 { order: 2; }

      /* Part 5 & 7 */
      .part5 img,
      .part7 img {
       padding:24px 20px;
      }

      /* Part 6 */
      .part6 {
        flex-direction: column;
        padding: 24px 20px;
        gap: 48px;
        text-align: left;
      }
      .part6 .img-5,
      .part6 .text-5 {
        width: 100%;
      }
	  .part6 .img-5,
      .part6 .text-5 {
        width: 100%;
      }
      .img-5 img {
	  width:100%;
        padding-left: 0;
      }
      .text-5 img {
        width: 70%;
        height: auto;
        padding-right: 0;
      }
      /* image first on mobile */
      .part6 .img-5 { order: 1; }
      .part6 .text-5 { order: 2;
	display:flex;
	justify-content:flex-end;
	  }

      /* Part 8 & 10 */
      .part8 img,
      .part10 img {
        padding: 24px 20px;
      }

      /* Part 9 */
      .part9 {
        flex-direction: column;
        padding: 24px 20px;
        gap: 48px;
      }
      .part9 .img-8,
      .part9 .text-8 {
        width: 100%;
      }
      .text-8 img {
        width: 70%;
        height: auto;
        padding-left: 0;
      }
      /* image first on mobile */
      .part9 .img-8 { order: 1; }
      .part9 .text-8 { order: 2; }

      /* Inquire heading scale */
      .inquire-bar h2 {
        font-size: clamp(36px, 20vw, 100px);
      }
    }



	/*   grid part 15 */

	 .grid {
      display: grid;
      gap: 2.5vw;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: auto;          /* ← auto so rows grow with image */
      grid-template-areas:
        ".  .  .  .  .  .  .  i2 i2 i2 i2 i2 ."
        ".  .  .  .  .  .  .  i2 i2 i2 i2 i2 ."
        "i1 i1 i1 i1 i1 i1 i1 i2 i2 i2 i2 i2 ."
        "i1 i1 i1 i1 i1 i1 i1 i2 i2 i2 i2 i2 ."
        "i1 i1 i1 i1 i1 i1 i1 .  i4 i4 i4 i4 ."
        "i3 i3 i3 i3 .  .  .  .  i4 i4 i4 i4 .";
    }

    .item1 { grid-area: i1; }
    .item2 { grid-area: i2; }
    .item3 { grid-area: i3; }
    .item4 { grid-area: i4; }

    /* whole image visible — no crop */
    .item1 img,
    .item2 img,
    .item4 img {
      width: 100%;
      height: auto;
      display: block;
    }

    .item3 img {
      width: 80%;
	  margin-top:150px;
      height: auto;
      display: block;
      object-fit: contain;
      object-position: left bottom;
	  margin-left:100px;
    }

    .item4 img {
      margin-top: 8vw;
    }

    /* 1440px and above */
    @media (min-width: 1440px) {
      .part15 { padding: 4rem; }
      .grid   { gap: 50px;

	  }
      .item4 img { margin-top: 150px; }
    }




	  /* =====================
       MOBILE — below 480px
    ===================== */
    @media (max-width: 768px) {
      .part15 {
        padding: 24px 20px;

      }

      .grid {
        gap: 14px;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
          "i1"
          "i2"
          "i4"
          "i3";
		  gap:48px;
      }

      .item1 img,
      .item2 img,
      .item4 img {
        width: 100%;
        height: auto;
      }

      .item3 img {
        width: 70%;
		margin:0;
      }

      .item4 img {
        margin-top: 0;
      }
    }