/* Display the corresponding content when the radio is checked */
#tab1:checked~ul li.tab-content-first,
#tab2:checked~ul li.tab-content-2,
#tab3:checked~ul li.tab-content-3,
#tab5:checked~ul li.tab-content-last {
    display: block;
}

img {
    border: none;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
    /* width: 15vw; */

}

.clear {
    clear: both;
    height: 0
}




#tmpShell {
    width: 100%;
    margin: 0 auto
}

#hdr {
    /* width: 990px; */
    margin: 0 auto;
    padding: 10px 0
}

#logo {
    float: left;
    margin: 5px 0
}

#logo img {
    width: 190px
}



















#bensBlock {
    background: url(https://ecommercetrax.com/ebay/vibrant/new/grgray.png) repeat-x left bottom;
    background-color: white;
}

#bensIn {
    width: 990px;
    margin: 0 auto;
    padding: 20px 0
}

.bens {
    float: left;
    width: 33.333%
}

#ben1 {
    background: url(https://i.postimg.cc/RV4x1BQ3/image.png) no-repeat left center;
    background-size: auto 60px;
    padding-left: 70px;
    padding-right: 10px
}

#ben2 {
    /* https://ecommercetrax.com/ebay/vibrant/new/auth.png */
    background: url(https://i.postimg.cc/RCcznFf5/png-transparent-computer-icons-certificate-miscellaneous-leaf-text-thumbnail-removebg-preview.png) no-repeat left center;
    background-size: auto 60px;
    padding-left: 70px;
    padding-right: 10px
}

#ben3 {
    background: url(https://i.postimg.cc/zv1Zcmsc/download-5.jpg) no-repeat left center;
    background-size: auto 60px;
    padding-left: 70px
}

.bens span {
    font: 500 22px 'Roboto Condensed', Arial, sans-serif;

    color: #2A3F5E;
}

.bens span em {
    display: block;
    font: 300 14px 'Roboto', Arial, sans-serif;
    color: #555
}


#prTitle {
    margin-bottom: 15px;
    text-align: left
}

#prTitle h1 {
    margin: 0;
    padding: 0;
    font: 400 25px 'Roboto', Arial, sans-serif;
    /* color: #444 ############W####################################################################*/
    color: #333333;

}




#itemSpecs {
    float: left;
    width: 260px;
    margin-left: 15px
}

.specsRow {
    margin: 0
}

.specsHd {
    margin-top: 15px;
    font: normal 15px 'Roboto', Arial, sans-serif;
    color: goldenrod;
    text-transform: uppercase
}

.specsRow:nth-child(1) .specsHd {
    margin-top: 0;
    font-size: 2rem;
    margin-bottom: 1rem;

}

.specsLn {
    padding: 0.5px 0;
    font: 400 14px 'Roboto', Arial, sans-serif;
    color: #555
}





.specsRow3 .specsLn {
    padding: 3px 0
}

.specsRow2 .specsLn {
    padding: 5px 0;
    text-align: start;
    font-size: 1.5rem;
    border-bottom: solid gainsboro 0.5px;

}
@media (min-width: 300px) and (max-width: 399px){
    .specsRow2 .specsLn {
    padding: 5px 0;
    text-align: start;
    font-size: 1.5rem;

} 
}

#rghBans {
    float: right;
    width: 230px
}


#upgrHd {
    margin-bottom: 10px;
    font: normal 22px 'Roboto Condensed', Arial, sans-serif;
    text-align: center;
    color: #444
}

#upgrGold {
    padding: 10px 0;
    padding-left: 90px;
    background: url(https://ecommercetrax.com/ebay/vibrant/new/upgold.png) no-repeat left center;
    background-size: auto 75px;
    font: 300 16px 'Roboto Condensed', Arial, sans-serif;
    color: #444;
    text-align: right
}

#upgrLasr {
    margin-top: 15px;
    padding: 10px 0;
    padding-left: 90px;
    background: url(https://ecommercetrax.com/ebay/vibrant/new/uplasr.png) no-repeat left center;
    background-size: auto 65px;
    font: 300 16px 'Roboto Condensed', Arial, sans-serif;
    color: #444;
    text-align: right
}





#promiseSeals {
    width: 990px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 15px;
    /* background: #f3f3ef;
            border: 1px solid #e5e3e3 */
}

.promIn {
    padding-left: 100px;
    font: 400 25px 'Roboto Condensed', Arial, sans-serif;
    color: #444
}

.promIn span {
    display: block;
    font: 300 18px 'Roboto', Arial, sans-serif
}

#promMonBack {
    float: left;
    width: 49%;
    background: url(https://i.postimg.cc/MGQFcRBw/refund-Logo.png) no-repeat center left;
    background-size: auto 75px;
    border-right: 1px solid #e5e3e3
}

#promService {
    float: right;
    width: 49%;
    background: url(https://i.postimg.cc/fRkFN1TJ/customer-Service-Logo.png) no-repeat center left;
    background-size: auto 75px
}











footer#foot {
    margin-top: 15px;
    background: white;
    border-top: 5px solid #7f1847
}

#labLogos {
    width: 990px;
    margin: 0 auto;
    padding: 15px 0
}

.labLg {
    float: left;
    width: 25%;
    padding: 5px 10px 5px 75px
}

#labLg1 {
    background: url(https://ecommercetrax.com/ebay/vibrant/new/labegl.png) no-repeat left center;
    background-size: auto 65px;
    padding: 2rem;
}

