/*
Theme Name:   	Storefront Child Theme
Theme URI:    	https://github.com/stuartduff/storefront-child-theme
Author:       	Stuart Duff
Author URI:     http://stuartduff.com
Template:     	storefront
Description:  	This is a blank child theme for WooThemes StoreFront theme
Version:      	1.48
License:      	GNU General Public License v2 or later
License URI:  	http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  	storefront
Tags:         	black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Storefront is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.
Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
FontAwesome License: SIL Open Font License - http://scripts.sil.org/OFL
Images License: GNU General Public License v2 or later
*/
/*
 * Add your own custom css below this text.
 */

/* Site Header Start */

@font-face {
    font-family: 'star';
    src: url(woocommerce/assets/fonts/star.eot?#iefix) format("embedded-opentype"), url(woocommerce/assets/fonts/star.woff) format("woff"), url(woocommerce/assets/fonts/star.ttf) format("truetype"), url(woocommerce/assets/fonts/star.svg#star) format("svg");
    font-weight: normal;
    font-style: normal;
}


@media (min-width: 768px) {
    .col-full {
        max-width: 70em;
    }
}


.site-header {
    background-color: #000000;
    border: none;
}

.vip-icon {
    width: 20px;
    height: 20px;
    margin-left: 5px;
    vertical-align: middle;
}

.storefront-breadcrumb {
    margin-bottom: 10px;
}

.woocommerce-breadcrumb {
    font-size: 18px;
    color: #03222a
}

.woocommerce-breadcrumb a {
    text-decoration: none;
    color: #03222a;
}

.woocommerce-breadcrumb .breadcrumb-separator::after {
    color: #03222a;
    opacity: 1;
}

.woocommerce-breadcrumb a:first-of-type::before {
    content: '';
}

.site-header .page-title {
    text-align: center;
    padding: 45px;
    margin: -15px 0 0 0;
    color: #fff;
    font-weight: 400;
}

.woocommerce-shop .woocommerce-products-header {
    display: none;
}

.primary-navigation {
    display: block;
}

.main-navigation ul.menu ul li:hover a,
.main-navigation ul.nav-menu ul li:hover a {
    color: #62d9f6;
}

body.logged-in .secondary-navigation ul>li:first-child {
    display: none;
}

body.logged-in.vip-customer .secondary-navigation ul.menu>li.logout>a::after {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(./images/premium.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    margin-left: 10px;
    margin-bottom: -3px;
}

@media (min-width: 768px) {
    .storefront-primary-navigation {
        margin-bottom: 15px;
    }

    .storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation {
        margin-right: 0;
    }

    .main-navigation ul.menu>li>a,
    .secondary-navigation ul.menu>li>a,
    .row1 ul.menu li a {
        padding: 0.5em 1.5em;
        text-transform: uppercase;
        font-weight: lighter;
        border-radius: 10em;
    }

    .main-navigation ul.menu>li:hover>a,
    .main-navigation ul.menu>li>a:focus,
    .secondary-navigation ul.menu>li:hover>a,
    .secondary-navigation ul.menu>li>a:focus,
    .row1 ul.menu li a:hover,
    .row1 ul.menu li a:focus {
        color: #fecb29 !important;
        background-color: rgba(255, 255, 255, 0.1);
        outline: none;
    }

    .main-navigation ul.menu>li.menu-item-has-children>a::after {
        content: '';
        margin: 0;
    }

    .site-header ul.menu li.current-menu-item > a {
        color: #fecb29;
    }

    .main-navigation ul.menu ul.sub-menu {
        background: #fcfcfc;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-top: -5px;
    }

    .main-navigation ul.menu ul.sub-menu li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }

    .main-navigation ul.menu ul.sub-menu li:last-child {
        border-bottom: none;
    }

    .main-navigation ul.menu ul.sub-menu li a {
        background: #fcfcfc;
        color: #03222a;
    }

    .main-navigation ul.menu ul.sub-menu li:hover a {
        background: #ececec;
    }

    /* Cart */
    .site-header-cart .cart-contents {
        padding: 0.5em 0;
    }

    .site-header-cart .cart-contents .amount {
        margin-right: 1.2rem;
    }
}

/* Site Header End */


/* Slick Blog Slider Start */

section#slick-blog-slider {
    margin: 0 2em;
    padding: 5em 0 0 0;
}

section#slick-blog-slider .slider-title {
    margin: 0 80px 2em;
    font-size: 2.3rem;
    font-weight: 100;
    color: #02222a;
    text-align: center;
    text-transform: uppercase;
}

.blog-slider.slick-dotted.slick-slider {
    margin-bottom: 60px;
}


.blog-slider .slick-arrow {
    background: none;
}

.blog-slider .slick-arrow img {
    background: #62d9f6;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 5px;
    padding: 15px !important;
}

.blog-slider .slick-prev {
    left: 0;
}

.blog-slider .slick-next {
    right: 0;
}

.blog-slider .slick-list {
    margin: 0 80px;
    padding: 0 8px;
}

.blog-slider .slick-dots button:before {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.2);
}

.blog-slider .slick-dots li.slick-active button:before {
    font-size: 15px;
    color: #62d9f6;
}

.blog-slider .slick-next img {
    margin-left: 15px;
}

.blog-slider .slick-dots {
    bottom: -60px;
}

/* Slick Blog Slider End */

/* Shop Page Start */
.woocommerce-ordering {
    float: right;
}

