:root {
     --accent   : #2A2C1F;
     --bg       : #ffffff;
     --muted    : #6b6b6b;
     --glass    : rgba(255, 255, 255, 0.7);
     --radius   : 12px;
     --shadow   : 0 6px 18px rgba(42, 44, 31, 0.06);
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
 }

 * {
     margin         : 0;
     padding        : 0;
     list-style     : none;
     text-decoration: none;
     box-sizing     : border-box
 }

 /* NAV */
 nav {
     position       : sticky;
     z-index        : 9999;
     top            : 0;
     left           : 0;
     right          : 0;
     background     : var(--bg);
     border-bottom  : 1px solid rgba(42, 44, 31, 0.04);
     backdrop-filter: blur(6px);
 }

 .container {
     max-width: 1200px;
     margin   : 0 auto;
     padding  : 12px 20px;
 }

 .nav__container {
     display        : flex;
     align-items    : center;
     justify-content: space-between;
     gap            : 16px;
 }

 /* logo */
 .logo {
     display        : flex;
     align-items    : center;
     gap            : 10px;
     text-decoration: none;
     color          : var(--accent);
     font-weight    : 700;
     font-size      : 18px;
 }

 .logo-img {
     width          : 44px;
     height         : 44px;
     border-radius  : 8px;
     background     : #eee;
     display        : inline-flex;
     align-items    : center;
     justify-content: center;
     overflow       : hidden;
     flex-shrink    : 0;
 }

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


 .nav-links {
     display    : flex;
     align-items: center;
     gap        : 18px;
     margin-left: 10px;
 }

 .nav-links a,
 .nav-links summary {
     color          : var(--accent);
     text-decoration: none;
     font-weight    : 600;
     font-size      : 15px;
     cursor         : pointer;
     position       : relative;
     padding        : 6px 4px;
     border-radius  : 6px;
     transition     : transform .18s cubic-bezier(.2, .9, .3, 1), opacity .15s;
     user-select    : none;
 }

 .nav-links a::after,
 .nav-links summary::after {
     content         : '';
     position        : absolute;
     left            : 50%;
     transform       : translateX(-50%) scaleX(0);
     bottom          : 2px;
     height          : 3px;
     width           : 60%;
     background      : var(--accent);
     border-radius   : 3px;
     transition      : transform .28s cubic-bezier(.2, .9, .3, 1);
     transform-origin: center;
     opacity         : 0.95;
 }

 .nav-links a:hover::after,
 .nav-links summary:hover::after,
 .nav-links a:focus::after,
 .nav-links summary:focus::after {
     transform: translateX(-50%) scaleX(1);
 }


 details.dropdown {
     position: relative;
 }

 details[open]>summary::after {
     transform: translateX(-50%) scaleX(1);
 }

 details.dropdown summary {
     list-style : none;
     display    : inline-flex;
     gap        : 8px;
     align-items: center;
 }

 details.dropdown summary::-webkit-details-marker {
     display: none;
 }

 details .dropdown-content {
     position        : absolute;
     top             : calc(100% + 10px);
     left            : 0;
     min-width       : 220px;
     background      : var(--bg);
     border-radius   : 10px;
     box-shadow      : 0 14px 40px rgba(20, 20, 20, 0.06);
     padding         : 12px;
     transform-origin: top center;
     animation       : popIn .26s cubic-bezier(.2, .9, .3, 1);
     z-index         : 30;
     border          : 1px solid rgba(42, 44, 31, 0.04);
 }

 @keyframes popIn {
     from {
         opacity  : 0;
         transform: translateY(-6px) scale(.98)
     }

     to {
         opacity  : 1;
         transform: translateY(0) scale(1)
     }
 }

 .actions {
     display    : flex;
     align-items: center;
     gap        : 12px;
 }

 .icon-btn {
     display      : inline-grid;
     place-items  : center;
     width        : 42px;
     height       : 42px;
     border-radius: 10px;
     background   : transparent;
     border       : none;
     cursor       : pointer;
     transition   : transform .12s, background .12s;
 }

 .icon-btn:active {
     transform: scale(.96)
 }

 .find-btn {
     padding      : 10px 16px;
     background   : #CF6F49;
     color        : #fff;
     border       : none;
     border-radius: 10px;
     font-weight  : 700;
     cursor       : pointer;
     box-shadow   : 0 8px 22px rgba(42, 44, 31, 0.12);
     position     : relative;
     overflow     : hidden;
     transition   : transform .12s cubic-bezier(.2, .9, .3, 1);
 }

 .find-btn:active {
     transform: translateY(1px) scale(.995)
 }

 .ripple {
     position      : absolute;
     border-radius : 50%;
     transform     : scale(0);
     background    : rgba(255, 255, 255, 0.18);
     animation     : ripple .6s linear;
     pointer-events: none;
 }

 @keyframes ripple {
     to {
         transform: scale(4);
         opacity  : 0
     }
 }

 .pulse {
     animation: pulseClick .36s cubic-bezier(.2, .9, .3, 1);
 }

 @keyframes pulseClick {
     0% {
         transform: scale(1)
     }

     50% {
         transform: scale(.96)
     }

     100% {
         transform: scale(1)
     }
 }

 .hamburger {
     display        : none;
     width          : 44px;
     height         : 44px;
     border-radius  : 10px;
     background     : transparent;
     border         : none;
     cursor         : pointer;
     align-items    : center;
     justify-content: center;
 }

 /* SIDEBAR */
 .sidebar-wrap {
     position       : fixed;
     inset          : 0;
     background     : rgba(0, 0, 0, 0.25);
     display        : none;
     z-index        : 1200;
     align-items    : flex-start;
     justify-content: flex-end;

 }

 .sidebar {
     width     : 320px;
     max-width : 86%;
     height    : 100vh;
     background: var(--bg);
     box-shadow: -12px 0 40px rgba(12, 12, 12, 0.12);
     padding   : 22px;
     transform : translateX(18px) translateY(0) scale(.995);
     animation : slideIn .32s cubic-bezier(.2, .9, .25, 1) forwards;
     overflow  : auto;
 }

 @keyframes slideIn {
     from {
         transform: translateX(100%)
     }

     to {
         transform: translateX(0)
     }
 }

 .sidebar .close {
     display        : flex;
     justify-content: flex-end;
     margin-bottom  : 12px;
 }

 .sidebar .navlist {
     display       : flex;
     flex-direction: column;
     gap           : 10px;
     padding-top   : 6px;
 }

 .sidebar .navlist a {
     padding        : 12px 10px;
     border-radius  : 8px;
     color          : var(--accent);
     font-weight    : 700;
     text-decoration: none;
     display        : flex;
     justify-content: space-between;
     align-items    : center;
 }

 .sidebar .navlist details .dropdown-content {
     position    : static;
     box-shadow  : none;
     border      : none;
     padding-left: 8px;
     padding-top : 6px;
 }





 a:focus,
 button:focus,
 summary:focus {
     outline       : 3px solid rgba(42, 44, 31, 0.08);
     outline-offset: 3px;
 }


















 .hero {
     margin-top: 100px;
     color     : #2A2C1F;
 }

 .hero__text {
     font-family   : Roboto;
     font-weight   : 400;
     font-style    : Regular;
     font-size     : 14px;
     line-height   : 21px;
     letter-spacing: 0%;
     padding       : 10px;
     background    : #E7E8E3;
     border-radius : 32px;
     max-width     : 147px;
     text-align    : center;
     margin-bottom : 20px;

 }

 .hero__title {
     font-family   : Roboto;
     font-weight   : 400;
     font-style    : Regular;
     font-size     : 56px;
     line-height   : 68px;
     letter-spacing: 0%;
     max-width     : 516px;
     margin-bottom : 20px;

 }

 .hero__text-name {
     font-family   : Roboto;
     font-weight   : 400;
     font-style    : Regular;
     font-size     : 20px;
     line-height   : 30px;
     letter-spacing: 0%;
     color         : #65665C;
     max-width     : 503px;
     margin-bottom : 30px;
 }

 .search-container {
     display    : flex;
     align-items: center;
     max-width  : 600px;
 }

 .search-input {
     padding            : 10px 16px 10px 40px;
     max-width          : 300px;
     border             : 1px solid #E7E8E3;
     border-radius      : 10px;
     font-family        : Roboto;
     font-size          : 16px;
     margin-right       : 10px;
     flex-grow          : 1;
     height             : 40px;
     box-sizing         : border-box;
     background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%2365665C' d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
     background-repeat  : no-repeat;
     background-position: 12px center;
     background-size    : 20px;
     box-shadow         : 0px 2px 4px 0px #00000014;

 }

 .search-input::placeholder {
     color: #65665C;
 }

 .hero__btn {
     padding      : 10px 16px;
     background   : #CF6F49;
     color        : #fff;
     border       : none;
     border-radius: 10px;
     font-weight  : 700;
     cursor       : pointer;
     box-shadow   : 0 8px 22px rgba(42, 44, 31, 0.12);
     position     : relative;
     overflow     : hidden;
     transition   : transform .12s cubic-bezier(.2, .9, .3, 1);
     height       : 40px;
     white-space  : nowrap;
 }

 .hero__btn:active {
     transform: translateY(1px) scale(.995);
 }

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

 .hero__img {
     max-width: 600px;
     height   : 686px;
 }




 .wrapper__text {
     font-family   : Roboto;
     font-weight   : 400;
     font-style    : Regular;
     font-size     : 18px;
     line-height   : 27px;
     letter-spacing: 0%;
     color         : #2A2C1F;
     max-width     : 243px;
 }

 .wrapper__container {
     display        : flex;
     justify-content: space-between;
 }

 marquee img {
     margin-left: 25px;
 }



 .work__container h2 {
     font-family   : Roboto;
     font-weight   : 700;
     font-style    : Bold;
     font-size     : 48px;
     line-height   : 57.6px;
     letter-spacing: 0%;
     text-align    : center;
     color         : #2A2C1F;
 }

 .work__text {
     font-family   : Roboto;
     font-weight   : 700;
     font-style    : Bold;
     font-size     : 18px;
     line-height   : 27px;
     letter-spacing: 0%;
     text-align    : center;
     color         : #65665C;
     max-width     : 754px;
     margin        : 0 auto;
 }

 .work__text-name {
     font-family   : Roboto;
     font-weight   : 700;
     font-style    : Bold;
     font-size     : 16px;
     line-height   : 24px;
     letter-spacing: 0%;
     text-align    : center;
     color         : #65665C;
     max-width     : 338px;
     margin        : 0 auto;
 }

 .work__container h4 {
     font-family   : Roboto;
     font-weight   : 700;
     font-style    : Bold;
     font-size     : 24px;
     line-height   : 33.6px;
     letter-spacing: 0%;
     text-align    : center;
     color         : #2A2C1F;
     margin-bottom : 15px;
 }

 .work__container ul {
     display        : flex;
     justify-content: space-between;
     margin-top     : 30px;
 }

 .work__container li {
     padding      : 20px;
     max-width    : 400px;
     height       : 280px;
     box-shadow   : 0px 2px 4px 0px #00000014;
     border       : 1px solid #E7E8E3;
     border-radius: 16px;
 }

 .work__items img {
     margin       : 0 auto;
     display      : block;
     margin-bottom: 15px;
     padding-top  : 15px;
 }


 .comfort {
     margin-top: 100px;
 }

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

 .comfort__img {
     max-width : 600px;
     max-height: 600px;
 }

 .comfort__text {
     font-family   : Roboto;
     font-weight   : 400;
     font-style    : Regular;
     font-size     : 14px;
     line-height   : 21px;
     letter-spacing: 0%;
     padding       : 10px;
     background    : #E7E8E3;
     border-radius : 32px;
     max-width     : 147px;
     text-align    : center;
     margin-bottom : 20px;

 }

 .comfort__title {
     font-family   : Roboto;
     font-weight   : 700;
     font-style    : Regular;
     font-size     : 48px;
     line-height   : 57.6px;
     letter-spacing: 0%;
     max-width     : 516px;
     margin-bottom : 20px;

 }

 .comfort__text-name {
     font-family   : Roboto;
     font-weight   : 400;
     font-style    : Regular;
     font-size     : 18px;
     line-height   : 27px;
     letter-spacing: 0%;
     color         : #65665C;
     max-width     : 503px;
     margin-bottom : 30px;
 }

 .comfort__boxes {
     display: flex;
     gap    : 15px;
 }

 .comfort__boxes button {
     font-family   : Roboto;
     font-weight   : 400;
     font-style    : Regular;
     font-size     : 16px;
     line-height   : 24px;
     letter-spacing: 0%;
     text-align    : center;
     box-shadow    : 0px 2px 4px 0px #00000014;
     color         : #2A2C1F;
     padding       : 10px 15px;
 }

 .comfort__button {
     background: none;
     border    : none;
 }

 .comfort__btn {
     background: #FFFFFF;
     border    : 1px solid #E7E8E3;
 }

 .comfort__container ul {
     display        : flex;
     justify-content: space-between;
 }

 .comfort__box {
     padding-left: 35px;
 }

 .comfort__items h4 {
     font-family   : Roboto;
     font-weight   : 700;
     font-style    : Bold;
     font-size     : 20px;
     line-height   : 28px;
     letter-spacing: 0%;
     color         : #2A2C1F;
 }

 .comfort__items p {
     font-family   : Roboto;
     font-weight   : 400;
     font-style    : Regular;
     font-size     : 16px;
     line-height   : 24px;
     letter-spacing: 0%;
     color         : #65665C;
 }




 :root {
     --card-bg      : #ffffff;
     --card-inner-bg: #fbfbfb;
     --text-dark    : #1f1f1f;
     --muted        : #8a8a8a;
     --radius       : 10px;
     --shadow       : 0 6px 18px rgba(22, 22, 22, 0.08);
     --gap          : 20px;
     --font-family  : "Helvetica Neue", Arial, sans-serif;
 }
  main{
    padding-top: 100px;
    background: #F5F5F2;
  }

 .main__text {
     font-family   : Roboto;
     font-weight   : 400;
     font-style    : Regular;
     font-size     : 14px;
     line-height   : 21px;
     letter-spacing: 0%;
     padding       : 10px;
     background    : #E7E8E3;
     border-radius : 32px;
     max-width     : 147px;
     text-align    : center;
     margin-bottom : 20px;
     margin: 0 auto;

 }

 .main__title {
     font-family   : Roboto;
     font-weight   : 700;
     font-style    : Regular;
     font-size     : 48px;
     line-height   : 57.6px;
     letter-spacing: 0%;
     max-width     : 516px;
     margin-bottom : 20px;
     text-align: center;
     margin: 0 auto;
 }