#labLg2 {
    background: url(https://ecommercetrax.com/ebay/vibrant/new/labgia.png) no-repeat left center;
    background-size: auto 65px;
    padding: 2rem;

}

#labLg3 {
    background: url(https://ecommercetrax.com/ebay/vibrant/new/labigi.png) no-repeat left center;
    background-size: auto 65px;
    padding: 2rem;
}

#labLg4 {
    background: url(https://ecommercetrax.com/ebay/vibrant/new/labkpc.png) no-repeat left center;
    background-size: auto 65px;
    padding: 2rem;
}

.labTxt {
    font: normal 12px Arial, serif;
    color: #777
}

.labNm {
    font: normal 29px Times, 'Times New Roman', serif;
    font-variant: normal;
    color: #333
}

#footBot {
  
    padding: 5px 0
}

#footBotIn {
    width: 990px;
    margin: 0 auto;
    padding: 5px 0
}









#pmtShipImgs {
    float: right
}

#pmtShipImgs img {
    height: 25px
}

#pmtShipImgs img:nth-child(1) {
    margin-right: 10px
}

@media all and (min-width: 600px) and (max-width: 768px) {
    body {
        -webkit-text-size-adjust: 100%
    }

    header#hdr,
 
    #bensIn,
  
    #promiseSeals,
  
 
    #labLogos,
    #footBotIn {
        width: 98%;
        margin: 0 auto;
        overflow: hidden
    }

    #logo {
        float: none;
        text-align: center
    }

    #logo img {
        width: 70%
    }


    .bens {
        text-align: center;
        padding-top: 70px
    }

    #ben1 {
        background: url(https://i.postimg.cc/RV4x1BQ3/image.png) no-repeat top center;
        background-size: auto 60px;
        padding-left: 0;
        padding-right: 0
    }

    #ben2 {
        background: url(https://i.postimg.cc/RCcznFf5/png-transparent-computer-icons-certificate-miscellaneous-leaf-text-thumbnail-removebg-preview.png) no-repeat top center;
        background-size: auto 60px;
        padding-left: 0;
        padding-right: 0
    }

    #ben3 {
        background: url(https://i.postimg.cc/zv1Zcmsc/download-5.jpg) no-repeat top center;
        background-size: auto 60px;
        padding-left: 0
    }

    .bens span {
        font-size: 17px
    }

    .bens span em {
        font-size: 12px
    }

    #prTitle {
        text-align: center;
        margin-top: 15px
    }

    

    .specsHd {
        margin-top: 15px;
        font-size: 22px
    }

    .specsLn {
        font-size: 18px;
        padding: 4px 0
    }

    #rghBans {
        float: none;
        width: 100%;
        margin: 0 auto;
        margin-top: 15px
    }


    #upgrHd {
        font-size: 28px
    }

    #upgrGold {
        padding-left: 0;
        background-size: auto 45px;
        font-size: 22px
    }

    #upgrLasr {
        padding-left: 0;
        background-size: auto 45px;
        font-size: 22px
    }

    .promIn {
        padding-left: 0;
        padding-top: 90px;
        text-align: center
    }

 

    #promMonBack {
        background: url(https://i.postimg.cc/MGQFcRBw/refund-Logo.png) no-repeat center top;
        background-size: auto 80px
    }

    #promService {
        background: url(https://i.postimg.cc/fRkFN1TJ/customer-Service-Logo.png) no-repeat center top;
        background-size: auto 80px
    }










    .labLg {
        float: left;
        width: 25%;
        padding: 5px 5px 5px 5px
    }

    #labLg1 {
        background-position: top center;
        background-size: auto 65px
    }

    #labLg2 {
        background-position: top center;
        background-size: auto 65px
    }

    #labLg3 {
        background-position: top center;
        background-size: auto 65px
    }

    #labLg4 {
        background-position: top center;
        background-size: auto 65px
    }

    .labTxt {
        font-size: 11px;
        border-left: none;
        padding-left: 0;
        padding-top: 65px;
        text-align: center
    }

    .labNm {
        font-size: 24px
    }



    #pmtShipImgs {
        float: none;
        width: 100%;
        margin: 0 auto;
        margin-top: 10px;
        text-align: center
    }
}