.woocommerce-ordering .orderby {
    padding: 7px 20px 7px 12px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAALVBMVEX///8AAAAPDw/IyMh0dHTLy8twcHD19fUNDQ1BQUE9PT2Xl5dCQkLQ0NDT09PaZnSUAAABy0lEQVR4nO3PCULCQBAFUQI4qKj3Py4RESGQdXqNVQfo32+zISIiIiIiIiIiIiIiIiIiIiIiIiIiIiL6Hx2OPrvHg+y9w3uzl704rdJ8iEpaR+MhKe3sm6Dk7HCQlPOsnOTiMJeUy6yU5OowlpTrrIzkxmEqKTezEpI7h6Gk3M3WSzoOM0npzNZKHhxGkq6jWvK5fbhoIXl0NNuvupM7D8kzx0vtUQeJisNBouQwl6g5jCWKDlOJqsNQouwwk6g7jCQGDhOJicNAYuRQl5g5lCWGDlWJqUNRYuxQk5g7lCQODhWJi0NB4uQQl7g5hCV7P4eoxNUhKHF2iEncHUKSAA4RSQiHgCSIo1oSxlEpCeSokoRyVEiCORZLwjkWSgI6FklCOhZIgjpmS8I6ZkoCO2ZJQjtmSII7JkvCOyZKEjgmSVI4JkiSOEYlaRwjkkSOQUkqx4AkmaNXks7RI0noeC7J6JgmyeCYIsnhGJdkcYxJ8jiGJZkcQ5Jcjn5JNkefJJ+jlbyuw/FMst15/7SsriSroyvJ67iXZHbcSnI7/iTZHb+S/I4fyRoc35J1OFrJShxERERERERERERERERERERERERERERERKqdAEAvD+R9PSvsAAAAAElFTkSuQmCC");
    background-repeat: no-repeat;
    background-position: right 0.7rem top 50%;
    background-size: 0.65rem auto;
    width: 90px;
}

.woocommerce-ordering .orderby:focus {
    outline: none;
}

.woocommerce-result-count {
    padding: 10px;
}

.woocommerce-loop-product__title {
    text-align: center;
    font-weight: bold;
}

/* Shop Page End */

/* Single Product Page Start */
.woocommerce div.product h1.product_title {
    font-size: 32px;
    margin-bottom: 10px;
}

.single-product div.product p.price {
    margin: 0 0 10px 0;
}

.single-product div.product .woocommerce-product-rating {
    margin-top: 0;
    margin-bottom: 30px;
}

.single-product div.product .product_meta {
    border-top: none;
    margin-bottom: 30px;
}

.single-product div.product table.variations .button-wrapper {
    margin-top: 10px;
}

.single-product div.product table.variations .button-wrapper::after {
    content: '';
    clear: both;
}

.single-product div.product table.variations .button-wrapper .variation-total-price {
    padding: 20px 0;
    font-size: 25px;
}

.woocommerce div.product p.price .newClassName {
    color: #3fb5d9;
}

.woocommerce div.product p.price .newClassName.vip-price {
    color: #f52856;
}

.single-product div.product .product_meta a {
    text-decoration: none;
    font-weight: normal;
}
/* Single Product Page End */


/* Wishlist */
.jvm_add_to_wishlist {
    position: absolute;
    padding: 5px;
    font-size: 25px;
    width: 45px!important;
    height: 45px;
    border-radius: 50%!important;
    top: 70px!important;
    left: 15px!important;
    opacity: 1!important;
    margin: 0!important;
    background: #eeeeee!important;
    color: #333333!important;
    text-align: center;
}
.jvm_add_to_wishlist:focus {
    outline: none;
}


/* Blog Page */
.sidebar-blog {
    width: 300px;
    height: 300px;
    float: right;
}

.content-blog {
    width: calc(100% - 330px);
    float: right;
    margin-right: 30px;
}

.post-meta-separator {
    width: 8px;
    height: 8px;
    display: inline-block;
    background: rgba(0,0,0,0.2);
    transform: skew(-20deg, 0deg);
    margin: 0 5px;
}

a.post-category {
    text-transform: uppercase;
    color: #fecb29;
}

a.post-category:hover {
    color: #e2b626;
}

.post .entry-title {
    margin-bottom: 10px;
    margin-top: 10px;
    line-height: 1em;
}

.post .entry-title a {
    color: #000000;
    font-size: 32px;
    font-weight: bold;
    text-transform: uppercase;
}

.hentry .entry-header {
    margin-bottom: 0;
    border-bottom: none;
}

.hentry .wp-post-image {
    margin-top: 3em;
    margin-bottom: 3em;
}

.post .entry-content::after {
    clear: both;
    content: '';
}

.post .entry-content .entry-content-text {
    color: #464646;
    font-weight: bold;
}

.post .entry-content .read_more {
    margin: 10px 0;
}

.post .entry-content .read_more a {
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    padding: 10px 30px;
    background: #f9b639;
    transform: skew(-15deg, 0);
    color: #ffffff;
    display: inline-block;
}



