* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body,
html {
    height: 100vh;
    overflow-x: clip;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

:root {
    --primary-color: #434395;
    --secondary-color: #fcdd18;
    --white: #fff;
    --text-color: #000000;
}

h2 {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 3rem;
    text-align: center;
    margin-bottom: 3rem;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 794 416'%3E%3Cpath d='M0 0 C1.96539328 -0.00702433 3.93078635 -0.01411112 5.8961792 -0.02125549 C12.13261246 -0.04062614 18.36900843 -0.04568884 24.60546875 -0.046875 C25.66806286 -0.04731686 26.73065697 -0.04775871 27.8254509 -0.04821396 C58.66237236 -0.05493789 89.39931392 0.02850433 120.12542725 2.94989014 C122.92230421 3.21540306 125.72007827 3.46962744 128.51806641 3.72314453 C173.74014671 7.87996367 219.91320224 13.63199566 262.79296875 29.203125 C258.48752436 30.48337673 254.73499525 29.79124738 250.375 29.09375 C248.64604005 28.8320662 246.91703413 28.57068596 245.18798828 28.30957031 C244.27873596 28.16958618 243.36948364 28.02960205 242.43267822 27.88537598 C152.82870346 14.1858585 60.56771197 16.90421432 -137.20703125 51.203125 C-138.25729492 51.50734375 -139.30755859 51.8115625 -140.38964844 52.125 C-190.46655448 66.82426625 -237.53819885 96.78002366 -277.20703125 130.203125 C-277.72410645 130.6352832 -278.24118164 131.06744141 -278.77392578 131.51269531 C-299.08610079 148.51238646 -318.52498244 166.55944324 -332.95166016 188.94750977 C-343.93140935 205.9424191 -357.62543368 216.05030473 -377.47498608 220.73882198 C-380.54594274 221.26072201 -383.42527091 221.32596936 -386.54084778 221.32337952 C-387.81825836 221.32475418 -389.09566895 221.32612885 -390.41178894 221.32754517 C-391.81985497 221.32400648 -393.22792077 221.32037167 -394.63598633 221.31665039 C-396.12438963 221.3163682 -397.61279307 221.31652687 -399.10119629 221.3170929 C-403.13590772 221.31737963 -407.17058938 221.31150288 -411.20529389 221.30451894 C-415.42402638 221.29826482 -419.64275956 221.29767997 -423.86149597 221.29649353 C-431.84763666 221.29338629 -439.83376365 221.28518107 -447.81989831 221.27514404 C-456.91294699 221.26396407 -466.00599632 221.2584677 -475.09905016 221.25344861 C-493.80171829 221.24299796 -512.50437367 221.22541026 -531.20703125 221.203125 C-530.26202303 220.08182133 -529.31431215 218.96279506 -528.36547852 217.84472656 C-527.83801529 217.22132385 -527.31055206 216.59792114 -526.7671051 215.95562744 C-524.74576377 213.68496211 -522.53361538 211.82894376 -520.14453125 209.953125 C-515.9963875 206.6458212 -511.92330981 203.2779685 -507.89453125 199.828125 C-502.31091451 195.07238666 -496.58705915 190.52119611 -490.80078125 186.015625 C-487.74182056 183.63123861 -484.717184 181.20689741 -481.69897461 178.77124023 C-474.00268949 172.56449376 -466.15086468 166.59403934 -458.21435547 160.69873047 C-456.22851034 159.21912852 -454.24980192 157.73051757 -452.2734375 156.23828125 C-383.41988026 104.27123625 -308.43745698 55.17859479 -62.33203125 2.515625 C-61.52951935 2.45468658 -60.72700745 2.39374817 -59.900177 2.33096313 C-39.94491444 0.83644594 -20.01052095 0.04461938 0 0 Z' fill='%23ffffff' fill-opacity='0.05' transform='translate(531.20703125,194.796875)'/%3E%3C/svg%3E");
    background-size: 150px;
    background-repeat: repeat;
    z-index: 9999;
    transition: opacity 0.2s ease;
}

#preloader.hidden {
    opacity: 0;
    pointer-events: none;
}

#preloader .logo-container {
    width: 300px;
    max-width: 50%;
}

#preloader svg {
    width: 100%;
    height: auto;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(0.95);
    }
}

header {
    background-color: var(--primary-color);
    border-bottom: 5px solid var(--secondary-color);
    transition: all 0.4s ease;
    position: relative;
    z-index: 999;
}

header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.4s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

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

header.sticky .navbar {
    padding: 10px 0;
}