@media all and (min-width: 500px) and (max-width: 599px) {
    body {
        -webkit-text-size-adjust: 100%
    }

    header#hdr,
   
    #bensIn,
  
    #promiseSeals,
   

    #labLogos,
    #footBotIn {
        width: 98%;
        margin: 0 auto;
        overflow: hidden
    }

    #logo {
        float: none;
        text-align: center
    }

    #logo img {
        width: 70%
    }




 

    .bens {
        text-align: center;
        padding-top: 70px
    }

    #ben1 {
        background: url(https://i.postimg.cc/RV4x1BQ3/image.png) no-repeat top center;
        background-size: auto 60px;
        padding-left: 0;
        padding-right: 0
    }

    #ben2 {
        background: url(https://i.postimg.cc/RCcznFf5/png-transparent-computer-icons-certificate-miscellaneous-leaf-text-thumbnail-removebg-preview.png) no-repeat top center;
        background-size: auto 60px;
        padding-left: 0;
        padding-right: 0
    }

    #ben3 {
        background: url(https://i.postimg.cc/zv1Zcmsc/download-5.jpg) no-repeat top center;
        background-size: auto 60px;
        padding-left: 0
    }

    .bens span {
        font-size: 17px
    }

    .bens span em {
        font-size: 12px
    }

    #prTitle {
        text-align: center;
        margin-top: 15px
    }

   

    #itemSpecs {
        float: none;
        width: 100%;
        margin: 15px auto 0 auto
    }

    .specsHd {
        margin-top: 15px;
        font-size: 22px
    }

    .specsLn {
        font-size: 18px;
        padding: 4px 0
    }

    #rghBans {
        float: none;
        width: 100%;
        margin: 0 auto;
        margin-top: 15px
    }



    #upgrHd {
        font-size: 28px
    }

    #upgrGold {
        padding-left: 0;
        background-size: auto 45px;
        font-size: 22px
    }

    #upgrLasr {
        padding-left: 0;
        background-size: auto 45px;
        font-size: 22px
    }

    .promIn {
        padding-left: 0;
        padding-top: 90px;
        text-align: center
    }

    #promMonBack {
        background: url(https://i.postimg.cc/MGQFcRBw/refund-Logo.png) no-repeat center top;
        background-size: auto 80px
    }

    #promService {
        background: url(https://i.postimg.cc/fRkFN1TJ/customer-Service-Logo.png) no-repeat center top;
        background-size: auto 80px
    }

  


    .labLg {
        float: left;
        width: 25%;
        padding: 5px 5px 5px 5px
    }

    #labLg1 {
        background-position: top center;
        background-size: auto 65px
    }

    #labLg2 {
        background-position: top center;
        background-size: auto 65px
    }

    #labLg3 {
        background-position: top center;
        background-size: auto 65px
    }

    #labLg4 {
        background-position: top center;
        background-size: auto 65px
    }

    .labTxt {
        font-size: 11px;
        border-left: none;
        padding-left: 0;
        padding-top: 65px;
        text-align: center
    }

    .labNm {
        font-size: 24px
    }

    
    #pmtShipImgs {
        float: none;
        width: 100%;
        margin: 0 auto;
        margin-top: 10px;
        text-align: center
    }
}

@media all and (min-width: 400px) and (max-width: 499px) {
    body {
        -webkit-text-size-adjust: 100%
    }

    header#hdr,
  
    #bensIn,
    
    #promiseSeals,
 
    #labLogos,
    #footBotIn {
        width: 98%;
        margin: 0 auto;
        overflow: hidden
    }

    #logo {
        float: none;
        text-align: center
    }

    #logo img {
        width: 70%
    }






    .bens {
        text-align: center;
        padding-top: 60px
    }

    #ben1 {
        background: url(https://i.postimg.cc/RV4x1BQ3/image.png) no-repeat top center;
        background-size: auto 50px;
        padding-left: 0;
        padding-right: 0
    }

    #ben2 {
        background: url(https://i.postimg.cc/RCcznFf5/png-transparent-computer-icons-certificate-miscellaneous-leaf-text-thumbnail-removebg-preview.png) no-repeat top center;
        background-size: auto 50px;
        padding-left: 0;
        padding-right: 0
    }

    #ben3 {
        background: url(https://i.postimg.cc/zv1Zcmsc/download-5.jpg) no-repeat top center;
        background-size: auto 50px;
        padding-left: 0
    }

    .bens span {
        font-size: 17px
    }

    .bens span em {
        font-size: 12px
    }

    #prTitle {
        text-align: center;
        margin-top: 15px
    }

    #prTitle h1 {
        font-size: 19px
    }

  .specsHd {
        margin-top: 15px;
        font-size: 22px
    }

    .specsLn {
        font-size: 18px;
        padding: 4px 0
    }

    #rghBans {
        float: none;
        width: 100%;
        margin: 0 auto;
        margin-top: 15px
    }

  

    #upgrHd {
        font-size: 25px
    }

    #upgrGold {
        padding-left: 0;
        background-size: auto 40px;
        font-size: 17px
    }

    #upgrLasr {
        padding-left: 0;
        background-size: auto 40px;
        font-size: 17px
    }

    .promIn {
        padding-left: 0;
        padding-top: 90px;
        text-align: center;
        font-size: 20px
    }

    .promIn span {
        font-size: 15px
    }

    #promMonBack {
        background: url(https://i.postimg.cc/MGQFcRBw/refund-Logo.png) no-repeat center top;
        background-size: auto 80px
    }

    #promService {
        background: url(https://i.postimg.cc/fRkFN1TJ/customer-Service-Logo.png) no-repeat center top;
        background-size: auto 80px
    }





    .labLg {
        float: left;
        width: 25%;
        padding: 5px 5px 5px 5px
    }

    #labLg1 {
        background-position: top center;
        background-size: auto 65px
    }

    #labLg2 {
        background-position: top center;
        background-size: auto 65px
    }

    #labLg3 {
        background-position: top center;
        background-size: auto 65px
    }

    #labLg4 {
        background-position: top center;
        background-size: auto 65px
    }

    .labTxt {
        font-size: 11px;
        border-left: none;
        padding-left: 0;
        padding-top: 65px;
        text-align: center
    }

    .labNm {
        font-size: 24px
    }

    #pmtShipImgs {
        float: none;
        width: 100%;
        margin: 0 auto;
        margin-top: 10px;
        text-align: center
    }

}

