.slider {
    position: absolute;
    width: 100%;
    height: 1000px;
    overflow: hidden;
    left: 0;
    top: 0px;
}

.slider img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: fade 25s infinite;
    animation-timing-function: ease-in-out;
}

.slider img:nth-child(1) { animation-delay: 0s; }
.slider img:nth-child(2) { animation-delay: 5s; }
.slider img:nth-child(3) { animation-delay: 10s; }
.slider img:nth-child(4) { animation-delay: 15s; }
.slider img:nth-child(5) { animation-delay: 20s; }

@keyframes fade {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    20%  { opacity: 1; }
    25%  { opacity: 0; }
    100% { opacity: 0; }
}

html {
    overflow-x: hidden;
}

body {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}

/* Responsive scaling: keeps the EXACT 1920px design and simply zooms the whole
   page as one unit to fit any screen width (laptops, monitors, phones).
   Nothing inside the design moves or changes. See the script in index.html. */
.scale-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    transform-origin: top left;
}

.company-name {
    position: relative;
    font-family: Georgia, serif;
    color: rgb(0, 0, 0);
    text-align: center;
    font-size: 30px;
    text-transform: uppercase;
    background-color: #212121;
    opacity: 0.7;
    height: 70px;
    width: 1000px;
    left: 480px;
    letter-spacing: 30px;
}

.company-name h1 span {
    opacity: 0;
}

.company-name h1 {
    position: relative;
    text-align: center;
    left: -50px;
    color: #fffdf4;
}

.dropdown a {
    text-decoration: none;
}

.samzareulo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 20px;
}

.samzareulo h4 {
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 18px;
    margin-bottom: 15px;
    color: black;
}

.samzareulo h5 {
    margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
}

.samzareulo h5:hover {
    transform: scale(1.08) translateX(5px);
    color: #212121;
}

.misagebiotaxi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 50px;
    width: 200px;
}

.misagebiotaxi h4 {
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 18px;
    margin-bottom: 15px;
    color: black;
}

.misagebiotaxi h5 {
    margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
}

.misagebiotaxi h5:hover {
    transform: scale(1.08) translateX(5px);
    color: #212121;
}

.sadzinebeli {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 50px;
}

.sadzinebeli h4 {
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 18px;
    margin-left: 40%;
    margin-bottom: 15px;
    color: black;
}

.sadzinebeli h5 {
    margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
}

.sadzinebeli h5:hover {
    transform: scale(1.08) translateX(5px);
    color: black;
}

.sadzinebeli2 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 63px;
    margin-left: 10px;
}

.sadzinebeli2 h5 {
    margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
}

.sadzinebeli2 h5:hover {
    transform: scale(1.08) translateX(5px);
}

.magidaskamebi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 50px;
    width: 130px;
}

.magidaskamebi h4 {
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 18px;
    margin-bottom: 15px;
    color: black;
    width: 250px;
}

.magidaskamebi h5 {
    margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
}

.magidaskamebi h5:hover {
    transform: scale(1.08) translateX(5px);
}

.magidaskamebi2 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 70px;
    margin-left: 30px;
}

.magidaskamebi2 h4 {
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 18px;
    margin-bottom: 15px;
    color: black;
}

.magidaskamebi2 h5 {
    margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
}

.magidaskamebi2 h5:hover {
    transform: scale(1.08) translateX(5px);
}

.sastumrosaveji {
    display: flex;
    flex-direction: column;
    width: auto;
    gap: 6px;
    margin-left: 50px;
    height: 250px;
}

.sastumrosaveji h4 {
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 18px;
    margin-bottom: 15px;
    color: black;
}

.sastumrosaveji h5 {
    margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
}

.sastumrosaveji h5:hover {
    transform: scale(1.08) translateX(5px);
}

.saopiseaveji {
    position: relative;
    right: 170px;
    display: flex;
    flex-direction: column;
    width: auto;
    gap: 6px;
    margin-top: 280px;
}

