/*==================================================
===| Global Css
===================================================*/
input,
button,
select,
textarea {
    outline: none;
}

html {
    scroll-behavior: smooth;
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

figure {
    position: relative;
    margin: 0 !important;
}

a {
    text-decoration: none !important;
}

section {
    margin: 40px 0;
}

body {
    overflow-x: hidden;
    font-family: "Poppins", sans-serif !important;
    font-weight: normal !important;
    text-transform: none !important;
    font-size: var(--caption__font) !important;
    color: var(--textColor) !important;
    line-height: 22px !important;
    -webkit-text-size-adjust: 100% !important;
    -webkit-tap-highlight-color: transparent !important;
    overflow-x: clip;
}

main img {
    width: 100% !important;
}

/*==================================================
===|  [Roote Settings] CSS
===================================================*/

:root {
    /* Theme Color */
    --blackColor: #0f172a;
    --mainAccent: #263375;
    --lighterAccent: #e2ebfc;
    --secondAccent: #d00d00;
    --secondLighter: #ffe5e5;
    --thirdAccent: #049e72;
    --thirdLighter: #e4f5f1;
    --fourthAccent: #f08100;
    --fourthLighter: #fef2e5;
    --buttonColor: #efbf04;
    --fithAccent: #8a2be2;
    --fithLighter: #eeddff;
    --textColor: #222222;
    --borderColor: #dfdfdf;
    --accentColor: #0168da;
    --whiteColor: #fff;
    /* Border Radius */
    --br-5: 5px;
    --br-10: 10px;
    --br-15: 15px;
    --br-20: 20px;
    --br-25: 25px;
    /* Genel zamanlama değişkenleri */
    --duration02: 0.2s;
    --duration04: 0.4s;
    --duration06: 0.6s;
    --duration08: 0.8s;
    --duration10: 1s;
    /* Genel easing fonksiyonu */
    --easing: ease-in;
    /* Geçişler */
    --transition02: var(--duration02) var(--easing);
    --transition04: var(--duration04) var(--easing);
    --transition06: var(--duration06) var(--easing);
    --transition08: var(--duration08) var(--easing);
    --transition10: var(--duration10) var(--easing);
    /* Font Size */
    --largeheading__font: calc(27px + 0.85vw);
    --heading__font: calc(20px + 0.65vw);
    --subheading__font: calc(17px + 0.35vw);
    --body__font: calc(15px + 0.25vw);
    --caption__font: calc(14px + 0.12vw);
    --small__font: calc(12.5px + 0.1vw);
    /* Font Weight */
    --fw-1: 100;
    --fw-2: 200;
    --fw-3: 300;
    --fw-4: 400;
    --fw-5: 500;
    --fw-6: 600;
    --fw-7: 700;
    --fw-8: 800;
    --fw-9: 900;
}

/*==================================================
===| [Theme Settings] CSS
===================================================*/
::-webkit-scrollbar {
    height: 3px;
    width: 3px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb {
    background: var(--blackColor);
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-corner {
    background-color: var(--blackColor);
}


.quantity-input::-webkit-inner-spin-button,
.quantity-input::-webkit-outer-spin-button {
    opacity: 1;
    -webkit-appearance: inner-spin-button !important;
    margin: 0;
}

.quantity-input[type=number] {
    -moz-appearance: number-input;
}

/*==================================================
===| [Image Spinner] CSS
===================================================*/
.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border: 4px solid rgba(255, 255, 255, 0.486);
    border-top: 4px solid var(--redColor);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    display: none;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.fade-in {
    opacity: 0;
    transition: var(--opacity);
}

    .fade-in.loaded {
        opacity: 1;
    }

.sticky-top {
    top: 110px !important;
    z-index: 840 !important;
}

/*==================================================
===| [Theme Button] CSS
===================================================*/
.page__btn {
    background-color: var(--whiteColor);
    color: var(--blackColor);
    padding: 10px 30px;
    font-size: var(--small__font);
}

.page__header {
    margin-bottom: 5px;
    padding-left: 10px;
}

    .page__header .dates span {
        color: var(--accentColor);
        font-weight: var(--fw-6);
    }

    .page__header strong {
        padding-left: 0;
        font-size: var(--body__font);
    }

    .page__header p {
        font-size: var(--small__font);
        width: 100%;
        max-width: 500px;
        margin-top: 15px;
    }

.page__btn.primary__btn {
    background-color: var(--mainAccent);
    color: var(--whiteColor);
}

.page__header strong:before {
    width: 3px;
    height: 100%;
    background-color: var(--secondAccent);
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    left: -10px;
}

.text__link a {
    color: var(--secondAccent) !important;
    text-decoration: underline !important;
    font-style: italic !important;
}

    .text__link a svg {
        fill: var(--secondAccent) !important;
    }

.bg__grey {
    padding: 100px 0;
    background-color: rgb(247,247,247);
}

.breadcrumb .breadcrumb-item {
    font-size: 11px;
}

/*==================================================
===| [Sticky Menu] CSS
===================================================*/
.sticky__menu {
    background: var(--whiteColor);
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200000 !important;
    animation: fadeInDown .2s ease-in-out;
    box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

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

/*==================================================
===| [Header] CSS
===================================================*/

.header .top__header {
    background-color: #f7f7f7;
    padding: 8px 0;
    z-index: 9999;
}

    .header .top__header .header__item p {
        margin-bottom: 0;
        font-size: var(--small__font);
    }

    .header .top__header .header__item a {
        color: var(--textColor)
    }

.header .header__main {
    padding: 25px 0;
    transition: var(--transition04);
    border-bottom: 1px solid var(--borderColor);
}

    .header .header__main .header__search {
        max-width: 300px;
    }

        .header .header__main .header__search .form-control {
            border-color: var(--borderColor) !important;
        }

            .header .header__main .header__search .form-control::placeholder {
                font-size: 13px;
            }

    .header .header__main .header__logo img {
        width: 200px;
        height: auto;
        transition: width var(--transition02);
    }

#mobil-login{
    padding-right:10px !important;
}

@media (max-width: 767.98px) {
    .header__logo.start-50 {
        left: 0 !important;
        transform: translateY(0%) !important;
        padding-left:15px !important;
    }

    .header .header__main .header__logo img {
        width: 140px;
        height: auto;
    }

    h1 svg {
        width: 140px !important;
    }
}

.header.sticky__menu .header__main .header__logo img {
    width: 130px;
    height: auto;
}

.header.sticky__menu .header__main {
    padding: 15px 0;
}

.header .header__main .header__menu .nav-item .nav-link {
    font-size: 12.5px;
    color: var(--textColor);
    border-bottom: 1px solid transparent !important;
}

    .header .header__main .header__menu .nav-item .nav-link:hover {
        border-bottom: 1.3px solid var(--borderColor) !important;
    }

.header .header__nav {
    padding: 15px 0;
    border-bottom: 1px solid var(--borderColor);
}

    .header .header__nav .nav-item .nav-link {
        font-size: var(--small__font);
        color: var(--textColor);
    }

/* Mega Menu Styles */
.header__nav {
    position: relative;
    z-index: 1000;
}

    /* Mega Menu */
    .header__nav .mega-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        z-index: 99999 !important;
        border-top: 3px solid var(--borderColor);
    }

    .header__nav .mega-menu-section .col-lg-1-5 {
        flex: 0 0 auto;
        width: 12.5%;
    }

    .header__nav .mega-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.header__nav {
    z-index: 100000 !important;
    position: relative !important;
    overflow: visible !important;
}

    /* Menü içi padding */
    .header__nav .mega-menu-content {
        padding: 40px 0;
    }

.mega-menu-section .mega-menu-column figure {
    position: relative;
    overflow: hidden;
}

    .mega-menu-section .mega-menu-column figure::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 40%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.555), rgba(0, 0, 0, 0.00));
        transition: height var(--transition02);
        z-index: 2;
    }

    .mega-menu-section .mega-menu-column figure:hover::before {
        height: 100%;
    }

