:root{
    --clr01: #0a0f15;
    --clr02: #222631;
    --clr03: #373e4e;
    --clr04: #4e5669;
    --clr05: #657084;
    --clr06: #bfc7d4;
    --clr07: #d2d6e1;
    --clr08: #e0e5eb;
    --clr09: #f0f1f5;
    --clr10: #ffffff;
 
    --bdclr: #0a0f15;

    --hclr: var(--secttlclr);
    --h-letspace: 0px;

    --containerWidthSet_1200: 1200px;
    --containerWidthSet_991: 960px;
    --containerWidthSet_767: 720px;
    --containerWidthSet_575: 540px;

    --secttlmarg: 0 0 45px;
 
    --body-lineheight: 1.8;
    --subttlsize: 110%; 
    --subttlfamily: var(--ft-t2);
    --subttl: 0;
    --secttlmarg_default: 0 0 30px; 

    --ft-nav: var(--ft-t1);
}

/* ::-moz-selection {
    color: var(--clr01); 
}
::selection {
    color: var(--clr01); 
} */
@media (max-width: 767px) {
    /* .container, .container-fluid {
        max-width: calc(100% - 30px);
    } */
} 

@media (min-width: 767px) {
    /* :root {
        --h4: calc(60 / 18 * 100%)
    } */
}
a.btn,
.btn{ 
    --btnbgclr: var(--clr01x, #000);
    --btnbgclrhov: var(--clr02);
    --btnborderclr: var(--btnbgclr);
    --btnborderclrhov: var(--btnbgclrhov);
    --btnclr: var(--clr01x, #fff);
    --btnclrhov: var(--clr02x, #fff);
    --btnpad: 12px 12px;
    --btn-minwidth: 90px;
    --btnborderrad: 0;
    --btnfontsize: 80%;
    --btnborderwidth: 2px;
    --btnfont: var(--ft-b1);

    &.btn-line{
        --btnbgclr: var(--clr01x, transparent);
        --btnbgclrhov: var(--clr01);
        --btnborderclr: var(--btnbgclrx, var(--btnclr));
        --btnborderclrhov: var(--btnbgclrhov);
        --btnclr: var(--clr01, #fff);
        --btnclrhov: var(--clr01x, #fff);
    }
    &.btn-line-rev{
        --btnbgclr: var(--clr01x, transparent);
        --btnbgclrhov: var(--clr09);
        --btnborderclr: var(--btnbgclrx, var(--btnclr));
        --btnborderclrhov: var(--btnbgclrhov);
        --btnclr: var(--clr09, #fff);
        --btnclrhov: var(--clr01, var(--clr09));
    }
}

.btn{
    position: relative;
    z-index: 1; 
    line-height: 1; 
    letter-spacing: 3%;

    
    
    &::after{
        content: '';
        display: inline-block;
        transition: inherit;
        /* position: absolute;  */ 
    }
    &::before{
        /* content: ''; */
        display: inline-block;
        transition: inherit;
        /* position: absolute;  */ 
    }
    &:hover::after,
    &.active::after{
        --mkclr: var(--btnclrhov);
    } 
    &::after{ 
        --mkclr: var(--btnclr);
        --square: 15px;
        margin: 0 0 0 9px;
        height: var(--square);
        width: var(--square);
        
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-position: center;
        -webkit-mask-position: center;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        background-color: var(--mkclr);
        -webkit-mask-image: url(src/arrow-right.svg);
        mask-image: url(src/arrow-right.svg);
    } 
}



.h4 img {
    vertical-align: middle;
    margin: -6px 6px 0;
}
section {
    --secttlclr: var(--clr02, inherit); 
    &.bg_fixed{
      .sectionbg{
         @media(width>575px){
            background-attachment: fixed;
         }
      }
   }

   &.btn_line_white{
        .btn{
            --btnbgclr: var(--clr01x, transparent);
        --btnbgclrhov: var(--clr02x, #000);
        --btnborderclr: var(--btnbgclrx, #fff);
        --btnborderclrhov: var(--btnbgclrhov, #fff);
        --btnclr: var(--clr01x, #fff);
        --btnclrhov: var(--clr02, #fff);
        }
   }
   &.btn_line_yellow{
        .btn{
            --btnbgclr: var(--clr01x, transparent);
            --btnbgclrhov: var(--clr01, #000);
            --btnborderclr: var(--btnbgclrhov, #fff);
            --btnborderclrhov: var(--btnbgclrhov, #fff);
            --btnclr: var(--clr01, #fff);
            --btnclrhov: var(--clr02x, #000);
        }
   }

     &.bullet_arrow{ 
        ul {
        list-style: none; /* Hide default bullets */
        padding-left: 30px;
        }

        li{
            position: relative;
        }

        li::before {
        content: "";
        display: inline-block;
        height: 20px; /* Custom height */
        width: 20px;  /* Custom width */
        background-image: url(src/green_arrow.webp);
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 10px; /* Space between image and text */
        vertical-align: middle;
        position: absolute;
        left: 0;
        top: 6px;
        translate: calc(-100% - 10px) 0;
        background-position: center;
        }
    }

    &.add_line:has(.contentbx){
        .row{
            z-index: 1;
            align-items: initial !important;
            overflow-x: clip;
            position: relative;
        }
        @media(width>991px){
            .col-md-6 {
                z-index: -1;
            }
            .contentbx{
                padding-top: 30px;
                position: relative; 
            } 
            .row-r{
                z-index: -10;
                &::after{
                    content: '';
                    width: calc(100% + 120px);
                    height: 2px;
                    display: block;
                    position: absolute;
                    right: 15px;
                    top: 0;
                    translate: 0 0;
                    background-color: #ccc;
                }
            }

            &.dsg_1{
                .rowbx:nth-child(even){
                    .row-r{
                        &::after{
                            right: auto;
                            left: 15px;
                        }
                    }
                } 
            }
            &.dsg_2{
                .rowbx:nth-child(odd){
                    .row-r{
                        &::after{
                            right: auto;
                            left: 15px;
                        }
                    }
                }
            }
        }
    }
    &.image_trans_up{
        z-index: 21;
        ._imgobj{
            @media(width>991px){
                margin: -35% 0 0  !important;
            }
        }
    }
    &.image_trans_down{
        z-index: 21;
        ._imgobj{
            @media(width>991px){
                margin: 0 0 -30% !important;
            }
        }
        .row{
            @media(width>991px){
                align-items: flex-start !important;

                .contentbx{
                    padding-top: 30px;
                }
            }
        }
    }
    &.pd_top_991{
        @media(width>991px){
            padding-top: calc(60px + 6%) !important;
        }
    }
    &.pd_btm_991{
        @media(width>991px){
            padding-bottom: calc(60px + 6%) !important;
        }
    }
    &.pd_btm_\>991_0{
        @media(width>991px){
            padding-bottom: 0px !important;
        }
    }
    &.row_a_\>991_fe{
        @media(width>991px){
            .row{
                align-items: flex-end !important;
            }
            .contentbx{
                padding-bottom: 60px;
            }
        }
    }

    &.btn-line-green{
        a.btn,
        .btn{ 
            --btnbgclr: var(--clr01x, transparent);
            --btnbgclrhov: var(--clr01);
            --btnborderclr: var(--btnclr);
            --btnborderclrhov: var(--btnbgclrhov);
            --btnclr: var(--clr01, #fff);
            --btnclrhov: var(--clr02x, #fff);
        }
    }
    &.btn-solid-blue{
        a.btn,
        .btn{ 
            --btnbgclr: var(--clr02, transparent);
            --btnbgclrhov: var(--clr01, #fff);
            --btnborderclr: var(--btnbgclr);
            --btnborderclrhov: var(--btnbgclrhov);
            --btnclr: var(--clr01x, #fff);
            --btnclrhov: var(--clr02x, #fff);
        }
    }
    &.maintitle_style{
        ._secttlbx{
            padding-left: 30px;
            position: relative;

            &::after{
                content: '';
                display: block;
                position: absolute;
                height: 100%;
                width: 9px;
                background-color: var(--clr04);
                left: 0;
                top: 0;
                border: 1px solid #fff;
            }
        }
    }


    &.hide_ttl_btm .ttldecor-btm{
        display: none;
    }

    &.translate_up_with_line{

        &.mt_150{
            @media(width> 991px){
                margin: 150px 0 0 !important;
            }
        }

        @media(width> 991px){
            margin: 90px 0 0;

            .row{
                align-items: flex-start;
            }
            ._imgobj{
                z-index: 1;
                position: relative;
                translate: 0 -150px;

                &::after{
                    content: '';
                    z-index: -1;
                    background-color: #ccc;
                    height: 3px;
                    width: var(--main_width);
                    position: absolute;
                    right: 0;
                    top: 0;
                    display: block;
                }
            }
        }
    }
}

.ttldecor-btm{
    line-height: 1; 
    display: block;
    & > * {
        width: 120px; 
        display: inline-block;
        background-color: var(--secttlclr, var(--clr02));
        position: relative;
        z-index: 1;

        &::before{
            content: '';
            width: 100%;
            height: 2px;
            display: inline-block;
            background-color: var(--secttlclrx, #ccc);
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: -2;
        }
        &::after{
            content: '';
            width: 50%;
            height: 4px;
            display: inline-block;
            background-color: var(--secttlclr, var(--clr02));
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: -1;
        }
    } 
}

.btn i {
    /* font-size: 200%; */
    margin: 0 3px;
}
.btn.f > * {
    display: inline-flex;
    vertical-align: middle;
} 
label{
    --lblfont: var(--ft-t2);
} 
/* ============== */ 
a {
    text-decoration: none;
}
body{
    background-color: #fefefe;
} 
/* section:is([style*="--secbgclr"]) {
    --btnborderclr: #fff;
    --btnclr: #fff;

    .mediabx {
        --iconclr: var(--clr01x, #fff);
        --iconhovclr: var(--clr01, #fff);
        --bgclr: var(--clr02x, transparent);
        --bghovclr: var(--clr02, #fff);
        --mediaborder: 2px solid #fff;
        --mediahovborder: 2px solid var(--clr02, #fff);
        --mediaborderradius: 50%;
        --mg: 0;
    }
} */
section.maintitle_style{
    ._secttlbx{
        padding-left: 30px;
        position: relative;

        &::after{
            content: '';
            display: block;
            position: absolute;
            height: 100%;
            width: 9px;
            background-color: var(--clr04);
            left: 0;
            top: 0;
            border: 1px solid #fff;
        }
    }
}
section:is([style*="--secttlclr"]) { 
    .ttldecor-top:after {
       background-color: var(--secttlclr);
    } 
}
.listobx.categorylistbx{
    font-family: var(--ft-t2);
}
.btn_noti {
    font-family: var(--ft-t2);
}




.searchbx { 
    position: relative;
    width: 150px;
    
    overflow: hidden;

    .searchw {
        position: relative;
    }
    & input {
        margin: 0;
        padding: 9px 30px 9px 9px;
        width: 100%;
        border-radius: 3px;
        border: 0;
        font-size: inherit;
    }
    & button.i {
        position: absolute;
        left: auto;
        right: 12px;
        top: 50%;
        translate: 0 -50%;
        color: #888;
        width: auto;
        border: 0;
        padding: 0;
        background-color: transparent;
    }
}

.dekstickbx .searchbx,
.nav .searchbx{
    border-radius: 50px;
    font-size: 80%;
    border: 1px solid #888;
    
    & input {
        padding: 9px 30px 9px 15px; 
        background-color: #fff;
    }
}

#mouse-circle {
    position: absolute;
    width: 15px !important;
    height: 15px !important;
    margin: -7px 0px 0px -7px;
    border: 1px solid var(--clr01);
    background-color: var(--clr02);
    border-radius: 50%;
    pointer-events: none !important;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0);
    z-index: 1000; 
}

.galbxmain {
    .bimgw{
        background-color: #eee;
    }
}

.btn-neg .btn{
    --btnborderclr: #fff;
    --btnbgclr: transparent;
}



.licht{
    .head:has(.btnClose){
        .btnClose{
            background-color: var(--clr08);
            color: var(--clr02);
            border-radius: 6px;
        }
    }
}
 

.nav_{
    aspect-ratio: 85 / 24;
    width: 85px;
    display: inline-block;
    cursor: pointer;

    &.nav_next{
        background-image: url(src/nav_next.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    &.nav_prev{
        background-image: url(src/nav_prev.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    
    @media(width<=575px){
        width: 50px;
    }
}

.swiper_cus_nav{
    --swiper-scrollbar-drag-bg-color: var(--clr01);
    line-height: 1;
    width: 600px;
    max-width: 100%;
    margin: 30px auto 0;
    gap: 9px;
    z-index: 9;

    &:has(.swiper-scrollbar-lock){
        display: none;
    }

    .swiper-scrollbar{
        position: relative;
    }

   .nav-m{
        flex: 1 0 0;
   }
}

section.nav_w{
    .nav_{
        &.nav_next{
            background-image: url(src/nav_next_w.png); 
        }

        &.nav_prev{
            background-image: url(src/nav_prev_w.png); 
        }
    }
    .swiper_cus_nav{
        --swiper-scrollbar-drag-bg-color: #fff;
    }
}

._topsubttl{
    & > * {
        padding: 6px 21px;
        border-radius: 50px;
        border: 2px solid #ccc;
        font-size: 70%; 
        letter-spacing: 5%;
        color: var(--secttlclr);
    }
}