/* ========== Root Variables ========== */

:root {

    /* Colors */

    --white: #FFFFFF;

    --dark-gray: #3D3D3D;

    --light-green: #B1EF73;

    --light-yellow: #fcff54;

    --blue: #3366FF;

    --gray: #A2A2A2;

    --black: #000000;

    --red: #ff0000;

    /* Font Families */

    --font-primary: "Acronym", sans-serif;



    /* Font Sizes */

    --fs-16: 16px;

    --fs-24: 24px;

    --fs-42: 42px;

    --fs-64: 64px;

    --fs-101: 82px;


    /* Letter Spacing */

    --ls-0: 0px;

    --ls-0-24: 0.24px;

    --ls-0-16: 0.16px;



    /* Line Heights */

    --lh-31: 31px;

    --lh-42: 42px;

    --lh-47: 47px;

    --lh-50: 50px;

    --lh-77: 77px;

}



/* ========== Typography Styles ========== */

.text-style-1 {

    font-family: var(--font-primary);

    font-weight: bold;

    font-size: var(--fs-24);

    line-height: var(--lh-42);

    letter-spacing: var(--ls-0-24);

    color: var(--dark-gray);

}



.text-style-2 {

    font-family: var(--font-primary);

    font-weight: normal;

    font-size: var(--fs-16);

    line-height: var(--lh-42);

    letter-spacing: var(--ls-0-16);

    color: var(--gray);

}



.text-style-3 {

    font-family: var(--font-primary);

    font-weight: normal;

    font-size: var(--fs-16);

    line-height: var(--lh-31);

    letter-spacing: var(--ls-0-16);

    color: var(--gray);

}



.text-style-4 {

    font-family: var(--font-primary);

    font-weight: normal;

    font-size: var(--fs-24);

    line-height: var(--lh-47);

    letter-spacing: var(--ls-0-24);

    color: var(--dark-gray);

}



.text-style-5 {

    font-family: var(--font-primary);

    font-weight: bold;

    font-size: var(--fs-101);

    line-height: var(--lh-77);

    letter-spacing: var(--ls-0);

    color: var(--blue);

}



.text-style-6 {

    font-family: var(--font-primary);

    font-weight: bold;

    font-size: var(--fs-42);

    line-height: var(--lh-50);

    letter-spacing: var(--ls-0);

    color: var(--blue);

}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary) !important;
}

/* ========== Utility Classes ========== */

.bg-light-green {

    background-color: var(--light-green);

}



.bg-light-yellow {

    background-color: var(--light-yellow);

}



.bg-dark-gray {

    background-color: var(--dark-gray);

}



.bg-gray {

    background-color: var(--gray);

}



.bg-blue {

    background-color: var(--blue);

}



.text-white {

    color: var(--white);

}



.text-light-yellow {

    color: var(--light-yellow);

}



.text-red {

    color: var(--red);

}



.text-dark-gray {

    color: var(--dark-gray);

}



.text-blue {

    color: var(--blue);

}

.text-green {

    color: var(--light-green);

}

/* ========== Responsive Design ========== */

@media (max-width: 768px) {

    .text-style-5 {

        font-size: var(--fs-42);

        line-height: var(--lh-50);

    }

}

p {

    color: #000000;

    line-height: 35px;

}

.header-button {

    background: var(--light-green) 0% 0% no-repeat padding-box;

    box-shadow: 4px 4px 24px var(--shadow-green);

    border: 1px solid var(--border-green);

    border-radius: 48px;



    padding: 10px 30px;

    font-size: 16px;

    font-weight: bold;

    color: var(--black);

    width: max-content;



    transition: all 0.3s ease;

    text-align: center;

}

.primary-button {

    background: var(--light-green) 0% 0% no-repeat padding-box;

    box-shadow: 4px 4px 24px var(--shadow-green);

    border: 1px solid var(--border-green);

    border-radius: 48px;



    padding: 20px 60px;

    font-size: 16px;



    color: white;

    width: max-content;



    transition: all 0.3s ease;

    text-align: center;

}

.secondary-button {

    background: var(--blue) 0% 0% no-repeat padding-box;

    box-shadow: 4px 4px 24px var(--shadow-green);

    border: 1px solid var(--border-green);

    border-radius: 48px;



    padding: 20px 60px;

    font-size: 16px;



    color: white;

    width: max-content;



    transition: all 0.3s ease;

    text-align: center;

}

.white-button {

    background: var(--white) 0% 0% no-repeat padding-box;

    box-shadow: 4px 4px 24px var(--shadow-green);

    border: 1px solid var(--border-green);

    border-radius: 48px;



    padding: 12px 24px;

    font-size: 16px;



    color: var(--blue);

    width: max-content;



    transition: all 0.3s ease;

    text-align: center;

}



