* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {

    --same-site-black-bg: #1E1E1E;

    --same-blue-color: #3F83C4;

    --same-yellow-color: #FFD011;

    --same-dark-yellow-color: #EEC210;

    --same-heading-color: #000000;

    --same-para-color: #1E1E1E;

    --same-bg-color: #FFFBE7;

    --same-footer-bg: #E5EEFF;

    --same-fbfb: #FBFBFB;

    --heading-font: "Nunito", serif;

    --para-font: "Poppins", serif;

    --same-white: #fff;

    --same-black: #000000;

    --menu-active-color: #92B4EC;

    --search-bg: #F5F5F5;

    --same-black-50: #00000079;

    --same-card-grey-bg: #F1F1F1;

    --same-cta-btn: #DE302F;

    --same-gradient-bg: linear-gradient(90deg, #DE302F 0%, #1E1E1E 100%);

    --same-para-color-btn: #6D6D6D;

    /* 1920 */

    --font-14: clamp(12px, 0.75vw, 14px);

    --font-16: clamp(12px, 0.85vw, 32px);

    --font-18: clamp(12px, 0.94vw, 36px);

    --font-19: clamp(12px, 1vw, 38px);

    --font-20: clamp(14px, 1.05vw, 40px);

    --font-21: clamp(12px, 1.1vw, 42px);

    --font-22: clamp(12px, 1.15vw, 44px);

    --font-24: clamp(12px, 1.25vw, 48px);

    --font-26: clamp(12px, 1.4vw, 53px);

    --font-28: clamp(18px, 1.46vw, 56px);

    --font-32: clamp(12px, 1.7vw, 65px);

    --font-35: clamp(14px, 1.83vw, 70px);

    --font-36: clamp(12px, 1.88vw, 72px);

    --font-40: clamp(16px, 2.085vw, 80px);

    --font-45: clamp(18px, 2.35vw, 90px);

    --font-48: clamp(18px, 2.5vw, 96px);

    --font-50: clamp(30px, 2.6vw, 100px);

    --font-58: clamp(24px, 3.02vw, 117px);

    --font-56: clamp(22px, 2.92vw, 112px);

    --font-64: clamp(22px, 3.35vw, 128px);

    --font-80: clamp(36px, 4.17vw, 160px);

    --font-120: clamp(25px, 6.25vw, 240px);

    --line-20-30-height: 1.5;

    --line-20-27-height: 1.35;

    --line-24-32-height: 1.35;

    --line-24-28-height: 1.2;

    --line-18-24-height: 1.35;

    --line-16-25-height: 1.57;

    --line-16-32-height: 2;

    --line-18-27-height: 1.5;

    --line-18-30-height: 1.7;

    --line-14-22-height: 1.6;

    --line-19-24-height: 1.3;

    --line-19-30-height: 1.58;

    --line-20-23-height: 1.15;

    --line-20-24-height: 1.2;

    --line-20-26-height: 1.3;

    --line-20-36-height: 1.8;

    --line-21-26-height: 1.24;

    --line-22-28-height: 1.3;

    --line-22-36-height: 1.65;

    --line-22-25-height: 1.14;

    --line-26-30-height: 1.16;

    --line-32-43-height: 1.35;

    --line-45-52-height: 1.16;

    --line-40-46-height: 1.15;

    --line-40-54-height: 1.35;

    --line-48-56-height: 1.17;

    --line-58-80-height: 1.38;

    --line-56-80-height: 1.43;

    --line-64-87-height: 1.35;

    /* 1920 */

}



body {

    margin: 0;

    overflow-x: hidden;

}



/* Topbar */

.topbar {

    background: var(--same-site-black-bg);

    color: var(--same-white);

    /* text-align: center; */

    padding: 10px 0px;

    font-size: 16px;

    position: relative;

    z-index: 999;

}



/* Header */

.header {

    background: var(--same-white);

    text-align: center;

    padding: 18px 0px;

    font-size: 20px;

    position: relative;

    top: 0;

    z-index: 1000;

    box-shadow: 0px 4px 4px 0px #00000040;

}



.header-fixed {

    background: var(--same-white);

    text-align: center;

    padding: 20px 0px;

    font-size: 20px;

    position: fixed;

    top: 0;

    z-index: 900;

    width: 100%;

    box-shadow: 0px 4px 4px 0px #00000040;

}



.content {

    height: 1500px;

    padding: 20px;

    background: #f4f4f4;

}



.common-width {

    width: 95%;

    margin: auto;

}



/* topbar */

.topbar-content ul {

    list-style: none;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 0;

    margin: 0;

}



.second-topbar-content {

    justify-self: end;

}



.topbar-content ul li a {

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

    font-weight: 500;

    font-size: var(--font-14);

    line-height: 1.5;

    color: var(--same-white);

    text-decoration: none;

    display: block;

}



img.socialicon {

    width: 24px;

}



/* topbar */



/* header  */

.menu ul {

    list-style-type: none;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    padding: 0;

    margin: 0;

    gap: 40px;

}



.menu ul li a {

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

    font-weight: 400;

    font-size: var(--font-20);

    line-height: 1.5;

    display: block;

    text-decoration: none;

    color: var(--same-black);

    opacity: 0.5;

}



.header-fixed .menu ul li a {

    opacity: 1;

}



.header-fixed .header-logo {

    width: min(15rem, 16%);

}



.menu-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.search-input .input-group {

    background: var(--search-bg) !important;

    border-radius: 5px;

    overflow: hidden;

    padding: 0.4rem 1rem;

}



.search-input .input-group input,

.search-input .input-group button {

    border: 0;

    box-shadow: none !important;

    outline: 0 !important;

    padding: 5px;

    background: transparent !important;

    display: flex;

}



.header-logo img {

    width: 100%;

}



/* header  */



/* homebanner */

.same-btn-style {

    background: var(--same-cta-btn);

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

    font-weight: 600;

    font-size: var(--font-20);

    line-height: 1.5;

    color: var(--same-white);

    border-radius: 5px;

    padding: 0.7rem 2rem;

    /* width: min(16rem, 50%); */

    min-width: 150px;

    display: block;

    text-decoration: none;

}



.same-gradient-style {

    background: var(--same-white);

    box-shadow: 0px 4px 4px 0px #0000000D inset;

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

    font-weight: 600;

    font-size: var(--font-20);

    line-height: 1.5;

    color: var(--same-cta-btn);

    border-radius: 10px;

    padding: 0.7rem 2rem;

    /* width: min(16rem, 50%); */

    /* min-width: 150px; */

    display: block;

    text-decoration: none;

}



.same-gradient-style:hover {

    background: var(--same-gradient-bg);

    color: var(--same-white);

}



.contact-btn .same-btn-style:hover {

    color: var(--same-white);

}



.search-input .input-group img {

    width: 15px;

    object-fit: contain;

}



.header-box-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: relative;

}



