/* ===========================================================================
Typo
============================================================================*/

@media(max-width: 767.98px) {
    body {
        font-size: 14px;
    }
    .h1, h1 {
        font-size: 24px;
    }
}

a {
    color: var(--sl-black);
    text-decoration: none;
}


.bold{font-weight: 700 !important;}
.fw-300{font-weight: 300 !important;}

.color-red{color: var(--sl-red) !important;}
.color-gray{color: gray !important;}

.line-through{text-decoration: line-through !important;}
.underlined{text-decoration: underline;}

.fs-20{font-size: 20px !important;}
.fs-13{font-size: 13px !important;}


/* ===========================================================================
Reset / Layout
============================================================================*/
:root {
    --sl-red: #cc9f4e;
    --sl-black: black;
}

body{
  background-color: #fff;
}

img {
    max-width: 100%;
}

iframe{
    max-width: 100%;
}

html[lang="ar"] ul {
    padding-right: 0;
}

html[lang="en"] .flip-en{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
html[lang="ar"] .rotate180-ar{
    transform: rotate(180deg);
}

.overview-buttons .prices .actual-price,
.associatedItem .actual-price, 
.catalog-product-price {
    color: black;
    font-size: 20px;
    font-weight: 700;
}
.product-details-page .product-tabs .nav-link.active::after, 
#pills-mobile-tab .nav-item .nav-link.active::after {
    background: var(--sl-red);
}

@media(min-width: 992px){
    html[lang="en"] .offset-lg-2-opposite-ar {
        margin-left: 16.666667%;
    }
    html[lang="ar"] .offset-lg-2-opposite-ar {
        margin-right: 16.666667%;
    }
}

/* ------ body -------- */
/*body{
    background-color: #f5f5f5;
}*/

/* ----- container ----- */
@media(min-width: 1200px) {
    .container {
        max-width: 1160px;
    }
}

@media(min-width: 1250px) {
    .container {
        max-width: 1200px;
    }
}

@media(min-width: 1350px) {
    .container {
        max-width: 1210px;
    }
}

@media(min-width: 1400px) {
    .container {
        max-width: 1250px;
    }
}

@media(min-width: 1900px) {
    .container {
        max-width: 1440px;
    }
}