.primary-button:hover {

    background: var(--border-green);

    box-shadow: 2px 2px 12px var(--shadow-green);

}



.main-nav-bar .nav-item {

    display: flex;

    align-items: center;

    margin: 0 10px;

}



.main-nav-bar .nav-item a {

    font-weight: bold;

    color: var(--black);

    font-size: 18px;

    text-wrap: nowrap;

}

.main-nav-bar .nav-item .active {

    color: var(--blue);

}

.hero-section {

    height: 500px;

    display: flex;

    align-items: center;

}



/* table style  */

.table-caption {

    font-size: 1.5rem;

    font-weight: bold;

    color: var(--dark-gray);

    margin-bottom: 1.5rem;

}



.comparison-table th {

    background-color: var(--blue);

    color: var(--light-green);



    padding: 15px 20px;

    vertical-align: baseline;



}



.check-mark,

.x-mark {

    text-align: center;



}

.nfc-mark img,

.qr-mark img {

    width: 35px;

}

.check-mark img,

.x-mark img {

    width: 30px;

}







.table-features {

    border-radius: 10px;

    border: 1px solid var(--blue);



}



.table-features tr {

    border-bottom: 0px solid white;

}

.footer-joinclub {

    margin-bottom: -75px;

}

.footer {

    background-color: var(--light-green);

    padding-top: 10rem;

    padding-bottom: 2rem;

}



.footer-heading {

    font-size: 2rem;

    font-weight: bold;

    margin-bottom: 1.5rem;

    color: var(--dark-gray);

}



.footer-subheading {

    font-size: 1.1rem;

    margin-bottom: 2.5rem;

    line-height: 1.6;

}



.footer-column-title {

    font-size: 1.1rem;

    font-weight: bold;

    margin-bottom: 1.25rem;

    color: var(--blue);

}



.footer-link {

    display: block;

    color: var(--dark-gray);

    text-decoration: none;

    margin-bottom: 0.75rem;

    font-weight: bold;

    transition: color 0.3s;

}



.footer-link:hover {

    color: var(--blue);

}



.footer-bottom {

    text-align: center;

    margin-top: 3rem;

    padding-top: 1.25rem;

    border-top: 1px solid #e0e0e0;

    font-size: 0.875rem;

    color: var(--gray);

}

.social-contact-icons {

    display: flex;

}

/* footer social media  */

.footer-social-contact-icons a {

    text-decoration: none;

    font-size: 25px;

    color: var(--black);

    margin: 0px 10px
}

.footer-social-contact-icons a:nth-child(1) {

    padding-left: 0px;

}



/* section social media  */

.social-contact-icons a {

    text-decoration: none;

    font-size: 25px;

    color: var(--black);

    padding: 0px 12px;

    margin: 0 15px;

}

.social-contact-icons {

    margin-bottom: 30px;

}





.newsletter span {

    border-radius: 20px !important;

    background: var(--blue);

    color: white;

}

.newsletter .input-newsletter {
    width: 90%;
    border: white;
    height: 37px;
    font-size: 12px;
    padding: 010px;
    border-radius: 25px;
    padding-left: 20px;
}




.newsletter .input-group-text {

    position: absolute;

    right: 0px;

}

.footer-logo {

    width: 100px;

}

.header-logo {

    width: 100px;

}

.footer-social {

    background-color: var(--blue);

    color: white;

    border-radius: 25px;



    padding: 35px;

}

.nfcsection {

    height: 100vh;

}

.add-to-cart-btn {

    border-radius: 10px;

    width: 100%;

    background: white;

    border: 2px solid var(--bs-border-color);

    text-align: center;

    text-decoration: none;

    padding: 5px 0px;

    margin: 0px 3px;

    color: var(--bs-body-color);

}

.buy-btn {

    width: 100%;

    padding: 5px 0px;

}

.product-card {

    border: 0px;

}

.br-max {

    border-radius: 10px;

}

.section {

    padding: 48px 0;

}

.breadcrumb {

    padding: 75px 0px;

}

.sortby-anchor {

    background: #B1EF73A3;

    color: #3D3D3D;

    font-size: 15px;

    padding: 5px 20px;

    border-radius: 20px;

    margin: 5px 5px;

    display: inline-block;





}

.sortby-anchor:hover {

    background: #90DE43;

}

.sortby-anchor-active {

    background: #90DE43;

}

.form-check-input:checked {

    background-color: var(--light-green);

    border-color: var(--light-green);

}

.form-check-input {



    border: 1px solid var(--light-green);

}

.who-needs-nfc-bg {



    background-image: url(../images/background-style.svg);

}