.header-logo {

    visibility: hidden;

    width: 50px;

}



.header-logo.header-logo-absolute {

    position: absolute;

    visibility: visible;

    width: min(15rem, 16%);

    top: -32px;

}



.header-right-section {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

}



.banner-content {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

    color: var(--same-white);

    display: flex;

    flex-direction: column;

    gap: 18px;

}



.h1_css {

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

    font-weight: 400;

    font-size: var(--font-50);

    line-height: 1.5;

}



.h1_css span {

    font-weight: 600;

}



.h5_css {

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

    font-weight: 400;

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

    line-height: 100%;

}



.product-nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border: 1px solid #1E1E1E21;

    border-left: 0;

    border-right: 0;

    padding: 0px 15px;

    margin: 1rem 0px;

}



.product-nav-item {

    display: flex;

    align-items: center;

    gap: 40px;

}



.nav-tabs,

.nav-tabs .nav-link {

    border: 0;

}



.pro-card-slider .slick-track {

    display: flex;

    gap: 20px;

    justify-content: space-between;

}



/* .pro-card-slider .slick-slide>div {

    display: flex;

    

} */



.pro-card-slider .slick-slide img {

    display: block;

    width: 200px;

    height: 200px;

    object-fit: contain;

    margin: auto;

}



.product-item-box .card .card-title {

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

    font-weight: 400;

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

    line-height: 1;

    color: var(--same-black);

}



.product-item-box .card .card-text {

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

    font-weight: 400;

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

    line-height: 1.5;

    color: var(--same-para-color);



}



.product-item-box .card,

.product-item-box .card-footer {

    border: 0;

    box-shadow: none;

    padding: 0;

}



.product-item-box .card-footer a {

    text-align: center;

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

    font-weight: 500;

    font-size: var(--font-20);

}



.product-heading {

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

    font-weight: 600;

    font-size: var(--font-22);

    line-height: 1.5;

}



