/* 17.05.2023 - Volkan Taşkıran */

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 11px; background-image: none; background-color: #ffffff;}

#loader {position: fixed; z-index: 50000; background: #122849!important; opacity: 0.9; left: 0; top: 0; right: 0; bottom: 0; height: 100%; width: 100%; margin: 0 auto; text-align: center;}
.loader-img {position: absolute; right: 0; width: 255px!important; height: 150px!important; bottom: 0; top: 50%; left: 0; margin-top: -75px!important; margin: 0 auto; text-align: center;}
#loader i {position: absolute; right: 0; color: #ffffff!important; width: 40px!important; height: 40px!important; font-size: 40px; bottom: 0; top: 50%; left: 0; margin-top: 90px!important; margin: 0 auto; text-align: center;}

.cursor-pointer {cursor: pointer!important;}

h1 {font-size: 1.6em; line-height: 1.2em; font-weight: bold; padding-bottom: 10px;}
h2 {font-size: 1.3em; line-height: 1.2em; font-weight: bold; padding-bottom: 6px;}
h3 {font-size: 1.2em; line-height: 1.2em; font-weight: bold; padding-bottom: 6px;}
h4 {font-size: 1.1em; line-height: 1.2em; font-weight: bold; padding-bottom: 6px;}
h5 {font-size: 1em; line-height: 1.2em; font-weight: bold; padding-bottom: 6px;}
h6 {font-size: .9em; line-height: 1.2em; font-weight: bold; padding-bottom: 6px;}
p {font-size: 1.1em; margin: 0 0 10px 0;}

.fs-14 {font-size: 14px!important;}
.fs-15 {font-size: 15px!important;}
.fs-16 {font-size: 16px!important;}
.fs-18 {font-size: 18px!important;}
.fs-20 {font-size: 20px!important;}
.fs-22 {font-size: 22px!important;}
.fs-24 {font-size: 24px!important;}
.fs-26 {font-size: 26px!important;}
.fs-28 {font-size: 28px!important;}
.fs-30 {font-size: 30px!important;}
.fs-32 {font-size: 32px!important;}
.fs-34 {font-size: 34px!important;}
.fs-36 {font-size: 36px!important;}
.fs-38 {font-size: 38px!important;}
.fs-40 {font-size: 40px!important;}
.fs-42 {font-size: 42px!important;}
.fs-44 {font-size: 44px!important;}
.fs-46 {font-size: 46px!important;}
.fs-48 {font-size: 48px!important;}
.fs-50 {font-size: 50px!important;}
.fs-52 {font-size: 52px!important;}
.fs-54 {font-size: 54px!important;}
.fs-56 {font-size: 56px!important;}
.fs-58 {font-size: 58px!important;}
.fs-60 {font-size: 60px!important;}
.fs-62 {font-size: 62px!important;}
.fs-64 {font-size: 64px!important;}
.fs-66 {font-size: 66px!important;}
.fs-68 {font-size: 68px!important;}
.fs-70 {font-size: 70px!important;}
.fs-72 {font-size: 72px!important;}
.fs-74 {font-size: 74px!important;}
.fs-76 {font-size: 76px!important;}
.fs-78 {font-size: 78px!important;}
.fs-80 {font-size: 80px!important;}

.fs-slogan {font-size: 48px!important;}

@media (max-width: 1366px) {
	.fs-slogan {font-size: 36px!important;}
}

@media (max-width: 1280px) {
	.fs-slogan {font-size: 28px!important;}
}

@media (max-width: 980px) {
	.fs-slogan {font-size: 22px!important;}
}

@media (max-width: 768px) {
	.fs-slogan {font-size: 20px!important;}
}

@media (max-width: 767px) {
	.banner-link {text-align: center!important;}
	.fs-slogan {font-size: 20px!important; text-align: center!important;}
}