.saopiseaveji h4 {
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 18px;
    margin-bottom: 15px;
    color: black;
}

.saopiseaveji h5 {
    margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
}

.saopiseaveji h5:hover {
    transform: scale(1.08) translateX(5px);
}


.shidaganateba {
     display: flex;
    flex-direction: column;
    width: auto;
    gap: 6px;
}

.shidaganateba h4 {
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 18px;
    margin-bottom: 15px;
    color: black;
    margin-left: 50%;
}

.shidaganateba h5 {
  margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
    cursor: pointer;
}

.shidaganateba h5:hover {
    transform: scale(1.08) translatex(5px);
}

.shidaganateba2 {
     display: flex;
    flex-direction: column;
    width: auto;
    gap: 6px;
}

.shidaganateba2 h5 {
    margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
    cursor: pointer;
}

.shidaganateba2 h5:hover {
    transform: scale(1.08) translatex(5px);
}

.shidaganateba3 {
    display: flex;
    flex-direction: column;
    width: auto;
    gap: 6px;
}

.shidaganateba3 h5 {
    margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
    cursor: pointer;
}

.shidaganateba3 h5:hover {
    transform: scale(1.08) translatex(5px);
}

.gareganateba {
    display: flex;
    flex-direction: column;
    width: auto;
    gap: 6px;
    margin-left: 50px;
}

.gareganateba h4 {
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 18px;
    margin-bottom: 15px;
    color: black;
}

.gareganateba h5 {
    margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
    cursor: pointer;
}

.gareganateba h5:hover {
    transform: scale(1.08) translatex(5px);
}

.shidagarekarebebi {
    display: flex;
    flex-direction: column;
    width: auto;
    gap: 6px;
    margin-left: 50px;
}

.shidagarekarebebi {
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 18px;
    margin-bottom: 15px;
    color: black;
}

.shidagarekarebebi h5 {
    margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
    cursor: pointer;
}

.shidagarekarebebi h5:hover {
    transform: scale(1.08) translatex(5px);
}


.gareaveji,
.abazana,
.abazanisaveji,
.onkanebi {
    display: flex;
    flex-direction: column;
    width: auto;
    gap: 6px;
    margin-left: 50px;
}

.gareaveji h4,
.abazana h4,
.abazanisaveji h4,
.onkanebi h4 {
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 18px;
    margin-bottom: 15px;
    color: black;
}

.gareaveji h5,
.abazana h5,
.abazanisaveji h5,
.onkanebi h5 {
    margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
    cursor: pointer;
}

.gareaveji h5:hover,
.abazana h5:hover,
.abazanisaveji h5:hover,
.onkanebi h5:hover {
    transform: scale(1.08) translatex(5px);
}

.abazana-group {
    display: flex;
    flex-direction: column;
}

.gareganateba-group {
    display: flex;
    flex-direction: column;
}

.noxebi,
.parketi,
.eleqtroteqnika,
.premiumklasi,
.buxari {
    display: flex;
    flex-direction: column;
    width: auto;
    gap: 6px;
    margin-left: 50px;

}

.matrasi {
    display: flex;
    flex-direction: column;
    width: auto;
    gap: 6px;
    margin-left: 50px;
margin-right: 50px;
}


.noxebi h4,
.parketi h4,
.eleqtroteqnika h4,
.premiumklasi h4,
.buxari h4,
.matrasi h4 {
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 18px;
    margin-bottom: 15px;
    color: black;
}

.eleqtroteqnika h4 {
    text-align: center;
    transform: translateX(-20px);
}

.noxebi h5,
.parketi h5,
.eleqtroteqnika h5,
.premiumklasi h5,
.buxari h5,
.matrasi h5 {
    margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
    transition: transform 0.25s ease, color 0.25s ease;
    display: inline-block;
    cursor: pointer;
}

.noxebi h5:hover,
.parketi h5:hover,
.eleqtroteqnika h5:hover,
.premiumklasi h5:hover,
.buxari h5:hover,
.matrasi h5:hover {
    transform: scale(1.08) translatex(5px);
}