@media all and (min-width: 300px) and (max-width: 399px) {
    /* .img-container img {
        width: 20rem;
        height: 20rem;
    } */

    body {
        -webkit-text-size-adjust: 100%
    }

    header#hdr,
 
    #bensIn,
  
    #promiseSeals,
    #labLogos,
    #footBotIn {
        width: 98%;
        margin: 0 auto;
        overflow: hidden
    }

    #logo {
        float: none;
        text-align: center
    }

    #logo img {
        width: 90%
    }


    .bens {
        text-align: center;
        padding-top: 35px
    }

    #ben1 {
        background: url(https://i.postimg.cc/RV4x1BQ3/image.png) no-repeat top center;
        background-size: auto 30px;
        padding-left: 0;
        padding-right: 0
    }

    #ben2 {
        background: url(https://i.postimg.cc/RCcznFf5/png-transparent-computer-icons-certificate-miscellaneous-leaf-text-thumbnail-removebg-preview.png) no-repeat top center;
        background-size: auto 30px;
        padding-left: 5px;
        padding-right: 5px
    }

    #ben3 {
        background: url(https://i.postimg.cc/zv1Zcmsc/download-5.jpg) no-repeat top center;
        background-size: auto 30px;
        padding-left: 0
    }

    .bens span {
        font-size: 8px
    }

    .bens span em {
        font-size: 7px
    }

    #prTitle {
        text-align: center;
        margin-top: 15px
    }

    #prTitle h1 {
        font-size: 19px
    }


    .specsHd {
        margin-top: 15px;
        font-size: 19px
    }

    .specsLn {
        font-size: 15px;
        padding: 4px 0
    }

    #rghBans {
        float: none;
        width: 100%;
        margin: 0 auto;
        margin-top: 15px
    }


    #upgrHd {
        font-size: 25px
    }

    #upgrGold {
        background-size: auto 60px;
        font-size: 19px
    }

    #upgrLasr {
        background-size: auto 60px;
        font-size: 19px
    }

    .promIn {
        padding-left: 0;
        padding-top: 90px;
        font-size: 20px;
        text-align: center
    }

    .promIn span {
        font-size: 15px
    }

    #promMonBack {
        float: none;
        width: 100%;
        margin-bottom: 15px;
        background: url(https://i.postimg.cc/MGQFcRBw/refund-Logo.png) no-repeat center top;
        background-size: auto 80px;
        border-right: none
    }

    #promService {
        float: none;
        width: 100%;
        background: url(https://i.postimg.cc/fRkFN1TJ/customer-Service-Logo.png
) no-repeat center top;
        background-size: auto 80px
    }


   

 
   

    .labLg {
        float: left;
        width: 25%;
        padding: 5px 5px 5px 5px
    }

    #labLg1 {
        background-position: top center;
        background-size: auto 50px
    }

    #labLg2 {
        background-position: top center;
        background-size: auto 50px
    }

    #labLg3 {
        background-position: top center;
        background-size: auto 50px
    }

    #labLg4 {
        background-position: top center;
        background-size: auto 50px
    }

    .labTxt {
        font-size: 8px;
        border-left: none;
        padding-left: 0;
        padding-top: 55px;
        text-align: center
    }

    .labNm {
        font-size: 23px
    }

  

    #pmtShipImgs {
        float: none;
        width: 100%;
        margin: 0 auto;
        margin-top: 10px;
        text-align: center
    }

    #pmtShipImgs img {
        height: 20px
    }

    #pmtShipImgs img:nth-child(1) {
        margin-right: 0
    }
}

@media all and (min-width: 100px) and (max-width: 299px) {
    body {
        -webkit-text-size-adjust: 100%
    }

    header#hdr,
  
    #bensIn,
   
    #promiseSeals,
    #labLogos,
    #footBotIn {
        width: 98%;
        margin: 0 auto;
        overflow: hidden
    }

    #logo {
        float: none;
        text-align: center
    }

    #logo img {
        width: 90%
    }

 


    .bens {
        text-align: center;
        padding-top: 35px
    }

    #ben1 {
        background: url(https://i.postimg.cc/RV4x1BQ3/image.png) no-repeat top center;
        background-size: auto 30px;
        padding-left: 0;
        padding-right: 0
    }

    #ben2 {
        background: url(https://i.postimg.cc/RCcznFf5/png-transparent-computer-icons-certificate-miscellaneous-leaf-text-thumbnail-removebg-preview.png) no-repeat top center;
        background-size: auto 30px;
        padding-left: 5px;
        padding-right: 5px
    }

    #ben3 {
        background: url(https://i.postimg.cc/zv1Zcmsc/download-5.jpg) no-repeat top center;
        background-size: auto 30px;
        padding-left: 0
    }

    .bens span {
        font-size: 8px
    }

    .bens span em {
        font-size: 7px
    }

    #prTitle {
        text-align: center;
        margin-top: 15px
    }

    #prTitle h1 {
        font-size: 19px
    }


    .specsHd {
        margin-top: 15px;
        font-size: 19px
    }

    .specsLn {
        font-size: 15px;
        padding: 4px 0
    }

    #rghBans {
        float: none;
        width: 100%;
        margin: 0 auto;
        margin-top: 15px
    }



    #upgrHd {
        font-size: 25px
    }

    #upgrGold {
        background-size: auto 60px;
        font-size: 19px
    }

    #upgrLasr {
        background-size: auto 60px;
        font-size: 19px
    }

    .promIn {
        padding-left: 0;
        padding-top: 90px;
        font-size: 20px;
        text-align: center
    }

    .promIn span {
        font-size: 15px
    }

    #promMonBack {
        float: none;
        width: 100%;
        margin-bottom: 15px;
        background: url(https://i.postimg.cc/MGQFcRBw/refund-Logo.png) no-repeat center top;
        background-size: auto 80px;
        border-right: none
    }

    #promService {
        float: none;
        width: 100%;
        background: url(https://i.postimg.cc/fRkFN1TJ/customer-Service-Logo.png
) no-repeat center top;
        background-size: auto 80px
    }


    .labLg {
        float: left;
        width: 25%;
        padding: 5px 5px 5px 5px
    }

    #labLg1 {
        background-position: top center;
        background-size: auto 50px
    }

    #labLg2 {
        background-position: top center;
        background-size: auto 50px
    }

    #labLg3 {
        background-position: top center;
        background-size: auto 50px
    }

    #labLg4 {
        background-position: top center;
        background-size: auto 50px
    }

    .labTxt {
        font-size: 8px;
        border-left: none;
        padding-left: 0;
        padding-top: 55px;
        text-align: center
    }

    .labNm {
        font-size: 23px
    }


    #pmtShipImgs {
        float: none;
        width: 100%;
        margin: 0 auto;
        margin-top: 10px;
        text-align: center
    }

    #pmtShipImgs img {
        height: 20px
    }

    #pmtShipImgs img:nth-child(1) {
        margin-right: 0
    }
}




