/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */
@font-face {
    font-family: 'Poppins Black';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Black'), url('/templates/storelistandsell/themes/base/fonts/Poppins/Poppins-Black.woff') format('woff');
}

@font-face {
    font-family: 'Poppins ExtraBold';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins ExtraBold'), url('/templates/storelistandsell/themes/base/fonts/Poppins/Poppins-ExtraBold.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Bold'), url('/templates/storelistandsell/themes/base/fonts/Poppins/Poppins-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Poppins SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins SemiBold'), url('/templates/storelistandsell/themes/base/fonts/Poppins/Poppins-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Medium'), url('/templates/storelistandsell/themes/base/fonts/Poppins/Poppins-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Light';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Light'), url('/templates/storelistandsell/themes/base/fonts/Poppins/Poppins-Light.woff') format('woff');
}

@font-face {
    font-family: 'Poppins ExtraLight';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins ExtraLight'), url('/templates/storelistandsell/themes/base/fonts/Poppins/Poppins-ExtraLight.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Thin'), url('/templates/storelistandsell/themes/base/fonts/Poppins/Poppins-Thin.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Regular'), url('/templates/storelistandsell/themes/base/fonts/Poppins/Poppins-Regular.woff') format('woff');
}

/***********************************************/
:root {
    --black-color: #000;
    --primary-color: #EF4352;
}

body {
    font-family: 'Poppins Regular', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.product-matrix .product-matrix-title,
.h3,
.sidepanel-left .box-normal .box-normal-link,
.h4,
.h5,
.h6 {
    font-family: "Poppins Medium", sans-serif;
    font-weight: 500;
    color: var(--black-color);
}

body {
    font-family: "Poppins Regular", sans-serif;
    background: #fff;
    font-size: 16px;
    color: var(--black-color);
}

/*--------------------------- custom font sizes*/
.container {
    max-width: 1411px;
    margin-left: auto;
    margin-right: auto;
}

#content-wrapper:not(.has-fluid) {
    padding-top: 1rem;
}

/*--------------------------- custom font sizes*/
/*********************BANNER****************************/
.bannerLeft {
    display: flex;
    align-items: center;
    height: 100%;
}

.bannerSec {
    padding: 0;
}

.bannerLeft h1 {
    font-size: 40px;
    margin-bottom: 80px;
}

.bannerBoxHeader>div {
    display: flex;
    align-items: flex-start;
}

.bannerBoxIcon {
    max-width: 10%;
    width: 100%;
}

.bannerBoxTxt h4 {
    font-size: 26px;
}

.bannerBoxTxt p {
    font-size: 14px;
    margin-bottom: 0;
    line-height: 28px;
}

.bannerTxtLine {
    margin: 40px 0;
}

.bannerTxtLine.hr-sect::before,
.bannerTxtLine.hr-sect::after {
    background: #A5A5A5;
    height: 1.78px;
}

/**********************************************************/
.designSec1,
.serviceSec {
    padding-top: 80px;
    padding-bottom: 80px;
}

.common_heading {
    font-size: 44px;
}

.portfolioAll a {
    color: var(--primary-color) !important;
    background: transparent !important;
    padding: 0;
    border: 0;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    box-shadow: none;
}

.pinkArrow a::after {
    content: "";
    width: 30px;
    height: 14px;
    background-image: url(../../../../media/image/storage/opc/pink-arrow.svg);
    display: inline-block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
}

.btn1 a {
    color: var(--black-color) !important;
    background: transparent !important;
    padding: 0;
    border: 0;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    box-shadow: none;
}

.blackArrow a::after {
    content: "";
    width: 30px;
    height: 14px;
    background-image: url(../../../../media/image/storage/opc/arrow.webp);
    display: inline-block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
}

/*********************************************************/
.fullSec1 {
    background: radial-gradient(circle at center, rgba(99, 62, 255, 0.25), transparent 70%) no-repeat, #0c0c0c;
    padding: 0px 0 0;
    position: relative;
    overflow: hidden;
}

.fullSec1Top {
    padding-top: 80px;
}

.home3Boxes {
    padding: 50px 15px;
}

.home3Boxes:hover {
    background: var(--primary-color);
}

.home3Boxes h4 {
    font-size: 30px;
    color: #fff;
    margin-bottom: 0;
    position: relative;
}