.eleqtroteqnika-cols {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
}

.eleqtroteqnika-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.noxebi-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

.noxebi-parketi {
    display: flex;
    flex-direction: column;
}

.buxari-matrasi {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.shidaganateba-group {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.shidaganateba-title {
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 18px;
    margin-bottom: 15px;
    color: black;
    text-align: center;
}

.shidaganateba-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
}


.furniture-options select {
    font-family: Georgia, serif;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #fffdf4;
    color: darkolivegreen;
}

.social-media {
    position: absolute;
    top: 50px;
    right: 20px;
    display: flex;
    gap: 30px;
    background-color: rgba(245, 245, 245, 0.2);
    height: 50px;
    width: 200px;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}

.social-media img {
    width: 30px;
    height: auto;
}

.telephone-logo {
    display: none;
}

.phone-number {
    display: none;
}

.logo {
    position: absolute;
    top: 35px;
    left: 60px;
    text-align: right;
}

.logo img {
    width: 100px;
    height: 75px;
}

.sataurebi {
    position: absolute;
    text-align: center;
    left: 400px;
    top: 125px;
    font-family: "Noto Serif Georgian", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 14px;
    letter-spacing: 3px;
    padding-top: 0px;
    word-spacing: 30px;
    color: white;
    opacity: 0.9;
    

}

.satauri-word {
    display: inline-block;
    transform-origin: center;
    transition: transform 0.25s ease, color 0.25s ease;
}

.satauri-word:hover {
    transform: scale(1.05);
}

#product-btn {
    cursor: pointer;
}

.maragshi-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.maragshi-link:hover {
    text-decoration: none;
}

.dropdown {
    position: absolute;
    top: 180px;
    left: 0;
    width: 1920px;
    height: 900px;
    background-color: #ffffff;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding-bottom: 12px;
}

.dropdown::-webkit-scrollbar {
    height: 8px;
}

.dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown::-webkit-scrollbar-thumb {
    background: #c0bdb5;
    border-radius: 2px;
}

.dropdown::-webkit-scrollbar-thumb:hover {
    background: #212121;
}

.dropdown > div {
    flex-shrink: 0;
}

.dropdown.open {
    opacity: 0.9;
    visibility: visible;
}

.bestseller h1 {
    position: absolute;
    left: 38.5%;
    top: 990px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow',;
    letter-spacing: 8px;
    font-size: 50px;
}

/* red underline accent matching the in-stock title */
.bestseller h1::after {
    content: "";
    display: block;
    width: 330px;
    height: 5px;
    margin: 2px auto 0;
    background-color: rgb(150, 1, 1);
    border-radius: 3px;
}

.bestseller h3 {
    position: absolute;
    left: 39.5%;
    top: 1090px;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-weight: 300;
    letter-spacing: 2px;
    color: #212121;
}

.background-strip {
    position: absolute;
    top: 1100px;
    width: 100%;
    height: 600px;
    background-color: grey;
    opacity: 0.3;
    z-index: -1;
}

.magidatranspormeri img {
    width: 400px;
    height: auto;
    object-fit: cover;
    border-radius: 15px;
    position: absolute;
    top: 1300px;
    left: 60px;
    background-color: white;
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 0.5s ease;
}

.altacom img {
    position: absolute;
    top: 1200px;
    left: 8%;
    justify-content: center;
    width: auto;
    height: 90px;
}

.magidatranspormeri img:first-child { opacity: 1; }
.magidatranspormeri img:nth-child(2) { opacity: 0; }
.magidatranspormeri:hover img:first-child { opacity: 0; }
.magidatranspormeri:hover img:nth-child(2) { opacity: 1; }
.magidatranspormeri:hover img { transform: scale(1.05); }

.chair img {
    height: 225px;
    width: 400px;
    object-fit: cover;
    border-radius: 15px;
    position: absolute;
    top: 1300px;
    right: 60px;
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 0.5s ease;
}