.labSb {

    margin-left: 2.5rem;
}
 /* Desktop styles */
 .menu {
    display: flex;
    background-color: white;
    padding: 10px;
    justify-content: space-between;
    align-items: center;
    background-image: image-set('https://i.postimg.cc/RVF2WhgM/image.png');
}

/* Styling for the menu item */
.menu-item {
    position: relative;
    padding: 10px 50px;
    color: black;
    cursor: pointer;
}

/* Desktop hover effect for popup */
@media (min-width: 768px) {
    .menu-item:hover .popup {
        display: block;
    }
}

/* The popup menu */
.popup {
    border-radius: 0.5rem;
    z-index: 100;
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    background: white;
    color: black;
    padding: 10px;
    width: 200px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Styling for menu items inside popup */
.popup div {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.popup div:hover {
    background-color: #f0f0f0;
}

/* Hide the checkbox */
.toggle-input {
    display: none;
}

/* Style the label */
.toggle-label {
    /* color: #c18d09 ; */
    color : #626262 !important;
    cursor: pointer;
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Mobile: Hide the menu-item container only */
@media (max-width: 767px) {
    .menu-item {
        display: none;
    }
}

 /* Show dropdown when checkbox is checked */
.toggle-input:checked + .popup {
    display: block;
}
* {
    box-sizing: border-box;
}


:root {
    --magnifier: 6;
    --gap: 1vmin;
    --transition: 0.5s;
}

.container {
    width: 80vw;
    height: 50vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
}

img {
    --brightness: 0.75;
    /* --grayscale: 1; */
    transition: flex var(--transition), filter var(--transition);
    height: 100%;
    filter: grayscale(var(--grayscale)) brightness(var(--brightness));
    object-fit: cover;
    overflow: hidden;
    flex: 1;
}

img:hover {
    --brightness: 1.15;
    --grayscale: 0;
    flex: var(--magnifier);
}





@media screen and (max-width: 768px) {


    .specsLn {
        padding: 8px 0;
    }
}

#banner-unq-slider-container { 
    position: relative; 
    width: 100%; 
    /* height: 400px;  */
    overflow: hidden; 
    /* border-radius: 10px;  */
}
#banner-unq-slider {
    display: flex;
    /* width: 300%; */
    /* height: 100%; */
    animation: banner-unq-slide 9s infinite;
}
.banner-unq-slide { 
    width: 100%;
     flex: 1 0 100%; }
.banner-unq-slide img {
     width: 100%; height: 20rem;
     min-height: 23rem;
      /* object-fit: none;  */
    }

@keyframes banner-unq-slide {
    0%, 33.33% { transform: translateX(0%); }
    33.34%, 66.66% { transform: translateX(-100%); }
    66.67%, 100% { transform: translateX(-200%); }
}

@media (max-width: 768px) {
    #banner{
    display: none; /* Hide section on tablets and desktops */
}
}

.specsRow {
    width: 100%;
    border-collapse: collapse;
}

.specsRow table {
    width: 100%;
    border-collapse: collapse;
    font: 400 14px 'Roboto', Arial, sans-serif;
    color: #555;
}

.specsRow table th,
.specsRow table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: start;
    font-size: 1.3rem;
}


.specsRow table th {
    text-align: start;
    width: 20rem;
    text-decoration: none;
  
}

/* .specsHd {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 0;
    color: #333;
} */

