body {font-family: 'New Hero' !important;font-weight: normal; font-size: 12px !important; font-style: normal;}
.font {font-family: 'New Hero' !important; font-style: normal;}
.divider-col {display: flex; align-items: center;}
.vertical-divider {border-left: 1px solid #ccc;  height: 100%;  margin: 0 auto;}
.vertical-line {border-right: 1px solid #000;  margin: 0 10px; height: 20px; }

.headeraltbar{ background-color: #f08324 !important; margin-top: 25px !important;}

.renk {color: #00234b!important}
.renk1 {color: #f08324!important}
.tumurunler{font-size:16px; font-weight: 600;}

.projeaciklama {font-size: 16px; font-weight: 300;}
.anahtarteslim {font-size: 18px; font-weight:600;}
.bg-gri{background-color: #f8f8f8;}
.incelebtn{background-color: #f08324; color: white;}
.incelebtn:hover{background-color: #f8a052; color: white;}

.satinalbtn{background-color: #fff; color: #00234b;}
.satinalbtn:hover{background-color: #f8a052; color: white;}

.urunresim150{object-fit: contain; height: 150px !important; width:100%; padding: 0px;}
.urunresim250{object-fit: cover; height: 250px !important; width:100%; padding: 0px; }

.referanslistesi{height: 160px; overflow-y: auto;}

.referanslistesi::-webkit-scrollbar {
    width: 5px; background-color: #f5f5f5; 
}

.referanslistesi::-webkit-scrollbar-thumb {
    background-color: #f08324; /* Scroll bar rengi */
}

.referanslistesi2{height: 100px; overflow-y: auto;}

.referanslistesi2::-webkit-scrollbar {
    width: 5px; background-color: #f5f5f5; 
}

.referanslistesi2::-webkit-scrollbar-thumb {
    background-color: #e4e4e4; /* Scroll bar rengi */
}


.slidericonbgsol{width: 50px; top:45%; bottom: 45%; left:25px; border-radius: 25px; background-color: white;  opacity: 1 !important;}
.slidericonbgsag{width: 50px; top:45%; bottom: 45%; right:25px; border-radius: 25px; background-color: white; opacity: 1 !important;}

.urunthumbnail{object-fit: contain; padding: 0px; }

.urunbg{background-color: #f8f8f8;}
.cart-btn{background-color: #00234b; color:#f08324}

.hover-top{-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;}
.hover-top:hover{transform:translateY(-3px); -moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;}

.cardurunadi {font-size: 15px; font-weight: 400;    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.cardurunadi:hover{color:#f08324 !important}
.cardfiyat {font-size: 18px; font-weight: 700;}
.renklink {position: relative;text-decoration: none;}
.renklink::after {content: ''; position: absolute; left: 0;bottom: -2px;width: 25px; height: 2px; background-color: orange; transition: width 0.3s; /* Geçiş süresi */}
.renklink:hover::after {width: 100%;}
.p--15{margin-right: -15px !important; margin-left: -15px !important;}

.nav-tabs .nav-item .sekme{color: #808183; font-weight: 300;}
.nav-tabs .nav-item .active {font-weight: 600; color: #00234b !important;}

.active .border-bottom-6px {
    border-bottom-color: #82f4ff !important;
}
.done .border-bottom-6px {
    border-bottom-color: #a0eb70 !important;
}

.card {
    background-color: #f8f8f8;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.card:hover {
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.aiz-range-slider .noUi-connect {
    background: #85858557;
}

@media (min-width:1px){ 
    .logo { width: 100%;height: 60px;}
    .sloganyazi{ font-size: 20px; color:#00234b !important}
    .slogandiv{margin-top: 50px;}
    .slogansagyazi{font-size: 14px; color:#00234b !important}
    .baslik{font-size: 30px; font-weight: 800;}
}

@media (min-width:321px){ 
    .logo {width: 100%; height: 60px;}
}

@media (min-width:640px){ 
    .logo {width: 100%; height: 60px; }
    .sloganyazi{font-size: 22px;}
    .slogandiv{margin-top: 80px;}
    .slogansagyazi{font-size: 16px;}
}

@media (min-width:960px){ 
    .logo { width: 100%; height: 60px;}
    .headerustbar {padding-top:25px !important}
    .sloganyazi{font-size: 22px;}
    .slogandiv{margin-top: 50px;}
    .slogansagyazi{font-size: 15px;}
}

@media (min-width:1200px){ 
    .logo {width: 100%; height: 60px;}
    .sloganyazi{font-size: 22px;}
    .slogandiv{margin-top: 50px;}
    .slogansagyazi{font-size: 15px;}
    .front-header-search{display: block !important;}
}

@media (min-width:1400px){ 
    .logo {width: 100%;height: 70px;}
    .sloganyazi{font-size: 25px;}
    .slogandiv{margin-top: 70px;}
    .slogansagyazi{font-size: 16px;}
    .front-header-search{display: block !important;}
}

@media (min-width:1600px){ 
    .logo {width: 100%;height: 75px;}
    .sloganyazi{font-size: 30px;}
    .slogandiv{margin-top: 100px;}
    .slogansagyazi{font-size: 18px;}
    .front-header-search{display: block !important;}
}




@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-BoldItalic.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-Bold.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero Hairline';
    src: url('/public/assets/fonts/NewHero-HairlineItalic.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-HairlineItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-ExtraBold.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-ExtraBoldItalic.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-LightItalic.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero Hairline';
    src: url('/public/assets/fonts/NewHero-Hairline.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-Hairline.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-Light.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-Medium.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-MediumItalic.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-SemiBoldItalic.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-Regular.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-RegularItalic.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-SemiBold.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero Super';
    src: url('/public/assets/fonts/NewHero-SuperItalic.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-SuperItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero Super';
    src: url('/public/assets/fonts/NewHero-Super.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-Super.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-Thin.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-ThinItalic.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-UltraLightItalic.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-UltraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'New Hero';
    src: url('/public/assets/fonts/NewHero-UltraLight.woff2') format('woff2'),
        url('/public/assets/fonts/NewHero-UltraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}