.chair img:first-child { opacity: 1; }
.chair img:nth-child(2) { opacity: 0; }
.chair:hover img:first-child { opacity: 0; }
.chair:hover img:nth-child(2) { opacity: 1; }
.chair:hover img { transform: scale(1.05); }

.ppb img {
    width: 500px;
    height: 375px;
    object-fit: cover;
    border-radius: 15px;
    position: absolute;
    top: 1235px;
    left: 700px;
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 0.5s ease;
}

.ppb img:first-child { opacity: 1; }
.ppb img:nth-child(2) { opacity: 0; }
.ppb:hover img:first-child { opacity: 0; }
.ppb:hover img:nth-child(2) { opacity: 1; }
.ppb:hover img { transform: scale(1.05); }

.samoa img {
    position: relative;
    top: 1050px;
    left: 46%;
    justify-content: center;
    width: 150px;
    height: auto;
}

.lecomfort img {
    position: relative;
    top: 1040px;
    left: 81.5%;
    justify-content: center;
    width: 200px;
    height: auto;
}

.background-strip1 {
    position: absolute;
    top: 1800px;
    width: 100%;
    height: 600px;
    background-color: grey;
    opacity: 0.3;
    z-index: -1;
}

.karada img {
    position: absolute;
    top: 2000px;
    left: 60px;
    width: 400px;
    height: auto;
    object-fit: cover;
    border-radius: 15px;
    transition: opacity 1s ease-in-out, transform 0.5s ease;
}

.karada img:first-child { opacity: 1; }
.karada img:nth-child(2) { opacity: 0; }
.karada:hover img:first-child { opacity: 0; }
.karada:hover img:nth-child(2) { opacity: 1; }
.karada:hover img { transform: scale(1.05); }

.orme img {
    position: absolute;
    top: 1915px;
    width: 130px;
    left: 190px;
}

.ch img {
    position: absolute;
    top: 2000px;
    right: 60px;
    width: 400px;
    height: 230px;
    object-fit: cover;
    border-radius: 15px;
    transition: opacity 1s ease-in-out, transform 0.5s ease;
}

.ch img:first-child { opacity: 1; }
.ch img:nth-child(2) { opacity: 0; }
.ch:hover img:first-child { opacity: 0; }
.ch:hover img:nth-child(2) { opacity: 1; }
.ch:hover img { transform: scale(1.05); }

.alfdafre img {
    position: absolute;
    top: 1900px;
    width: 200px;
    right: 150px;
}

.divani img {
    position: absolute;
    top: 1935px;
    left: 700px;
    width: 500px;
    height: 375px;
    object-fit: cover;
    border-radius: 15px;
    transition: opacity 1s ease-in-out, transform 0.5s ease;
}

.divani img:first-child { opacity: 1; }
.divani img:nth-child(2) { opacity: 0; }
.divani:hover img:first-child { opacity: 0; }
.divani:hover img:nth-child(2) { opacity: 1; }
.divani:hover img { transform: scale(1.05); }

.samoa2 img {
    position: relative;
    top: 1580px;
    left: 46%;
    justify-content: center;
    width: 150px;
    height: auto;
}

.product-container {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s ease;
    background: #f5f5f5;
    border-radius: 10px;
    padding: 0 20px;
    margin-top: 10px;
}

#product-toggle:checked ~ .product-container {
    max-height: 300px;
    opacity: 1;
    padding: 20px;
}

.pasdakleba h1 {
   font-family: 'Times New Roman', Times, serif;
    position: absolute;
    top: 2390px;
    font-size: 50px;
    left: 46%;
    letter-spacing: 12px;
}

/* red line in the gap below the word, above the grey strip */
.pasdakleba h1::after {
    content: "";
    display: block;
    width: 120px;
    height: 5px;
    margin: -2px auto 0;
    margin-top: 3px;
    background-color: rgb(150, 1, 1);
    border-radius: 3px;
}

