.img-container {
  display: flex;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}
.img-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-img {
  width: 100%;
    /*height: 360px;*/
  object-fit: contain;
  border-radius: 8px;
}
.thumbnail-imgs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.thumbnail-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid #ddd;
  cursor: pointer;
}
.thumbnail-img:hover {
  border-color: #4caf50;
}
.details-section {
  flex: 2;
}
.product-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 8px;
}
.rating {
  font-size: 1rem;
  color: #ffa500;
  margin-bottom: 8px;
}
.special-offer {
  color: #4caf50;
  font-weight: bold;
  margin-bottom: 8px;
}
.price {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
}
.price span {
  font-size: 1rem;
  color: #aaa;
  margin-left: 8px;
}
.discount {
  font-size: 0.85rem;
  color: #ff5722;
  margin-top: 4px;
}
.description {
  margin-top: 16px;
  font-size: 0.9rem;
  color: #666;
}
.options {
  margin-top: 16px;
  display: flex;
  gap: 16px;
}
.option-group {
  flex: 1;
}
.option-title {
  font-weight: bold;
  margin-bottom: 8px;
}
.option-buttons {
  display: flex;
  gap: 8px;
}
.option-button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  cursor: pointer;
}
.option-button.active {
  border-color: #4caf50;
  color: #fff;
  background-color: #4caf50;
}

.or-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 5px;
}

.or-divider::before,
.or-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid lightgray;
}

.or-divider::before {
    margin-right: 10px;
}

.or-divider::after {
    margin-left: 10px;
}

.or-divider span {
    color: lightgray;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 2px;
}