.home3Boxes::before {
    content: "";
    max-width: 50%;
    height: 100%;
    border-bottom: 4px solid #fff;
    opacity: 0;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.home3Boxes:hover::before {
    opacity: 1;
}

.home3Boxes p {
    color: #fff;
    margin-bottom: 0;
}

.home3BoxSec {
    border-top: 2px solid #4E4E4E;
}

.verticalLines {
    width: 100%;
}

.verticalLines * {
    height: 100%;
}

.verticalLinesSides {
    width: 100%;
    height: 100%;
}

.verticalLinesSides::before {
    content: "";
    width: 100%;
    height: 100vh;
    display: block;
    position: absolute;
    border-left: 1px solid #4E4E4E;
    border-right: 1px solid #4E4E4E;
    z-index: 0;
    cursor: none;
    pointer-events: none;
}

/**********************************************/
.workBox {
    margin-bottom: 30px;
}

.workBox>div {
    display: flex;
    gap: 10px;
    align-items: center;
}

.workImg {
    max-width: 125px !important;
    width: 100%;
}

.workImg img {
    width: 100%;
}

.workTxt h4 {
    font-size: 26px;
    margin-bottom: 5px;
}

.workTxt p {
    margin-bottom: 0;
}

.workRgtBox {
    max-width: 100%;
    box-shadow: 7px 2px 27px 3px #0000001F;
    background: #FCFDFD;
    border-radius: 9px;
    overflow: hidden;
}

.workRgtBox img {
    height: 160px;
    object-fit: cover;
    filter: grayscale(1);
}

.workRgtTxt {
    padding: 15px;
}

.workRgtTxt h4 {
    font-size: 16px;
}

.workRtStr {
    position: relative;
}

.workRtStr p {
    color: var(--primary-color);
    margin-bottom: 10px !important;
    font-weight: 500;
}

.workRgtTxt p {
    margin-bottom: 0;
}

.workRtStr p::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    background: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23EF4352' viewBox='0 0 16 16'> <path d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/> </svg> ") no-repeat center / contain;
}

.servicePriceBox {
    max-width: 100%;
    width: 100%;
    box-shadow: 7px 2px 27px 3px #0000000D;
    padding: 20px;
    border-radius: 9px;
    margin-left: -110px;
    margin-top: 125px;
    background: #fff;
}

.workLeft {
    margin-left: 80px;
}

ul.servicePriceList {
    padding: 0;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 15px;
}

ul.servicePriceList li {
    max-width: 70%;
    width: 100%;
    list-style: none;
    margin-bottom: 0;
}

ul.servicePriceList li:nth-child(even) {
    text-align: end;
    max-width: 30%;
    width: 100%;
}

ul.servicePriceList li.listHead {
    font-size: 20px;
    font-weight: 600;
}

ul.servicePriceList li.rightTickService {
    color: #14A800;
}

ul.servicePriceList li.rightTickService svg {
    width: 22px;
    height: 22px;
}

.workRgtBtn a {
    width: 100%;
    border-radius: 30px;
    margin-top: 20px;
    background: #000 !important;
    border: 0;
    color: #fff !important;
    padding: 15px 15px;
    font-size: 18px;
    font-weight: 100;
}

.workRgtClickImg {
    margin-right: -20px;
}

.supportBox {
    padding: 30px;
    border: 1px solid #000;
    border-radius: 16px;
}

.supportBox:hover {
    background: var(--primary-color);
}

.supportBox:hover img {
    filter: invert(1);
}

.supportBox:hover h4 {
    color: #fff;
}

.supportBox img {
    max-width: 80px;
    height: 80px;
    object-fit: scale-down;
    margin-bottom: 26px;
}

.supportBox h4 {
    font-size: 24px;
    margin-bottom: 0;
}

.supportBoxRow {
    margin-top: 50px;
}

.supportBoxRow>.col {
    padding: 0;
}

.supportRgtImg {
    text-align: center;
}

.supportRgtImg img {
    max-width: 400px;
}

/* .bottomCTA1 > div, .bottomCTA1 .container, .bottomCTA1 .container > div, .bottomCTA1 .container .row, .bottomCTA1 .container .row .col[data-area-id="col-1"]{
    position: static !important;
    min-height: 200px;
} */
.bottomCTA1 {
     /* min-height: 200px; */
    padding-top: 80px;
    padding-bottom: 80px;
    background: var(--primary-color);
}