/* ---------------------------- Customize CSS Start ------------------------------- */
@font-face {
    font-family: 'HurmeGeometricSans3';
    src: url('fonts/HurmeGeometricSans3-Regular.woff2') format('woff2'),
        url('fonts/HurmeGeometricSans3-Regular.woff') format('woff'),
        url('fonts/HurmeGeometricSans3-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: 'HurmeGeometricSans3', sans-serif;
}

body.home .site-content .col-full {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

/* Adjust the font family, size, and color for all heading tags */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "", ;
    ;
    color: #333333;
}

/* Add margin or padding to create spacing around the headings */
h1 {
    margin-bottom: 20px;
    font-size: px;
    color: ;
}

h2 {
    margin-bottom: 15px;
}

h3 {
    margin-bottom: 10px;
}

h4 {
    margin-bottom: 10px;
}

h5 {
    margin-bottom: 5px;
}

h6 {
    margin-bottom: 5px;
}

/* Optionally, add additional styles for specific heading levels */
h1 {
    font-weight: bold;
}

h2 {
    font-weight: bold;
}

h3 {
    font-style: italic;
}

a {
    text-decoration: none;
}

a:focus {
    outline: none;
}

/* Adjust the styles based on your design preferences */

.site-branding {
    float: left;
}

.main-navigation {
    float: right;
}

/* In your child theme's style.css */

.woocommerce-active .site-header .site-header-cart .cart-contents .count {
    display: none;
    /* Hide quantity */
}

.woocommerce-active .site-header .site-header-cart .cart-contents {
    flex-direction: row-reverse;
    /* Swap order of cart symbol and amount */
}

.woocommerce-active .site-header .site-header-cart .cart-contents::after {
    content: "\f07a";
    margin-right: 5px;
}

.site-header-cart:hover > li > a {
    color: #f1c228;
}

a.cart-contents, 
.site-header-cart .widget_shopping_cart a, 
.site-header .product_list_widget li .quantity, 
.site-header-cart .widget_shopping_cart .total {
    color: #fff;
}


@media (min-width: 768px) {
    .woocommerce-active .site-header .site-header-cart {
        width: 21.7391304348%;
        float: right;
        margin-right: 0;
        margin-bottom: 0;
    }

    .woocommerce-active .site-header .site-header-cart .cart-contents {
        display: flex;
        justify-content: flex-start;
        /* Adjusts the space between elements */
    }
}

.woocommerce-active .content-area {
    width: 100%;
    /* Use the entire width */
}

/*
vanbo/wc-css-make-storefront-product-tabs-horizontal
credit: https://gist.github.com/vanbo/c05e9b9512bd53e3680c82e1c6e4e6a3
*/
.product .woocommerce-tabs ul.tabs {
    width: 100%;
    float: none;
    margin-right: 5.8823529412%;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    list-style: none;
    padding: 0;
    margin: 0 0 2.618em;
    overflow: hidden;
    position: relative;
    border: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    position: absolute;
    content: ' ';
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    display: inline-block;
    position: relative;
    z-index: 0;
    padding: 0 1em;
    border: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
    content: ' ';
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom: 2px solid #62d9f6;
}

.woocommerce-tabs ul.tabs li.active::after {
    content: '';
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: .5em 0;
    color: #515151;
    text-decoration: none;
    font-size: 18px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: #62d9f6;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #62d9f6;
}

.woocommerce .wc-tabs li a:focus,
.ui-state-focus:focus {
    outline: none !important;
}

.ui-tabs-anchor:active,
.ui-tabs-anchor:focus {
    outline: none;
}

/* Pagination */
nav.woocommerce-pagination {
    float: none;
    margin-top: 2.6em;
    margin-bottom: 2.6em;
}

.woocommerce-pagination .page-numbers li .page-numbers {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #d9dddd;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
    font-size: 14px;
}

.woocommerce-pagination .page-numbers li .page-numbers.current {
    background-color: #62d9f6;
}

/* Adjusting the tab content container for full width */
.woocommerce div.product .woocommerce-tabs .panel {
    width: 100%;
    float: none;
}

/* Product Review */
#reviews .commentlist {
    color: #434b4e;
}

#reviews .commentlist li .comment-meta{
    margin-bottom: 10px;
}

#reviews .commentlist li .avatar-container {
    float: left;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 25px;
    margin-right: 15px;
}

#reviews .commentlist li .avatar {
    width: auto;
    margin: 0;
}

#reviews .commentlist li .woocommerce-review__author {
    color: #0c1011;
    margin-top: 5px;
    margin-bottom: 0;
    padding-top: 2px;
}

#reviews .commentlist li p.meta {
    margin: 0;
}

#reviews .commentlist li p.meta time {
    opacity: 0.8;
    float: right;
    margin-top: -20px;
    font-size: 12px;
}

#reviews .commentlist li .comment_container .comment-text {
    width: 100%;
    float: none;
}

#reviews .commentlist li .comment_container .comment-text .description p {
    text-align: justify;
    margin-bottom: 0;
}

#reviews .commentlist li .star-rating {
    font-size: 12px;
}

.woocommerce .star-rating, .woocommerce .star-rating span {
    font-family: star
}

.woocommerce .star-rating::before {
    content: "sssss";
    color: #03222a;
}

.woocommerce .star-rating span::before {
    content: "SSSSS";
    color: #03222a;
}

/* https://stackoverflow.com/questions/14144426/remove-outline-from-active-jquery-ui-tab */
.woocommerce .wc-tabs li a:focus,
.ui-state-focus:focus {
    outline: none !important;
}

.ui-tabs-anchor:active,
.ui-tabs-anchor:focus {
    outline: none;
}

.post .cat-links {
    display: none;
}

.site-header .col-full {
    display: flex;
    justify-content: space-between;
}

.site-header .site-branding {
    flex: 1;
}

.site-header .main-navigation {
    order: -1;

}

#top-bar {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: relative;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#top-bar .marketing-text {
    margin: 0;
    opacity: 0;
    letter-spacing: 1px;
    display: inline;
    height: 0;
}


/* FIRST SECTION HOME PAGE */
.carousel-front-wrapper {
    margin-top: -4.24em;
    background-color: #000000;
    position: relative;
}