.specsRow table tr:last-child td {
    border-bottom: none;
}
.specsRow table tr:last-child th {
    border-bottom: none;
}
.image-gallery {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive layout for mobile screens */



/* Container for each image */
.img-container {
    border: solid gainsboro;
    padding: 0.3rem;
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
    

}

/* The image with smooth hover effect */
.img-container img {
    width: 15rem;
    height: 15rem;
    object-fit: cover;
    cursor: pointer;
    z-index: 100;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

/* Enlarge image on hover */
.img-container:hover img {
    transform: scale(1.5);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 10;
    /* Ensures the hovered image stays on top */
}
@media (max-width: 666px) and (min-width: 360px) {
    .image-gallery {
        /* width: 30rem; */
        /* height: 30rem; */
        /* flex-direction: column; */
        align-items: center; /* Center images in the column */
    }
    .img-container{
        width: 25rem;
        height: 25em;
        /* gap: 0.5rem; */
    }
    .img-container img {
        /* width: 24rem;
        height: 24em; */
    }
}
/* @media (min-width: 770px) and (max-width: 1080px){
    .image-gallery {
        width: 30rem;
        /* height: 30rem; */
        /* flex-wrap: nowrap;
        align-items: center; /* Center images in the column */
    /* }
    .img-container{
        width: 16rem;
        height: 16em;
        gap: 0.5rem;
    }
    .img-container img {
        width: 15rem;
        height: 15em; */
    /* } 
}  */

.pcss3t {

    width: 80rem;
    max-width: 100%;
    margin: 50px auto;
    margin-top: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    background: #ffffff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow: hidden;
    border-radius: 6px;
}

/* Hide the radio buttons */
.pcss3t input {
    display: none;
}

/* Tab labels */
.pcss3t label {
    display: inline-block;
    padding: 15px 25px;
    
    color: goldenrod;
    cursor: pointer;
    transition: background 0.3s ease;
    text-align: center;
    font-size: 1.5rem;
    
}

.goldlinedes::before {
content: "";
display: block;
width: 100%;
height: 3px;
background-color: #e67e22;
/* margin-top: 5px; */
}

.pcss3t label:hover {
    /* background: #34495e; */
}

/* Style the active tab label */
.pcss3t input:checked+label {
    background: #e67e22;
    color: #fff;
    
}

/* Optional: spacing for icons inside the labels */
.pcss3t label i {
    margin-right: 8px;
}

/* Container for the tab content */
.pcss3t ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* background: #ecf0f1; */
}

/* Hide all tab content by default */
.pcss3t ul li {
    display: none;
    padding: 25px;
    animation: scaleIn 0.5s ease forwards;
    color: #2c3e50;
    line-height: 1.6;
    width: 70rem;
    margin-left: 3rem;
}

/* Scale-in animation for tab content */
@keyframes scaleIn {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Display the corresponding content when the radio is checked */

/* Footer styling */
#foot {
    /* background: #2c3e50; */
    color: #ecf0f1;
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
}

#labLogos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
}

.labLg {
    background: #34495e;
    padding: 10px 15px;
    border-radius: 4px;
}

.labTxt {
    text-align: center;
}

.labNm {
    font-weight: bold;
    margin-bottom: 5px;
}

/* Responsive styling for mobile devices */
@media (max-width: 600px) {
    .company-info{
    display: none; /* Hide section on tablets and desktops */
}
    .pcss3t label {
        padding: 10px 15px;
        font-size: 1.5em;
        width: 100%;
        /* Two labels per row */
        box-sizing: border-box;
    }

    .pcss3t ul li {
        padding: 20px 15px;
    }

    #foot {
        font-size: 12px;
    }
}
@media (min-width: 400px) and (max-width: 499px) {
    .pcss3t {
        width: 100%;
    } 
    .company-info{
    display: none; /* Hide section on tablets and desktops */
}
}
@media (max-width: 768px) {
    .company-info{
    display: none; /* Hide section on tablets and desktops */
}
}


@media (min-width: 768px) {
    .comp-info-mobile-2nd-attem{
        display: none; /* Hide section on tablets and desktops */
    }
}

@media (max-width: 767px) {
    .comp-info-mobile-2nd-attem {
        display: flex; /* Show only on mobile screens */
        /* width: 100%; */
        flex-direction: column;
        /* text-align: start; */
        margin: 1rem;
        font: 400 19px 'Roboto Condensed', Arial, sans-serif;
        text-align: justify;
    /* color: #030200a1; */
        
    }
   
}

        /* Hide all content sections by default */