/* Start Activate section */
    .activate{
        gap:3rem;
        display:flex;
        align-items:flex-start;
        margin:0 0 4rem
    }
    .activate .left{
        flex:0 0 43%
    }
    .activate .left h2{
        color:#344268;
        font-size:46px;
        text-align:left;
        font-weight:600;
        margin:0 0 1rem
    }
    .activate .left p{
        margin:auto;
        color:#6376a2;
        font-weight:500;
        font-size:16px;
        text-align:left;
        max-width:626px
    }
    .activate .left .button{
        display:flex;
        margin:4rem 0 0;
        align-items:center;
        justify-content:flex-start
    }
    .activate .right{
        gap:1rem;
        flex:auto;
        display:flex;
        flex-direction:column
    }
    .activate .right .item{
        gap:8px;
        display:flex;
        align-items:flex-start;
        justify-content:flex-start
    }
    .activate .right .item .number{
        margin:15px 0 0;
        width:48px;
        height:48px;
        color:#fff;
        display:flex;
        line-height:1;
        font-size:28px;
        font-weight:600;
        border-radius:50%;
        align-items:center;
        justify-content:center;
        background:linear-gradient(171.77deg,#4b38d8 9.9%,#857efe 94.67%)
    }
    .activate .right .item .content{
        flex:1;
        margin:0;
        border:1px solid #000;
        background:#fff;
        padding:2rem;
        border-radius:30px;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        gap:1rem;
        position:relative;
        height:auto;
    }
    .activate .right .item .content p{
        color:#344268;
        /*font-weight:700;*/
        font-size:20px;
        line-height:28px
    }
    .activate .right .button{
        display:none;
        margin:4rem 0 0;
        align-items:center;
        justify-content:flex-start
    }

    @media (max-width:991px){
        .activate{
            flex-direction:column;
            align-items:center
        }
        .activate .left{
            flex:1
        }
        .activate .left h2{
            text-align:center
        }
        .activate .left p{
            text-align:center
        }
        .activate .left .button{
            display:none
        }
        .activate .right .button{
            display:flex;
            margin:1rem 0 0;
            justify-content:center
        }
    }

    @media (max-width:767px){
        .activate .right .item{
            margin-left:24px;
            position:relative
        }
        .activate .right .item .number{
            position:absolute;
            bottom:0;
            top:0;
            margin:auto!important;
            z-index:1;
            left:-14px;
            width:30px;
            height:30px;
            font-size:20px
        }
        .activate .right .item .content{
            height:135px;
            padding:1rem 0 1rem 3rem;
            gap:10px
        }
        .activate .right .item .content p{
            font-size:16px
        }
    }

    @media (max-width:565px){
        .activate .left h2{
            font-size:30px;
            font-weight:600;
            line-height:33px
        }
        .activate .left p{
            font-size:14px;
            font-weight:500;
            line-height:18.2px
        }
        .activate {
            margin:0 0 1rem;
        }
    }
/* End Activate section */

/* Start Banner */
    .banner{
        height:100vh;
        border-radius:0 0 2rem 2rem
    }
    .banner #qrcarouselbanner .container .details h6 {
        display: flex;
        height: 40px;
        padding: 4px 12px;
        align-items: center;
        gap: 8px;
        border-radius: 8px; 
        background: rgba(255, 255, 255, 0.10) !important;
    }
    .banner #qrcarouselbanner{
        height:100%;
        position:relative
    }
    .banner #qrcarouselbanner .carousel-inner{
        height:inherit
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item{
        height:inherit
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item{
        display:flex;
        height:inherit;
        border-radius:0 0 30px 30px
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item.purple{
        background:linear-gradient(to bottom,#4b38d8 0,#857efe 100%);
        background-position:140%,center;
        background-size:72% 170%,cover;
        background-repeat:no-repeat
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item.peach{
        background:radial-gradient(ellipse 50% 30% at center,#af425a,rgba(175,66,90,0)),linear-gradient(to bottom,#cd5b75 0,#d27c90 100%);
        background-position:140%,center;
        background-size:72% 170%,cover;
        background-repeat:no-repeat
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item.red{
        background:radial-gradient(ellipse 50% 30% at center,#af425a,rgba(95,20,20,0)),linear-gradient(to bottom,#892a2a 0,#9d4444 100%);
        background-position:140%,center;
        background-size:72% 170%,cover;
        background-repeat:no-repeat
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item.green{
        background:radial-gradient(ellipse 50% 30% at center,#1f6730,rgba(31,103,48,0)),linear-gradient(to bottom,#385b3f 0,#85a27c 100%);
        background-position:140%,center;
        background-size:72% 170%,cover;
        background-repeat:no-repeat
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details{
        display:flex;
        height:inherit;
        align-items:center;
        padding-bottom:5rem
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details{
        flex:0 0 60%;
        font-family:Gilroy,sans-serif!important
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h6{
        gap:5px;
        display:flex;
        line-height:1;
        font-size:14px;
        padding:5px 7px;
        font-weight:500;
        color:rgba(255,255,255,.6980392157);
        width:-moz-max-content;
        width:max-content;
        align-items:center;
        border-radius:15px;
        justify-content:flex-start;
        background-color:rgba(255,255,255,.4);
        border:solid 1px rgba(255,255,255,.7)
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h6 img{
        width:18px;
        height:18px;
        -o-object-fit:contain;
        object-fit:contain;
        -o-object-position:center;
        object-position:center
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h4{
        color:#fff;
        font-size:50px;
        font-weight:600;
        line-height:1.1
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h4 span{
        color:#fab475;
        display:inline-block
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h4.smaller{
        width:85%
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details p{
        /*width:35rem;*/
        font-size:18px;
        font-weight:500;
        margin:0 0 2rem;
        color:rgba(255,255,255,.7)
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details .buttons{
        gap:10px;
        display:flex;
        align-items:center
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details .buttons a.btn.btn-orange{
        gap:10px;
        display:flex;
        color:#fff;
        font-size:18px;
        font-weight:600;
        width:-moz-max-content;
        width:max-content;
        align-items:center;
        border-radius:40px;
        justify-content:flex-end;
        padding:6px 7px 6px 30px;
        background:linear-gradient(to bottom,#ef8626 0,#e7a66b 100%)
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details .buttons a.btn.btn-orange span.qr{
        width:48px;
        height:48px;
        display:flex;
        border-radius:50%;
        align-items:center;
        justify-content:center;
        background-color:#fff
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details .buttons a.btn.btn-orange span.qr img{
        width:27px;
        height:25px;
        -o-object-fit:contain;
        object-fit:contain
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details .buttons a.btn.btn-hollow{
        gap:10px;
        height:62px;
        display:flex;
        color:#fff;
        font-size:18px;
        font-weight:600;
        padding:6px 25px;
        width:-moz-max-content;
        width:max-content;
        align-items:center;
        border-radius:40px;
        justify-content:center;
        background:0 0;
        border:solid 1px rgba(255,255,255,.3)
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .image{
        flex:0 0 40%
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .image img{
        height:100%;
        width:100%;
        position:relative;
        -o-object-fit:contain;
        object-fit:contain;
        -o-object-position:center;
        object-position:center
    }

    .banner #qrcarouselbanner .carousel-banner-footer-container{
        left:0;
        right:0;
        width:100%;
        bottom:3rem;
        position:absolute;
        font-family:Gilroy,sans-serif!important
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer{
        gap:4rem;
        width:100%;
        margin:auto;
        display:flex;
        align-items:center;
        justify-content:flex-start
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .left{
        gap:0;
        height:82px;
        display:flex;
        align-items:center;
        border-radius:40px;
        padding:0 18px 0 13px;
        border:solid 1px rgba(255,255,255,.5);
        background-color:rgba(255,255,255,.2)
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .left .images{
        display:flex;
        align-items:center;
        justify-content:flex-start
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .left .images img{
        width:58px;
        height:58px;
        -o-object-fit:cover;
        object-fit:cover;
        position:relative;
        border-radius:50%;
        -o-object-position:center;
        object-position:center;
        border:solid 4px rgba(255,255,255,.2)
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .left .images img.back{
        z-index:5
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .left .images img.front{
        z-index:6;
        left:-24px
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .left p{
        margin:0;
        color:#fff;
        font-size:14px;
        font-weight:500;
        height:-moz-fit-content;
        height:fit-content
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .left p span{
        display:block
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .right{
        gap:4rem;
        display:flex;
    /*    align-items:center*/
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .right h5{
        gap:10px;
        margin:0;
        display:flex;
        font-size:18px;
        font-weight:500;
        align-items:center;
        color:rgba(255,255,255,.7);
        justify-content:flex-start
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .right h5 img{
        width:28px;
        height:28px
    }

    .banner #qrcarouselbanner .carousel-control-next img,.landing-page .banner #qrcarouselbanner .carousel-control-prev img{
        width:54px;
        height:54px;
        border-radius:50%;
        background-color:rgba(255,255,255,.2);
        border:solid 1px rgba(255,255,255,.5)
    }


    @media (max-width:991px){
        .banner{
            height:auto
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .image img {
            width: 96%;
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details{
            align-items:center;
            flex-direction:column;
            padding-bottom: 0 !important;
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details{
            flex:1;
            text-align:center
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h6{
            margin:1rem auto 1rem
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h4{
            font-size:40px;
            margin:0 auto 1rem
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details p{
            margin:0 auto 2rem;
            text-align: center !important;
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details .buttons{
            justify-content:center
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .image{
            flex:1
        }
        .banner #qrcarouselbanner .carousel-control-next,.landing-page .banner #qrcarouselbanner .carousel-control-prev{
            padding-top:15rem
        }
        .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer{
            gap:2rem;
            flex-direction:column
        }
        .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .right{
            gap:1rem;
            flex-direction:column
        }

        .section-3-banner-img {
            height: auto !important;
            width: 80% !important;
        }

        .div-how-it-works-btn {
            text-align: center;
        }

        .section-3 h4 {
            font-size: 18px !important;
        }
        .section-3 .ulist {
            text-align: justify;
        }

        .section-3 ul li .li-header {
            font-size: 18px;
        }
        .section-3 ul li span {
            font-size: 18px; 
        }
        .section-3 .buttons {
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .manage-content .title h2 {
            font-size: 30px;
        }
    }

    @media (max-width:767px){
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details{
            width:100%
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h6{
            font-size:12px
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h4{
            font-size:32px
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details .buttons{
            flex-direction:column
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details p{
            width:100%;
            font-size:16px
        }
    }
/* End Banner */

.btn-order-now {
    display: inline-flex;
    height: 48px;
    padding: 6px 24px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    border-radius: 8px;
    background: linear-gradient(221deg, #D37722 12.05%, #F2AA68 87.86%);
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}