/* ============= Layout ============= */
    .hero-plasma{position:relative;max-width:1920px;height:430px;margin-inline:auto;overflow:hidden;display:flex;align-items:center;justify-content:space-between; margin-top:-40px; width:100%;}
    /* background overlay gradient (subtle) */
    .hero-plasma::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 28%,var(--grad-stop) 50%);pointer-events:none;}

    /* ============= Breadcrumbs ============= */
    .crumbs{position:absolute;top:36px;right:92px;display:flex;align-items:center;gap:10px;font-size:1.3rem;z-index:3;}
    .crumbs .divider{width:1px;height:14px;background:#000;}
    .crumbs .bold{font-weight:700;}

    /* ============= Paging arrows + counter ============= */
    .paging{position:absolute;top:46px;left:170px;display:flex;align-items:center;gap:16px;font-size:1.3rem;font-weight:700;z-index:3;}
    .paging .arrow{cursor:pointer;font-size:2.3rem;line-height:1;user-select:none;}

    /* ============= Plasma frame ============= */
    .frame-wrapper{margin-inline-end:8%;/* keeps ~180px gap from left edge */ width:604px;box-shadow:0 4px 10px rgba(0,0,0,.3);border:10px solid #f2e1d1;;background:#fff;display:flex;align-items:center;justify-content:center;border-radius:2px;z-index:2;}
    /* slider inside frame */
    .frame-wrapper img{object-fit:cover;width:100%;height:100%;}

    /* Remove arrows of BS carousel inside frame */
    .frame-wrapper .carousel-control-prev,
    .frame-wrapper .carousel-control-next{display:none;}

    /* ============= Headline ============= */
    .hero-title{margin-inline-start:7%;max-width:calc(92% - 660px);z-index:2;font-family: 'Assistant';}
    .hero-title h1{font-size:5.3rem;font-weight:700;line-height:1.2;color:#000;text-align:right;margin:0;}

    /* ======== Responsiveness ======== */
    @media(max-width:1530px){ .hero-title h1{font-size:4.5rem;}}
    @media(max-width:1480px){ .hero-title h1{font-size:3.5rem;}}
    @media(max-width:1240px){ .hero-title h1{font-size:3rem;}}
    @media(max-width:992px){.hero-plasma{flex-direction:column;justify-content:flex-start;height:auto;padding:100px 30px 140px;}  .hero-title{margin:0 auto;text-align:center;max-width: 100%;} .hero-title h1{text-align:center;} .paging{left:50%;transform:translateX(-50%);} }
    
    
    
    
    
    
    
    
    
    
    /* banners */

    .vision-left, .vision-right {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 50px 60px 50px 160px;
      gap: 20px;
      width: 960px;
      height: 189px;
    }

    .vision-left {
      background: #F4DBEB;
      z-index: 2;
    }

    .vision-right {
      background: #D4EFF1;
      padding: 50px 160px 50px 60px;
      z-index: 0;
    }

    .vision-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 5px;
      height: 89px;
    }

    .vision-title {
      font-weight: 700;
      font-size: 2.3rem;
      line-height: 40px;
      color: #000000;
      text-align: right;
    }

    .vision-subtitle {
      font-weight: 400;
      font-size:1.7rem;
      line-height: 30px;
      color: #000000;
      text-align: right;
      width: 351px;
    }

    .vision-icon {
      width: 89px;
      height: 89px;
    }

    .line-divider {
      width: 1px;
      height: 189px;
      background-color: #B2B2B2;
    }

    .vision-btn {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 8px;
      width: 215px;
      height: 59px;
      border-radius: 3px;
      font-weight: 700;
      font-size: 1.6rem;
      line-height: 30px;
      color: #FFFFFF;
      text-align: center;
      text-decoration: none;
    }

    .btn-pink {
      background: #BA2181;
    }

    .btn-blue {
      background: #1986C1;
    }


    /* ===== Global ===== */
    /* ===== Section Title ===== */
    .section-tips-grid {
        background-color: #FFFFFF;
        padding-bottom: 90px;
        padding-top: 20px;
    }
    .section-title{
      text-align:center;
      margin:40px 0 70px;
    }
    .section-title span{
      position:relative;
      font-weight:700;
      font-size:2.6rem;
    }
    .section-title span::after{
      content:"";
      position:absolute;
      bottom:-12px;
      left:0;
      width:100%;
      height:4px;
      background:#f7be00;
      border-radius:2px;
    }

    /* ===== Grid ===== */
    .tips-grid{
      display:grid;
      grid-template-columns:repeat(12,1fr); /* 12‑col grid */
      gap:35px 30px;
      max-width:1300px;
      margin:0 auto;
    }
    /* Card spans */
    .tip-card{grid-column:span 3;}          /* 4 cards - first row */
    .tip-card.row2{grid-column:span 4;}     /* 3 cards - second row */

    

    /* ===== Card ===== */
    .tip-card{
      position:relative;
      background:#fff;
      border:1px solid #e0e0e0;
      padding:34px 24px 26px;
      text-align:center;
      min-height:230px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
    }
    .tip-card::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:0;
      height:4px;
      background:currentColor;
    }

    /* ===== Icon & text ===== */
    .icon{
      width:55px;
      height:55px;
    }
    .styles-nav div {
    font-size: 1rem;
    font-family: 'Assistant';
    line-height: 22px;
    }
    .tip-title{
      font-size:1.3rem;
      font-weight:700;
      margin-bottom:12px;
    }
    .tip-text{
      font-size:1.15rem;
      line-height:1.6;
    }

    /* ===== Color utilities ===== */
    .yellow{color:#f7be00;}
    .green{ color:#7ac143;}
    .blue{  color:#009ce1;}
    .pink{  color:#d6569c;}
    .red{   color:#c52525;}
    .purple{color:#7c54d3;}
    .orange{color:#f38c2b;}





    





    /* ===== Global ===== */
    body{background: #FFFFFF;}
    img{max-width:100%;height:auto;}
    a{text-decoration:none;}

    /* ===== Hero Intro Text ===== */
    .intro-text{max-width:850px;margin:40px auto 30px;text-align:center;font-size:1.7rem;line-height:30px;font-weight: 400;padding: 0 5px;}

    /* ===== Category Tabs Row ===== */
    .rooms-nav{display:flex;overflow-x:auto;white-space:nowrap;gap:26px;padding:14px 16px;border-bottom:1px solid #e0e0e0;}
    .room-tab{display:flex;flex-direction:column;align-items:center;color:#7d7d7d;font-size:1rem;min-width:70px;cursor:pointer;}
    .room-tab.active{color:#d1a800;font-weight:700;} /* yellow highlight */
    .room-tab i{font-size:1.7rem;margin-bottom:6px;}

    /* ===== Main Carousel ===== */
    .carousel-inner img{object-fit:cover;}
    .carousel-indicators [data-bs-target]{background-color:#ba2181;} /* pink dots */

    /* ===== Side Panel ===== */
    .side-panel{background:#f7f7f7;border:1px solid #e0e0e0;height:100%;position:relative;padding:0;display:flex;flex-direction:column;}
    .side-panel .panel-header{background:#d1a800;color:#fff;font-weight:700;padding:14px;text-align:center;}
    .color-samples{padding:18px;text-align:center;border-bottom:1px solid #e0e0e0;}
    .color-swatch{display:inline-block;width:38px;height:38px;margin:4px;border:1px solid #ccc;}
    .btn-primary-sm{background:#1986c1;color:#fff;border:none;padding:8px 14px;font-size:1rem;border-radius:3px;}
    .btn-primary-sm:hover{background:#0f6d9c;}
    .panel-scroll{flex:1;overflow-y:auto;padding:18px;}
    .design-card{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed #ddd;font-size:1rem;cursor:pointer;}
    .design-card:last-child{border-bottom:none;}
    .design-card i{font-size:1.5rem;}

    /* ===== Tips Section ===== */
    .tips-title{margin:90px auto 70px;text-align:center;font-weight:700;font-size:2.6rem;position:relative;max-width:max-content;}
    .tips-title::after{content:"";position:absolute;bottom:-12px;left:0;width:100%;height:4px;background:#f7be00;border-radius:2px;}
    .tips-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:35px 20px;max-width:1600px;margin:0 auto;}
    .tip-card{position:relative;background:#fff;border:1px solid #e0e0e0;padding:34px 24px 26px;text-align:center;min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;grid-column:span 3;}
    .tip-card.row2{grid-column:span 4;}
    .tip-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:currentColor;}
    .tip-card .icon{width:40px;height:40px;margin-bottom:22px;}
    .tip-title{font-size:1.7rem;font-weight:700;margin-bottom:12px;color: #000000}
    .tip-text{font-size:1.4rem;line-height:1.6;color: #000000;font-weight: 400;}
    /* Colors */
    .yellow{color:#f7be00;}
    .green{color:#7ac143;}
    .blue{color:#009ce1;}
    .pink{color:#d6569c;}
    .red{color:#c52525;}
    .purple{color:#7c54d3;}
    .orange{color:#f38c2b;}

    /* ===== Bottom Banner ===== */
    .bottom-banner{display:flex;flex-wrap:wrap;text-align:center;direction:rtl;}
    .banner-half{flex:1;min-width:300px;padding:50px 60px 50px 120px;display:flex;gap:20px;align-items:center;justify-content:center;}
    .banner-left{background:#f4dbeb;}
    .banner-right{background:#d4eff1;flex-direction:row-reverse;padding:50px 160px 50px 60px;}
    .banner-icon{width:70px;height:70px;}
    .banner-btn{border-radius:3px;font-weight:700;font-size:1.7rem;padding:13px 20px;color:#fff;min-width:215px;display:inline-block;}
    .btn-magenta{background:#ba2181;}
    .btn-magenta:hover{background:#8c0058;}
    .btn-blue{background:#1986c1;}
    .btn-blue:hover{background:#0f6d9c;}

    @media(max-width:1200px){.tips-grid{grid-template-columns:repeat(9,1fr);} .tip-card.row2{grid-column:span 3;}}
    @media(max-width:850px){.tips-grid{grid-template-columns:repeat(6,1fr);} .tip-card,.tip-card.row2{grid-column:span 3;}}
    @media(max-width:575.98px){.tips-grid{grid-template-columns:1fr;gap:25px;} .tip-card,.tip-card.row2{grid-column:span 1;} .tips-title{font-size:2rem;}}

      
    /* ===== Top description ===== */
    .vision-desc{max-width:840px;margin:50px auto 32px;text-align:center;font-size:1.4rem;line-height:1.7;}

    /* ===== Tabs for rooms ===== */
    .rooms-tabs{display:flex;gap:10px;/* border:1px solid #e0e0e0; */background:#FFFFFF;scrollbar-width:none;margin-bottom: 20px; border-right:0; position: relative;}
    .rooms-tabs::-webkit-scrollbar{display:none;}
    .room-btn{    display: flex;flex-direction: column;align-items: center;min-width: 90px;cursor: pointer;color: #666; user-select: none;width: 149.5px;height: 102px;opacity: 1;gap: 5px;padding-top: 20px;padding-right: 10px;padding-bottom: 20px;    padding-left: 10px;font-weight: 400;}
    .room-btn i{font-size:2.4rem;}
    .room-btn.active{color:var(--pink);font-weight:700;border-bottom: 3px solid #f7be00;opacity: 1;}
    .room-btn img {width: 40px; height: 40px;}
    .room-btn span {font-size: 1.7rem; }

    /* ===== Layout ===== */
    .vision-wrapper{width:100%; padding-top:18px; background-color: #f4f4f4;}
    .vision-row {width: 90%; margin:0 auto;}
    /* .vision-row{display:flex;} */
    .gallery-col{flex:1 1 72%; width: calc(100% - 417px); float:left;}

    /* ===== Carousel ===== */
    .gallery-col .carousel-inner img{object-fit:cover;width:100%}
    .gallery-col .carousel-indicators [data-bs-target]{background:#BA2181;}  /* magenta dots */
    .gallery-col .carousel-control-prev-icon,
    .gallery-col .carousel-control-next-icon{filter:invert(1);} /* black arrows to white */
    .gallery-col img {width:100%;}

    /* ===== Styles list & info ===== */
    .styles-nav{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;border-inline-end:1px solid #ddd;text-align: center;}
    .styles-nav li{padding:11px 11.5px;cursor:pointer;;font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; opacity: 0.5;}
    .styles-nav li.active{background:var(--grey);font-weight:700; opacity: 1;}
    .style-info{padding:0 10px;direction: rtl; box-shadow: inset -10px 0em 10px #EEE;}
    .style-info * {max-width:calc(100% - 20px)}
    .styles-col-back h5{    font-size: 1.7rem;font-weight: 700;background: #F7BE00;height: 68px;text-align: center;vertical-align: middle;line-height: 3;margin-bottom: 0;}
    .swatches{margin-bottom:16px;display:flex;gap:6px;flex-wrap:wrap;padding: 20px 0;}
    .swatch{width:calc(25% - 4.5px); padding:5px; text-align: center; font-size:1rem}
      .color-palette {font-size: 1.3rem;font-weight: 700;line-height: 22px;padding: 10px 5px 0;}
    .btn-yellow{text-align:center; border: none;color: #000;font-weight: 700;padding: 10px 20px;border-radius: 3px;display: block;width: 100%;margin-bottom: 15px;background: #F7BE00;}
    .btn-border-yellow{text-align:center; border: #F7BE00 1px solid;color: #000;padding: 10px 20px;border-radius: 3px;display: block;width: 100%;margin-bottom: 15px;background: #FFFFFF;}
      
      
    .styles-col-back a {display:inline-block; width:100%; background: #FAD866;padding: 8px 20px;font-size: 1rem;text-decoration: underline;    font-family: 'Assistant';}

    
    
    .styles-list{max-height:none;background:#FFFFFF;}


    /* ===== Hero Banner Wrapper ===== */
    .hero-wrap{position:relative;max-width:1920px;height:430px;margin:auto;overflow:hidden;background:#f2e1d1;display:flex;align-items:center;}
    .hero-bg-grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 28.76%,#d4eff1 50%);pointer-events:none;}

    /* ===== Breadcrumbs ===== */
    .breadcrumbs{position:absolute;top:32px;right:85px;display:flex;gap:10px;font-size:1.3rem;align-items:center;z-index:2;}
    .breadcrumbs .divider{width:1px;height:14px;background:#000;}
    .breadcrumbs .bold{font-weight:700;}

    /* ===== Paging (arrows & counter) ===== */
    .paging{position:absolute;top:44px;display:flex;align-items:center;gap:14px;font-size:1.3rem;font-weight:700;z-index:2;}
    .paging .arrow{cursor:pointer;font-size:2rem;}

    /* ===== Frame with Slider ===== */
    .frame-holder{margin-inline-start:180px;width:605px;/* 585 + borders */height:180px;box-shadow:0 4px 8px rgba(0,0,0,.08);background:#fff;border:10px solid #eaddcf;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1;}
    .frame-holder img{object-fit:cover;width:100%;height:100%;}

    /* ===== Inspiration Headline ===== */
    .headline{margin-inline-end:120px;max-width:820px;z-index:1;}
    .headline h1{font-size:5.3rem;font-weight:700;line-height:1.2;margin:0;color:#000;text-align:right;}
    
    
    .styles-col-right{flex:0 0 100px; display:flex;flex-direction:column; float:right ; overflow-y: auto; direction:ltr; scrollbar-width: thin;}
    .styles-col{flex:0 0 284px;/* border:1px solid #e0e0e0; */ background:#FFFFFF;display:flex;flex-direction:column;width: 284px; float:right; overflow-y: auto; direction:ltr; scrollbar-width: thin;}
    
    .design-styles {font-size: 1.7rem;font-weight: 700;background: #F7BE00;height: 68px;text-align: center;vertical-align: middle;line-height: 3; position: relative;}
    .design-styles .design-styles-close {position: absolute; left:15px; font-weight: 400 ; }
    
    .vision-wrapper:not(.no_room_style) .design-styles-select {display:none}
    .vision-wrapper.no_room_style .design-styles-select {margin-bottom: 20px;}
    .vision-wrapper.no_room_style .design-styles {display:none}
    .design-styles-select {background-color: #FFFFFF; font-size: 1.7rem; font-weight:400; height:102px; text-align: center; padding:35px 0;}
    
    .displayvisibil {display: inline-block;}
    .displaynone {display: none;}

    .category-carousel {background-color: #F4F4F4; padding: 30px 0;}
    .filter-strip > div.swiper-outer div.swiper-container a {width: 150px}
    .swiper-button-prev, .swiper-button-next {background-color: #FFFFFF;}

    .swiper-container-rtl .swiper-button-next {left:0;}
    .swiper-container-rtl .swiper-button-prev {right:0;}

    .filter-with-legend {width:100%;}
    .swiper-outer, .swiper-container, .swiper-wrapper {max-width:100%}
    .swiper-outer {width: calc(100% - 110px);  margin: 0 auto;}

    .vision-wrapper:not(.no_room_style) .no_room_style_img {display: none;}
    .vision-wrapper.no_room_style #roomGallery {display:none}
    .vision-wrapper.no_room_style .styles-col {display:none}
    
    .vision-wrapper.no_room_style .styles-col-right .styles-list {background-color: #FFFFFF; }
    .vision-wrapper.no_room_style .styles-col-right .styles-nav {border-inline-end:0; border-bottom: 1px solid #f4f4f4;}
    .vision-wrapper.no_room_style .styles-col-right .styles-nav li {opacity:1; border-bottom: 0; text-align: right; direction: rtl;}
    .vision-wrapper.no_room_style .styles-col-right .styles-nav li img{opacity: .5; }
    .vision-wrapper.no_room_style .styles-col-right .styles-nav div {display:inline-block; font-size:1.7rem; color:#000000; margin-right: 20px;}
    .style-toggle {background-color: #FFFFFF; margin-bottom: 5px;}
    .vision-wrapper.no_room_style .style-toggle { border-bottom: 2px solid #F7BE00; margin-bottom: 0}
    /* Responsive tweaks */
    @media(max-width:1450px){.headline h1{font-size:4.6rem;} .frame-holder{margin-inline-start:60px;}}
    
    /*@media screen and (min-device-width: 990px) and (max-device-width: 1600px){.gallery-col{width:60%}} */
    /* Medium screens */
    @media(max-width:1200px){
      .tips-grid{grid-template-columns:repeat(9,1fr);} /* 3 per row */
      .tip-card{grid-column:span 3;}       /* still 3 cols each */
      .tip-card.row2{grid-column:span 3;}  /* same */
    
    
    }
    @media(max-width:1040){   .hero-title {max-width:50%;}
     }
    @media  (max-width: 1024px) {
        .hero-plasma {margin-top:0;}
    }
    
    /* only desktop */
    @media(min-width:992px){
        .vision-wrapper.no_room_style .styles-col-right {width: 400px}
    }
    @media(max-width:992px){.hero-wrap{flex-direction:column;height:auto;padding:60px 30px 120px;} 
        .frame-holder{margin:0 auto 40px;} .headline{margin:0 auto;text-align:center;} 
        .headline h1{text-align:center;}.vision-row{flex-direction:column;} 
        .styles-col{flex-basis:auto;order:-1; }
        .gallery-col, .styles-col-right, .styles-col {float:none} 
        .tips-grid{grid-template-columns:repeat(1,1fr);}
        .tip-card,.tip-card.row2{grid-column:span 1;}
        .section-title span{font-size:2.6rem;display: block;}
        .tips-grid{gap:25px;}
        .banner-half {flex-direction: column;padding: 30px 50px 30px 50px;height: 350px;}
        .banner-half img {width: 58px;}
        .banner-half .vision-title {width: 100%;text-align: center;font-size: 1.85rem;}
        .banner-half .vision-subtitle {width: 100%;text-align: center;font-size: 1.5rem;}
        .vision-text{    margin: 15px 0;}
        .vision-btn {font-size:1.5rem;width: 100%;}
        .line-divider {display: none;}
        .section-title span::after{width: 90%;left: 20px;}
        
        .tip-card img {position: absolute;right: 20px;}
        .tip-card .tip-text {text-align: right;}
        .tip-card .tip-title {display: flex;margin-right: 50px;margin-bottom: 0;height: 50px;}
        .tip-card::after {content: none;}
        .pink {border-right-color: #d6569c;min-height: 0;display: block;border-left: white;border-top: white;border-bottom: white;margin-right: 20px;border-right-width: 3px;border-right-style: solid;}
        .blue {border-right-color: #009ce1;min-height: 0;display: block;border-left: white;border-top: white;border-bottom: white;margin-right: 20px;border-right-width: 3px;border-right-style: solid;}
        .green {border-right-color: #7ac143;min-height: 0;display: block;border-left: white;border-top: white;border-bottom: white;margin-right: 20px;border-right-width: 3px;border-right-style: solid;}
        .yellow {border-right-color: #f7be00;min-height: 0;display: block;border-left: white;border-top: white;border-bottom: white;margin-right: 20px;border-right-width: 3px;border-right-style: solid;}
        .orange {border-right-color: #f38c2b;min-height: 0;display: block;border-left: white;border-top: white;border-bottom: white;margin-right: 20px;border-right-width: 3px;border-right-style: solid;}
        .purple {border-right-color: #7c54d3;min-height: 0;display: block;border-left: white;border-top: white;border-bottom: white;margin-right: 20px;border-right-width: 3px;border-right-style: solid;}
        .tips-grid .red {border-right-color: #c52525;min-height: 0;display: block;border-left: white;border-top: white;border-bottom: white;margin-right: 20px;border-right-width: 3px;border-right-style: solid;}
        

        .frame-wrapper {    border: 10px solid #D4EFF1;}
        .hero-title h1{font-size: 3rem;}
        .frame-wrapper {width:640px; max-width:90%; margin-top: 50px;height: auto; margin-inline-end:0}
        .paging {bottom: -350px;}
        .hero-plasma {padding: 80px 30px 80px;}
        
        .category-carousel .intro-text {margin: 0 30px 30px}
        
        .styles-nav img {float: right;}
        .styles-nav div {line-height: 60px;font-weight: 700;font-size:1.5rem;}
        .style-toggle img {float: right;}
        .style-toggle div {line-height: 60px;font-weight: 700;font-size: 1.5rem;text-align: center;}
        
        .styles-col-right {border: 0; height: auto !important;}
        .styles-col {display: contents;}
        .styles-col-back, .style-info h5 {display: none;}
        
        .displayvisibil, .style-info hr {display: none;}
        .displaynone {display: inline-block;}
        .gallery-col {margin-right: 0;margin-bottom: 50px; width:100%;}
        .vision-wrapper.no_room_style .gallery-col {width: 100%; margin-bottom: 20px;}
        .room-btn img {display: none;}
        .rooms-tabs {margin-bottom: 0;border: 0;}
        .vision-wrapper.no_room_style .rooms-tabs {margin-bottom: 5px; }
        .room-btn {min-width: 100%; padding-top:0; padding-bottom: 0; height:62px;}
        .room-btn.active {border-bottom: 0;}
        .carousel-indicators [data-bs-target] {border-radius: 30px !IMPORTANT;background: #ba2181 !IMPORTANT;width: 15px !IMPORTANT;height: 15px !IMPORTANT;border-top: 0 !IMPORTANT;border-bottom: 0 !IMPORTANT;}
        .design-styles-select {height: 60px; padding-top: 15px; margin-bottom: 0;}
        .vision-wrapper.no_room_style .design-styles-select {margin-bottom: 5px;}
        
        /* ------------ Collapse list of other styles ------------ */
        .styles-list{max-height:0;overflow:hidden;transition:max-height .35s ease;}
        .styles-list.show{max-height:300px; margin-bottom: 5px;}
        .icon_arrow_down {width: 22px;height: 22px;float: left !IMPORTANT;margin-top: 20px;}
/*        .section-tips-grid, .bottom-banner {display:none} */
        .swiper-outer {width: 100%;}
    }
    .carousel-indicators {padding: 20px 0 !IMPORTANT; bottom: auto !IMPORTANT; background: #fff; height: 75px !IMPORTANT; padding-top: 30px ! IMPORTANT;}    
    .carousel-indicators [data-bs-target] {border-radius: 30px !IMPORTANT;background: #ba2181 !IMPORTANT;width: 15px !IMPORTANT;height: 15px !IMPORTANT;border-top: 0 !IMPORTANT;border-bottom: 0 !IMPORTANT;}
    .carousel-control-prev {position: relative !IMPORTANT; background: #fff !IMPORTANT; padding: 15px 0 !IMPORTANT; opacity: 1 !IMPORTANT; height: 75px ! IMPORTANT;}
    .carousel-control-next {position: absolute !IMPORTANT; background: #fff !IMPORTANT; opacity: 1 !IMPORTANT; padding: 15px 0 !IMPORTANT; bottom: 0px !IMPORTANT; top: auto !IMPORTANT; height: 75px ! IMPORTANT;}
    .carousel-control-next-icon { width: 1.7rem !IMPORTANT; height: 1.7rem !IMPORTANT; left: 20px !IMPORTANT; position: absolute !IMPORTANT;}
    .carousel-control-prev-icon { width: 1.7rem !IMPORTANT; height: 1.7rem !IMPORTANT; right: 20px !IMPORTANT; position: absolute !IMPORTANT;}
  
    
    /* Small screens */
    @media(max-width:850px){
      .tips-grid{grid-template-columns:repeat(6,1fr);} /* 2 per row */
      .tip-card,.tip-card.row2{grid-column:span 3;}
    }
    /* Extra‑small */
    @media(max-width:600px){
      .tips-grid{grid-template-columns:repeat(1,1fr);}
      .tip-card,.tip-card.row2{grid-column:span 1;}
      .section-title span{font-size:2.6rem;display: block;}
      .tips-grid{gap:25px;}
    .banner-half {flex-direction: column;padding: 30px 50px 30px 50px;height: 350px;}
    .banner-half img {width: 58px;}
    .banner-half .vision-title {width: 100%;text-align: center;font-size: 1.85rem;}
    .banner-half .vision-subtitle {width: 100%;text-align: center;font-size: 1.5rem;}
    .vision-text{    margin: 15px 0;}
    .vision-btn {font-size:1.5rem;width: 100%;}
    .line-divider {display: none;}
    .section-title span::after{width: 90%;left: 20px;}
    
    .tip-card img {position: absolute;right: 20px;}
    .tip-card .tip-text {text-align: right;}
    .tip-card .tip-title {display: flex;margin-right: 50px;margin-bottom: 0;height: 50px;}
    .tip-card::after {content: none;}
    .pink {border-right-color: #d6569c;min-height: 0;display: block;border-left: white;border-top: white;border-bottom: white;margin-right: 20px;border-right-width: 3px;border-right-style: solid;}
    .blue {border-right-color: #009ce1;min-height: 0;display: block;border-left: white;border-top: white;border-bottom: white;margin-right: 20px;border-right-width: 3px;border-right-style: solid;}
    .green {border-right-color: #7ac143;min-height: 0;display: block;border-left: white;border-top: white;border-bottom: white;margin-right: 20px;border-right-width: 3px;border-right-style: solid;}
    .yellow {border-right-color: #f7be00;min-height: 0;display: block;border-left: white;border-top: white;border-bottom: white;margin-right: 20px;border-right-width: 3px;border-right-style: solid;}
    .orange {border-right-color: #f38c2b;min-height: 0;display: block;border-left: white;border-top: white;border-bottom: white;margin-right: 20px;border-right-width: 3px;border-right-style: solid;}
    .purple {border-right-color: #7c54d3;min-height: 0;display: block;border-left: white;border-top: white;border-bottom: white;margin-right: 20px;border-right-width: 3px;border-right-style: solid;}
    .tips-grid .red {border-right-color: #c52525;min-height: 0;display: block;border-left: white;border-top: white;border-bottom: white;margin-right: 20px;border-right-width: 3px;border-right-style: solid;}
    
    .frame-wrapper {    border: 10px solid #D4EFF1;}
    .hero-title h1{font-size: 3rem;}
    .frame-wrapper {margin-top: 50px;width: 100%;height: auto;}
    .paging {bottom: -350px;}
    .hero-plasma {padding: 80px 30px 80px;}
    
    .category-carousel .intro-text {margin: 0 30px 30px}
    
    .styles-nav img {float: right;}
    .styles-nav div {line-height: 60px;font-weight: 700;font-size: 1.5rem;}
    .style-toggle img {float: right;}
    .style-toggle div {line-height: 60px;font-weight: 700;font-size: 1.5rem;text-align: center;}
    .styles-col-right {border: 0;}
    .styles-col {display: contents;}
    .styles-col-back, .style-info h5 {display: none;}
    
    .displayvisibil, .style-info hr {display: none;}
    .displaynone {display: inline-block;}
    .gallery-col {margin-right: 0;margin-bottom: 50px;}
    .room-btn img {display: none;}
    .room-btn {min-width: 100%;}
    .carousel-indicators [data-bs-target] {border-radius: 30px !IMPORTANT;background: #ba2181 !IMPORTANT;width: 15px !IMPORTANT;height: 15px !IMPORTANT;border-top: 0 !IMPORTANT;border-bottom: 0 !IMPORTANT;}
    
    
    /* ------------ Collapse list of other styles ------------ */
    .styles-list{max-height:0;overflow:hidden;transition:max-height .35s ease;}
    .styles-list.show{max-height:300px;}
                .icon_arrow_down {width: 22px;height: 22px;float: left !IMPORTANT;margin-top: 20px;}
    
    }

    
    body>footer {margin-top: 0;}