.comp-info-mobile-2nd-attem .content {
    display: none;
    /* Additional styling as needed */
  }
  
  /* Show content when the corresponding checkbox is checked */
  .comp-info-mobile-2nd-attem input[type="checkbox"]:checked + label + .content {
    display: block;
    /* Additional styling as needed */
  }
  
  /* Style for the plus/minus indicators */
  .comp-info-mobile-2nd-attem label {
    font-size: 1.5rem;
    position: relative;
    display: flex;
    cursor: pointer;
    padding-left: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: solid #626262 !important;
    font-weight: bold;
    color: goldenrod;
  }
  
  .comp-info-mobile-2nd-attem .plus_in_mobile,
  .comp-info-mobile-2nd-attem .minus_in_mobile {
    position: absolute;
    left: 0;
    /* Additional positioning as needed */
  }
  
  /* Show plus sign when checkbox is unchecked */
  .comp-info-mobile-2nd-attem input[type="checkbox"] + label .plus_in_mobile {
    display: inline;
  }
  
  .comp-info-mobile-2nd-attem input[type="checkbox"]:checked + label .plus_in_mobile {
    display: none;
  }
  
  /* Show minus sign when checkbox is checked */
  .comp-info-mobile-2nd-attem input[type="checkbox"] + label .minus_in_mobile {
    display: none;
  }
  
  .comp-info-mobile-2nd-attem input[type="checkbox"]:checked + label .minus_in_mobile {
    display: inline;
  }

  .input_mobile{
    display: none;
  }
  
    
        .usefulLinks{
            display: flex; flex-direction: row;color: black;
            align-items: center;
            text-align: center;
            justify-content: center;
        }

        .usLin{
            
            align-items: start; text-align: start;
            padding-left: 4rem;
        }

        .usLin p{
            font-size: 1rem; text-align: start; width: 30rem;
        }

        .aLin{
            color: #000;
        }

        .aLin a{
            text-decoration: none;
            color: inherit;
        }

        #usea{
            border-right: solid gainsboro;
            text-align: center;
            margin-top: 1rem;
            width: 30rem;
        }

    

        @media (min-width: 300px) and (max-width: 399px){
        .usefulLinks{
            flex-direction: column;
           
        }
        .usLin p{
             text-align: center; width: 30rem;
        }
        #usea{
            border-right: none;
            text-align: center;
            justify-content: center;
            width: 13rem;
         
        }
        #usea h3{
         
           /* text-align: center; */
        }
        .usLin{
            margin: 2rem;
           
            
            align-items: center;
            text-align: center;
            justify-content: center;
            
        }
    }

    #hdr{
        display: flex !important ;
        justify-content: center !important ;
    }
    .menu{
        margin-right: 2rem !important;
    }
    .logo{
        display: flex !important;
    }
    #tmpShell_menu{
        /* color:#daa520ad !important; */
        color: #626262 !important;
         margin: 0 0 0 0rem !important;
         font-size: 4rem !important; 
         align-items: center !important;
    }   
    #tmpShell_menu_logo{
        height: 5rem !important; 
         width: 10rem !important;
          border-radius: 0.5rem ;
          /* margin-top: 1rem; */
          z-index: 1;;
    }
    #menu_item_pred_div{
        display: flex; justify-content: center; 
    }
    #banner{
        margin-top: 1rem !important; 
        z-index: 1 !important;
    }
    #bellow_banner_css{
        padding: 0px; 
        color: #626262 !important;
        text-align: center;
    }
    #banner_bellow_bellow_imsg{
        aspect-ratio: 1/1;
        height:100%;
        width: 60vw;
        filter: none;
        border-radius: 1rem;
         border: solid gainsboro;
         padding: 0.3rem;
       
    }
    #banner_b_bellow_imsg{
        padding: 0.5rem; 
    }
    #specs_container_beloow_imgk{
        display: flex; justify-content: center; gap: 20px; padding: 20px;
    }
    #bellow_specs_continer_div{
        width: 100%;padding: 20px;  background-color: #f8f8f8; border-radius: 10px; box-shadow: 2px 2px 10px rgba(0,0,0,0.1); text-align: center;
    }
    #bellow_id_promise_seal{
        padding: 0px; 
        color:    goldenrod; 
         color:#626262 !important ; 
         font-size: 2rem;text-align: center;
    }
    .footer_foot_foot_lasr{
        /* background-color: #e8e8e8a3;  */
        width: 100%;
    }
    #usefull_links_vala_div{
        font-size: 1.5rem;
    }
    #useLin_vala_h3_ki_css{
        margin: 0px; text-align: start;
    }
    #alin_vala_div_kis_css{
        display: flex; flex-direction: column; text-align: start;
        
    }
    #uslin_vala_2nd_div{
        width: 30rem;
    }
    #uslin_vala_h3_css_imp{
        margin: 0px; 
    }
    .footbot_div_css_class{
        background-color: #e8e8e8a3;
    }
    #Engagement_ring_anchor{
        text-decoration: none;
        color: black;
    }
    #Wedding_Rings_anchor{
        text-decoration: none;
        color: black;
    }
    #Diamond_Rings_anchor{
        text-decoration: none;
        color: black;
    }
    #New_arrivals_anchor{
        text-decoration: none;
        /* color: black; */
        color: #626262 !important;
    }
    #On_sale_anchor{
        text-decoration: none;
        /* color: black; */
        color: #626262 !important;
    }
    .luxury_jwelery_anchor{
        text-decoration: none;
        color: black;
    }
    #men_ring_anchor{
        text-decoration: none;
        color: black;
    }
    #fine_rings_anchor{
        text-decoration: none;
        color: black;
    }
    #fine_bracelets_anchor{
        text-decoration: none;
        color: black;
    }
    #fine_necklace_anchor{
        text-decoration: none;
        color: black;
    }
    #fine_earring_anchor{
        text-decoration: none;
        color: black;
    }
    #fine_pendant_anchor{
        text-decoration: none;
        color: black;
    }
    #product_para{
        font: 400 19px 'Roboto Condensed', Arial, sans-serif;
        text-align: justify;
        color: #030200a1;
    }
    #main_image_tile{
        place-items: center;justify-content: center;
    }
    #to_center{
        display: grid;
        justify-content: center;
    }
    #table_specification_product{
        width: 40rem;
    }
    li.tab-content.tab-content-first.typography p {
        margin: 0.7rem;
        font: normal 20px 'Roboto', Arial, sans-serif;
    }
    li.tab-content.tab-content-2.typography p {
        margin: 0.7rem;
        font: normal 20px 'Roboto', Arial, sans-serif;
    }
    li.tab-content.tab-content-first.typography p {
        margin: 0.7rem;
        font: normal 20px 'Roboto', Arial, sans-serif;
    }
    li.tab-content.tab-content-3.typography p {
        margin: 0.7rem;
        font: normal 20px 'Roboto', Arial, sans-serif;
    }
    li.tab-content.tab-content-last.typography p {
        margin: 0.7rem;
        font: normal 20px 'Roboto', Arial, sans-serif;
    }

    li.tab-content.tab-content-first.typography h1 {
        margin: 0.7rem;
        font: normal 20px 'Roboto', Arial, sans-serif;
    }
    li.tab-content.tab-content-2.typography h1 {
        margin: 0.7rem;
        font-weight: bold;
        font-size: 2rem;
    }
    li.tab-content.tab-content-first.typography h1 {
        margin: 0.7rem;
        font-weight: bold;
        font-size: 2rem;
        
    }
    li.tab-content.tab-content-3.typography h1 {
        margin: 0.7rem;
        font-weight: bold;
        font-size: 2rem;
    }
    li.tab-content.tab-content-last.typography h1 {
        margin: 0.7rem;
        font-weight: bold;
        font-size: 2rem;
        font-style: normal;
    }
    .h1_abour_section{
        
    }
    #about_link_button {
       margin-top: 1.5rem;
        color: black;
        padding: 12px 24px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.3s ease, box-shadow 0.2s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      
      #about_link_button:hover {
        background-color: #ffea98; /* Indigo-700 */
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
      }
      
      #about_link_button:active {
        background-color: #ffea98; 
        transform: scale(0.98);
      }
      @media (max-width: 768px) {
        #banner_bellow_bellow_imsg{
            aspect-ratio: 1/1;
            height:100%;
            width: 90vw;
            filter: none;
            border-radius: 1rem;
             border: solid gainsboro;
             padding: 0.3rem;
           
        }
        .usLin{
            padding: 0;
        }
        #table_specification_product{
            width: 100%;
        }
        #wrapper{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            place-content: center;
            place-items: center;
        }
        
    #uslin_vala_2nd_div{
        width: 80vw;
    }
    .usLin p {
        width: 100%;
    }
      }


      /* === MOBILE OPTIMIZED LAYOUT (for screens up to 768px) === */