/* subtitle under SALE, same style as the bestseller subtitle */
.pasdakleba h3 {
    position: absolute;
    top: 2510px;
    left: 50%;
    transform: translateX(calc(-50% + 6px));
    margin: 0;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-weight: 300;
    letter-spacing: 2px;
    color: #212121;
    white-space: nowrap;
}

.background-strip2 {
    position: absolute;
    top: 2500px;
    width: 100%;
    height: 480px;
    background-color: grey;
    opacity: 0.3;
    z-index: -1;
}

.search-bar {
    position: absolute;
    top: 60px;
    right: 350px;
    display: flex;
    gap: 10px;
    text-align: right;
    width: 40px;
    height: 40px;
    background: url("searchbar.png") center / contain no-repeat;
}

.company-name-2 {
    position: absolute;
    top: 3500px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, serif;
    color: rgb(255, 255, 255);
    text-align: center;
    text-transform: uppercase;
    font-size: 250px;
    letter-spacing: 5px;
}

.minaweri {
    position: absolute;
    top: 3938px;
    left: 20%;
    transform: translateX(-50%);
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 20px;
    letter-spacing: 2px;
}

.underline {
    text-decoration: underline;
    text-decoration-color: rgb(150, 1, 1);
    text-decoration-thickness: 8px;
    text-underline-offset: 15px;
}

.misamarti {
    position: absolute;
    top: 3510px;
    left: 20%;
    transform: translateX(-50%);
    color: rgb(0, 0, 0);
    font-family: 'Noto Sans Georgian', sans-serif;
    text-align: center;
    width: auto;
}

.misamarti h4,
.misamarti h6 {
    text-align: center;
    margin: 0 auto;
    width: 45%;
}

.misamarti h4 {
    margin-bottom: 1rem;
    letter-spacing: 2px;
    color: rgb(0, 0, 0);
}

.misamarti h6 {
    color: grey;
}

.dagvikavshirdit {
    position: absolute;
    top: 3510px;
    left: 47%;
    transform: translateX(-50%);
    color: rgb(0, 0, 0);
    font-family: 'Noto Sans Georgian', sans-serif;
    text-align: center;
    width: auto;
}