header.sticky #logo-header {
    width: 90%;
}

header .container {
    max-width: 1520px;
}

header .nav-link {
    color: var(--white) !important;
    padding: 0px 21px !important;
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

header .nav-link:hover {
    color: var(--secondary-color) !important;
    transform: translateY(-3px) scale(1.05);
}

header .nav-item {
    border-right: 3px solid var(--white);
}

header .nav-item:last-child {
    border-right: none
}

header .navbar {
    padding: 20px 0;
}

header #logo-header {
    width: 100%;
    height: auto;
}

header .navbar-brand {
    display: flex;
    align-items: center;
    width: 260px;
}

header .navbar-toggler {
    border: none;
    padding: 0.5rem;
    font-size: 1.5rem;
    color: var(--white);
    background: transparent;
    transition: all 0.3s ease;
}

header .navbar-toggler:focus {
    box-shadow: none;
}

header .navbar-toggler i {
    transition: all 0.3s ease;
}

header .navbar-toggler.active {
    color: var(--secondary-color);
}

header .navbar-toggler.active i {
    transform: rotate(90deg);
}

header .offcanvas {
    background-image: linear-gradient(rgba(67, 67, 149, 0.90), rgba(67, 67, 149, 0.90)), url(/assets/img/about-us.jpeg);
    background-size: cover;
    background-position: 5% center;
    background-repeat: no-repeat;
}

header .offcanvas ul {
    gap: 15px;
}

header .offcanvas .nav-item {
    border-right: none
}

header .btn-close-custom {
    background: transparent;
    border: none;
    font-size: 2rem;
    color: var(--white);
    padding: 0.5rem;
    transition: color 0.3s ease;
    cursor: pointer;
    opacity: 1;
}

header .btn-close-custom:hover {
    color: var(--secondary-color);
}

header .btn-close-custom.active {
    color: var(--secondary-color);
}

header .btn-close-custom:focus {
    outline: none;
    box-shadow: none;
}

header .dropdown-menu {
    background-color: var(--white);
}

header .dropdown-item {
    transition: all 0.2s ease;
}

header .dropdown-item:hover,
header .dropdown-item:focus,
header .dropdown-item:active,
header .dropdown-item.active {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 40px 0;
    margin-top: 4rem;
}

footer img {
    width: 400px;
}

footer .copyright {
    margin-top: 40px;
    padding-top: 10px;
    border-top: 2px solid var(--white);
}

footer .copyright span a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 600;
}

footer .footer-list h4 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--secondary-color);
}

footer .footer-list .nav-link {
    color: var(--white);
    font-weight: 500;
    transition: color 0.3s ease;
}

footer .footer-list .nav-link:hover {
    color: var(--secondary-color);
}

footer .footer-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 3px;
}

footer i {
    color: var(--secondary-color);
}

/* index */
.banner {
    background: url(/assets/img/banner.webp) no-repeat center center / cover;
    height: 70vh;
    border-bottom: 5px solid var(--secondary-color);
}

.banner h1 {
    font-size: 4.5rem;
    color: var(--white);
    font-weight: 700;
    line-height: 55px;
}

.banner h1 span {
    color: var(--secondary-color);
    text-shadow: 0px 0px 5px var(--primary-color);
}

.cta-button {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-weight: 500;
    padding: 3px 16px;
    border-radius: 9px;
    text-decoration: none;
    margin-top: 38px;
    font-size: 2rem;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    border: 2px solid var(--secondary-color);
}

.cta-button:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

/* about us */
.about-us {
    margin: 5rem 0;
    scroll-margin-top: 120px;
}

.about-us p {
    font-weight: 700;
    text-align: justify;
}

.about-us .img-box {
    text-align: center;
    border-radius: 40px;
    border-bottom-right-radius: 0;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.about-us .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* products */
.products h2 {
    margin-bottom: 1.6rem;
}

.products {
    scroll-margin-top: 120px;
}

.products .splide__slide a {
    text-decoration: none;
    margin: 0;
    display: block;
    width: 260px;
}

.splide__slide {
    padding: 25px;
}

.img-product {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    transition: transform 0.3s ease;
    overflow: hidden;
    border: 1px solid transparent;
}

.img-product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}

.product-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
    color: var(--text-color);
    padding: 15px;
    box-sizing: border-box;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.product-overlay h5 {
    margin: 0 0 2px 0;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--primary-color);
}

.product-overlay p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.img-product:hover {
    transform: scale(1.1);
    border-color: var(--primary-color);
}