@media (max-width: 768px) {
    /* Body Layout */

    #product_para{
        display: none;
    }

    .plus_in_mobile{
        padding-right: 1rem;
    }
    .minus_in_mobile{
        padding-right: 1rem;
    }

    body {
      margin: 0;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      font-family: Arial, sans-serif;
    }
  
    /* Header / Logo */
    #hdr,
    .logo,
    .containerNav,
    nav.menu {
      /* display: flex; */
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
  
    #tmpShell_menu_logo {
      width: 80px;
      height: auto;
      border-radius: 0.5rem;
      margin-bottom: 0.5rem;
    }
  
    #tmpShell_menu {
      font-size: 2rem;
      color: goldenrod;
      margin: 0;
    }
  
    /* Center banner and text */
    #banner,
    #bellow_banner_css {
      text-align: center;
      width: 90vw;
      margin-top: 1rem;
      font-size: 1.5rem;
    }
  
    /* Banner image */
    #banner_b_bellow_imsg img {
      width: 80vw;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 1rem;
      border: solid gainsboro;
      padding: 0.3rem;
    }
  
    /* Image gallery layout */
    .image-gallery {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      width: 100%;
    }
  
    .img-container {
      width: 80vw;
      height: auto;
    }
  
    .img-container img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
  
    .img-container:hover img {
      transform: scale(1.05);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }
  
    /* Table Section */
    #table_specification_product table {
      width: 100%;
      font-size: 1rem;
    }
  
    #table_specification_product table td,
    #table_specification_product table th {
      padding: 10px;
     
    }
  
    /* Footer */
    #foot {
      /* background: #f5f5f5; */
      padding: 20px 0;
      font-size: 0.9rem;
      width: 100%;
    }
  
    .usefulLinks {
      flex-direction: column;
      align-items: center;
    }
  
    .usLin {
      width: 90%;
      margin-bottom: 1.5rem;
    }
  
    .aLin {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }
  
    .aLin a {
      color: #000;
      text-decoration: none;
    }
  
    /* Tabs section (About Us, Payment, etc.) */
    .pcss3t {
      width: 100%;
    }
  
    .pcss3t label {
      font-size: 1.2rem;
      width: 100%;
      padding: 12px 0;
      text-align: center;
    }
  
    .pcss3t ul li {
      padding: 1rem;
      font-size: 1rem;
      line-height: 1.6;
    }
  }

  @media (min-width: 800px) and (max-width: 1050px){
  
    .image-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        width: 100%;
        justify-items: center;
      }
      .img-container {
        width: 45vw; /* nearly half of viewport width */
        aspect-ratio: 1 / 1; /* makes it square */
        overflow: hidden;
        border: 1px solid gainsboro;
        border-radius: 0.5rem;
        padding: 0.3rem;
      }
      .img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .img-container:hover img {
        transform: scale(1.05);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      }
      #bellow_id_promise_seal {
        font-size: 1.5rem;
      }
    
    
  }
  @media (max-width: 450px){
    #usea{
        border-right: none;
        text-align: center;
        justify-content: center;
        width: 80vw;
        /* display: grid; */
        border-bottom: solid ;
        /* border-top: solid ; */
        padding-bottom: 1.5rem;
        padding-top: 1.5rem;
    }
  }
  

  #button_a_link{
    text-decoration: none;
  }

  .popup a:last-child div {
    border-bottom: none;
  }
  .popup{
    font-size: 1.2rem;
  }