.main__boxes{
    display: flex;
    justify-content: center;
}
.main__boxes button {
     font-family   : Roboto;
     font-weight   : 400;
     font-style    : Regular;
     font-size     : 16px;
     line-height   : 24px;
     letter-spacing: 0%;
     text-align    : center;
     box-shadow    : 0px 2px 4px 0px #00000014;
     color         : #2A2C1F;
     padding       : 10px 15px;

 }

 .main__button {
     background: none;
     border    : none;
 }

 .main__btn {
     background: #FFFFFF;
     border    : 1px solid #E7E8E3;
 }
 .main__list {
     display        : flex;
     flex-wrap      : wrap;
     gap            : var(--gap);
     justify-content: space-between;
     margin: 50px 0;

 }

 .main__item {
     background    : var(--card-inner-bg);
     border-radius : var(--radius);
     box-shadow    : var(--shadow);
     overflow      : hidden;
     display       : flex;
     flex-direction: column;
     max-width     : 350px;
     height        : 440px;
 }

 .card__image {
     max-width : 350px;
     height    : 285px;
     display   : block;
     object-fit: cover;
     background: #e8e8e8;
 }


 .card__body {
     padding       : 14px 16px;
     display       : flex;
     flex-direction: column;
     gap           : 8px;
     flex          : 1;
 }

 .card__title {
     margin        : 0;
     font-size     : 24px;
     line-height   : 33px;
     font-weight   : 700;
     color         : var(--text-dark);
     letter-spacing: 0.1px;
 }

 .card__price {
     margin     : 0;
     font-size  : 18px;
     font-weight: 700;
     line-height: 27px;
     color      : var(--text-dark);
 }

 .card__location {
     display    : flex;
     align-items: center;
     gap        : 8px;
     font-size  : 13px;
     color      : var(--muted);
     margin-top : 2px;
 }

 .card__meta {
     display    : flex;
     gap        : 20px;
     align-items: center;
     margin-top : 10px;
     font-size  : 16px;
     color      : var(--muted);
 }

 .meta__item {
     display    : flex;
     align-items: center;
     gap        : 10px;
 }


 .icon {
     width  : 18px;
     height : 18px;
     display: inline-block;
     flex   : 0 0 18px;
     fill   : currentColor;
     color  : var(--muted);
 }

 .meta__text {
     font-size  : 13px;
     color      : var(--muted);
     font-weight: 500;
 }











 @media (max-width:880px) {
     .nav-links {
         display: none;
     }

     .actions .find-btn {
         display: none;
     }

     .hamburger {
         display: inline-flex;
     }

     .hero__container {
         display   : flex;
         flex-direction: column;
         text-align: center;
         justify-content: center;
     }

     .hero__text {
         margin: 0 auto;
     }

     .hero__title {
         text-align: center;
     }

     .hero__text {
         margin    : 0 auto;
         text-align: center;
     }

     .hero__img {
         max-width: 400px;
         height   : 686px;
         display  : block;
         margin   : 0 auto;
     }

     .work__container ul {
         display        : flex;
         flex-direction : column;
         justify-content: center;
         align-items    : center;

     }

     .work__container li {
         margin: 15px 0;
     }

     .wrapper__container {
         display: block;
     }

     .wrapper__text {
         display: block;
         margin : 0 auto;
         padding: 15px 0;
     }

     .search-container {
         display    : block;
         align-items: center;
         max-width  : 600px;
     }

     .comfort__container {
         display        : flex;
         flex-direction : column;
         align-items    : center;
         justify-content: space-between;
     }

     .comfort__img {
         margin    : 15px 0;
         max-width : 400px;
         max-height: 600px;
     }

     .comfort__boxes {
         display        : flex;
         gap            : 15px;
         justify-content: center;
     }

     .comfort {
         margin-top: 50px;
         text-align: center;
     }

     .comfort__text {
         display: block;
         margin : 0 auto;
         padding: 15px 0;
     }

     .comfort__container ul {
         display        : flex;
         justify-content: center;
     }

     .main__list {
         justify-content: flex-start;
     }

     .main__item {
         transform   : translateZ(0);
         margin-right: 8px;
     }
     .main__list {
     display        : flex;
     flex-wrap      : wrap;
     gap            : var(--gap);
     justify-content: center;
     margin: 50px 0;

 }

 .main__item {
     background    : var(--card-inner-bg);
     border-radius : var(--radius);
     box-shadow    : var(--shadow);
     overflow      : hidden;
     display       : flex;
     flex-direction: column;
     max-width     : 220px;
     height        : 440px;
 }

 .card__image {
     max-width : 220px;
     height    : 255px;
     display   : block;
     object-fit: cover;
     background: #e8e8e8;
 }
 }