html {
  box-sizing: border-box;
}
body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  display: flex;  
  align-items: center;
  justify-content: center;
}  
.fancybox__slide {padding: 10px 100px;} 
html.with-fancybox,html.with-fancybox body{  
  overflow: hidden !important;
  height: 100%;
  position: fixed;  
  width: 100%;
}
.fancybox-fadeOut {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.fancybox__backdrop {
  touch-action: none;
}
h3.fancy-trigger {
    display: flex;
    position: fixed;
    background: #fff;
    line-height: 1;
    width: 100%;
    top: 0;
    padding: 10px 5px;  
    z-index: 9999;
    align-items: center;
    gap: 5px;
     cursor:pointer;
}
/*.fancybox__slide::before, .fancybox__slide::after {*/
/*    display: none;*/
/*}*/
.coupon-block.coupon-poupdata img {height: 100% !important; object-fit: cover;}
h3.fancy-trigger span {
    font-size: 38px;
    font-family: 'Poppins';
    font-weight: 500;
    line-height: 1;
    display: inline-block; 
}
.coupon-block-inner-data .coupon-details {z-index: 999;}
.fancybox__viewport{background:#fff;} 
.coupon-block::after {  
    content: ""; 
    width: 70px;
    height: 55px;
    position: absolute;
    background: #050213;
    top: 50%;
    right: -45px;
    transform: translateY(-50%) rotate(45deg);
    border-bottom-left-radius: 10px;
}
button.carousel__button.is-close {
    display: none;
} 
.coupon-block.coupon-poupdata::after {
    display: none;
}
.coupon-code-copy {
  width: 40px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.coupon-copy-icon::before,
.coupon-copy-icon::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 3px;
    box-shadow: 0 0 3px #000000ad;
}
.coupon-copy-icon::before {
  top: 8px;
  left: 10px;
  z-index: 1;
}
.coupon-copy-icon::after {
  top: 12px;
  left: 14px; 
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.coupon-block-popup {
  display: none;
  padding: 20px;
  width: 600px;
  max-width:100%;
  background: white; 
  border-radius: 10px;
  text-align: center;
}
.coupon-block {
  position: relative;
}
.coupon-block.coupon-poupdata > img {
    width: 100% !important;
    display: block;
    height: 50vh;
}
.coupon-block-trigger {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
}
section.coupon-lists-section {
  width: 700px;
  margin: 0 auto;
  max-width: 100%;
  padding: 30px 20px;
}
.coupon-block img { 
    width: 100%;
    display: block;
    margin: 0;
    object-fit: cover;
} 
section.coupon-lists-section h1 {
  margin-top: 0;
  margin-bottom: 15px;
}
.coupon-block::before {
  content: "";
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient(to top, #000000c2 30%, transparent);
}
.coupon-gallery .owl-item img {
    width: 560px;  
    height: 364px;
    object-fit: cover; 
}

.coupon-details {
  position: absolute;
  left: 20px;
  bottom: 40px;
  text-align:left;
}
.coupon-details h4 { 
  font-size: 35px;
  margin: 0;
  font-weight: 700;
  color: #fff;
}
p.copyMessage {
    color: green;
    border: 1px dashed green;
    width: auto;
    padding: 10px 10px;
    line-height: 1;
    border-radius: 6px;
}
.coupon-details h5 {
  font-size: 20px;
  color: #fff;
  margin: 0;
} 
.coupon-block {
  position: relative;
  height: 200px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 15px;
}
.coupon-details p {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  margin: 15px 0 0 0;
  line-height: 1;
}

.coupon-brand-logo {
  position: absolute;
  top: 50%;
  right: 70px;
  transform: translateY(-50%);
  z-index:999;
} 

.coupon-brand-logo img {
  width: 70px;
  height: auto;
  display: block;  
  margin: 0;
}
.coupon-block-inner-data > h3 {
    margin: 0 0 18px 0;
    font-size: 22px;
    color: #000;
    text-align: left;
}
.coupon-block.coupon-poupdata {
height: auto;
margin: 0;
}
.coupon-block.coupon-poupdata > img {
    width: 100% !important; 
    display: block;
}
.coupon-block.coupon-poupdata .coupon-brand-logo { 
    bottom: 40px;
    top: auto;
    transform: none;
    right: 20px; 
    z-index: 99;  
}
.social-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.social-links {
    margin: 0 0 20px 0;  
}
.social-links ul li a {
    font-size: 30px;
    color: #000;
    line-height: 1;
    transition:all .1s;
}
.social-links ul li a:hover{opacity:0.8; }
.coupon-code-block {
    padding: 20px 10px 40px; 
}

.step-block-view h4 {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    line-height: 1;
}
 
.step-block h5 {
    font-size: 17px;
    font-weight: 500; 
}

.step-block p {
    font-size: 16px;
} 

.why-share h4 {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    line-height: 1;
    margin-top: 30px;
}
 
.why-share ul {
    list-style: inside;
    margin: 0 0 0 10px;
    padding: 0;
}
.step-block {
    border: 1px solid #d1d1d1;
    padding: 12px;
    border-radius: 5px;
}

.step-block p {
    margin: 0;
}

.step-block-lists {
    margin-bottom: 20px;
}

.coupon-code-copy {
width: 100%;
display: flex;
justify-content: center;
width: 300px;
background: #FF385C;
text-align: center;
max-width: 100%;
margin: 0 auto;
gap:5px;
}
.coupon-code-copy span {
color: #fff;
font-size: 20px;
font-weight: 500;
}  
span.coupon-copy-icon {
position: relative;
display: block;
width: 40px;
height: 40px;
}
.coupon-related-info {
    width: 100%;
    margin: 30px auto 0;
    max-width: 100%;
}
.coupon-related-info p {
color: #000;
}
.coupon-block-popup {
position: relative; 
z-index: 99999;
}

.accordion-content p {
padding: 0;
margin: 0;
}
.accordion {
width: 100%;
max-width: 100%;
}
.accordion-content{
text-align:left;
}
.accordion-item {
border-bottom: 1px solid #ddd;
}

.accordion-header {
padding: 15px;  
cursor: pointer;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
   color:#000;  
}

.accordion-header svg {
width: 22px; 
height: 22px;
transition: transform 0.3s ease;
}

.accordion-item.active .accordion-header svg {
transform: rotate(180deg);
}
.accordion-content ul {  
    margin: 0 0 0 0;
    list-style: disc outside;
    padding: 0 0 0 18px;
}
.accordion-item.active .accordion-content {
    padding-top: 0;
}
.accordion-content ul li:not(:last-child) {
    margin-bottom: 3px;
}
.accordion-content *{color:#000; font-size:14px; }
.accordion-content ul li {
    font-size: 14px; 
    color:#000;
}
.accordion-content {
display: none;
padding: 15px;
background: #fff;
}
.fancybox-custom-transition .fancybox__slide {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.accordion-item.active .accordion-content {
display: block;
}
 
.fancybox-slideInRight {
    animation: slideInFromRight 0.4s ease-out forwards;
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.coupon-summary-block {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #fffbfb21;
    border-radius: 5px;
    margin-top: 20px;
    box-shadow: 5px 5px 8px #0000001f;
    border: 1px solid #0000001f; 
}

.coupon-summary-block > * {
    flex: 1;
    text-align: center;
}

.coupon-block-sum h5 {
    margin: 0;
    color: #000;  
    font-size: 15px;
    font-weight: 600; 
    text-align: center;
}

.rating-total-count {
    font-size: 14px;
    color: #000;
    line-height: 1.2;
}

.coupon-block-sum > *:not(:last-child) {
    margin-bottom: 10px;
}
.av-rating.cused-icon i {    
    font-size: 40px; 
    color: #000; 
}
.av-rating.cused-icon {    
    font-size: 40px;  
}
.av-rating {
    font-size: 40px;
    color: #000;   
    font-weight:600;
}  

.quote-slide {
    display: flex;
    gap: 20px;
    align-items: center;
}

.quote-author img {
    width: 80px !important;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #857f7f;
    object-fit: cover;
    margin:0 auto;
}

.author-name {
    font-size: 14px;
    margin-top: 4px;
    font-weight: 500;
    text-align: center;
    color:#000;
}

.quote-author {
    flex: 0 0 100px;
    max-width: 100px;
}

.quote-text {
    color: #000;
    line-height: 1.4;
    text-align: left;
    font-size: 15px;
}

.quote-carousel {
    margin-top: 30px;
    background: #d1d1d12e;
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #d1d1d18a;
}

.quote-carousel .owl-nav button {  
    width: 30px;
    height: 30px;
    background: #ffffff !important;
    position: relative;
    box-shadow: 0 0 5px #00000038;
}

.quote-carousel .owl-nav button span {
    font-size: 29px;
    display: block;
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.quote-carousel .owl-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}
@media only screen and (max-width: 991px) {
.fancybox__slide {  
padding: 10px 20px;
} 
}
@media only screen and (max-width: 600px) { 
    .container{padding:0 2%;} 
    section.coupon-lists-section{padding:30px 10px;}   
    .coupon-block.coupon-poupdata{margin-top:60px !important;} 
    .coupon-details h4 {
        font-size: 25px;
    }  
    .coupon-details {
        left:10px;  
        bottom: 15px;
        text-align: left;
    }
    .fancybox__slide { 
        padding: 10px;   
    }
    .coupon-block-popup {
        padding: 15px 0;
    } 
    .coupon-code-block {
    padding: 20px 5px 40px;
    }
    .coupon-summary-block {
        align-items: flex-start;
        gap: 12px; 
    }
    
    .coupon-block-sum h5 {
        min-height: 40px;
        line-height: 1.3;
    }
    
    .av-rating {
        min-height: 65px;
            font-size: 34px; 
    }
    .coupon-details h5 {
        font-size: 16px;
    }
    .coupon-details p {
        margin: 5px 0 0 0;
        display: block;  
        font-size:10px;
    }  
    .coupon-block::after {
        width: 60px;
        height: 45px; 
    }
    .coupon-brand-logo img {
        width: 55px;
        height: auto;
    }
    .coupon-block { 
        height: 180px;
    }
    .coupon-brand-logo {  
        right: 40px; 
    }
    .coupon-brand-logo img {
        width: 40px;
    }
    h3.fancy-trigger {
        left: 0;
        padding-left:18px;
    }
    .coupon-block.coupon-poupdata img {max-height:364px !important;}
    
    .quote-slide {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    }
    
    .quote-text {
    text-align: center;
    }
}