.img-product:hover img {
    filter: blur(4px);
}

.img-product:hover .product-overlay {
    transform: translateY(0);
}

/* blog */

.blog {
    margin: 3rem 0;
    padding: 5rem;
    background-color: var(--primary-color);
    scroll-margin-top: 120px;
}

.blog h2 {
    color: var(--white);
    margin-bottom: 4rem;
}

.splide__slide {
    padding: 25px;
}

.blog-post {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    border: 7px solid var(--secondary-color);
    transition: transform 0.3s ease;
}

.blog-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}

.blog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(67, 67, 149, 0.75);
    color: var(--white);
    padding: 20px;
    box-sizing: border-box;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
}

.blog-overlay h5 {
    margin: 0 0 10px 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.blog-overlay p {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.4;
}

.blog-post:hover img {
    filter: blur(4px);
}

.blog-post:hover {
    transform: scale(1.05);
}

.blog-post:hover .blog-overlay {
    transform: translateX(0);
}

.splide__arrow {
    background: transparent;
    width: 3rem;
    height: 3rem;
    border: none;
    opacity: 1;
}

.splide__arrow--prev {
    left: -4rem;
}

.splide__arrow--next {
    right: -4rem;
}

.splide__arrow i {
    color: var(--secondary-color);
    font-size: 2rem;
}

.splide__arrow:hover {
    background: transparent;
}

.splide__arrow:hover i {
    color: var(--white);
}

.splide__arrow:disabled {
    opacity: 0.5;
}

.blog .splide__slide a {
    text-decoration: none;
    margin: 0;
}

.blog .cta-button {
    margin: 0 auto;
    margin-top: 40px;
    display: block;
    width: fit-content;
    font-size: 1.7rem;
    font-weight: 800;
    padding: 0px 20px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* contact us */

.contact-us {
    scroll-margin-top: 120px;
}

.contact-us .container>hr {
    margin: 4rem 0;
    height: 1px;
    background: #1b1b1b;
    border: none;
    opacity: 1;
}

.contact-us h2 {
    text-align: start;
    margin: 0;
    font-size: 2.5rem;
    line-height: 35px;
}

.contact-us .col-4 hr {
    margin: 5px 0;
}

.contact-us h2 span {
    color: #1b1b1b;
}

.contact-us .input-label-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.contact-us .input-label-group label {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1px;
}

.contact-us .input-label-group input,
.contact-us .input-label-group textarea {
    border-radius: 6px;
    height: 38px;
    padding: 7px;
    border: 1px solid #1b1b1ba8;
    outline: none;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: inherit;
}

.contact-us .input-label-group input:focus,
.contact-us .input-label-group textarea:focus,
.contact-us .input-label-group input:active,
.contact-us .input-label-group textarea:active {
    outline: none;
    border: 1px solid #1b1b1ba8;
    box-shadow: none;
}

.contact-us .input-label-group textarea {
    height: 150px;
    resize: vertical;
}

.contact-us .error-msg {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: none;
}

.contact-us .input-label-group.error input,
.contact-us .input-label-group.error textarea {
    border-color: #dc3545;
}

.contact-us .cta-button {
    color: var(--white);
    background-color: var(--primary-color);
    width: fit-content;
    margin-left: auto;
    font-size: 1.3rem;
    padding: 2px 5px;
    border: 2px solid transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    margin-right: calc(var(--bs-gutter-x) * .5);
}

.contact-us .cta-button:hover {
    background-color: var(--white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.contact-us .cta-button:disabled {
    background-color: #cccccc;
    color: #666666;
    border: 2px solid #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.contact-us .cta-button:disabled:hover {
    background-color: #cccccc;
    color: #666666;
    border: 2px solid #cccccc;
    box-shadow: none;
}

.contact-us .cta-button i {
    color: var(--secondary-color)
}

.contact-us .cta-button:disabled i {
    color: #666666;
}

/* back to top */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border: 2px solid var(--secondary-color);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
}

.back-to-top:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    transform: translateY(-5px) scale(1);
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    bottom: 95px;
}

/*  categorie single */

.categorie-single {
    margin: 5rem 0;
}

.categorie-single h1 {
    text-align: start;
    margin: 0;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 3rem;
}

.categorie-single h2 {
    margin-top: 5rem;
}

.categorie-single .cta-button {
    padding: 1px 16px;
    margin-top: 22px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* single product */

.single-product {
    margin: 3rem 0;
}

.single-product h1 {
    text-align: start;
    margin: 0;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 2.8rem;
}

.single-product h2 {
    margin: 3rem 0;
}

.single-product .cta-button {
    padding: 1px 16px;
    margin-top: 0;
    margin-bottom: 10px;
    width: fit-content;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: none;
}


.img-product-gallery {
    display: flex;
    align-items: start;
    flex-direction: column;
    width: 100%;
}

.single-product .main-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--primary-color);
    position: relative;
}

.single-product .main-img:hover {
    cursor: zoom-in;
}

.single-product .main-img::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    background-color: #fafafa;
    visibility: var(--visibility);
    background-image: var(--url);
    background-repeat: no-repeat;
    background-size: 180%;
    background-position: var(--zoom-x) var(--zoom-y);
}

