:root {
     --text-color: #123486;
     /* white text */
     --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     /* soft shadow */
     --bg-color: #123486;
     /* dark background */
     --white-color: #ffff;
     --media-social-links: var(--logo-colour);
     --logo-colour: #123486;
 }

 body {
     font-family: "Poppins", sans-serif;
 }

 a {
     text-decoration: none;
 }

 ul {
     list-style-type: none;
 }

 .mask-image {
     width: var(--m-size);
     height: var(--m-size);
     background-color: var(--m-bg);

     -webkit-mask-image: var(--m-url);
     -webkit-mask-position: center;
     -webkit-mask-size: contain;
     -webkit-mask-repeat: no-repeat;

     mask-image: var(--m-url);
     mask-position: center;
     mask-size: contain;
     mask-repeat: no-repeat;

     transition: 0.4s;
 }

 *:hover>.mask-image {
     background-color: var(--m-h-bg, var(--m-bg));
 }

 /* dropdown parent */
 .dropdown-icon-section {
     position: relative;
 }

 .dropdown-icon-section .drop-down-icon-svg {
     width: 24px;
     height: 24px;
     fill: var(--bg-color);
     transform: rotate(90deg);
 }

 .absolute-dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     transform: translateY(2px);
     width: max-content;
     background: #fff;
     box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
     border-radius: 6px;
     z-index: 999;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: opacity 0.25s ease, transform 0.25s ease;
 }

 /* hover show */
 .nav-item.dropdown-icon-section:hover .absolute-dropdown,
 .absolute-dropdown:hover {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
 }


 .right-arrow-icon {
     display: flex;
     align-items: center;
     gap: 8px;
     color: var(--bg-color);
     text-decoration: none;
 }

 .menu-text {
     position: relative;
     font-weight: 500;
     font-size: 14px;
     padding-bottom: 3px;
 }

 .menu-text::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     height: 2px;
     width: 0%;
     background-color: var(--bg-color);
     transition: width 0.3s ease;
 }

 .arrow-svg {
     width: 24px;
     height: 24px;
     fill: var(--bg-color);
     transition: transform 0.3s ease;
 }

 .right-arrow-icon:hover .menu-text::after {
     width: 100%;
 }

 .right-arrow-icon:hover .arrow-svg {
     transform: translateX(5px);
 }


 .image-slider-bg-container {
     background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
         url('images/racks-images/img-slider-bg.jpg');
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     padding: 80px;
 }

 /* Sidebar Base */
 .sidebar {
     height: 100%;
     width: 0;
     position: fixed;
     top: 0;
     left: 0;
     background: #ffffff;
     overflow-x: hidden;
     transition: 0.4s ease;
     padding-top: 60px;
     z-index: 9999;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 }

 /* Menu style */
 .sidebar-menu {
     list-style: none;
     padding: 0;
 }

 .sidebar-menu li a {
     text-decoration: none;
     font-size: 20px;
     color: #000;
     display: block;
 }

 /* Close Button */
 .close-btn {
     position: absolute;
     top: 15px;
     right: 15px;
     font-size: 30px;
     background: none;
     border: none;
 }

 /* Mobile Toggle Button */
 .navbar-toggler {
     border: none;
     background: none;
 }

 .navbar-toggler-icon {
     width: 25px;
     height: 3px;
     background: #000;
     display: block;
     position: relative;
 }

 .navbar-toggler-icon::after,
 .navbar-toggler-icon::before {
     content: "";
     width: 25px;
     height: 3px;
     background: #000;
     position: absolute;
     left: 0;
 }

 .navbar-toggler-icon::before {
     top: -7px;
 }

 .navbar-toggler-icon::after {
     top: 7px;
 }

 /* Submenu inside sidebar */
 .sidebar-submenu {
     list-style: none;
     padding-left: 20px;
     display: none;
     /* hidden by default */
 }

 .sidebar-submenu li {
     margin: 10px 0;
 }

 .sidebar-menu li.active>.sidebar-submenu {
     display: block;
 }


 .get-contacted-btn {
     padding: 12px 30px;
     border-radius: 50px;
     transition: all 0.4s ease;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     border: 1px solid var(--logo-colour);
 }

 .get-contacted-btn h5 a {
     color: var(--logo-colour);
     margin: 0;
     transition: all 0.4s ease;
 }

 .get-contacted-btn h5 {
     color: var(--logo-colour);
     margin: 0;
     transition: all 0.4s ease;
 }

 /* Hover Effects */
 .get-contacted-btn:hover {
     transform: scale(1.02);
 }

 .get-contacted-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -75%;
     width: 50%;
     height: 100%;
     background: #4528c663;
     transform: skewX(-20deg);
     transition: all 0.6s ease;
 }

 .get-contacted-btn:hover::before {
     left: 125%;
 }

 .header-nav-links .nav-links-header {
     position: relative;
     text-decoration: none;
     color: var(--logo-colour);
     padding-bottom: 2px;
     transition: color 0.3s ease;
     font-size: 14px;
     font-weight: 500;
 }


 .circle-content a h6 {
     font-size: 13px;
 }

 .nav-item:hover {
     transition: all .4s ease;
 }

 .enquire-now-btn-container a {
     color: var(--logo-colour);
 }


 .header-nav-links .nav-links-header::after {
     content: "";
     position: absolute;
     height: 2px;
     background-color: var(--logo-colour);
     width: 100%;
     left: 0;
     bottom: 0;
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.3s ease;
 }

 .header-nav-links .nav-links-header:hover::after {
     transform: scaleX(1);
 }

 .swiper {
     width: 100%;
     padding: 30px 0;
 }

 .swiper-slide {
     display: flex;
     justify-content: center;
 }

 .box {
     background: #fff;
     border-radius: 10px;
     height: 200px;
     width: 200px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     font-size: 18px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
     margin: auto;
 }

 .swiper-button-next,
 .swiper-button-prev {
     color: var(--media-social-links);
     background: #fff !important;
     border-radius: 50%;
     width: 45px;
     height: 45px;
     box-shadow: var(--box-shadow);
 }

 .swiper-button-next::after,
 .swiper-button-prev::after {
     font-size: 20px;
     font-weight: bold;
 }

 .swiper-horizontal>.swiper-pagination-bullets,
 .swiper-pagination-bullets.swiper-pagination-horizontal,
 .swiper-pagination-custom,
 .swiper-pagination-fraction {
     /* bottom: 5px; */
     top: 90% !important;
     left: 0;
     width: 100%;
 }

 .titles {
     text-align: center;
     margin-top: 40px;
 }

 .titles h3 {
     font-weight: 700;
     margin-bottom: 10px;
 }

 .title-feautures h1 {
     color: var(--logo-colour);
 }

 .content-media-section h2 {
     color: var(--logo-colour);
     font-size: 1.7em;
 }

 .content-media-section p {
     font-size: .8em;
 }

 .content-media-section svg {
     font-size: 1.4em;
 }



 /* square box with background image */
 .bg-box {
     width: 100%;
     aspect-ratio: 1;
     background-size: cover;
     background-position: center;
     border-radius: 50%;
     border: 4px solid #fff;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }

 .prev-control-section {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, 50%);
 }

 .title-setion h1 {
     color: #fff;
     font-size: 20px;
 }

 .swiper-pagination-bullet-active {
     background-color: #fff !important;
 }

 .swiper-pagination {
     height: 20% !important;
 }


 .content-media-section {
     font-size: 16x !important;
 }



 /* about us section  */

 .highlight-gradient {
     background: linear-gradient(90deg, #113386, #262626);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }


 .sub-heading {
     position: relative;
     display: inline-block;
     color: var(--logo-colour);
 }

 .sub-heading::after {
     content: "";
     position: absolute;
     width: 60%;
     height: 3px;
     border-radius: 100vh;
     top: 50%;
     left: calc(100% + 10px);
     transform: translateY(-50%);
     background-color: var(--logo-colour);
 }


 .circle-section {
     width: 100%;
     position: relative;
     perspective: 1000px;
     /* 3D depth */
     display: grid;
 }

 /* Main Circle (Top) */
 .about-circle-bg-image {
     position: relative;
     background: url(images/about-us-img/about-2.webp);
     width: 70%;
     aspect-ratio: 1;
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     border-radius: 50%;
     transition: transform 0.2s ease, box-shadow 0.3s ease;
     /* z-index: 2; */
     overflow: visible;
     grid-column: 1/2;
     grid-row: 1/2;
 }

 /* Background Circle (Behind) */
 .about-circle-bg-image-two {
     /* content: ""; */
     position: absolute;
     background: url(images/about-us-img/about.webp);
     width: 40%;
     aspect-ratio: 1;
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     border-radius: 50%;
     top: 50%;
     right: 0%;
     transform: translateY(-50%) rotateX(0deg) rotateY(0deg) translateX(0);
     z-index: -1;
     /* always behind */
     opacity: 0.9;
     pointer-events: none;
     transition: transform 0.2s ease;
     grid-column: 1/2;
     grid-row: 1/2;
     transition: .4s;
 }

 .about-circle-bg-image::before {
     transform: var(--before-transform, translateY(-50%) rotateX(0deg) rotateY(0deg));
 }

 .about-circle-bg-image-two:hover {
     transform: translateY(-50%) rotateX(0deg) rotateY(0deg) translateX(20px);
 }

 /* about end  */

 .furniture-image {
     width: 90%;
     overflow: hidden;
     background-size: cover;
     height: 260px;
     background-position: center;
     background-repeat: no-repeat;
     border-radius: 5px;
     box-shadow: var(--box-shadow);
     transition: transform 0.6s ease, background-size 0.6s ease;
     cursor: pointer;
 }

 .read-more {
     font-size: 14px;
     font-weight: bold;
 }

 .title-feautures {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
 }

 .title-text {
     text-align: center;
 }

 /* underline auto width */
 .center-line {
     width: 100%;
     height: 3px;
     background-color: var(--logo-colour);
     border-radius: 2px;
     margin-top: 8px;
 }

 .enquire-now-btn {
     border: 2px solid var(--logo-colour);
     border-radius: 4px;
     transition: .4s ease;
 }

 .enquire-now-btn a h6 {
     color: var(--logo-colour);
 }

 .enquire-now-btn:hover {
     transform: scale(.9);
 }


 .whatsapp-btn-product {
     background-color: var(--logo-colour);
     border-radius: 4px;
     transition: .4s ease;
     cursor: pointer;
 }

 .whatsapp-btn-product a {
     color: #fff;
 }

 .whatsapp-btn-product:hover {
     transform: scale(.9);
 }

 .read-more {
     color: #0808ff;
     /* link color */
     font-weight: 600;
     text-decoration: none;
     margin-left: 5px;
     transition: color 0.3s ease;
 }

 .read-more:hover {
     color: var(--logo-colour);
     text-decoration: underline;
 }

 .title-line {
     width: 170px;
     height: 3px;
     background-color: var(--logo-colour);
     border-radius: 2px;
 }

 .end-line {
     width: 99%;
     height: 2px;
     background-color: var(--logo-colour);
     border-radius: 2px;
 }

 .follow-line {
     width: 38%;
     height: 2px;
     background-color: var(--logo-colour);
     border-radius: 2px;
 }

 .newsletter-center-line {
     width: 170px;
     height: 3px;
     background-color: var(--logo-colour);
     border-radius: 2px;
 }

 .email-address-btn {
     background-color: #f1e4de;
     display: inline-block;
     padding: 15px 15px;
     border-radius: 25px;
     cursor: pointer;
 }

 .signup-btn {
     background-color: var(--logo-colour);
     display: inline-block;
     padding: 15px 15px;
     border-radius: 25px;
     cursor: pointer;
 }

 .circle-section a {
     width: 100%;
     display: inline-block;
     transition: all 0.3s ease-in-out;
     display: flex;
     justify-content: center;
     align-items: center;
 }


 .circle-section:hover .circle-image {
     box-shadow: 0 4px 12px var(--media-social-links);
     transform: scale(1.05);
     transition: all 0.3s ease-in-out;
 }


 .circle-image {
     width: 80%;
     aspect-ratio: 1;
     overflow: hidden;
     background-position: center;
     background-repeat: no-repeat !important;
     background-size: cover !important;
     border-radius: 50%;
     box-shadow: var(--box-shadow);
     transition: all 0.3s ease-in-out;
 }

 .circle-image:hover {
     box-shadow: 0 4px 12px var(--media-social-links);
 }

 .btn {
     border: none;
     border-radius: 50px;
     font-family: 'Poppins', sans-serif;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     transition: all 0.3s ease-in-out;
 }


 .btn-view {
     background: linear-gradient(135deg, #007bff, #0056b3);
     color: #fff;
     box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
 }

 .btn-view:hover {
     background: linear-gradient(135deg, #0056b3, #003d80);
     box-shadow: 0 6px 16px rgba(0, 86, 179, 0.5);
     transform: translateY(-2px);
 }

 /* Buy Now Button – Dark gold accent */
 .btn-buy {
     background: linear-gradient(135deg, #ffb703, #ff8c00);
     color: #fff;
     box-shadow: 0 4px 12px rgba(255, 140, 0, 0.4);
 }

 .btn-buy:hover {
     background: linear-gradient(135deg, #ff8c00, #e65100);
     box-shadow: 0 6px 16px rgba(230, 81, 0, 0.5);
     transform: translateY(-2px);
 }


 .btn h5 {
     margin: 0;
     padding: 0;
     font-size: 1rem;
 }

 /* category-section  */

 .social-media-container {
     background-color: var(--logo-colour);
 }

 .icon-circle {
     background-color: #fff;
     width: 45px;
     height: 45px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.3s ease;
 }

 .icon-circle:hover {
     background-color: #2d695a;
     transform: translateY(-4px);
     box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
 }

 .icon-circle:hover svg path {
     fill: #ffff;
 }

 .follow-line {
     width: 90px;
     height: 3px;
     background-color: var(--white-color);
 }

 .next-prev-control-section {
     position: absolute;
     top: 45%;
     left: 50%;
     transform: translate(-50%, 50%);
     width: 100%;
     z-index: 1000;
     overflow: visible;
 }

 @media (max-width: 767px) {
     .follow-line {
         margin: 0 auto;
     }
 }


 .img-box-section {
     width: 100%;

 }

 .media-icon-links svg,
 .media-box-icons svg,
 .sub-box-media-links svg,
 .comment-section svg {
     transition: all 0.3s ease-in-out;
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     cursor: pointer;
 }

 .media-icon-links svg:hover,
 .media-box-icons svg:hover,
 .sub-box-media-links svg:hover,
 .comment-section svg:hover {
     transform: scale(1.2);
     box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
 }

 .img-background-share-box {
     height: 200px;
     width: 100%;
     aspect-ratio: 1;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }

 .sub-img-box-section {
     min-height: 470px;
     border-radius: 15px;
     width: 100%;
     box-shadow: var(--box-shadow);
     height: 100%;
 }

 .img-box-section {
     min-height: 400px !important;
     font-size: 16px;
 }

 .img-box-section h5 {
     font-size: 1.2em;
 }

 .img-box-section p {
     font-size: .8em;
 }

 .know-more-btn {
     background-color: var(--white-color);
     border-radius: 20px;
     width: max-content;
     padding: 10px 14px;
     transition: all .4s ease;
 }

 .know-more-btn:hover {
     background-color: #2d695a;
     transform: scale(1.1);
     box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
 }

 .know-more-btn-link {
     font-size: 1rem;
     color: var(--media-social-links);
     font-weight: 500;
 }

 .know-more-btn:hover .know-more-btn-link {
     color: var(--white-color);
 }


 /* img slider section  */

 /* footer  */

 .footer-quick-nav-links {
     color: #222222;
     font-weight: 500;
     font-size: 14px;
 }

 #footer-section h3 {
     font-size: 19px;
     color: var(--bg-color);
     font-weight: bold;
 }




 .footer-quick-nav-links-container {
     transition: all .4s ease;
 }


 .footer-quick-nav-links-container:hover {
     transform: translateX(5px);
 }

 .footer-nav-link a {
     position: relative;
     display: inline-block;
     text-decoration: none;
 }

 .footer-nav-link p {
     position: relative;
     display: inline-block;
     color: inherit;
     transition: color 0.3s ease;
 }

 .footer-nav-link p::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -1px;
     /* adjust underline position */
     width: 0;
     height: 1px;
     background-color: var(--bg-color);
     transition: width 0.4s ease;
 }

 .footer-nav-link:hover p::after {
     width: 100%;
 }




 .bottom-footer-link {
     color: #fff;
     font-size: 14px;
 }




 /* Mobile Responsive */
 @media (max-width: 768px) {
     .box-section-height-alignment {
         height: auto !important;
         min-height: 300px !important;
     }

     .furniture-image {
         width: 98%;
     }

     .image-slider-bg-container {
         background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
             url('images/racks-images/img-slider-bg.jpg');
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
         padding-inline: 0px !important;
     }

     /* square box with background image */
     .bg-box {
         width: 90%;
         aspect-ratio: 1;
         background-size: cover;
         background-position: center;
         border-radius: 50%;
         border: 4px solid #fff;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
     }
 }





 /* form style  */

 .box-section-height-alignment::-webkit-scrollbar {
     width: 6px;
 }

 .box-section-height-alignment::-webkit-scrollbar-track {
     background: #d0d7e6;
     /* track color */
 }

 .box-section-height-alignment::-webkit-scrollbar-thumb {
     background: #123486;
     /* thumb color */
     border-radius: 10px;
 }

 /* Firefox */
 .box-section-height-alignment {
     scrollbar-width: thin;
     scrollbar-color: #123486 #d0d7e6;
 }


 /* tags */
 .theme-btn {
     color: white;
     border-radius: 30px;
     isolation: isolate;
     position: relative;
     overflow: hidden;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0);
     border: none;
     outline: none;
     padding: 10px 15px;
     background-color: #123486;
     transition: .5s;
     text-align: center;
 }

 .theme-btn::before {
     content: "";
     position: absolute;
     z-index: -1;
     width: 100%;
     height: 100%;
     border-radius: inherit;
     left: 0;
     top: 0;
     background-color: #ee3f37;
     transform: translateX(-110%);
     transition: .5s;
 }

 .theme-btn:hover {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
     color: white;
 }

 .theme-btn:hover::before {
     transform: translate(0px);
 }

 @media (max-width: 552px) {
     .tag-height {
         max-height: 100px;
         overflow: hidden;
         transition: .5s;
     }

     .tag-height.active {
         max-height: 500px;
         overflow: visible;
     }

     .view-theme-btn {
         color: white;
         border-radius: 30px;
         isolation: isolate;
         position: relative;
         overflow: hidden;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0);
         border: none;
         outline: none;
         padding: 6px 30px;
         background-color: hsl(0, 0%, 0%);
         /* background-color: hsl(217, 33%, 17%); */
         transition: .5s;

     }
 }