.product-nav nav button {

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

    font-weight: 400;

    font-size: var(--font-18);

    line-height: 1.5;

    color: var(--same-para-color-btn);

    padding-top: 1rem;

    padding-bottom: 1rem;

}



.product-nav nav .nav-tabs .nav-link.active {

    border-bottom: 3px solid var(--same-cta-btn);

}



.product-nav-right {

    gap: 20px;

}



button.pro-arrow {

    background: #B3B3B3;

    color: var(--same-white) !important;

    outline: 0 !important;

    box-shadow: none !important;

}



button.pro-arrow:hover {

    background: var(--same-black);

}



.enquiry-content {

    position: absolute;

    top: 50%;

    left: 4%;

    color: white;

    transform: translate(0px, -50%);

}



.enquiry-content .enquiry-heading {

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

    font-weight: 200;

    font-size: var(--font-35);

    line-height: 1.5;

}



.enquiry-content .enquiry-heading span {

    font-weight: 500;

}



.enquiry-btn {

    display: inline-block;

    margin-top: 1.5rem;

}



.enquiry-btn a {

    color: var(--same-para-color);

    font-weight: 500;

}



.enquiry-btn a:hover {

    background: var(--same-white);

    color: var(--same-para-color);

}



.enquiry-btn a span {

    color: var(--same-cta-btn);

}



.wholesale-slider .slick-track {

    display: flex;

    gap: 40px;

    justify-content: space-between;

}



.wholesale-slider .slick-track .same-gradient-style {

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

    font-weight: 400;

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

    background: var(--same-white) !important;

    text-align: center;

    color: var(--same-cta-btn) !important;

    cursor: default;

}



.wholesale .pro-arrow {

    position: absolute;

    top: 50%;

    transform: translate(0px, -50%);

}



.wholesalerightarrow {

    left: 5px;

}



.wholesaleleftarrow {

    right: 5px;

}



.same-heading {

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

}



.wholesale-box {

    text-align: center;

}



.same-heading h6 {

    font-weight: 400;

    font-size: var(--font-18);

    line-height: 1.5;

    color: var(--same-cta-btn);

    margin-bottom: 0px;

}



.same-heading h2 {

    font-weight: 600;

    font-size: var(--font-40);

    line-height: 1.5;

    color: var(--same-black);

    margin-bottom: 0px;

}



.same-heading h2 span {

    color: var(--same-cta-btn);

}



.wholesale,

.enquiry,

.gettouch {

    margin-top: min(2.5rem, 8%);

}



.wholesale-content {

    margin-top: 2rem;

}



.form-section .form-row {

    display: flex;

    gap: 40px;

    flex-wrap: wrap;

}



/* .form-section .form-col {

    flex: 1;

} */

.form-section .firstcol {

    flex: 1 1 55%;

}



.form-section .secondcol {

    flex: 1 1 40%;

}



.form-section .form-box form {

    display: flex;

    flex-wrap: wrap;

    gap: 30px;

}



.form-section .form-box form .form-element {

    flex: 1 1 46%;

}



.form-section .form-box {

    margin-top: min(2rem, 8%);

}



.form-box label {

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

    font-weight: 400;

    font-size: var(--font-18);

    line-height: 1.5;

    color: #1F1F1F8F;

    margin-bottom: 5px;

}



.form-box .form-control {

    border: 1px solid #0000002B;

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

    font-weight: 400;

    font-size: var(--font-18);

    line-height: 1.5;

    border-radius: 10px;

    padding: 1rem 1rem;

    box-shadow: none !important;

    outline: none;

}



.form-col iframe {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 20px;

}



.footer-top-strip {

    position: relative;

    display: inline-block;

    /* Ensures the container wraps around the image */

}



.footer-top-strip::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #000000BA;

    /* Semi-transparent black overlay */

}



.footer-top-strip img {

    width: 100%;

}



.footer-top {

    position: relative;

}



.footer-top-image {

    width: 175px;

    position: absolute;

    top: -18px;

    left: 50%;

    transform: translate(-50%, 0px);

}



.footer-top-image img {

    width: 100%;

}



footer {

    margin-top: 5rem;

}



.footer-row {

    background: var(--same-para-color);

    padding-bottom: 20px;

}



.footer-col ul {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 30px 70px;

    padding: min(5rem, 8%) 0px 2rem;

    margin-bottom: 0px;

}