.carousel-front-wrapper .carousel-front-wrapper-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.carousel-front-wrapper .carousel-front-wrapper-bg .cfw-bg {
    width: 50%;
    height: 100%;
    transition: all 0.4s ease-in-out 0.2s;
    position: relative;
}

.carousel-front-wrapper .carousel-front-wrapper-bg .cfw-bg.left {
    float: left;
    z-index: 11;
}

.carousel-front-wrapper .carousel-front-wrapper-bg .cfw-bg.right {
    float: right;    
    width: 70%;
    background-color: #f9b639;
    transform: skew(-10deg);
    margin-right: -20%;
    z-index: 12;
}

.carousel-front-wrapper.active .carousel-front-wrapper-bg .cfw-bg.left {
    transform: translate(100%, 0);
}

.carousel-front-wrapper.active .carousel-front-wrapper-bg .cfw-bg.right {
    transform: translate(-100%, 0) skew(-10deg);
}

.carousel-front-wrapper .loading {
    width: 100%;
    height: 100px;
    padding: 20px;
    background-image: url(./images/loader.gif);
    background-size: auto 50%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 20;
    background-color: #000;
}
.carousel-front {
    position: relative;
    overflow: hidden;
    padding: 2em 0 3em 0;
    z-index: 20;
}
.carousel-front-metas {
    float: left;
    width: 50%;
    padding: 7em 0 0 0;
    transform: skew(-10deg);
    margin-right: 5%;
}
.carousel-front-metas .carousel-front-meta-contents .slick-list .slick-track {
    display: flex;
    align-items: center;
    gap: 2em;
}

.carousel-front-metas .carousel-front-meta-content.slick-slide {
    margin: 0;
    transform: skew(10deg);
}

.carousel-front-metas .carousel-front-meta-content .meta-title {
    font-size: 55px;
    color: #ffffff;
}

.carousel-front-metas .carousel-front-meta-content .meta-description {
    font-size: 22px;
    color: #e6e9ea;
    letter-spacing: 1px;
    font-weight: 200;
}

.carousel-front-metas .carousel-front-meta-link {
    transform: skew(10deg);
    margin-left: 3em;
}
.carousel-front-metas .carousel-front-meta-link a.button {
    background-color: #fecb29;
    text-transform: uppercase;
    color: #000000;
    transform: skew(-10deg);
    margin-left: 10px;
}
.carousel-front-metas .carousel-front-meta-link a.button:hover {
    background-color: #f1c228;
}

.carousel-front-metas .carousel-front-meta-content .meta-title, 
.carousel-front-metas .carousel-front-meta-content .meta-description,
.carousel-front-metas .carousel-front-meta-link a.button {
    transition: all 0.3s ease-in-out 0.2s;
}

.carousel-front-wrapper.active .carousel-front-metas .carousel-front-meta-content .meta-title, 
.carousel-front-wrapper.active .carousel-front-metas .carousel-front-meta-content .meta-description {
    color: #000;
}

.carousel-front-wrapper.active .carousel-front-metas .carousel-front-meta-link a.button {
    background-color: #000000;
    color: #fecb29;
}

.carousel-front-imgs-wrapper {
    float: right;
    width: 45%;
    position: relative;
    padding: 30px 10px 0px 10px;
}

.carousel-front-imgs-wrapper .carousel-front-imgs-wrapper-bg {
    position: absolute;
    top: 40px;
    right: 0;
    width: 120px;
    height: 120px;
    background: url(./images/star-square.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.carousel-front-imgs-wrapper .slick-arrow {
    padding: 15px;
    border-radius: 5px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fbfcfc;
    color: #000000;
    position: absolute;
    cursor: pointer;
}

.carousel-front-imgs-wrapper .slick-arrow.slick-disabled {
    background-color: rgba(255, 255, 255, 0.1);
    color: #5e6f73;
}

.carousel-front-imgs-wrapper .slick-arrow {
    z-index: 5;
}

.carousel-front-imgs-wrapper .slick-arrow:not(.slick-disabled):hover {
    background-color: #ececec;
}

.carousel-front-imgs-wrapper .carousel-front-arrow-prev.slick-arrow {
    top: calc(50% + 30px);
    left: 0;
}

.carousel-front-imgs-wrapper .carousel-front-arrow-next.slick-arrow {
    top: calc(50% + 30px);
    right: 0;
}

.carousel-front-imgs {
    position: relative;
    z-index: 1;
}

.carousel-front-imgs .slick-track {
    display: flex;
    align-items: center;
}

.carousel-front-imgs .carousel-front-img {
    height: 100%;
    position: relative;
    z-index: 1;
    text-align: center;
}

.carousel-front-imgs .carousel-front-img img {
    margin: auto;
    width: 400px;
}

.carousel-front-imgs .carousel-front-img .out-of-stock-label {
    position: absolute;
    top: 40%;
    left: 10%;
    width: 80%;
    border-radius: 0;
    opacity: 0.7;
    font-size: 40px;
    line-height: 50px;
    text-transform: uppercase;
}

.carousel-front::after {
    clear: both;
    content: '';
}

@media (min-width: 768px) {
    .carousel-front {
        max-width: 70em;
        margin: auto;
        
    }
}

@media (max-width: 66.4989378333em) {
    .carousel-front {
        margin-left: 2.617924em;
        margin-right: 2.617924em;
    }
}



/* SECOND SECTION HOME PAGE */
#info-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
    /* Makes all boxes same height */
    background-color: #fff;
    padding: 50px 0;
    position: relative;
}

#info-section::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, #5dd8f7, #3fb5d9);
    background-size: 200% 100%;
    animation: gradient 3s linear infinite;
    clip-path: polygon(0 100%, 100% 0, 100% 75%, 0 25%);
}