.dagvikavshirdit h4,
.dagvikavshirdit h6 {
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.dagvikavshirdit h4 {
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.dagvikavshirdit h6 {
    color: grey;
}

.samushao-saatebi {
    position: absolute;
    top: 3510px;
    left: 75%;
    transform: translateX(-50%);
    color: rgb(0, 0, 0);
    font-family: 'Noto Sans Georgian', sans-serif;
    text-align: center;
    width: auto;
}

.samushao-saatebi h4,
.samushao-saatebi h6 {
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.samushao-saatebi h4 {
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.samushao-saatebi h6 {
    color: grey;
}

.hr3 {
    position: absolute;
    top: 3000px;
    color: rgb(0, 0, 0);
    width: 100%;
    border: none;
    border-top: 2px solid rgb(0, 0, 0);
}

.map {
    position: absolute;
    color: rgb(0, 0, 0);
    top: 3010px;
    width: 100%;
    transform: translateX(-50%);
    text-align: center;
    left: 50%;
    display: flex;
    justify-content: center;
    filter: grayscale(100%) hue-rotate(180deg) brightness(100%) contrast(90%);
}

.hr4 {
    position: absolute;
    top: 3700px;
    color: black;
    width: 100%;
    border: none;
    border-bottom: 800px solid black;
}

.footer1 {
    position: absolute;
    top: 4050px;
    left: 36%;
    transform: translateX(-50%);
    color: rgb(255, 255, 255);
    text-align: center;
    font-family: 'Noto Sans Georgian', sans-serif;
    width: 1%;
}

.footer1 h5 {
    color: grey;
}

.footer2 {
    position: absolute;
    top: 4050px;
    right: 90%;
    transform: translateX(-50%);
    color: rgb(255, 255, 255);
    text-align: center;
    font-family: 'Noto Sans Georgian', sans-serif;
    width: 1%;
}

.footer2 h5 {
    color: grey;
}

.footer3 {
    position: absolute;
    top: 4050px;
    left: 23%;
    transform: translateX(-50%);
    color: rgb(255, 255, 255);
    text-align: center;
    font-family: 'Noto Sans Georgian', sans-serif;
    width: 1%;
}

.footer3 h5 {
    color: grey;
}

.footer4text {
    position: absolute;
    color: rgb(255, 255, 255);
    top: 4060px;
    right: 200px;
    font-family: 'Noto Sans Georgian', sans-serif;
    font-size: 8px;
}

.footer4 {
    position: absolute;
    top: 4110px;
    right: 200px;
    display: flex;
    gap: 15px;
}

.footer4 img {
    height: 30px;
    width: 30px;
}

.vl1 {
    position: absolute;
    top: 3505px;
    left: 630px;
    transform: translateX(-50%);
    height: 80px;
    border-left: 2px solid rgb(0, 0, 0);
}

.vl2 {
    position: absolute;
    top: 3505px;
    left: 1170px;
    transform: translateX(-50%);
    height: 80px;
    border-left: 2px solid rgb(0, 0, 0);
}

.photobox {
    position: absolute;
    top: 250px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 20px;
    height: 700px;
}

.h4transpormeri {
    text-align: center;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    top: 1050px;
    left: 45%;
    letter-spacing: 2px;
}

.sales-container {
    position: absolute;
    top: 2480px;
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
    z-index: 10;
}

.sales-wrapper {
    display: flex;
    gap: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    width: 85%;
    height: 400px;
    padding: 20px;
    scrollbar-width: none;
}

.sales-wrapper::-webkit-scrollbar {
    display: none;
}

.sale-item {
    position: relative;
    flex-shrink: 0;
    width: 350px;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.sale-item > div:first-child {
    position: relative;
    top: 0 !important;
    left: 0 !important;
    height: 300px;
    width: 100%;
    max-width: 330px;
    display: flex;
    margin: 0 auto;
    border-radius: 15px;
    cursor: pointer;
}

.sale-item > div:first-child img {
    position: absolute;
    top: 50px;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 15px;
    opacity: 1;
    transition: opacity 1s ease-in-out, transform 0.5s ease;
}

.sale-item > div:first-child img:first-child { opacity: 1; }
.sale-item > div:first-child img:nth-child(2) { opacity: 0; }
.sale-item > div:first-child:hover img:first-child { opacity: 0; }
.sale-item > div:first-child:hover img:nth-child(2) { opacity: 1; }
.sale-item > div:first-child:hover img { transform: scale(1.05); }

.sale-item > div:last-child {
    position: relative;
    top: 55px;
    left: 0 !important;
    transform: none !important;
    font-family: 'Noto Sans Georgian', sans-serif;
    color: rgb(0, 0, 0);
    text-align: center;
    font-size: 14px;
    letter-spacing: 1px;
    width: 100%;
    padding: 10px 5px;
    white-space: nowrap;
}

.sale-item > div:last-child .old-price {
    position: relative;
    top: 0 !important;
    left: 0 !important;
    color: grey;
    font-size: 12px;
    margin-right: 8px;
}

.sale-item > div:last-child .new-price {
    position: relative;
    top: 0 !important;
    left: 0 !important;
    color: rgb(150, 1, 1);
    font-size: 16px;
    text-decoration: underline;
    margin: 0 5px;
}

.sale-item > div:last-child .percent {
    position: relative;
    font-size: 18px;
    color: rgb(150, 1, 1);
    transition: color 0.3s ease;
    left: 0 !important;
    display: inline-block;
    margin-left: 5px;
}

.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgb(0, 0, 0);
    font-size: 30px;
    padding: 15px 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.3s ease, transform 0.2s ease;
    z-index: 11;
}

.scroll-arrow:hover {
    background: transparent;
    transform: translateY(-50%) scale(1.1);
}

.scroll-left { left: 20px; }
.scroll-right { right: 20px; }