.bottomCTA1 h3 {
    margin-bottom: 0;
    color: #fff;
}
.bottomCTA1::before{
    content:"";
    position: absolute;
    right: 0;
    top: 0;
    background: #303C4A;
    max-width: 45%;
    width: 100%;
    height: 100%;
}
.cta1Arrow {
    max-width: 100px !important;
    width: 100%;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
header {
    border-bottom: 0.6px solid #252525;
}

header .navbar #shop-nav {
    max-width: 90%;
    width: 100%;
}

header .navbar #shop-nav #search {
    max-width: 60%;
    width: 100%;
}

header .navbar #shop-nav #search .form-icon .input-group {
    justify-content: space-between;
}

header .navbar #shop-nav #search .form-icon .input-group .twitter-typeahead {
    width: 100%;
}

header .navbar #shop-nav #search .form-icon .input-group .twitter-typeahead input {
    border-radius: 30px;
    background: #C3C3C34F !important;
    border: 0.7px solid #252525;
    height: 50px;
    color: #252525;
    padding: 10px 55px 10px 25px;
}

header .navbar #shop-nav #search .form-icon .input-group .twitter-typeahead input::placeholder {
    color: #252525;
}

header .navbar #shop-nav #search .form-icon .input-group .input-group-append button.btn {
    background: transparent;
    border: 0;
    color: #000;
    font-size: 18px;
    position: absolute;
    right: 5px;
    border-radius: 30px;
}

footer#footer {
    background: #2F2F2F;
}

#footer a:not(.btn),
.footnote-vat,
#footer .productlist-filter-headline,
#footer .newsletter-footer-heading,
#footer .btn-outline-primary {
    color: #fff;
}

#footer a:not(.btn):hover {
    color: var(--primary-color);
}

#copyright {
    background: var(--primary-color) !important;
}

.bannerLft {
    position: absolute !important;
    max-width: 50%;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
}

.bannerLft .row {
    margin: 0;
}

.bannerLft .row .col {
    padding: 0;
    max-width: 300px;
    width: 100%;
}

.bannerLft img {
    width: 100%;
    height: 300px;
    max-height: 333px;
    object-fit: cover;
}

.bannerLft>div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* justify-content: right; */
    max-width: 1000px;
    width: 100%;
}

.bannerSec {
    height: calc(300px * 3);
    max-height: calc(333px * 3);
}

.bannerSec>div,
.bannerLftTxt,
.bannerLftTxt>div,
.bannerLftTxt .row,
.bannerLftTxt .row .col {
    height: 100%;
}

.bannerLftImg {
    margin: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: 300px;
    max-height: 333px;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

.bannerInnerContainer,
.bannerInnerContainer>div {
    position: static !important;
}

.aboutus-footer {
    border: 0.5px solid #FFFFFF80;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
}

.location-footer {
    border: 0.5px solid #FFFFFF80;
    border-radius: 10px 10px 0 0;
    padding: 25px;
}

.socialmedia-footer {
    border: 0.5px solid #FFFFFF80;
    border-radius: 0 0 10px 10px;
    padding: 25px;
    border-top: 0;
}

.box-linkgroup {
    border: 0.5px solid #FFFFFF80;
    border-radius: 10px 10px;
    padding: 25px;
    height: 100%;
}

footer .box-normal {
    margin-bottom: 0rem;
}

.aboutus-footer h3,
.inquiry-now h3,
.location-footer h3,
.socialmedia-footer h3,
.box-linkgroup .productlist-filter-headline {
    font-size: 20px !important;
    color: #fff !important;
}

.aboutus-footer p,
.inquiry-now p {
    font-size: 16px;
    color: #fff;
}

.inquiry-now a {
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    background: var(--primary-color);
    color: #fff !important;
    padding: 20px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 500;
}

.aboutus-footer p:last-child,
.inquiry-now p:last-child {
    margin-bottom: 0;
}

.location-footer ul {
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
}

.location-footer ul li,
.location-footer ul li a {
    color: #fff;
}

.socialmedia-footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    column-gap: 20px;
}

.socialmedia-footer ul li {
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    margin-bottom: 0 !important;
    color: #000;
}

@media (min-width: 992px) {
    header .navbar-brand img {
        height: 80px;
    }

    nav.navbar {
        height: calc(80px + 1.2rem);
        align-items: center !important;
    }
}