.c-navy {color: #03257e;}

.banner-link {color: #000000!important;}
.banner-link:hover {color: #0080bb!important;}

.carousel-control-next, .carousel-control-prev {width: 50px!important;}
.carousel-control-next-icon, .carousel-control-prev-icon {background-color: #000!important; padding: 25px!important; background-size: 25px 25px!important;}
.carousel-indicators {position: relative!important; margin-bottom: 0px!important; padding: 0px!important; height: 6px!important;}
.carousel-indicators [data-bs-target] {width: 60px; height: 6px; opacity: 0;}
.carousel-indicators .active {width: 60px; height: 6px; background-color: #c5deef!important; opacity: 1;}

header {max-height: 90px!important; border-top: 5px solid #fff; background-color: #122849;}
header > div {max-width: 1170px!important;}
@media (min-width: 991px) {
	header > div > nav {max-height: 85px!important;}
}
header > div > nav {background-color: #122849;}
header > div > nav > div > div > ul > li {list-style-type: none; display: inline-block; min-width: 40px!important; margin: 5px 15px;}
header > div > nav > div > div > ul > li > a {color: #fff!important; font-size: 16px!important; text-decoration: none; display: inline-block; position: relative;}
header > div > nav > div > div > ul > li::after {content: ""; display: block; margin: auto; height: 2px; width: 0; top: 3px; background: transparent; transition: all 0.3s;}
header > div > nav > div > div > ul > li:hover::after, li > a.active-nav::after {width: 100%; background: #ed1c24;}
.logo {wight: 120px!important; height: 70px!important; margin-top: 5px!important; margin-bottom: 5px!important;}
header > div > nav > div > div > ul > li > ul {background-color: #122849!important;}
header > div > nav > div > div > ul > li > ul > li > a {color: #fff!important;}
header > div > nav > div > div > ul > li > ul > li > a:hover {background-color: #213c65!important;}
header > div > nav > div > div > ul > li > ul > li::after {content: ""; display: block; margin: auto; height: 2px; width: 0; top: 3px; background: transparent; transition: all 0.3s;}
header > div > nav > div > div > ul > li > ul > li:hover::after, li > a.active-nav::after {width: 100%; background: #ed1c24;}

.q-lang {position: relative; width: 22px; top: -1px;}

.over-q-main-home-bg {
	background: black;
    overflow: hidden;
    background: #000000;  /* fallback colour. Make sure this is just one solid colour. */
    background: -webkit-linear-gradient(rgba(29, 38, 113, 0.8), rgba(0, 0, 0, 0.8)), url("../../images/main-home-banner.jpg");
    background: linear-gradient(rgba(29, 38, 113, 0.8), rgba(0, 0, 0, 0.8)), url("../../images/main-home-banner.jpg"); /* The least supported option. */
	/*background: 
    linear-gradient(
      rgba(152, 156, 159, 0.75), 
      rgba(152, 156, 159, 0.75)
    ),
    url(../../images/main-home-banner.jpg);*/
}

.q-with-numbers {background-image: url("../../images/counters-map.svg"); background-position: center center; background-repeat: repeat; background-size: contain;}


.page-header {width: 100%; height: auto; min-height: 320px!important; overflow-x: hidden!important;}
.page-header-contact {background: url("../../images/contact.jpg") no-repeat top center; background-size: cover;}
.page-header-brand {background: url("../../images/brand.jpg") no-repeat top center; background-size: cover;}
.page-header-catalogs {background: url("../../images/catalogs.jpg") no-repeat top center; background-size: cover;}
.page-header-about {background: url("../../images/about-us.jpg") no-repeat top center; background-size: cover;}
.page-header-lifestyle {background: url("../../images/lifestyle.jpg") no-repeat top center; background-size: cover;}
.page-title {background-color: #3e3e3e; z-index: 4; width: 315px; text-align: right; padding: 3px 0;}
.page-title span {color: #989c9f; border-top: 1px solid #d0cfcd; border-bottom: 1px solid #d0cfcd; padding: 8px 25px 8px 0; display: block; font-size: 1.3em; text-transform: uppercase;}
@media (max-width: 1366px) {
	.page-header {min-height: 220px!important;}
}
@media (max-width: 768px) {
	.page-header {min-height: 164px!important;}
	.page-title {width: 200px!important;}
}

.lider-icon img {width: 50px!important; height: 50px!important;}


/* Markalar */
.hover {overflow: hidden; position: relative; padding-bottom: 80%; background: #000;}
@media (max-width: 1366px) {
	.hover {overflow: hidden; position: relative; padding-bottom: 70%; background: #000;}
}
.hover-q:hover img {-webkit-transform: scale(1.3); transform: scale(1.3); -webkit-filter: grayscale(0%) blur(0px); filter: grayscale(0%) blur(0px); opacity: 1;}
.hover-overlay {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 90; transition: all 0.4s;}
.hover img {width: 100%; position: absolute; top: 0; left: 0; transition: all 0.3s; -webkit-filter: grayscale(100%) blur(3px); filter: grayscale(100%) blur(3px); opacity: .5;}
.hover-content {position: relative; z-index: 99;}
.hover-q .hover-overlay {background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));}
.hover-q-title {position: absolute; font-size: 22px!important; top: 50%; left: 0; text-align: center; width: 100%; z-index: 99; transition: all 0.3s;}
.hover-q-description {width: 100%; position: absolute; bottom: 0; opacity: 0; left: 0; text-align: center; z-index: 99; transition: all 0.3s;}
.hover-q:hover .hover-q-title {transform: translateY(-1.5rem); background-color: #000; padding-top: 7px; padding-bottom: 7px;}
.hover-q:hover .hover-q-description {bottom: 0.5rem; opacity: 1; background-color: #000; padding-top: 3px; padding-bottom: 3px;}
.hover-q:hover .hover-overlay {background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));}

.page-header-benetton {background: url("../../images/brands/benetton-page-banner.jpg") no-repeat top center; background-size: cover;}
.page-header-bhpc {background: url("../../images/brands/bhpc-page-banner.jpg") no-repeat top center; background-size: cover;}
.page-header-gap {background: url("../../images/brands/gap-page-banner.jpg") no-repeat top center; background-size: cover;}
.page-header-pantone {background: url("../../images/brands/pantone-page-banner.jpg") no-repeat top center; background-size: cover;}
.page-header-nofear {background: url("../../images/brands/no-fear-page-banner.jpg") no-repeat top center; background-size: cover;}
.page-header-pony {background: url("../../images/brands/pony-page-banner.jpg") no-repeat top center; background-size: cover;}
.page-header-sisley {background: url("../../images/brands/sisley-page-banner.jpg") no-repeat top center; background-size: cover;}

/*
.hover {overflow: hidden; position: relative; padding-bottom: 60%; background: #1abc9c;}
.hover img {-webkit-filter: grayscale(100%) blur(3px); filter: grayscale(100%) blur(3px); opacity: .8;}
.hover img:hover {-webkit-transform: scale(1.3); transform: scale(1.3); -webkit-filter: none; filter: none; opacity: 1;}
.hover-overlay {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 90; transition: all 0.4s;}
.hover img {width: 100%; position: absolute; top: 0; left: 0; transition: all 0.3s;}
.hover-content {position: relative; z-index: 99;}
.hover-q .hover-overlay {background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));}
.hover-q-title {position: absolute; top: 50%; left: 0; text-align: center; width: 100%; z-index: 99; transition: all 0.3s;}
.hover-q-description {width: 100%; position: absolute; bottom: 0; opacity: 0; left: 0; text-align: center; z-index: 99; transition: all 0.3s;}
.hover-q:hover .hover-q-title {transform: translateY(-1.5rem);}
.hover-q:hover .hover-q-description {bottom: 0.5rem; opacity: 1;}
.hover-q:hover .hover-overlay {background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));}
*/

/* iletisim */
.q-contact {font-size: 18px!important; font-weight: 700; color: #3e3e3e;}
.q-contact-details {font-size: 16px!important; color: #989c9f;}
.q-contact-details a {color: #989c9f!important; font-weight: normal; text-decoration: none;}

input,label::after {background-color: #eff3f4!important;}
.form-control:focus {border-color: #c4c8cb; box-shadow: 0 0 0 0.2rem rgba(196, 200, 203, 0.25);}
.form-check-input:checked{background-color: green !important;}
.form-check-input:focus, .label::after, label.form-check-label:focus, .form-check-input::after, .form-check-input:not(:disabled):not(.disabled):active:focus {color: black; outline: 0; border: 0; /*box-shadow: 0 0 0 0.1rem green !important;*/}

/* Alt bilgi */
footer {width: 100%; min-height: 220px!important; overflow-x: hidden!important; background: rgb(152,156,159); background: -moz-linear-gradient(0deg, rgba(152,156,159,1) 0%, rgba(208,207,205,1) 44%); background: -webkit-linear-gradient(0deg, rgba(152,156,159,1) 0%, rgba(208,207,205,1) 44%); background: linear-gradient(0deg, rgba(152,156,159,1) 0%, rgba(208,207,205,1) 44%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#989c9f",endColorstr="#d0cfcd",GradientType=1);}
footer > div > div > div > h1 {color: #3e3e3e!important; font-size: 16px!important; font-weight: 700!important; position: relative; display: inline-block;}
footer > div > div > div > h1:before{position: absolute; height: 3px; width: 50%; left: 0; bottom: 0; background: #989c9f; display: block; content: "";}
footer > div > div > div > p {font-size: 14px!important; margin-bottom: 3px!important;}
footer > div > div > div > p a {color: #3e3e3e!important; font-size: 14px!important; font-weight: normal; text-decoration: none;}
footer > div > div > div > ul > li a {color: #3e3e3e!important; font-size: 14px!important; font-weight: normal; text-decoration: none;}
footer > div > div > div > div > span {color: #3e3e3e!important; font-size: 14px!important;}
footer > div > div > div > div > span a {color: #3e3e3e!important; font-size: 14px!important; font-weight: 700; text-decoration: none;}

#social-platforms {position: relative; top: 10px; font-size: 1rem; overflow: hidden;}

.btn-q {clear: both; white-space: nowrap; font-size: .8em; display: inline-block; border-radius: 5px; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35); margin: 2px; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; overflow: hidden;}
.btn-q:hover {box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.45);}
.btn-q:focus {box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.4);}
.btn-q > span,.btn-icon-q > i {float: left; padding: 9px; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; line-height: 1em;}
.btn-q > span {padding: 9px 14px 12px; white-space: nowrap; color: #fff; background: #b8b8b8;}
.btn-q:focus > span {background: #9a9a9a;}

.btn-icon-q > i {border-radius: 5px 0 0 5px; position: relative; width: 36px; text-align: center; font-size: 1.25em; color: #fff; background: #212121;}
.btn-icon-q > i:after {content:""; border: 8px solid; border-color: transparent transparent transparent #222; position: absolute; top: 9px; right: -15px;}
.btn-icon-q:hover > i,.btn-icon-q:focus > i {color: #fff;}
.btn-icon-q > span {border-radius: 0 5px 5px 0;}

/*Instagram*/
.btn-instagram:hover > i,.btn-instagram:focus > i {color: #b82f7b;}
.btn-instagram > span {background: #b82f7b;}

/*LinkedIn*/
.btn-linkedin:hover > i,.btn-linkedin:focus > i {color: #007bb6;}
.btn-linkedin > span {background: #007bb6;}

/*Over-Q*/
.btn-over-q:hover > i,.btn-over-q:focus > i {color: #989c9f;}
.btn-over-q > span {background: #989c9f;}