#info-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, #5dd8f7, #3fb5d9);
    background-size: 200% 100%;
    animation: gradient 3s linear infinite;
    clip-path: polygon(0 0, 100% 100%, 100% 75%, 0 25%);
}

.info-box-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
    margin: 0 40px;
    /* Add negative margins to both ends */
}

.info-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #5dd8f7;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: calc(25% - 20px);
    /* Adjust the width of info boxes (4 boxes per row) */
    margin: 10px;
    /* Add margin between info boxes */
    text-align: center;
    transition: box-shadow 0.3s ease-in-out;
}

.info-box .info-icon {
    margin-bottom: 10px;
    /* Add margin between the image and text */
}

.info-box .info-text {
    padding-top: 10px;
    /* Adjust the padding between image and text */
}

.info-icon img {
    width: 70px;
    height: 70px;
    transition: transform 0.3s ease-in-out;
}

.info-icon:hover img {
    transform: translateY(-10px);
}

@media (max-width: 768px) {
    #info-section {
        flex-direction: column;
    }

    .info-box {
        width: calc(50% - 20px);
        /* Adjust the width of info boxes (2 boxes per row) */
        margin: 10px;
        /* Add margin between info boxes */
    }

    @media (max-width: 480px) {
        .info-box {
            width: 90%;
            /* width adjusted to give some side margins on mobile screens */
            margin: 10px auto;
            /* centers the box and adds vertical margin */
        }
    }
}

/* THIRD SECTION HOME PAGE */

#top-categories {
    color: #333333;
    margin-top: 30px;
    text-align: center;
}

/* FOURTH SECTION HOME PAGE */

#content-section {
    background-color: #fff;
    color: #000;
    padding: 50px 0;
    position: relative;
}

#content-section::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, #5dd8f7, #3fb5d9);
    background-size: 200% 100%;
    animation: gradient 3s linear infinite;
    clip-path: polygon(0 100%, 100% 0, 100% 75%, 0 25%);
}

#content-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, #5dd8f7, #3fb5d9);
    background-size: 200% 100%;
    animation: gradient 3s linear infinite;
    clip-path: polygon(0 0, 100% 100%, 100% 75%, 0 25%);
}

#content-section h2 {
    font-size: 2.5em;
    color: #5dd8f7;
    margin-bottom: 50px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

#content-section .container {
    display: flex;
    justify-content: center;
}

#content-section .container>* {
    flex: 1;
    margin: 0 20px;
    max-width: 900px;
    width: 100%;
    box-sizing: border-box;
}

#content-section article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px;
    position: relative;
    border-bottom: 1px solid transparent;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#content-section article:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.image-right {
    flex-direction: row-reverse;
}

#content-section figure {
    flex: 1;
    margin-right: 20px;
}

#content-section figure img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}

#content-section figure img:hover {
    transform: scale(1.05);
}

#content-section div {
    flex: 2;
    margin-left: 20px;
    text-align: left;
}

#content-section h3 {
    color: #5dd8f7;
    margin-bottom: 15px;
}

#content-section p {
    line-height: 1.6;
    color: #333;
    font-size: 1.1em;
}

#content-section a {
    color: #5dd8f7;
    transition: color 0.3s ease-in-out;
}

#content-section a:hover {
    color: #3fb5d9;
}

@keyframes gradient {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@media (max-width: 768px) {
    #content-section article {
        flex-direction: column;
        padding: 25px;
        /* Added padding to the top and bottom sides */
    }

    #content-section figure,
    #content-section div {
        margin: 10px 0;
    }

    #content-section .container>* {
        margin: 10px 0;
    }
}

/**/
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    transition: all 0.2s ease-in-out;
}

.out-of-stock-label {
    padding: 8px 10px;
    border-radius: 10px;
    background: #ff7600;
    color: #fff;
    opacity: 0.8;
    font-size: 15px;
    line-height: 16px;
    letter-spacing: 1px;
    display: inline-block;
}

.woocommerce ul.products li.product .out-of-stock-label {
    position: absolute;
    top: 12px;
    left: 5%;
}

/*HEADER MENU COLORS*/
.main-navigation ul li a,
.site-title a,
ul.menu li a,
.site-branding h1 a,
button.menu-toggle,
button.menu-toggle:hover,
.handheld-navigation .dropdown-toggle {
    color: #ffffff;
}

#menu-secondary a {
    color: white;
}

/* Product Columns Centering and Alignment */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;
}

/* Button Over Image on Hover */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    width: 90%;
    margin: auto;
    border-radius: 10px;
    margin-top: -65px;
    margin-bottom: 20px;
    padding: 7px 10px;
    background: rgba(248,186,90, 0.9);
    color: white;
}

.woocommerce ul.products li.product:hover .button,
.woocommerce-page ul.products li.product:hover .button {
    opacity: 1;
}

ul.products li.product img {
    margin: auto;
}

/* Related Products in Single Product Page */
.products.up-sells.upsells, .products.related {
    margin-top: 2.6em;
}

.products.related .title {
    text-align: center;
    margin-bottom: 2.6em;
}

/* LOGO TEXT NEXT TO LOGO ON HOVER */
.site-branding {
    display: flex;
    align-items: center;
    position: relative;
}

.site-header .site-branding img {
    background-color: #000000;
    z-index: 100;
    position: relative;
}

.site-branding .custom-logo-link {
    margin-right: 15px;
}