.body-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.342);
    opacity: 0;
    visibility: hidden;
    z-index: 9999 !important;
    transition: all .3s ease;
    pointer-events: auto;
}

    .body-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.header__nav .nav-link {
    position: relative;
    transition: color 0.3s ease;
}

    .header__nav .nav-link:hover,
    .header__nav .nav-link.active {
        color: var(--textColor) !important;
    }

    .header__nav .nav-link.active {
        color: var(--textColor) !important;
        font-weight: 600 !important;
    }

    .header__nav .nav-link::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--textColor) !important;
        transition: width 0.3s ease;
    }

    .header__nav .nav-link:hover::after {
        width: 100% !important;
    }

    .header__nav .nav-link.active::after {
        width: 100% !important;
    }

.mega-menu-section .img__content {
    position: relative;
    z-index: 2;
}

    .mega-menu-section .img__content span {
        color: var(--whiteColor);
        position: relative;
    }

        .mega-menu-section .img__content span:before {
            width: 17px;
            height: 3px;
            background-color: var(--secondAccent);
            position: absolute;
            left: 100% !important;
            top: 50%;
            transform: translate(50%, -20%);
            content: "";
            z-index: 3;
            opacity: 0;
            transition: width 0.5s ease-in-out;
        }

.mega-menu-section .mega-menu-column:hover .img__content span:before {
    width: 17px;
    opacity: 1;
}

@media (max-width: 991.98px) {
    .header__nav .mega-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border-top: none;
        border-top: 1px solid var(--borderColor);
    }

    .header__nav .mega-menu-content {
        padding: 20px 0;
    }

    .header__nav .mega-menu-column {
        margin-bottom: 30px;
    }
}

/*  Mobile Menü */
.mobile-menu {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 12px;
    position: relative;
    z-index: 1000;
}

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

.mobile-menu__toggle {
    background: none;
    border: none;
    padding: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
    position: relative;
}

    .mobile-menu__toggle::after {
        content: '';
        position: absolute;
        right: -12px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 100%;
        background-color: #dadce0;
    }

    .mobile-menu__toggle img {
        width: 100%;
        height: 100%;
    }

.mobile-menu__search-container {
    flex: 1;
    position: relative;
}

.mobile-menu__search-input {
    width: 100%;
    outline: none;
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    background-color: transparent;
}

    .mobile-menu__search-input::placeholder {
        color: #999;
    }

.mobile-menu__search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

.mobile-menu__search-input {
    padding-left: 36px;
}

.mobile-menu__mic-btn {
    background: none;
    border: none;
    padding: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

    .mobile-menu__mic-btn img {
        width: 100%;
        height: 100%;
    }

/* Mobile Menu Dropdown */
.mobile-menu__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    display: none;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    z-index: 999;
}

    .mobile-menu__dropdown.mobile-menu__dropdown--active {
        display: block;
    }

.mobile-menu__nav {
    padding: 0;
}

.mobile-menu__nav-item {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-menu__nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

    .mobile-menu__nav-link:hover {
        background-color: #f8f9fa;
        color: #333;
    }

.mobile-menu__nav-link--active {
    color: #007bff;
}

.mobile-menu__nav-arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
}

.mobile-menu__nav-link--active .mobile-menu__nav-arrow {
    border-color: #007bff;
    transform: rotate(45deg);
}

.mobile-menu__nav-item--no-arrow .mobile-menu__nav-arrow {
    display: none;
}

/* Subcategories */
.mobile-menu__subcategories {
    display: none;
    background-color: #fff;
}

.mobile-menu__subcategories--active {
    display: block;
}

.mobile-menu__subcategory {
    border-bottom: 1px solid #f0f0f0;
}

    .mobile-menu__subcategory:last-child {
        border-bottom: 1px solid #f0f0f0;
    }

