body.post-type-archive-dd-products{
    height: 100vh;
    background-image: url("../images/dd-background-no-title.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
body.op-navbar-fixed .page-container{
    padding-top: 0 !important;

}

@font-face {
    font-family: 'Market Deco';
    src: url('https://dapperdoughnut.com/fonts/market_deco-webfont.eot');
    src: url('https://dapperdoughnut.com/fonts/market_deco-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('https://dapperdoughnut.com/fonts/market_deco-webfont.woff2') format('woff2'), /* Super Modern Browsers */
    url('https://dapperdoughnut.com/fonts/market_deco-webfont.woff') format('woff'), /* Modern Browsers */
    url('https://dapperdoughnut.com/fonts/market_deco-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
    url('https://dapperdoughnut.com/fonts/market_deco-webfont.svg#MarketDeco') format('svg'); /* Legacy iOS */
    /* You might consider adding additional formats or modifying the paths based on your needs */
}

/* Now, use the defined font family in your CSS rules */
body {
    font-family: 'Market Deco', sans-serif !important;
}


.dd-products{
    height: 100vh;
    display: flex;
    position: relative;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}

.dd-products-slides {
    max-width: 1400px;
    margin: 0 auto;
}

.dd-products-slides .slick-slide > div {
    margin: 0 8px;
}

.dd-products-slides .slick-list.draggable {
    margin-left: -8px;
    margin-right: -8px;
}

dd-products-title {
    text-align: center;
}

.dd-products-slider {
    margin-top: 60px;
    /*overflow: hidden;*/
}

dd-products-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    /*padding: 0 70px;*/
}

.dd-products-slide-nav > div {
    width: 60px;
    height: 50px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--font-color-gold);
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    transition: 0.3s;
}

.dd-products-slide-nav > div:hover {
    background: var(--font-color-gold);
}

.dd-products-slide-nav > div.next{
    right: 0;
}

.dd-products-slide-nav > div.prev{
    left: 0;
}

.dd-products-slide h3 {
    text-align: center;
    letter-spacing: 0.05em;
}

dd-products {
    padding: 0px 20px 30px;
}

.dd-products-slides:not(.slick-initialized) .dd-products-slide:nth-child(n+3) ~ div{
    display: none !important;
}

.dd-products-slides:not(.slick-initialized) .dd-products-slide {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% /3);
}

.dd-products-slide img{
    width: 100%;
    height: 480px;
    padding-bottom: 25px;
    object-fit: contain;

}

.dd-products-container{
    width: 1400px;
    margin: 0 auto;
    /* position: relative; */
}

.dd-products-flex-box{
    display: flex !important;
    justify-content: center;
    flex-flow: row wrap;
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    max-width: 1920px;
    margin: 0 auto;
}

.dd-products-item{
    flex: 0 0 calc(12% - 30px);
    max-width: calc(12% - 30px);
    text-align: center;
    margin: 12px 15px;
}


.dd-products-item h3 {
    text-transform: uppercase;
    margin-top: 20px;
    padding: 0 10px;
    font-size: 18px;
    line-height: 1.5;
}

.dd-products-item a {
    text-align: center;
    text-decoration: none;
}


.dd-products-title{
    font-size: 30px !important;
    margin-top: 0 !important;
}

.dd-products-description{
    font-size: 22px !important;
    max-width: 320px;
    text-align: center;
    margin: 0 auto;
}

.dd-products-container .slick-track {
    display: flex;
}

.dd-products-container .slick-slide {
    display: block !important; /* Important to override Slick's default styling */
    margin: 0 10px; /* Adjust margin as needed */
}

.slick-dotted.slick-slider {
    margin-bottom: 0px;
    margin-top: 130px;
}

.swal2-popup {
    width: 700px;
    height: 700px;
    background-color: #D0E1D7;
    border-radius: 100%;

}