.hover-text {
    opacity: 0;
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
    margin: 0;
    position: absolute;
    top: 33px;
    left: 55px;
    color: #3fb5d9;
    z-index: 1;
}

.site-branding:hover .hover-text {
    opacity: 1;
    left: 240px;
}

/* VARIATION SWATCHES */
.woocommerce-variable-product select {
    display: none;
}

.size-button {
    display: inline-block;
    padding: 20px 10px;
    margin-right: 10px;
    border-radius: 5px;
    min-width: 65px;
    background-color: #eeeeee;
    color: #000000;
}

.size-button:hover {
    background-color: #d5d5d5;
}

.size-button.size-selected {
    background-color: #fecb29;
    color: #ffffff;
}

.size-button.size-added {
    background-color: #ffffff;
    /* normal state color */
    color: #000000;
    /* normal state text color */
}

.size-button:focus {
    outline: none;
}

a.reset_variations {
    margin-top: 1em;
    margin-left: 0;
    color: #000;
    display: none;
}

a.reset_variations:hover {
    font-weight: bold;
    text-decoration: underline;
}


/* PRODUCT PAGE */
/* Woocommerce Single Product Page layout */

/* Adding background color for body */
body {
    background-color: #FFFFFF;
    /* White */
}

.wc-block-grid__product-onsale, .onsale {
    margin-left: 20px;
    margin-bottom: 5px;
}

/* Product Image */
.woocommerce div.product div.images {
    width: 50%;
    float: left;
    margin-right: 0;
    border-radius: 15px;
    /* Rounded corners */
}

/* Product Description */
.woocommerce div.product div.summary {
    width: 50%;
    float: right;
    color: #000000;
    /* Black */
    background-color: #FFFFFF;
    /* White */
    padding: 20px;
    border-radius: 15px;
    /* Rounded corners */

}

/* Product Title */
.woocommerce div.product h1.product_title {
    color: #000000;
    /* Black */
}

/* Product Price */
.woocommerce div.product p.price {
    color: #000000;
    /* Black */
}

/* Add to Cart */

.quantity .qty {
    padding: 7px;
    box-shadow: 0 0 3px rgba(0,0,0,0.1) inset;
    border-radius: 5px;
}

.woocommerce div.product .cart button.single_add_to_cart_button {
    border: none;
    padding: 7px 30px;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    opacity: 1!important;
    font-weight: 400;
    margin-right: 8px;
}

.woocommerce div.product .cart button.single_add_to_cart_button {
    background-color: #000000;
    color: #fff;
}

.woocommerce div.product .cart button.single_add_to_cart_button:hover {
    background-color: #5B9CC8;
}

.woocommerce div.product .cart button.single_add_to_cart_button.wc-buy-now-btn {
    background-color: #eeeeee;
    color: #333333;
}

.woocommerce div.product .cart button.single_add_to_cart_button.wc-buy-now-btn:hover {
    background-color: #d5d5d5;
}

/*NEW SECTIONS HOME PAGE*/

/* section 2 */
.section2 {
    padding: 6.875rem 0;
}

.section2 .section_container {
    max-width: 1440px;
    margin: 0 auto;
}

.section2 .items_container {
    display: flex;
    gap: 2rem;
    max-width: 1240px;
    margin: 0 auto;
}

.section2 .items_container .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 25%;
    padding: 1.5rem;
    box-shadow: rgba(17, 12, 46, 0.07) 0px 48px 100px 0px;
    text-align: center;
    gap: 1rem;
    border-radius: .75rem;
}

.section2 .items_container .item img {
    width: 4.375rem;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.section2 .items_container .item .info-icon:hover img {
    transform: translateY(-10px);
}

.section2 .items_container .item span {
    font-size: 1.375rem;
    line-height: 1.75rem;
    color: #02222a;
}

.section2 .items_container .item p {
    font-size: 1rem;
    line-height: 1.375rem;
    color: #434B4E;
}

/*section3*/

#top-categories {
    color: #333333;
    margin-top: 30px;
    text-align: center;
}



/* section 3 */
.section3 {
    padding: 0 0 6.875rem 0;
    text-align: center;
}

.section3 h1 {
    font-size: 2.3rem;
    font-weight: 100;
    color: #02222a;
    margin-bottom: 3.75rem;
    text-transform: uppercase;
}

.section3 .section_content {
    display: flex;
    justify-content: center;
    gap: 2rem;
    max-width: 1240px;
    margin: 0 auto;
}

.section3 .section_content article {
    max-height: 29.375rem;
    width: 33.125rem;
    border-radius: 1rem;
    padding: 75px 0;
    position: relative;
}

.section3 .section_content article .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 280px;
    transform: skew(-10deg, 0) translate(20px, 0);
    background-color: #f4f4f4;
    border-radius: 5px;
    z-index: 0;
}

.section3 .section_content article:first-child .bg{
    background-color: #f1c228;
}