.mobile-menu__subcategory-link {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
}

    .mobile-menu__subcategory-link:hover {
        background-color: #f8f9fa;
        color: #333;
    }

.mobile-menu__subcategory-icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    margin-right: 12px;
    flex-shrink: 0;
    object-fit: cover;
}

/* Responsive */
@media (min-width: 768px) {
    .mobile-menu {
        display: none;
    }
}

.header .header__icons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header .header__icon__box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header .header__icon {
    width: 25px;
    height: 25px;
    object-fit: contain;
    display: block;
}

.header .header__badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #0A75FF;
    color: #fff;
    font-size: 9px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    pointer-events: none;
}


/*==================================================
===| [Home Slider] CSS
===================================================*/

.home__slider .slider__box .slider__img {
    position: relative;
}

    .home__slider .slider__box .slider__img:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*background: linear-gradient(90deg,rgba(0, 0, 0, 0.5) 0%, rgba(145, 145, 145, 0.0) 70%, rgba(255, 255, 255, 0) 100%);*/
        z-index: 1;
        content: "";
    }

.home__slider .slider__box .slider__content {
    max-width: 550px;
    width: 100%;
    position: relative;
    z-index: 2;
}

    .home__slider .slider__box .slider__content .title strong {
        font-size: var(--body__font);
        color: var(--whiteColor)
    }

    .home__slider .slider__box .slider__content .desc p {
        font-size: var(--small__font);
        color: var(--whiteColor)
    }

.home__slider .swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 30px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 5px));
    border-radius: 2px;
    background-color: var(--whiteColor);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .8);
}

.home__slider .swiper-pagination-bullet-active {
    background-color: var(--secondAccent);
}

.home__slider .page__btn {
    color: var(--mainAccent);
}



/*==================================================
===| [Home Info] CSS
===================================================*/

.home__info .info__item .info__detail strong,
.home__info .info__item .info__detail p {
    color: var(--mainAccent);
    font-size: var(--small__font);
}

/*==================================================
===| [Home Info] CSS
===================================================*/

.tooltips__items {
    width: 100%;
    height: auto;
}

.tooltips__items {
    width: 100%;
    height: auto;
}

.tooltip__point {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10;
}

    .tooltip__point .dot {
        width: 10px;
        height: 10px;
        background: #fff;
        border-radius: 50%;
        position: relative;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

        .tooltip__point .dot:hover {
            transform: scale(1.15);
        }

        .tooltip__point .dot::before {
            content: "";
            position: absolute;
            inset: -10px;
            border-radius: 50%;
            background: #00000071;
            z-index: -1;
        }

        .tooltip__point .dot::after {
            content: "";
            position: absolute;
            inset: -12px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.35);
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
            z-index: -2;
        }

.tooltip__content {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #000;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    width: max-content;
    max-width: 300px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 999;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
}

    .tooltip__content a {
        color: var(--blackColor);
        font-size: var(--small__font);
        text-decoration: underline !important;
        font-style: italic;
    }

.tooltip__point.active .tooltip__content {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    .tooltip__content {
        max-width: 60vw;
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        bottom: calc(100% + 10px);
    }
}

/*==================================================
===| [Home Confiance] CSS
===================================================*/

.home__confiance {
    padding: 25px;
    background-color: #f3f3f3;
}

    .home__confiance .swiper-button-next,
    .home__confiance .swiper-button-prev {
        color: var(--blackColor);
    }

        .home__confiance .swiper-button-next:after,
        .home__confiance .swiper-button-prev:after {
            font-size: 30px
        }

/*==================================================
===| [Home Block] CSS
===================================================*/

.header__texts strong {
    font-size: var(--body__font);
}

    .header__texts strong span {
        font-size: var(--body__font);
        color: var(--secondAccent)
    }

.home__block.text__right {
    justify-content: end;
    align-items: end;
    display: flex;
    text-align: right;
}


.home__block .left__content p,
.home__block .left__content ul li {
    font-size: var(--small__font);
    color: var(--blackColor)
}

.home__block .page__btn {
    background-color: var(--mainAccent);
    color: var(--whiteColor)
}

    .home__block .page__btn:hover {
        background-color: #131e55;
        color: var(--whiteColor)
    }

.home__block .card {
    background-color: var(--lighterAccent);
    border: none;
    color: var(--mainAccent)
}

.page__btn.btn__border {
    background-color: transparent;
    border: 1px solid var(--mainAccent);
    color: var(--mainAccent)
}

.home__block .block__card .card strong {
    font-size: var(--caption__font);
}

.home__block .block__card .card span {
    font-size: var(--small__font);
}


@media (min-width: 768px) {
    .mySwiperBlocks .swiper-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .mySwiperBlocks .swiper-slide {
        width: 100% !important;
    }

    .mySwiperBlocks .swiper-button-next,
    .mySwiperBlocks .swiper-button-prev {
        display: none;
    }
}

/* Mobilde buton alt tarafta */
@media (max-width: 767.98px) {
    .button-wrapper {
        width: 100%;
    }

    .page__btn {
        width: 100%;
        text-align: center;
    }
}

/* Masaüstünde normal sağda kalır */
@media (min-width: 768px) {
    .button-wrapper {
        margin-left: auto;
    }
}

.swiper-button-prevs,
.swiper-button-nexts {
    display: none;
}

/* Mobilde: butonları başlığa yakınlaştır */
@media (max-width: 767.98px) {
    .header__text {
        flex-direction: row;
    }

        .header__text .sliders {
            margin-left: auto;
            display: flex;
            gap: 8px;
        }

    .swiper-button-prevs,
    .swiper-button-nexts {
        width: 30px;
        height: 30px;
        border: 1px solid var(--blackColor);
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        display: flex;
    }
}

/*==================================================
===| [Home Category] CSS
===================================================*/