.shop-bg {



    background-image: url(../images/shop-bg.svg);

}

.how-it-works-bg {

    background-image: url(../images/how-it-works-bg.svg);

}

.nfc-analysis-page {

    background-image: url(../images/shop-bg.svg);



}

.home-bg {

    background-image: url(../images/home-bg.svg);

    background-position-y: -185px;

}

.about-bg-page {

    background-image: url(../images/about-bg.svg);

    background-position-y: 100px;



}

.solution-bg {

    background-image: url(../images/solution-bg.svg);

}

.background-style {

    background-repeat: no-repeat;

    background-size: 100%;

}

.shop-margin {

    padding: 75px 0px 25px 0px;

}





.solution-btn {

    width: 200px;

    padding: 20px 0px;

    margin-top: 50px;

}

.solution-image {

    width: 100%;



}

.solution-section {

    margin: 100px 0px;

}



.who-need-nfc-bg::after {

    content: "";
    /* Required for ::after to render */

    display: block;
    /* or use position absolute if needed */

    width: 100%;

    height: 100%;

    background-image: url(../images/who-need-nfc.png);

    background-size: cover;

    background-repeat: no-repeat;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 0;

    mix-blend-mode: multiply;

}



.who-need-nfc-bg {

    position: relative;

    background-size: 100%;

    background-color: #3366FF;

    z-index: 1;



}

.who-need-nfc-products {

    margin-top: 100px;

}



.top-newsletter .input-newsletter {

    width: 90%;

    border: white;

    height: 52px;

    padding: 0 20px;

    border-radius: 25px;

}



.newsletter .input-group-text {

    position: absolute;

    right: 0px;

    height: 100%;

    width: 35%;

    text-align: center;

    display: flex;

    justify-content: center;

    border-radius: 55px !important;

}

.footer-join {

    padding: 100px 35px;

}

.footer-social img {

    width: 35px;

    height: 35px;

}

.table-features th:nth-child(2),
.table-features th:nth-child(3) {

    border: 1px solid white;

}

.table-features td:nth-child(2),
.table-features td:nth-child(3) {

    border-left: 1px solid var(--blue);

    border-right: 1px solid var(--blue);

}

.why-nfc-discover {

    padding: 250px 0px 0;

    margin-top: -150px;

    border-radius: 20px;

    text-align: center;

    /* margin-bottom: -450px; */

}

.why-choose-nfc-small-boxes {

    top: -50px;

    position: relative;

}

.why-choose-nfc-main-box {

    margin-top: 100px;

}

.footer-social-contact-icons img {

    width: auto;

    height: 25px;

}

.home-page-bg {

    background-image: url(../images/homepage-bg.jpg);

    background-repeat: no-repeat;

    background-size: 100%;

}

.partners-box {

    background-color: #EBEBEB;

    border-radius: 20px;

    margin: 10px;

}

body {

    overflow-x: hidden !important;

}

.our-testimonials .testimonial-icon {

    width: 100px !important;

    height: auto;

}



.home-section {

    margin: 150px 0px;

}

.about-icon {

    width: 100px;

    height: 100px;

    background-color: var(--blue);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

}

.contact-input {

    padding: 20px 0px 20px 30px;

    border-radius: 41px;

    font-size: 15px;

}

.contact-section {

    height: 500px;

    margin-bottom: 250px;

}

.price-old {

    text-decoration: line-through;
    color: #aaa;

}

.price-new {
    font-size: 1.5rem;
    font-weight: bold;
}

.discount-badge {
    background-color: #ec407a;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

.qty-container {

    display: flex;

    align-items: center;

    background-color: #b1ef73 !important;

    border-radius: 999px;

    overflow: hidden;

    width: fit-content;

}

.qty-btn {

    width: 40px;

    height: 40px;

    border: none;

    font-size: 1.25rem;

    background-color: transparent;

    color: var(--blue) !important;

}

.qty-input {

    width: 60px;

    height: 40px;

    text-align: center;

    border: none;

    background-color: transparent;

    color: var(--blue) !important;

}

.thumb-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-right: 0.5rem;
}

.product-img {
    width: 100%;
    border-radius: 10px;
}



.nfc-analysis {

    margin-top: 100px;

    padding-top: 50px;

    margin-bottom: 100px;

    padding-bottom: 135px;

}

.nfc-analysis .why-choose-nfc-main-box {

    margin-top: 100px;

    margin-bottom: 150px;

}

.nfc-analysis-main-img {

    margin-bottom: -100px;

}

.newsletter input {
    background: linear-gradient(to right, white 70%, transparent 100%);
}

.primary-button:hover {
    background-color: black;
}