.section3 .section_content article .img-container {
    padding: .5rem;
    width: 100%;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

.section3 .section_content article .img-container img {
    height: 330px;
    width: auto;
    margin: auto;
}

.section3 .section_content article .link-container {
    opacity: 0;
    margin-top: -100px;
    margin-bottom: 50px;
    border-radius: 10px;
    transition: opacity 0.3s;
    z-index: 1;
    position: relative;
    clip-path: polygon(0 0px, calc(100% - 38px) 0, 100% 100%, 38px 100%);
}

.section3 .section_content article .link-container a {
    width: 100%;
    background-color: #000000;
    font-size: 1rem;
    cursor: pointer;
    bottom: 5rem;
    color: #fff;
    font-weight: 400;
    padding: 10px;
    display: inline-block;
}

.section3 .section_content article:hover .link-container {
    opacity: 0.8;
}


.section3 .section_content article .name-container p {
    font-size: 1.625rem;
    line-height: 2.125rem;
    color: #434B4E;
    width: 100%;
    text-align: center;
    margin: 0;
    z-index: 1;
    position: relative;
    display: inline-block;
}

.section3 .section_content article .name-container p .cat-name {
    padding: 5px 10px;
    position: relative;
}

.section3 .section_content article .name-container p .cat-name-underline {
    position: absolute;
    left: -150px;
    right: auto;
    bottom: 0;
    height: 2px;
    width: 0%;
    background-color: #f1c228;
    margin: auto;
    content: " ";
    transition: all 0.3s linear;
}

/* section 2-2 */
.section2-2 {
    padding: 5em 0;
    margin: 0 calc(88px + 2em);
    /* Increased padding */
}

.section2-2 .img_container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
}

.section2-2 h1 {
    font-size: 2.3rem;
    font-weight: 100;
    color: #02222a;
    margin: 0 auto 2em auto;
    text-align: center;
    text-transform: uppercase;
}

.section2-2 .img_container .img_item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    position: relative;
    overflow: hidden;
}

.section2-2 .img_container .img_item:nth-child(2n) {
    background: #f9f9f9;
}

.section2-2 .img_container .img_item:nth-child(2n+1) {
    background: #ededed;
}

.section2-2 .img_container .img_item:hover {
    background: #f4f4f4;
}

.section2-2 .img_container .img_item img {
    height: auto;
}

.section2-2 .img_container .img_item a {
    width: 100%;
    border-radius: 5px;
    padding: 10px;
    text-transform: uppercase;
    color: #fff;
    background-color: #000;
    opacity: 0;
    position: absolute;
    bottom: -40px;
    transition: all 0.2s linear;
    text-align: center;
}

.section2-2 .img_container .img_item:hover a {
    opacity: 1;
    bottom: 5px;
}

/* ... [Your existing CSS up to section4] ... */

.section4 {
    padding: 6.875rem 0;
    background-color: #000000;
}