.home__category {
    padding: 25px;
    background-color: #f3f3f3;
}

    .home__category .category__img figure {
        position: relative;
        overflow: hidden;
    }

        .home__category .category__img figure:before {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            content: "";
            z-index: 1;
            opacity: 0;
            transition: opacity var(--transition04);
            background-color: rgba(0, 0, 0, 0.5);
        }

        .home__category .category__img figure:hover:before {
            opacity: 1;
        }

    .home__category .img__content {
        position: relative;
        z-index: 2;
    }

        .home__category .img__content span {
            color: var(--whiteColor);
            position: relative;
        }

            .home__category .img__content span:before {
                width: 0px;
                height: 3px;
                background-color: var(--secondAccent);
                position: absolute;
                left: 100% !important;
                top: 50%;
                transform: translate(50%, -20%);
                content: "";
                z-index: 3;
                opacity: 0;
                transition: width 0.5s ease-in-out;
            }

    .home__category .category__img:hover .img__content span:before {
        width: 17px;
        opacity: 1;
    }

/*==================================================
===| [Home Product] CSS
===================================================*/
.home__product {
    padding: 25px 25px 25px 0;
    background-color: #f3f3f3;
}

    .home__product .product__img img {
        width: 100%;
        height: 100%;
    }

    .home__product .product__content {
        background-color: var(--whiteColor);
        padding: 10px;
    }

        .home__product .product__content a {
            font-size: var(--small__font);
        }

        .home__product .product__content .product__title strong,
        .home__product .product__content .product__desc p {
            font-size: var(--small__font);
            color: var(--blackColor);
        }

/*==================================================
===| [Home Exclusifs] CSS
===================================================*/
.home__exclusifs {
    padding: 25px;
    background-color: #f3f3f3;
}

    .home__exclusifs .sensor__circle {
        width: 150px;
        height: 150px;
        border: 2px dotted var(--blackColor);
        background-color: var(--whiteColor);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .home__exclusifs .sensor__icon {
        width: 50px;
        height: 50px;
        background-color: var(--blackColor);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
    }

        .home__exclusifs .sensor__icon img {
            width: 24px;
            height: 24px;
            filter: invert(1);
            object-fit: contain;
        }

    .home__exclusifs .sensor__logo {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .home__exclusifs .sensor__logo img {
            max-width: 120px;
            height: auto;
        }

/*==================================================
===| [Home Articles] CSS
===================================================*/
.home__articles {
    padding: 25px;
    background-color: #f3f3f3;
}

    .home__articles .category span {
        background-color: var(--fithLighter);
        color: var(--fithAccent);
        display: inline-flex;
        padding: 3px;
        font-size: var(--small__font);
        border-radius: var(--br-5);
    }

    .home__articles .card .card-body {
        padding: 25px;
    }

    .home__articles .detail__info span {
        color: var(--borderColor);
        font-size: var(--small__font);
    }

    .home__articles .article__desc p {
        font-size: var(--small__font);
    }

    .home__articles .card {
        border: 1px solid var(--borderColor) !important;
    }

        .home__articles .card .card__img {
            position: relative;
            overflow: hidden;
        }

            .home__articles .card .card__img img {
                transition: var(--transition04);
            }

        .home__articles .card:hover .card__img img {
            transform: scale(1.1);
        }

.readmore {
    color: #2c3e91;
    font-style: italic;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    transition: transform .25s ease;
}

.home__articles .card:hover .readmore {
    transform: translateX(-4px);
}

.readmore .arrow {
    width: 14px;
    height: 14px;
    overflow: visible;
}

    .readmore .arrow .line {
        transform-origin: right center;
        transform: scaleX(1);
        transition: transform .25s ease;
    }

.home__articles .card:hover .arrow .line {
    transform: scaleX(1.5);
}

.home__articles .arrow__wrap {
    display: inline-block;
    position: relative;
    width: 24px;
    height: 16px;
    overflow: visible;
}

.home__articles .arrow__icon {
    display: block;
}

.home__articles .arrow__line {
    stroke-dasharray: 18;
    stroke-dashoffset: 18;
    transition: stroke-dashoffset 0.3s ease;
}

.home__articles .card:hover .link__url a .arrow__line {
    stroke-dashoffset: 0;
}

/*==================================================
===| [Contact Sub] CSS
===================================================*/

.contact__sub {
    background-size: cover;
    background-position: center;
    padding: 60px 0;
    color: var(--whiteColor);
}

    .contact__sub .contact__text {
        font-size: var(--small__font);
        opacity: 0.9;
    }

.contact__social {
    display: flex;
    gap: 15px;
    margin-bottom: 2rem;
}

.contact__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--whiteColor);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .contact__social-link:hover {
        background-color: rgba(255, 255, 255, 0.2);
        color: var(--whiteColor);
        transform: translateY(-2px);
    }

.contact__sub .contact__newsletter-text {
    font-size: var(--small__font);
    opacity: 0.9;
}

.contact__sub .contact__form {
    display: flex;
    gap: 10px;
}

.contact__input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--whiteColor);
    font-size: var(--small__font);
}

    .contact__input::placeholder {
        color: rgba(255, 255, 255, 0.7);
    }

    .contact__input:focus {
        outline: none;
        border-color: rgba(255, 255, 255, 0.5);
        background-color: rgba(255, 255, 255, 0.15);
    }