.footer-col ul li a {

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

    font-weight: 400;

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

    line-height: 1.5;

    color: var(--same-white);

    text-decoration: none;

}



.topbariconline {

    height: 1px;

    width: 100%;

    background: #FFFFFF3D;

}



.address-content,

.add-heading,

.address-item i {

    color: white;

}



.add-heading {

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

    font-weight: 600;

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

    line-height: 1.5;

    padding-bottom: 12px;

}



.address-item i {

    color: white;

    font-size: 1.2rem;

}



.address-row {

    display: flex;

    align-items: flex-start;

    gap: 30px;

}



.address-item {

    display: flex;

    align-items: flex-start;

    gap: 13px;

}



.footer-address {

    padding: 20px 0px;

}



.address-content {

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

    font-weight: 600;

    font-size: var(--font-14);

    line-height: 1.5;

}



.address-content strong {

    margin-bottom: 8px;

    display: inline-block;

    font-weight: 600;

}



.address-content span {

    font-weight: 400;

}



.footer-address {

    padding-top: min(3rem, 8%);

}



.address-content span {

    color: #D2D2D2;

}



.facebook {

    color: white;

    display: flex;

    gap: 22px;

    align-items: center;

    float: right;

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

    font-weight: 400;

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

    line-height: 1.5;

}



.facebook a i {

    font-size: 2rem;

    color: white !important;

}



.auth img {

    width: 110px;

}



.flex-add {

    display: flex;

    align-items: flex-start;

    gap: 30px;

}



.address-flex:nth-child(2) {

    flex: 0 1 25%;

}



.address-flex:nth-child(1) {

    flex: 1 1 50%;

}



.authitem {

    display: flex;

    flex-direction: column;

    justify-content: end;

    align-items: end;

    gap: 30px;

    color: white;

    text-align: center;

}



.auth span {

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

    font-weight: 600;

    font-style: italic;

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

    line-height: 1.5;

    padding-bottom: 10px;

    display: inline-block;

}



.copybox {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

}



.copybox span {

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

    font-weight: 400;

    font-size: var(--font-14);

    line-height: 1.5;

}



.copybox i {

    font-size: 22px;

}



.copyright {

    padding: min(2rem, 8%) 0px 1rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.copy-item a {

    color: white !important;

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

    font-weight: 400;

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

    line-height: 1.5;

}



.footer-col ul {

    list-style-type: none;

}



.header-fixed .search-input .input-group button,

.header-fixed .search-input .input-group {

    background: transparent !important;

}



.header-fixed .header-logo.header-logo-absolute {

    position: absolute;

    visibility: visible;

    width: min(15rem, 15%);

    top: -33px;

}



.bredcrumb {

    position: absolute;

    top: 90px;

    left: 4%;

    color: var(--same-white);

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

    font-weight: 300;

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

    line-height: 1.5;

}



.header .menu-row {

    position: absolute;

    top: 100%;

    left: 50%;

    transform: translate(-50%, 1px);

    width: 100%;

}



.header .menu {

    margin: auto;

}



.header .menu ul {

    justify-content: space-between;

    gap: 0px;

    position: relative;

    /* padding: 0px 50px; */

}



.header .menu ul li a {

    padding: 1.5rem 2.2rem;

    color: white;

    opacity: 1;

    position: relative;

}



.header .menu ul li a::after, .header .menu ul::after {

    content: '';

    background: var(--same-para-color);

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: -2;

    transform: skewX(-50deg);

}

.header .menu ul li a::after{

    z-index: -1;

}

.header .menu ul li a:hover::after {

    background: white;

}



.header .menu ul li a.active-nav-link::after {

    background: white;

}



.header .menu ul li a.active-nav-link{

    color: #000;

}



.header .menu ul li a:hover {

    color: black !important;

}

.credit-box {

    text-align: center;

}



.credit-text,

.act-content {

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

    font-weight: 400;

    font-size: var(--font-18);

    line-height: 3;

}



.red-text {

    color: var(--same-cta-btn);

    font-weight: 600;

}



.act-content {

    line-height: 1.7;

    width: 60%;

    margin: auto;

    padding-top: min(1.5rem, 8%);

}



.act {

    margin: min(2rem, 8%) 0px;

}



.linkbtn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    width: 100%;

}



.linkbtn a {

    text-decoration: underline;

}



.credit-contact {

    margin-top: min(2rem, 8%);

}

.topbar{
    display: none;
}