.section4 .section_content {
    max-width: 1366px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.section4 .section_content .line {
    width: 100%;
    height: 1px;
    background-color: #fecb29;
    margin: 2rem 0;
}

.section4 .section_content .article {
    padding: 3.8125rem;
    background: url(./images/star-bg.png);
    background-repeat: no-repeat;
}

.section4 .section_content .article:nth-child(3n+1) {
    background-position: 0% 0%;
    background-size: 110px 110px;
}

.section4 .section_content .article:nth-child(3n+2) {
    background-position: 98% 360px;
    background-size: 110px 110px;
}

.section4 .section_content .article:nth-child(3n) {
    background-position: 30% 150px;
    background-size: 300px 300px;
}

.section4 .section_content .article.reverse {
    flex-direction: row-reverse;
}

.section4 .section_content .article .img_container {
    width: 41rem;
    float: left;
    margin-right: 3em;
    margin-bottom: 2em;
}

.section4 .section_content .article.reverse .img_container {
    float: right;
    margin-left: 3em;
    margin-right: 0;
}

.section4 .section_content .article .img_container img {
    height: auto;
    width: 100%;
}

.section4 .section_content .article .text_container {
    text-align: left;
    align-self: baseline;
    height: 440px;
    overflow: hidden;
    position: relative;
}

.section4 .section_content .article .text_container h1,
.section4 .section_content .article .text_container h2 {
    color: #fecb29;
    font-weight: 600;
    letter-spacing: 1px;
    display: inline-block;
    max-width: 31rem;
}

.section4 .section_content .article .text_container h1 {
    font-size: 1.75rem;
    line-height: 2.625rem;
    margin-bottom: 1.5625rem;
}

.section4 .section_content .article .text_container h2 {
    font-size: 1.5rem;
    margin: 13px 0;
}

.section4 .section_content .article .text_container p {
    color: #d8dcdd;
    font-weight: 200;
    font-size: 1.125rem;
    line-height: 1.8rem;
    margin-bottom: 0;
}

.section4 .section_content .article .text_container p a:focus {
    outline: none;
}

.section4 .section_content article .text_container button {
    color: black;
    background-color: #5dd8f7;
}

.section4 .section_content .article .text_container .accordion_read_more,
.section4 .section_content .article .text_container .accordion_read_less {
    color: white;
    cursor: pointer;
    background-color: #000000;
    text-transform: uppercase;
}

.section4 .section_content .article .text_container .accordion_read_more {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 5px 15px;
    border-radius: 5px;
    border: 1px solid #796113;
}

.section4 .section_content .article.reverse .text_container .accordion_read_more {
    left: 410px;
    right: auto;
}

.section4 .section_content .article .text_container .accordion_read_more:hover,
.section4 .section_content .article .text_container .accordion_read_less:hover {
    color: #aaabac;
}



/* Footer Styles */
footer.site-footer {
    background-color: #000000;
    padding: 3.5rem 0;
    color: #ffffff;
}

.footer_content {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.row1 {
    display: flex;
    justify-content: space-between;
    align-items: end;
    border-bottom: 0.5px solid #fecb29;
    padding-bottom: 2rem;
}

#logo_footer {
    width: 19rem;
}

.row1 ul.menu {
    display: flex;
    list-style-type: none;
    margin: 0;
}

.row1 ul.menu li a {
    text-decoration: none;
    color: #c8d1d3b3;
    /* Adjusted font color */
    font-size: 1rem;
    transition: color 0.3s ease;
    padding: 0.5em 0.8em;
}

.row1 ul.menu li:hover a {
    color: #f1c228;
}

.row1 ul.menu ul.sub-menu {
    display: none;
}

.social_media {
    display: flex;
    gap: 1.35rem;
}

.social_media a img {
    height: 24px;
    transition: opacity 0.3s ease;
}

.social_media a:hover img {
    opacity: 0.8;
}

.row2 {
    display: flex;
    justify-content: space-between;
    padding-top: 2.5rem;
}

.row2 span,
.row2 a {
    color: #c8d1d3b3 !important;
    font-size: 0.875rem;
    transition: color 0.3s ease;
    text-decoration: none;
}

.row2 span:hover,
.row2 a:hover {
    color: #fecb29 !important;
    cursor: pointer;
}

/* ---------------------------- Customize CSS End ------------------------------- */


/* Mobile */

@media (max-width: 768px) {

    button.menu-toggle {
        font-size: 0;
        border: none;
        margin-top: -40px;
    }
    
    button.menu-toggle:focus {
        outline: none;
    }
    
    button.menu-toggle:after, button.menu-toggle:before, button.menu-toggle span:before {
        color: #ffffff;
        background-color: #ffffff;
        width: 25px;
    }

    .site-header .main-navigation {
        width: 80%;
        margin: auto;
        padding: 15px 0;
    }

    button.menu-toggle::before {
        transform: translateY(-6px);
    }

    button.menu-toggle::after {
        transform: translateY(6px);
    }

    .main-navigation ul li a:hover, .main-navigation ul li:hover > a, .site-title a:hover, .site-header ul.menu li.current-menu-item > a {
        color: #f1c228;
    }

    .carousel-front {
        padding-top: 0;
    }

    .carousel-front > * {
        float: none;
        width: 100%;
        padding: 10px;
    }

    .carousel-front-metas .carousel-front-meta-content .meta-title {
        font-size: 40px;
        text-align: center;
        color: #ffffff!important;
    }

    .carousel-front-metas .carousel-front-meta-content .meta-description {
        font-size: 18px;
        text-align: center;
        color: #ffffff!important;
    }

    .carousel-front-meta-link {
        text-align: center;
    }

    .carousel-front-imgs-bg {
        width: 310px;
        left: calc(50% - 155px);
    }

    .section2 .items_container {
        flex-direction: column;
        padding: 0 50px;
    }
    .section2 .items_container .item {
        width: 100%;
    }

    .section3 h1, section#slick-blog-slider .slider-title, .section2-2 h1 {
        font-size: 1.8rem;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .section3 .section_content {
        display: block;
    }

    .section3 .section_content article {
        padding-top: 0;
        width: 80%;
        margin: auto;
    }

    .section3 .section_content article:last-child {
        padding-bottom: 0;
    }

    .section3 .section_content article .bg {
        height: 300px;
    }

    .section3 .section_content article .link-container {
        margin-top: -40px;
    }

    .section4 .section_content .article .text_container {
        height: 600px;
    }

    .section4 .section_content .article .img_container, .section4 .section_content .article.reverse .img_container {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        float: none;
    }

    .section4 .section_content .article .text_container .accordion_read_more, 
    .section4 .section_content .article.reverse .text_container .accordion_read_more {
        bottom: 0px;
        padding: 15px;
        width: 50%;
        left: 25%;
        right: 25%;
        text-align: center;
        border-radius: 5px;
        border: 1px solid #f1c228;
    }

    .blog-slider .slick-list {
        width: 90%;
        margin: auto;
    }

    .overlay-content h3 {
        font-size: 18px!important;
    }

    .blog-slider-box .meta a.meta-cat, .blog-slider-box .meta .meta-date {
        font-size: 12px;
    }

    .blog-slider-wrapper .bs-arrows .slick-arrow {
        width: 40px;
    }

    .blog-slider-wrapper .bs-arrows .slick-arrow.bs-arrow-prev {
        left: -6px;
    }

    .blog-slider-wrapper .bs-arrows .slick-arrow.bs-arrow-next {
        right: 10px;
    }

    .section2-2 {
        margin: 0 30px;
    }

    .footer_content .row1, .footer_content .row2 {
        display: block;
    }

    #logo_footer {
        width: 19rem;
        margin: auto;
    }

    .footer_content .row1 ul.menu {
        display: block;
        float: left;
        margin: 30px 20px;
    }

    .footer_content .row1 ul.menu li, .footer_content .row1 ul.menu li a {
        padding: 10px;
    }

    .footer_content .social_media {
        display: flex;
        gap: 3rem;
        float: right;
        flex-direction: column;
        margin: 60px 30px;
    }

    .footer_content .row2 {
        text-align: center;
    }

    .footer_content .row2 > div {
        margin-top: 15px;
    }

    .woocommerce-tabs {
        width: 100%;
    }

    .sidebar-blog, .content-blog {
        width: 100%;
        height: auto;
        float: none;
    }

    .content-blog {
        margin-top: 60px;
        padding: 0 15px;
    }

}

@media (min-width: 769px) and (max-width: 1030px) {

    .carousel-front-metas {
        padding: 3em;
    }
}

@media (min-width: 769px) and (max-width: 1338px) {
    .section4 .section_content .article .img_container {
        width: 20rem;
    }

    .section4 .section_content .article .text_container h1 {
        display: inline;
    }

    .section4 .section_content .article.reverse .text_container .accordion_read_more {
        left: auto;
        right: 0;
    }
}