.contact__submit {
    padding: 12px 35px;
    background-color: var(--mainAccent);
    color: var(--whiteColor);
    border: none;
    font-size: var(--small__font);
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

    .contact__submit:hover {
        background-color: #131e55;
    }

.contact__sub .contact__service-title {
    font-size: var(--caption__font);
    font-weight: var(--fw-4);
}

.contact__sub .contact__phone {
    font-size: var(--caption__font);
    font-weight: var(--fw-6);
    margin-bottom: 8px;
    display: block;
    color: var(--whiteColor);
    text-decoration: none;
}

    .contact__sub .contact__phone:hover {
        color: #dc3545;
    }

@media (max-width: 768px) {
    .contact__sub .contact__form {
        flex-direction: column;
    }

    .contact__sub .contact__social {
        justify-content: center;
    }

    .contact__sub .contact__title {
        font-size: 1.5rem;
        text-align: center;
    }

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

/*==================================================
===| [Footer] CSS
===================================================*/
footer {
    background-color: #f8f9fa;
    padding: 60px 0 30px 0;
    border-top: 1px solid #e9ecef;
}

    footer > .container {
        max-width: 1200px;
    }

    footer .footer__logo {
        margin-bottom: 30px;
    }

    footer .footer__logo-img {
        width: 120px;
        height: auto;
        margin-bottom: 10px;
    }

    footer .footer__column-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--textColor);
        margin-bottom: 20px;
        text-transform: uppercase;
    }

    footer .footer__link-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    footer .footer__link-item {
        margin-bottom: 12px;
    }

    footer .footer__link {
        color: var(--textColor);
        text-decoration: none;
        font-size: 14px;
        line-height: 1.4;
        transition: color 0.3s ease;
    }

        footer .footer__link:hover {
            color: #212529;
        }

    footer .footer__payment-icons {
        display: flex;
        gap: 10px;
        margin-top: 15px;
        flex-wrap: wrap;
    }

    footer .footer__payment-icon img {
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    footer .footer__language-select {
        margin-top: 15px;
        width: 100%;
        max-width: 150px;
    }

    footer .footer__select {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        background-color: #fff;
        color: var(--textColor);
        font-size: 14px;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 8px center;
        background-repeat: no-repeat;
        background-size: 16px;
        padding-right: 35px;
    }

        footer .footer__select:focus {
            outline: none;
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }

        footer .footer__select option {
            padding: 8px;
        }

    footer .footer__copyright {
        text-align: center;
        padding: 20px 0;
        border-top: 1px solid #e9ecef;
        font-size: 13px;
        color: var(--textColor);
        background-color: var(--whiteColor);
    }

@media (max-width: 768px) {
    footer {
        padding: 40px 0 20px 0;
    }

        footer .footer__column-title {
            font-size: 14px;
            margin-bottom: 15px;
        }

        footer .footer__link {
            font-size: 13px;
        }

        footer .footer__language-select {
            display: flex;
            justify-content: center;
        }

        footer .footer__logo-img {
            width: 100px;
        }
}

/*==================================================
===| [Page Banner] CSS
===================================================*/

.page__banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 400px;
    color: var(--whiteColor);
}