.single-product .main-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.single-product .content-section.big-content {
    background-color: #f1f1f1;
    border-radius: 11px;
    padding: 11px;
    border: 2px solid var(--primary-color);
    text-align: justify;
}

.single-product .container {
    max-width: 1140px;
}

.single-product .product-thumbs {
    width: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-top: 10px;
}

.single-product::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.single-product .product-thumbs ul {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: scroll;
    padding-bottom: 6px;
}

.single-product .product-thumbs ul li {
    min-width: 80px;
    max-width: 80px;
    aspect-ratio: 1 / 1;
    border-radius: 15px;
    border: 2px solid var(--primary-color);
    overflow: hidden;
    transition: all 0.1s ease;
}

.single-product .product-thumbs ul li:hover {
    cursor: pointer;
    border-color: #cacacadc;
}

.single-product .product-thumbs ul li.active {
    border: 2px solid var(--secondary-color);
}

.single-product .product-thumbs ul li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.single-product .content-section {
    margin-top: 1.5rem;
    text-align: justify;
}

.single-product .icon-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.single-product .icon-title .img-icon {
    width: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    margin-bottom: 10px;
}

.content-section h1,
.content-section h2,
.content-section h3,
.content-section h4,
.content-section h5,
.content-section h6 {
    margin-bottom: 0px;
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* single blog */
.single-blog {
    margin: 3rem 0;
}

.single-blog h1 {
    text-align: start;
    margin: 0;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 2.8rem;
}

.single-blog .content h1,
.single-blog .content h2,
.single-blog .content h3,
.single-blog .content h4,
.single-blog .content h5,
.single-blog .content h6,
.single-blog .content strong,
.single-blog .content b {
    color: var(--primary-color) !important;
    font-weight: 700;
    text-align: start;
}

.single-blog .content h1 {
    font-size: 2rem;
    margin-bottom: 8px;
}

.single-blog .content h2 {
    font-size: 1.8rem;
    margin-bottom: 6px;
}

.single-blog .content h3 {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.single-blog .content h4 {
    font-size: 1.3rem;
    margin-bottom: 2px;
}

.single-blog .content h5 {
    font-size: 1.1rem;
    margin-bottom: 1px;
}

.single-blog .content h6 {
    font-size: 1rem;
    margin-bottom: 0px;
}

.single-blog .content ul li::marker {
    color: var(--secondary-color);
}

.single-blog .author {
    display: flex;
    align-items: center;
    gap: 6px;
}

.single-blog .author-photo {
    width: 50px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 3px solid var(--secondary-color);
    overflow: hidden;
}

.single-blog .container {
    max-width: 1070px;
}

.single-blog .post-img {
    width: 440px;
    aspect-ratio: 1 / 1;
    margin: 25px 0 40px 0;
    border-radius: 15px;
    border: 5px solid var(--secondary-color);
    overflow: hidden;
}

.single-blog .post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* blogs page */
.blogs-page {
    margin: 3rem 0;
}

/* responsive */

@media (max-width: 1399px) {
    .banner h1 {
        font-size: 4rem;
    }
}

@media (max-width: 1335px) {
    .products .splide__slide a {
        width: 190px;
    }

    .product-overlay p {
        font-size: 0.85rem;
    }

    .product-overlay h5 {
        font-size: 1.5rem;
    }
}

@media (max-width: 1199px) {
    header .nav-link {
        padding: 0px 13px !important;
        font-size: 1.4rem;
    }

    header .navbar-brand {
        width: 225px;
    }

    .banner {
        height: 58vh;
    }

    .banner h1 {
        font-size: 3.3rem;
    }

    .cta-button {
        font-size: 1.7rem;
    }

    .about-us {
        margin: 3rem 0;
    }

    .blog {
        margin: 1rem 0;
    }

    .single-product h1 {
        font-size: 2.4rem;
    }

    .single-product .cta-button {
        font-size: 1.3rem;
    }
}

@media (max-width: 991px) {
    header .nav-link {
        padding: 0px 13px !important;
        font-size: 1.4rem;
    }

    header .navbar-brand {
        width: 225px;
    }

    .cta-button {
        margin-bottom: 30px;
    }

    .products h2 {
        margin: 0;
        margin-top: 45px;
    }

    .blog h2 {
        margin-bottom: 2rem;
    }

    .other-posts .blog-post .blog-overlay {
        padding: 9px;
        transform: translateX(-150%);
    }

    .other-posts .blog-post .blog-overlay h5 {
        font-size: .9rem;
    }

    .categorie-single {
        margin: 2rem 0;
    }

    .single-product {
        margin: 1rem 0;
    }

    .categorie-single .cta-button {
        font-size: 1.3rem;
    }

    .categorie-single .container {
        max-width: 830px;
    }

    .categorie-single h2 {
        margin: 2rem 0 1rem 0;
    }

    .single-product .img-product-gallery,
    .single-product .product-thumbs {
        max-width: 380px;
    }

    .single-product .product-thumbs ul li {
        min-width: 65px;
        max-width: 65px;
    }

    .single-product h1 {
        font-size: 2rem;
    }

    .content-section h1,
    .content-section h2,
    .content-section h3,
    .content-section h4,
    .content-section h5,
    .content-section h6 {
        font-size: 1.5rem;
    }

    .single-product .icon-title {
        gap: 6px;
    }

    .single-product .content-section {
        margin-top: 1.2rem;
    }

    .single-product h2 {
        margin: 1rem 0;
        font-size: 2.3rem;
    }

    footer .img-fluid {
        max-width: 65%;
    }
}

@media (max-width: 810px) {

    .products .splide__slide a {
        width: 170px;
    }

    .product-overlay p {
        font-size: 0.78rem;
    }

    .product-overlay h5 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767px) {
    .banner {
        height: 40vh;
        background-position-x: 67%;
    }

    .banner h1 {
        font-size: 2rem;
        line-height: 1;
    }

    .banner .container {
        max-width: 637px;
    }

    .cta-button {
        margin-top: 10px;
        font-size: 1.2rem;
    }

    .contact-us .container>hr {
        margin: 2rem 0;
    }

    .single-blog {
        margin: 1rem 0;
    }

    .blogs-page {
        margin: 1rem 0;
    }

    .single-blog .post-img {
        margin: 25px 0;
    }

    .categorie-single {
        margin: 1rem 0;
    }

    .single-blog h1 {
        font-size: 2.4rem;
    }
}

@media (max-width: 570px) {
    .cta-button:not(.categorie-single .cta-button) {
        margin-bottom: 13px;
    }

    h2,
    .contact-us h2 {
        font-size: 2.4rem;
        margin-bottom: 1rem;
    }

    .about-us {
        margin: 2rem 0;
    }

    .products .splide__slide {
        margin: 0 20px;
    }

    .splide__slide {
        padding: 15px;
    }

    .categorie-single h1 {
        font-size: 2.7rem;
    }

    .categorie-single .cta-button {
        font-size: 1.2rem;
        margin: 1.2rem 0;
    }

    .single-blog h1 {
        font-size: 2rem;
    }

}

@media (max-width: 530px) {
    .banner {
        background-position-x: 60%;
    }

    .splide__slide {
        padding: 7px;
    }

    .blogs-page .blog-post .blog-overlay {
        padding: 9px;
        transform: translateX(-150%);
    }

    .blogs-page .blog-post .blog-overlay h5 {
        font-size: 1rem;
    }

    .categorie-single .product-desc {
        font-size: 0.9rem;
    }

    .categorie-single h2 {
        margin: 1rem 0;
    }

    .products h2 {
        margin-bottom: 20px;
    }

    .blog .cta-button {
        font-size: 1.3rem;
    }
}


@media (max-width: 465px) {

    h2,
    .contact-us h2 {
        font-size: 2.1rem;
        margin-bottom: 1rem;
    }

    .categorie-single h1 {
        font-size: 2.3rem;
    }

    .categorie-single .cta-button {
        font-size: 1.1rem;

    }

    .about-us p {
        font-size: .9rem;
    }

    header .navbar-brand {
        width: 180px;
    }

    .banner {
        background-position-x: 48%;
        height: 35vh;
    }

    .banner h1 {
        font-size: 1.9rem;
    }

    .cta-button {
        font-size: 1rem;
    }

    .blog {
        padding: 3rem;
    }

    .splide__arrow {
        width: 1rem;
        height: 1rem;
    }

    .splide__arrow--next {
        right: -1.5rem;
    }

    .splide__arrow--prev {
        left: -1.5rem;
    }

    .single-product h2 {
        font-size: 1.85rem;
    }

    footer .footer-list .nav-link,
    footer .copyright span {
        font-size: 0.81rem;
    }

    footer .col-lg-6.col-lg-5.col-12.d-flex.justify-content-start.align-items-center.mt-4.mt-lg-0,
    footer .col-lg-6.col-12,
    footer .copyright {
        padding: 0 20px;
    }

    footer .copyright {
        padding-top: 10px;
        margin-top: 20px
    }
}

@media (max-width: 420px) {

    .banner {
        background-position-x: 97%;
        height: 40vh;
    }

    .banner .col-lg-6 {
        justify-content: start !important;
        align-items: center !important;
        padding-top: 40px;
        background: linear-gradient(200deg, rgba(0, 0, 0, 0.8), transparent);
    }

    .banner h1 {
        font-size: 2.2rem;
        text-align: center;
    }

    .cta-button {
        font-size: 1.3rem;
    }



    .products .splide__slide {
        margin: 0;
    }
}

@media (max-width: 385px) {
    .product-overlay {
        padding: 10px;
    }

    .product-overlay h5 {
        font-size: 1.1rem;
    }

    .product-overlay p {
        font-size: 0.75rem;
    }

    .single-product .cta-button {
        font-size: 1.05rem;
    }
}

@media (max-width: 372px) {

    .blog {
        padding: 1.5rem;
    }

    .product-overlay h5 {
        font-size: 1rem;
    }

    .product-overlay p {
        font-size: 0.68rem;
    }

    footer .footer-list .nav-link,
    footer .copyright span {
        font-size: 0.71rem;
    }

    footer .footer-list h4 {
        font-size: 1.2rem;
        margin-bottom: 3px;
    }
}

@media (max-width: 365px) {
    .products .splide__slide {
        margin: 0 15px;
    }

    .blogs-page .col-6,
    .other-posts .col-6 {
        width: 100%;
        padding: 8px 15px !important;
    }

    .product-overlay h5 {
        font-size: .87rem;
    }

}

@media (max-width: 339px) {

    .categorie-single .col-lg-3 {
        padding: 6px !important;
    }

    .categorie-single .cta-button {
        font-size: 1rem;
    }

    footer .footer-list .nav-link,
    footer .copyright span {
        font-size: 0.63rem;
    }
}

@media (max-height: 552px) {

    .banner {
        background-position-x: 97%;
        height: 40vh;
    }

    .banner h1 {
        font-size: 2rem;
    }

    .cta-button {
        font-size: 1.1rem
    }

    .banner .col-lg-6 {
        padding-top: 10px;
    }
}

/* Pagination */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.pagination {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination .page-item {
    margin: 0;
}

.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 8px 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    background-color: var(--white);
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pagination .page-link:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.pagination .page-link:focus {
    outline: none;
    box-shadow: none;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-color: var(--primary-color);
    font-weight: 700;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.pagination .page-item.disabled .page-link {
    color: #999;
    background-color: #f5f5f5;
    border-color: #ddd;
    cursor: not-allowed;
    opacity: 0.6;
}

.pagination .page-item.disabled .page-link:hover {
    background-color: #f5f5f5;
    color: #999;
    transform: none;
    box-shadow: none;
}

@media (max-width: 576px) {
    .pagination-wrapper {
        margin-top: 2rem;
    }

    .pagination .page-link {
        min-width: 35px;
        height: 35px;
        padding: 6px 10px;
        font-size: 0.9rem;
    }

    .pagination {
        gap: 5px;
    }
}

/* WhatsApp Flutuante */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0px 4px 15px rgba(37, 211, 102, 0.4);
    text-decoration: none;
}

.whatsapp-float:hover {
    background-color: #128C7E;
    transform: scale(1.1);
    box-shadow: 0px 6px 20px rgba(37, 211, 102, 0.6);
}

.whatsapp-float i {
    color: white;
}

@media (max-width: 576px) {
    .whatsapp-float {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
        bottom: 20px;
        right: 20px;
    }

    .back-to-top {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
        bottom: 20px;
        right: 20px;
    }

    .back-to-top.show {
        bottom: 75px;
    }
}