.page__banner__breadcrumb {
    font-size: var(--small__font);
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

    .page__banner__breadcrumb a {
        color: rgb(255, 255, 255);
        text-decoration: none;
    }

        .page__banner__breadcrumb a:hover {
            color: var(--whiteColor);
        }

.page__banner__title {
    font-size: var(--subheading__font);
    font-weight: 600;
}

.page__banner__content {
    font-size: var(--small__font);
    line-height: 1.6;
    font-weight: 300;
    /*max-width: 800px;*/
}

.page__banner .head__title span {
    color: var(--buttonColor);
}

@media (max-width: 768px) {
    .page__banner__title {
        font-size: 2rem;
    }

    .page__banner {
        min-height: 300px;
    }
}

/*==================================================
===| [Page Banner] CSS
===================================================*/
.articles__detail .category span {
    background-color: var(--fithLighter);
    color: var(--fithAccent);
    display: inline-flex;
    padding: 3px;
    font-size: var(--small__font);
    border-radius: var(--br-5);
}

.articles__detail .header__texts strong {
    font-size: var(--caption__font);
}

.sticky-sidebar {
    position: sticky;
    top: 100px;
}

.articles__detail .block__card .card {
    background-color: var(--lighterAccent);
    border: none;
    color: var(--mainAccent);
}

.articles__detail .block__card strong,
.articles__detail .block__card span {
    font-size: var(--small__font);
}

@media (max-width: 575.98px) {
    .articles__detail .detail__header.btn__none .page__btn {
        display: none !important;
    }

    .articles__detail .blog__footer {
        display: none !important;
    }

    .login-mobile {
        padding-right: 20px;
        position: relative !important;
        right: 20px;
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .articles__detail .detail__header.btn__none .page__btn {
        display: none !important;
    }
}

/*==================================================
===| [See Connecter] CSS
===================================================*/

.see__connecter .connecter__img img {
    object-fit: cover;
}

.see__connecter .connecter__info p {
    font-size: var(--small__font);
}

.see__connecter .page__btn.primary__btn {
    background-color: var(--accentColor);
    color: var(--whiteColor);
}


@media (max-width: 767.98px) {
    .see__connecter .connecter__img {
        width: 500px;
    }
}

/*==================================================
===| [A-Propors] CSS
===================================================*/
.home__block.a__propos .icons {
    background-color: var(--whiteColor);
    width: 80px;
    height: 80px;
    border-radius: 150px;
    justify-content: center;
    align-items: center;
    display: flex;
}

    .home__block.a__propos .icons svg {
        width: 50px;
        height: 50px;
        color: var(--borderColor)
    }

/*==================================================
===| [Pourquoi List ] CSS 
==================================================*/
.pourquoi__list .card {
    background-color: var(--lighterAccent);
    height: 100%;
}

    .pourquoi__list .card .card__title strong {
        font-size: var(--caption__font);
    }

    .pourquoi__list .card .card__content p {
        font-size: var(--small__font);
        margin-bottom: 0;
    }

/*==================================================
===| [Les Services ] CSS 
==================================================*/
.les__services .head__content .numbers {
    width: 25px;
    height: 25px;
    background-color: #707070;
    border-radius: var(--br-25);
    justify-content: center;
    align-items: center;
    display: flex;
}

    .les__services .head__content .numbers span {
        color: var(--whiteColor);
        font-size: 0.8rem;
        font-weight: bold;
    }

.les__services .card__content p {
    font-size: var(--small__font);
    margin-bottom: 0;
    color: #5a6c7d;
    line-height: 1.5;
}

.title strong {
    color: var(--textColor);
    font-size: 1.1rem;
}

.stats-section:before {
    background: rgb(242,242, 242);
    width: 37%;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    content: "";
    z-index: 0;
}

.stat-item {
    margin-bottom: 40px;
    padding-left: 80px;
    text-align: start;
    position: relative;
    z-index: 1;
}

.stat-number {
    font-size: 1.3rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 8px;
}

.stat-description {
    font-size: 1rem;
    color: #5a6c7d;
    margin: 0;
}

.eco-section {
    background: linear-gradient(180deg, #e6f0ff 0%, #e8f5e8 100%);
    padding: 40px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

    .eco-section .header__text {
        font-size: 1.3rem;
    }

@media (max-width: 768px) {
    .stat-number {
        font-size: 2rem;
    }

    .stats-section:before {
        background: rgb(242,242,242);
        width: 100%;
        height: 43%;
        position: absolute;
        right: 0;
        bottom: 0;
        content: "";
        z-index: 0;
    }
}

/*==================================================
===| [Breakpoints ] CSS 
==================================================*/
.home__block.page__apros .col-lg-7 {
    background-color: rgb(242, 242, 242);
}

.home__block.page__apros .header__texts strong span {
    color: #049e72;
}

/*==================================================
===| [Contact ] CSS 
==================================================*/
.file-input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    border: 1px solid var(--borderColor);
}

.file-input {
    width: 100%;
    height: 40px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

.file-label {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    color: var(--blackColor);
    border-left: 1px solid var(--borderColor);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
    float: right;
}

    .file-label:hover {
        background: #f5f5f5;
    }

.file-input::-webkit-file-upload-button {
    visibility: hidden;
}

.file-input::file-selector-button {
    visibility: hidden;
}

.btn__group .btn__borders {
    border: 1px solid var(--mainAccent);
}

.page__contact p,
.page__contact label {
    font-size: var(--small__font);
}

.mySwiperCont {
    padding: 20px 0;
}

.swiper-button-nextss,
.swiper-button-prevss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid var(--blackColor);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 8px;
}

    .swiper-button-nextss svg,
    .swiper-button-prevss svg {
        width: 20px;
        height: 20px;
        color: #333;
        stroke: currentColor;
        transition: transform 0.3s ease, color 0.3s ease;
    }

.company__content span,
.company__content a,
.page__contact .left__content span,
.page__contact .left__content a {
    font-size: var(--small__font);
    color: var(--blackColor);
}

.company__content .content {
    width: 100%;
    max-width: 90%;
}

/*==================================================
===| [Login Offcanvas ] CSS 
==================================================*/

.offcanvas {
}

.offcanvas-end {
    z-index: 9999999 !important;
}

    .offcanvas-end .offcanvas-body {
        padding: 60px;
    }

    .offcanvas-end p,
    .offcanvas-end a,
    .offcanvas-end label {
        font-size: var(--small__font) !important;
        color: var(--blackColor);
    }

    .offcanvas-end .contact__social-link {
        background-color: rgba(87, 87, 87, 0.747);
    }

    .offcanvas-end .contact__social-link {
        color: var(--whiteColor);
    }

    .offcanvas-end .contact__input {
        flex: 1;
        padding: 11px 15px;
        border: 1px solid rgba(197, 197, 197, 0.582);
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--blackColor);
        font-size: var(--small__font);
    }

        .offcanvas-end .contact__input::placeholder {
            color: rgba(129, 129, 129, 0.7);
        }

/*==================================================
===| [Product Wrapper ] CSS 
==================================================*/



.product__wrapper .accordion-button:not(.collapsed) {
    background-color: var(--lighterAccent);
    border: none;
}

.product__wrapper .accordion-item {
    border: none;
    border-bottom: 1px solid rgb(207,207,207);
}

.product__wrapper .img__text {
    background-color: var(--lighterAccent);
}

.product__wrapper .page__btn {
    padding: 8px !important;
    font-size: var(--small__font);
    font-weight: 500;
}

.product__wrapper .img__text span {
    font-size: var(--small__font);
}

.product__wrapper .home__product .product__content {
    min-height: 155px;
    /*display: flex;*/
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    position: relative;
}

.product__wrapper .home__product .border-dark .product__img {
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease;
}

    .product__wrapper .home__product .border-dark .product__img figure {
        transition: transform 0.4s ease;
    }

.accordion-header .accordion-button {
    font-weight: 500 !important;
    padding-top: 5px !important;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 5px !important;
    font-size: 0.6em;
}


.accordion-button::after {
    background-size: 1rem !important;
    margin-top: 5px !important;
}

@media (hover: hover) and (pointer: fine) {
    .product__wrapper .home__product .border-dark:hover .product__img figure {
        transform: scale(1.2);
        transition: transform 0.4s ease;
    }

    .product__wrapper .home__product .border-dark:hover .product__content .product__desc {
        opacity: .5;
    }

    .product__wrapper .home__product .border-dark:hover .product__content .hover__btn {
        opacity: 1;
        transform: translateY(0);
    }
}

.product__wrapper .home__product .product__content .hover__btn {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.a-back {
    padding-left: 5px !important;
    min-width: 75px !important;
}

.history-back {
    display: flex !important;
    align-items: center;
    margin: auto;
    min-width: 60px;
}




.product__wrapper .home__product .border-dark:hover .product__content .hover__btn {
    opacity: 1;
    transform: translateY(0);
}

.product__wrapper .pagination .page-link {
    border-color: var(--mainAccent) !important;
    color: var(--mainAccent);
}

    .product__wrapper .pagination .page-link.items:hover {
        background-color: var(--mainAccent) !important;
        color: var(--whiteColor);
    }

.product__wrapper .pagination .active .page-link {
    background-color: var(--mainAccent) !important;
    color: var(--whiteColor);
}

/*==================================================
===| [Product Detail ] CSS 
==================================================*/
.product__detail .swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.product__detail .swiper-slide {
    background-size: cover;
    background-position: center;
}

.product__detail .mySwiperGallery2 {
    height: 80%;
    width: 100%;
}

.product__detail .mySwiperGallery {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}

    .product__detail .mySwiperGallery .swiper-slide {
        width: 10.4% !important;
        /*height: 100%;*/
        opacity: 0.4;
        cursor: pointer;
    }

    .product__detail .mySwiperGallery .swiper-slide-thumb-active {
        opacity: 1;
    }

.product__detail .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product__detail .favorite__link a {
    border: 1px solid var(--buttonColor);
    padding: 10px 25px;
    width: 100%;
    max-width: 250px;
    align-items: center;
    justify-content: center;
    color: var(--buttonColor)
}

.product__detail .product__info td {
    font-size: var(--small__font);
}

.product__detail .product__info thead th {
    font-size: var(--caption__font);
    font-weight: var(--fw-6);
}

/*==================================================
===| [Product Info ] CSS 
==================================================*/
.product__info .card .left__contents {
    max-width: 300px;
    width: 100%;
    background-color: var(--borderColor);
}

.product__info .card .right__contents a {
    color: #a3a3a3;
}

.page__btnGreen {
    background-color: var(--thirdAccent) !important;
    color: var(--whiteColor);
    padding: 10px 30px;
    font-size: var(--small__font);
    cursor: pointer;
}

.product__info .page__btnGreen:hover {
    background-color: var(--thirdAccent) !important;
}

.page__btnRed {
    background-color: var(--secondLighter) !important;
    color: var(--secondAccent) !important;
    padding: 10px 30px;
    font-size: var(--small__font);
}

a.down {
    color: var(--accentColor);
}

.product__info .favorite__link a {
    border: 1px solid var(--buttonColor);
    padding: 10px 25px;
    width: 100%;
    max-width: 250px;
    align-items: center;
    justify-content: center;
    color: var(--buttonColor)
}

.product__info .home__product .product__content {
    min-height: 0 !important;
    height: unset !important;
    text-align: center;
    line-height: 16px;
}

.product__info .product__content .product__title strong {
    font-weight: var(--fw-4);
    font-size: 12px;
    line-height: normal;
    text-align: center;
}

/*==================================================
===| [Order ] CSS 
==================================================*/
.order .table img {
    width: 40px;
    height: auto;
}

.order .table td,
.order .table th {
    vertical-align: middle;
    text-align: center;
}

.order .quantity-input {
    width: 80px;
    margin: 0 auto;
    font-size: 13px;
}

.order .trash-btn {
    cursor: pointer;
    color: #000;
}

@media(max-width: 768px) {
    .table-responsive.order {
        font-size: 14px;
    }
}

.product__detail .order small {
    font-size: 12px;
}

.product__detail .list__items strong {
    font-size: var(--small__font);
}


.product__detail .order__statu {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .product__detail .order__statu .statu__items {
        position: relative;
        flex: 1;
        text-align: center;
    }

        .product__detail .order__statu .statu__items::after {
            content: "";
            position: absolute;
            top: 15px;
            left: 50%;
            width: 100%;
            height: 2px;
            background-color: #ddd;
            z-index: -1;
        }

        .product__detail .order__statu .statu__items:last-child::after {
            display: none;
        }

        .product__detail .order__statu .statu__items.active::after {
            background-color: var(--secondAccent);
        }

        .product__detail .order__statu .statu__items .icons {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            flex-shrink: 0;
        }

            .product__detail .order__statu .statu__items .icons img {
                width: 20px;
                height: 20px;
                object-fit: contain;
                filter: brightness(0) invert(1);
            }

        .product__detail .order__statu .statu__items .texts {
            color: #aaa;
            margin-top: 4px;
            font-size: 13px;
        }

        .product__detail .order__statu .statu__items .icons.active {
            background-color: var(--secondAccent);
        }

        .product__detail .order__statu .statu__items .texts.active {
            color: var(--secondAccent);
        }

/*==================================================
===| [Breakpoints ] CSS 
==================================================*/
.quantite {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

    .quantite .form-control {
        border: none;
        box-shadow: none;
        font-weight: 500;
    }

    .quantite .btn-minus,
    .quantite .btn-plus {
        background: #f8f9fa;
        color: var(--accentColor);
        border: none;
        width: 40px;
        height: 40px;
        font-size: 20px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .quantite .btn-minus:hover,
        .quantite .btn-plus:hover {
            background: #e9ecef;
        }

/*==================================================
===| [Social Fixed ] CSS 
==================================================*/
.social__fixed {
    position: fixed;
    right: 0;
    top: 80%;
    transform: translateY(-50%);
    background: #666;
    padding: 15px 10px;
    border-radius: 25px 0 0 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.social__item {
    width: 42px;
    height: 42px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    transition: 0.2s;
}

    .social__item:hover {
        background: #fff;
        color: #666;
    }

.mb__0 p {
    /*margin-bottom: 0 !important; Coskun*/
}

/*==================================================
===| [Breakpoints ] CSS 
==================================================*/

/*==================================================
===| [Breakpoints ] CSS 
==================================================*/

/*==================================================
===| [Breakpoints ] CSS 
==================================================*/

/*==================================================
===| [Breakpoints ] CSS 
==================================================*/

/*==================================================
===| [Breakpoints ] CSS 
==================================================*/

/*==================================================
===| [Breakpoints ] CSS 
==================================================*/

/*==================================================
===| [Breakpoints ] CSS 
==================================================*/

/*==================================================
===| [Breakpoints Container ] CSS 
==================================================*/
/* ==== [ Tablet & Small Laptop ] - 901px ve üzeri ==== */
@media (min-width: 901px) {
    .container {
        max-width: 85% !important;
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}

/* ==== [ Laptop & Desktop ] - 1201px ve üzeri ==== */
@media (min-width: 1201px) {
    .container {
        max-width: 1320px !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .offcanvas-end {
        --bs-offcanvas-width: 490px !important;
    }
}

/* ==== [ Ultra Large Desktop ] - 1921px ve üzeri ==== */
@media (min-width: 1921px) {
    .container {
        max-width: 1550px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .offcanvas-end {
        --bs-offcanvas-width: 490px !important;
    }
}

/*Coskun*/
h1 {
    font-weight: 600 !important;
    font-size: 1.3rem !important;
}

h2 {
    font-weight: 600 !important;
    font-size: 1.3rem !important;
}

h3 {
    font-weight: 600 !important;
    font-size: 1.05rem !important;
}

h4 {
    font-weight: 600 !important;
    font-size: 1.025rem !important;
}


h5 {
    font-weight: 600 !important;
    font-size: 1.0rem !important;
}


h6 {
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}



.header__text h2 {
    font-weight: 600 !important;
    font-size: 21px !important;
}

.head__title h2 {
    font-size: 1rem !important;
}

.info__detail h2 {
    font-size: 1rem !important;
    color: var(--mainAccent);
}

.tooltip__content h3 {
    font-size: 1rem;
    font-weight: 600;
}

.head__title h3 {
    font-size: 1rem;
    font-weight: 600;
}

.card__title h3 {
    font-size: 1rem;
    font-weight: 600;
}

.header__text h3 {
    font-size: 1rem;
    font-weight: 600;
}

.title h3 {
    font-size: 1rem;
    font-weight: 600;
}

.left__content h3 {
    font-size: 1rem;
    font-weight: 600;
}

.page__header H2:before {
    width: 3px;
    height: 100%;
    background-color: var(--secondAccent);
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    left: -10px;
}

.page__header H1:before {
    width: 3px;
    height: 75%;
    background-color: var(--secondAccent);
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    left: -10px;
}

.home__block.page__apros .header__texts h2 span {
    color: #049e72;
}

.home__product .product__content .product__title h2,
.home__product .product__content .product__desc p {
    font-size: var(--small__font) !important;
    color: var(--blackColor);
}

.header__texts h2 span {
    color: var(--secondAccent);
    margin-left: 5px;
    margin-right: 5px;
}

.color-capron-red {
    color: var(--secondAccent);
}

h1 svg {
    width: 200px;
    height: auto;
    transition: width var(--transition02);
}

.header.sticky__menu .header__main .header__logo svg {
    width: 130px;
    height: auto;
}

.white-button img {
    width: 24px !important;
}

.why-capron-card {
    padding: 1.2rem !important;
}

    .why-capron-card .content {
        margin-top: 0 !important;
    }

    .why-capron-card .head__title {
        margin-bottom: 0 !important;
    }

    .why-capron-card p {
        margin-bottom: 0 !important;
    }

    .why-capron-card h3 {
        margin-bottom: 0 !important;
    }

.icons {
    min-width: 20px;
}

#pd-container-product {
}

    #pd-container-product h2 {
        font-weight: 600 !important;
        font-size: 1rem !important;
    }

    #pd-container-product h3 {
        font-weight: 600 !important;
        font-size: 0.95rem !important;
    }

    #pd-container-product h4 {
        font-weight: 600 !important;
        font-size: 0.9rem !important;
    }


    #pd-container-product h5 {
        font-weight: 600 !important;
        font-size: 0.8rem !important;
    }


    #pd-container-product h6 {
        font-weight: 600 !important;
        font-size: 0.7rem !important;
    }

.text-red {
    color: red !important;
}

/*Message Box*/

#custom-message-box-modal {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999999;
}

.custom-message-box-header {
    font-weight: 500;
    background: #e6f0ff;
    padding: 5px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-bottom: 10px;
}


.custom-message-box {
    position: absolute;
    width: 500px;
    min-height: 200px;
    left: 35%;
    top: 36%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 20px;
    z-index: 1000000;
    border-radius: 6px;
    background-color: white;
}

.successBtn {
    background-color: #049e72;
    color: white;
}

.custom-message-box-body {
    padding-top: 35px;
    padding-bottom: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    margin-top: 1px;
    border-top: 1px solid rgb(240, 240, 240);
}

.custom-message-box-content {
    padding-top: 15px;
    padding-bottom: 20px;
    margin-bottom: 10px;
}


/*End Message Box*/

.custom-button {
    border: 1px solid, white;
    padding: 15px;
    padding-bottom: 5px;
    padding-top: 5px;
    margin: auto;
    font-size: 12px;
    background: dodgerblue;
    color: white;
    width: auto;
    max-width: 120px;
    cursor: pointer;
}

.custom-messagebox-buttons {
    right: 0;
    left: 0;
    bottom: 0;
    padding: 10px;
    text-align: center;
    position: absolute;
    border-top: 1px solid rgb(240, 240, 240);
}

.formation-type {
    background-color: #ffffff;
    color: rgb(1, 104, 208); /* Teal/cyan blue */
    padding: 12px 32px;
    border-radius: 50px; /* Pill shape */
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}

    .formation-type:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }

.expedition-icon {
    width: 20px !important;
    max-width: none !important;
}

.filter-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

input::placeholder {
    color: lightgrey !important;
    font-style: italic;
}

textarea::placeholder {
    color: lightgrey !important;
    font-style: italic;
}

.duplicate-wrap {
    position: absolute;
    top: -14px;
    width: 214px;
    background: white;
    color: #bbb;
}

    .duplicate-wrap span {
        font-size: 15px
    }

    .duplicate-wrap p {
        margin-left: 10px;
        display: inline;
    }

.ml-0 {
    margin-left: 0 !important;
}