/* Scroll */
.scroll {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 999;
    width: 50px;
    height: 50px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    transform: translateX(200px);
    transition: 0.8s ease-in;
}

.scroll a {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll a svg {
    transform: rotateZ(-90deg);
    transition: 0.3s ease-in;
}

/* Down scroll */
.downScroll {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 999;
    width: 50px;
    height: 50px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    transform: translateX(0px);
    transition: 0.8s ease-in;
}

.downScroll a {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.downScroll a svg {
    transform: rotateZ(90deg);
    transition: 0.3s ease-in;
}

/* Sidebar */
.sidebar {
    background-color: var(--white);
    width: 20rem;
    border-right: 0px solid var(--black);
    height: 100vh;
    transform: translateX(-100%);
    position: fixed;
    z-index: 400;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: scroll;
    transition: 0.3s ease-in;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
}

.sidebar .closeButton {
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 16px 10px;
}

.sidebar .closeButton p {
    margin: 0;
    color: var(--primary);
    font-family: Poppins-Medium;
    cursor: pointer;
}

.sidebar .loginButtons {
    margin-left: 40px;
}

.sidebar ul {
    list-style-type: none;
    text-decoration: none;
    padding: 0;
    margin: 0;
    min-width: 100% !important;
}

.sidebar ul li {
    background-color: white;
    padding: 20px 30px;
    font-size: 16px;
    font-family: Poppins-Regular;
    margin: 0px;
    border-radius: 0px;
    color: var(--black);
    cursor: pointer;
}

.sidebar ul li a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar ul li a svg {
    width: 24px;
    height: 24px;
    transform: rotateZ(180deg);
}

.sidebar .button {
    min-width: 100% !important;
    margin-bottom: 80px;
}

.sidebar .button a {
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-family: Poppins-SemiBold;
    font-size: 16px;
    background-color: var(--primary);
    padding: 12px 30px;
    margin: 20px 10px;
}

.sidebar ul li:hover {
    background-color: var(--light-grey-2);
}

.active_side_bar {
    transform: translateX(0%) !important;
}

/* Sidebar bg */
.blurbackground {
    position: fixed;
    z-index: 18;
    /* top: 0; */
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    display: none;
}

.activeblurbackground {
    display: block !important;
}

/* Arrows */
.arrows {
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrows .left-arrow,
.arrows .right-arrow {
    padding: 12px;
    border-radius: 50%;
    background-color: var(--primary);
}

.arrows .left-arrow svg {
    transform: rotateZ(180deg);
}

.arrows .right-arrow {
    margin-left: 12px;
}

.bottom-arrows {
    /* display: none !important; */
    margin-top: 30px;
}

/* Main */
.main {
    overflow: hidden;
    padding: 0;
    position: relative;
}

/* Navbar */
.navbar {
    width: 100% !important;
    padding: 0px 40px;
    height: 100px;
    margin: auto;
    background: var(--rich-black);
    position: fixed;
    z-index: 20;
    transition: 0.3s ease-in;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.navbar .logo a img {
    height: 60px;
}

.navbar .nav-items {
    height: 100%;
    display: flex;
    align-items: center;
}

.navbar .nav-items .nav-links {
    font-family: Poppins-Medium;
    color: var(--white);
    font-size: 14px;
    margin-right: 32px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.navbar .nav-items .nav-links span {
    content: "";
    display: inline-flex;
    width: 32px !important;
    height: 4px !important;
    background-color: var(--white);
    border-radius: 50px;
    position: absolute;
    bottom: 30px;
    left: 0;
}

/* Product hovered */
#product-link .product-hovered-box {
    background-color: var(--white);
    border-radius: 0px 0px 12px 12px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    display: none;
    position: absolute;
    z-index: 30;
    left: 100%;
    transform: translateX(-50%);
    width: calc(100vw - 400px);
    top: 100px;
}

#product-link .product-hovered-box .col-4 {
    padding: 20px;
}

#product-link .product-hovered-box .col-4:nth-child(2) {
    background-color: var(--light-grey-2);
}

#product-link .product-hovered-box .category h6 {
    font-family: Poppins-SemiBold;
    color: var(--primary);
}

#product-link .product-hovered-box .category ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#product-link .product-hovered-box .category ul li {
    padding: 10px 0px 0px 0px;
    cursor: pointer;
    font-family: Poppins-Regular;
    color: var(--text);
}

#product-link .product-hovered-box .category ul li:hover {
    font-family: Poppins-SemiBold;
}

/* Sidebar product menu */
.sidebar ul li .category h6 {
    font-family: Poppins-SemiBold;
    color: var(--primary);
    margin-top: 20px;
}

.sidebar ul li .category ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar ul li .category ul li {
    padding: 10px 0px 0px 0px;
    cursor: pointer;
    font-family: Poppins-Regular;
    color: var(--text);
    background-color: var(--white) !important;
}

.sidebar ul li:hover .category ul li {
    background-color: var(--light-grey-2) !important;
}

.sidebar ul li .category ul li:hover {
    font-family: Poppins-SemiBold;
}

/* Hamburger Menu */
#hamburger-menu {
    display: none;
    ;
}

#hamburger-menu a {
    color: var(--white);
}

#hamburger-menu .hamburger-scrolled {
    color: var(--primary);
}

/* Buttons */
.custom-button {
    border-radius: 8px;
    padding: 12px 24px;
    background-color: var(--white) !important;
    border: 1px solid var(--primary) !important;
    position: relative;
    overflow: hidden;
}

.custom-button .animation {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: -110%;
    transition: 0.8s ease-in-out;
    width: 100% !important;
    padding: 0px !important;
}

.custom-button a {
    font-family: Poppins-Medium;
    font-size: 14px;
    color: var(--primary) !important;
}

.custom-button-outlined {
    border-radius: 50px;
    padding: 16px 32px;
    font-family: Poppins-SemiBold;
    font-size: 12px;
    color: var(--white);
    background-color: transparent;
    border: 1px solid var(--white);
}

/* Vision Mission Section */
.toggle-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 30px;
    /* Increased spacing for better appearance */
}

.toggle-buttons button {
    background: none;
    border: none;
    color: black;
    font-size: 18px;
    cursor: pointer;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.toggle-buttons button.active {
    border-bottom: 2px solid #0062a6;
    color: black;
    /* still black text even when active */
}

.section-content {
    display: none;
    transition: all 0.3s ease;
}

.section-content.active {
    display: block;
}


/* Buttons Hover */
.custom-button:hover {
    color: var(--white);
    background-color: var(--primary);
    border: 1px solid var(--primary);
}

.custom-button:hover .animation {
    top: 0px;
    left: 200px;
}

.custom-button-outlined:hover {
    color: var(--white);
    background-color: var(--primary);
    border: 1px solid var(--primary);
}

/* Hero Section */
.hero-section {
    margin-top: 120px;
    padding: 0px 40px;
}

.hero-section .content p {
    font-family: Poppins-Medium;
    font-size: 16px;
    color: var(--sub-text);
    margin: 0;
}

.hero-section .content h1 {
    font-family: Poppins-SemiBold;
    color: var(--text);
    margin: 8px 0px 16px 0px;
}

.hero-section .content h1 span {
    color: var(--highlighter);
}

.hero-section .content .desc {
    font-family: Poppins-Regular;
    font-size: 14px;
    color: var(--sub-text);
    margin: 0;
}

.hero-section img {
    width: 90%;
    padding: 20px 10px 0px 10px;
}

/* Brands */
.brands {
    padding: 20px 0px;
    background-color: var(--light-grey);
}

.brands img {
    margin: 0px 30px;
    height: 60px;
}

/* About Section */
.about-section {
    margin: 80px 0 0 0;
    width: 100% !important;
    padding: 0px 20px;
}

.about-section img {
    width: 100%;
    padding: 20px;
    border-radius: 20px !important;
    height: 100%;
    object-fit: cover;
}

.about-section .content {
    width: 100%;
    padding: 20px;
}

.about-section .content h2 {
    font-family: Poppins-SemiBold;
    color: var(--text);
    margin: 0px 0px 16px 0px;
}

.about-section .content p {
    font-family: Poppins-Regular;
    font-size: 14px;
    color: var(--sub-text);
    margin: 0;
}

/* Products section */
.product-section {
    margin: 80px 0 0 0;
    width: 100% !important;
    padding: 0px 30px;
}

.product-section .title h2 {
    margin: 0 0 24px 0;
    padding: 0px 10px;
    font-family: Poppins-SemiBold;
    color: var(--text);
}

.product-image {
    height: 400px !important;
    border-radius: 12px !important;
    object-fit: cover;
    width: 100%;
}

/* Why Choose us */
.why-choose-us {
    margin-top: 80px;
    background-color: var(--rich-black);
    position: relative;
    text-align: center;
}

.why-choose-us .title h2 {
    margin: 0;
    padding: 40px 0px;
    text-align: center;
    font-family: Poppins-SemiBold;
    color: var(--white);
}

.why-choose-us .container {
    margin: auto;
}

.why-choose-us .image {
    position: relative;
}

.why-choose-us .image img {
    padding: 20px 20px 0px 20px;
    width: 90%;
    object-fit: cover;
}

.why-choose-us .image .abstract_2 {
    position: absolute;
    top: -60px;
    right: -30px;
}

.why-choose-us .image .abstract_2 img {
    width: 150px;
}

.why-choose-us .image .abstract_1 {
    position: absolute;
    bottom: -60px;
    left: -50px;
}

.why-choose-us .image .abstract_1 img {
    width: 150px;
}


.why-choose-us .accordion {
    border: 0;
    width: 100%;
    margin-bottom: 60px;
}

.why-choose-us .accordion .accordion-item {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--light-grey);
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 0px;
    background-color: transparent;
}

.why-choose-us .accordion .accordion-item .accordion-header {
    border: 0 !important;
    background-color: transparent;
}

.why-choose-us .accordion .accordion-item .accordion-header button {
    padding: 20px 0px;
    font-family: Poppins-Medium;
    color: var(--white);
    font-size: 18px;
    border-radius: 0px;
    background-color: transparent;
    box-shadow: 0px 0px 0px 0px rgba(39, 40, 40, 0.0);
    outline: 0;
}

.why-choose-us .accordion .accordion-item .accordion-header .collapsed {
    background-color: transparent;
}

.why-choose-us .accordion .accordion-item .accordion-collapse {
    border: 0 !important;
    background-color: transparent;
    box-shadow: 0px;
    border-radius: 0px;
}

.why-choose-us .accordion .accordion-item .accordion-collapse .accordion-body {
    padding: 20px 20px;
}

.why-choose-us .accordion .accordion-item .accordion-collapse p {
    margin: 0;
    font-family: Poppins-Regular;
    color: var(--light-grey);
    font-size: 16px;
    text-align: start;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.7495 6C18.7495 5.80109 18.6705 5.61032 18.5298 5.46967C18.3892 5.32902 18.1984 5.25 17.9995 5.25H8.99951C8.8006 5.25 8.60983 5.32902 8.46918 5.46967C8.32853 5.61032 8.24951 5.80109 8.24951 6C8.24951 6.19891 8.32853 6.38968 8.46918 6.53033C8.60983 6.67098 8.8006 6.75 8.99951 6.75H16.1895L5.46951 17.47C5.39582 17.5387 5.33672 17.6215 5.29573 17.7135C5.25474 17.8055 5.2327 17.9048 5.23092 18.0055C5.22914 18.1062 5.24767 18.2062 5.28539 18.2996C5.32311 18.393 5.37926 18.4778 5.45047 18.549C5.52169 18.6203 5.60653 18.6764 5.69991 18.7141C5.7933 18.7518 5.89333 18.7704 5.99403 18.7686C6.09474 18.7668 6.19405 18.7448 6.28605 18.7038C6.37805 18.6628 6.46085 18.6037 6.52951 18.53L17.2495 7.81V15C17.2495 15.1989 17.3285 15.3897 17.4692 15.5303C17.6098 15.671 17.8006 15.75 17.9995 15.75C18.1984 15.75 18.3892 15.671 18.5298 15.5303C18.6705 15.3897 18.7495 15.1989 18.7495 15V6Z' fill='white'/%3E%3C/svg%3E%0A");
    transform: rotateZ(90deg);
    background-size: 24px 24px;
    background-position: center;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.7495 18C18.7495 18.1989 18.6705 18.3897 18.5298 18.5303C18.3892 18.671 18.1984 18.75 17.9995 18.75H8.99951C8.8006 18.75 8.60983 18.671 8.46918 18.5303C8.32853 18.3897 8.24951 18.1989 8.24951 18C8.24951 17.8011 8.32853 17.6103 8.46918 17.4697C8.60983 17.329 8.8006 17.25 8.99951 17.25H16.1895L5.46951 6.53C5.39582 6.46134 5.33672 6.37854 5.29573 6.28654C5.25474 6.19454 5.2327 6.09523 5.23092 5.99452C5.22914 5.89382 5.24767 5.79379 5.28539 5.7004C5.32311 5.60701 5.37926 5.52218 5.45047 5.45096C5.52169 5.37974 5.60653 5.3236 5.69991 5.28588C5.7933 5.24816 5.89333 5.22963 5.99403 5.23141C6.09474 5.23319 6.19405 5.25523 6.28605 5.29622C6.37805 5.33721 6.46085 5.39631 6.52951 5.47L17.2495 16.19V9C17.2495 8.80109 17.3285 8.61032 17.4692 8.46967C17.6098 8.32902 17.8006 8.25 17.9995 8.25C18.1984 8.25 18.3892 8.32902 18.5298 8.46967C18.6705 8.61032 18.7495 8.80109 18.7495 9V18Z' fill='white'/%3E%3C/svg%3E%0A");
    transform: rotateZ(270deg);
    background-size: 24px 24px;
    background-position: center;
}

/* Numbers Section */
.numbers-section {
    padding: 60px 0px;
    background-color: var(--light-grey);
}

.numbers-section .container {
    padding: 0px 10px;
}

.numbers-section .container .col-lg-3 {
    padding: 10px !important;
}

.numbers-section .container .card {
    padding: 0;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: 0;
}

.numbers-section .container .card img {
    width: 150px;
    height: 150px;
    margin: auto;
}

.numbers-section .container .card h3 {
    font-family: Poppins-SemiBold;
    color: var(--text);
    margin: 20px 0px 0px 0px;
}

.numbers-section .container .card p {
    font-family: Poppins-Regular;
    color: var(--text);
    margin: 10px 0px 0px 0px;
}

/* How we work section */
.how-we-work-section {
    margin-top: 80px;
}

.how-we-work-section .title h2 {
    font-family: Poppins-SemiBold;
    color: var(--text);
    margin: 0px 0px 40px 0px;
}

.how-we-work-section .col-lg-4 {
    padding: 10px !important;
}

.how-we-work-section .how-we-work-card {
    border: 0;
    border-radius: 12px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    height: 100%;
}

.how-we-work-section .how-we-work-card img {
    width: 100%;
    max-height: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 0;
}

.how-we-work-section .how-we-work-card .content {
    padding: 12px;
}

.how-we-work-section .how-we-work-card .content h6 {
    font-family: Poppins-Medium;
    color: var(--text);
    margin: 0px 0px 0px 0px;
    font-size: 18px;
}

.how-we-work-section .how-we-work-card .content p {
    font-family: Poppins-Regular;
    color: var(--sub-text);
    margin: 8px 0px 0px 0px;
    font-size: 14px;
}

/* Testimonials section */
.testimonials-section {
    margin: 80px 0 0 0;
    width: 100% !important;
    padding: 0px;
}

.testimonials-section .title h2 {
    margin: 0;
    padding: 0px 40px;
    text-align: center;
    font-family: Poppins-SemiBold;
    color: var(--text);
}

.testimonials-section .testimonials {
    margin: 40px 0px;
    padding: 0px 0px;
    width: 100% !important;
}

.testimonials-section .testimonials .testimonial-data {
    min-width: 100% !important;
    overflow-x: scroll;
    overflow-y: visible;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    transition: 0.3s ease-in;
    scroll-behavior: smooth;
    padding: 0px;
}

.testimonials-section .testimonials .testimonial-data::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

.testimonials-section .testimonials .testimonial-data::-webkit-scrollbar-thumb {
    width: 0 !important;
    height: 0 !important;
}

.testimonials-section .testimonials .testimonial-data .testimonial {
    border-radius: 16px;
    overflow: hidden;
    margin: 0px 0px;
    transition: 0.3s ease-in;
    height: 100%;
    padding: 20px;
    background-color: var(--light-box-2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonials-section .testimonials .testimonial-data .testimonial p {
    margin: 0px 0px 20px 0px;
    font-family: Poppins-Regular;
    color: var(--sub-text);
    font-size: 0.9rem;
    text-align: start;
}

.testimonials-section .testimonials .testimonial-data .testimonial .person-data {
    display: flex;
    align-items: center;
}

.testimonials-section .testimonials .testimonial-data .testimonial .person-data img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonials-section .testimonials .testimonial-data .testimonial .person-data .name {
    text-align: start;
    margin-left: 0px;
}

.testimonials-section .testimonials .testimonial-data .testimonial .person-data .name h6 {
    margin: 0px 0px 0px 0px;
    font-family: Poppins-SemiBold;
    color: var(--text);
}

.testimonials-section .testimonials .testimonial-data .testimonial .person-data .name p {
    margin: 0px;
    font-family: Poppins-Regular;
    color: var(--sub-text);
    font-size: 0.9rem;
}

/* Each Product */
.each-product {
    margin-top: 100px;
    padding: 20px 30px 0px 30px;
}

.each-product nav {
    padding: 0px 10px;
}

.each-product h1 {
    font-family: Poppins-SemiBold;
    margin: 0px;
    padding: 0px 10px;
}

.each-product .cards {
    margin-top: 30px !important;
}

/* Product Card */
.product-card {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--light-box-2) !important;
    position: relative;
    height: 410px;
    margin: 10px 10px;
    cursor: pointer;
    transform: scale(1.0);
    transition: 0.1s ease-in-out;
}

.product-card:hover {
    transform: scale(1.08);
}

.product-card .content {
    position: relative;
    z-index: 2;
    height: 100%;
}

.product-card .content h4 {
    font-family: Poppins-SemiBold;
    margin: 0px 0px 0px 0px;
    color: var(--white);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.8) 100%);
    text-align: left;
    width: 100%;
    position: absolute;
    padding: 12px 12px 32px 12px;
    z-index: 2;
    top: 0;
}

.product-card .content img {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    /* bottom: -10%;
    left: -15%; */
    z-index: 0;
    transform: scale(1.0);
    transition: 1.3s ease-in-out;
}

.product-card:hover .content img {
    transform: scale(1.2);
}

.product-card .abstract {
    position: absolute;
    z-index: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card .abstract img {
    width: 150%;
}

/* Each Product Page*/
.eachProduct {
    margin-bottom: 20px;
    padding: 0;
}

.eachProduct .profileImage {
    height: 600px;
    width: 100%;
    overflow: hidden;
    padding: 10px;
    border-radius: 0px;
}

.eachProduct .profileImage .carousel {
    height: 100%;
    width: 100%;
    border-radius: 0px;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.1);
}

.eachProduct .profileImage .carousel .carousel-inner {
    height: 100%;
    width: 100%;
    border-radius: 0px;
    overflow: hidden;
}

.eachProduct .profileImage .carousel .carousel-inner .carousel-item {
    width: 100%;
    height: 100%;
}

.eachProduct .profileImage .carousel .carousel-inner .carousel-item img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.carousel-control-prev,
.carousel-control-next:focus {
    border: 0 !important;
}

.carousel-control-prev {
    height: 50px !important;
    width: 50px !important;
    left: 10px;
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    border-radius: 50%;
}

.carousel-control-prev svg,
.carousel-control-next svg {
    height: 24px;
    width: 24px;
    fill: var(--white);
}

.carousel-control-next {
    height: 50px !important;
    width: 50px !important;
    right: 10px;
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    border-radius: 50%;

}

.eachProduct .image_selectors {
    /* height: 600px; */
    width: 100%;
    overflow: hidden;
}

.eachProduct .image_selectors img {
    width: 100%;
    padding: 10px;
    height: 100%;
    border-radius: 20px;
    margin: auto;
}

#mobile-profile-slider {
    display: none;
}

#profile-slider {
    display: flex;
    margin-top: 20px !important;
}

#product-info {
    margin-top: 20px !important;
    padding: 10px 16px !important;
}

#product-info h3 {
    font-family: Poppins-Medium;
}

.description {
    margin-top: 12px;
}

.description p {
    font-family: Poppins-Regular;
    color: var(--text);
}

.related_products h5 {
    font-family: Poppins-Medium;
}

/* About page */
.about {
    margin-top: 100px;
    padding: 20px 30px 0px 30px;
}

.about nav {
    padding: 0px 10px;
}

.about h1 {
    font-family: Poppins-SemiBold;
    margin: 0px;
    padding: 0px 10px;
}

.about p {
    margin: 12px 0px;
    padding: 0px 10px;
    font-family: Poppins-Regular;
    font-size: 14px;
    color: var(--sub-text);
}

.about img {
    width: 80%;
    border-radius: 12px;
    margin: 20px auto;
    text-align: center;
}

.company h2 {
    font-family: Poppins-SemiBold;
    margin: 0px 0px 20px 0px;
    padding: 0px 10px;
}

.company img {
    width: 100%;
    padding: 10px;
    border-radius: 20px;
    object-fit: cover;
    height: 100%;
}

.team-card h6 {
    font-family: Poppins-SemiBold;
    margin: 8px 0px 4px 0px;
    padding: 0px 10px;
}

.team-card p {
    font-family: Poppins-Regular;
    margin: 0px 0px 0px 0px;
    padding: 0px 8px;
    font-size: 14px;
    color: var(--sub-text);
}

/* Contact Us */
.contact-us {
    margin-top: 80px;
    background-color: var(--rich-black);
    position: relative;
}

.contact-us .abstract_2 {
    position: absolute;
    top: -90px;
    right: -70px;
}

.contact-us .abstract_2 img {
    width: 200px;
}

.contact-us .abstract_1 {
    position: absolute;
    bottom: -80px;
    left: -60px;
}

.contact-us .abstract_1 img {
    width: 150px;
}

.contact-us .content {
    padding: 100px 40px;
}

.contact-us .content h1 {
    font-family: Poppins-Medium;
    color: var(--white);
}

.contact-us .content .info {
    color: var(--white);
}

.contact-us .content .info .icon {
    margin-top: 32px;
}

.contact-us .content .info .icon a {
    color: var(--white);
    background-color: var(--white);
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.contact-us .content .info .icon a svg {
    fill: var(--rich-black);
    width: 28px;
    height: 28px;
}

.contact-us .content .info .col-sm-6 {
    padding: 0;
}

.contact-us .content .info .links {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
}

.contact-us .content .info .links p {
    font-family: Poppins-Medium;
    color: var(--white);
    margin: 0 0 12px 0;
    font-size: 18px;
}

.contact-us .content .info .links a {
    font-family: Poppins-Regular;
    color: var(--light-grey);
    margin: 0;
    font-size: 14px;
}

.contact-us .content .form .form-group input,
.contact-us .content .form .form-group textarea {
    background-color: transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--light-grey);
    border-radius: 0;
    outline: 0 !important;
    margin-bottom: 32px;
    padding: 0px 20px 24px 0px;
    color: var(--white);
}

.contact-us .content .form .form-group input::placeholder,
.contact-us .content .form .form-group textarea::placeholder {
    color: var(--light-grey);
}

.contact-us .content .form .button {
    display: flex;
    justify-content: end;
    width: 100%;
}

/* Footer Section */
.footer {
    padding: 0;
}

.footer .top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 40px 40px 40px 40px;
}

.footer .top-row .logo {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.footer .top-row .logo img {
    height: 100px;
}

.footer .top-row .logo .address {
    font-size: 14px;
    font-family: Poppins-Regular;
    color: var(--text);
    margin-top: 20px;
}

.footer .top-row .logo .address span {
    font-family: Poppins-Medium;
}

.footer .top-row .links {
    display: flex;
}

.footer .top-row .links .category {
    margin-left: 60px;
}

.footer .top-row .links .category:nth-child(1) {
    margin-left: 0px;
}

.footer .top-row .links .category h6 {
    font-family: Poppins-Medium;
    color: var(--text);
    margin: 0px 0px 10px 0px;
}

.footer .top-row .links .category ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer .top-row .links .category ul li {
    padding: 10px 0px 0px 0px;
    cursor: pointer;
    font-family: Poppins-Regular;
    font-size: 14px;
    color: var(--sub-text);
}

.footer .bottom-row {
    border-top: 1.5px solid var(--light-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 32px 0px 32px 0px;
}

.footer .bottom-row p {
    margin: 0;
    font-size: 12px;
    font-family: Poppins-Regular;
    color: var(--sub-text);
}

/* Media Query - 1024px */
@media screen and (max-width: 1024px) {

    /* Nav */
    .navbar-after-scroll .nav-items .nav-links {
        font-family: Poppins-Medium;
        color: var(--primary);
        font-size: 14px;
        margin-left: 16px;
    }

    /* Product hovered */
    #product-link .product-hovered-box {
        transform: translateX(-30%);
    }

    /* Hero Section */

}

/* Media Query - 992px */
@media screen and (max-width: 992px) {

    #nav-items,
    #nav-buttons {
        display: none;
    }

    /* Hamburger Menu */
    #hamburger-menu {
        display: flex;
    }

    /* Contact US */
    .contact-us .content .form {
        margin-top: 80px;
    }

}

/* Media Query - 768px */
@media screen and (max-width: 768px) {

    /* Hero Section */


    /* Each Product */
    #mobile-profile-slider {
        display: block;
        /* height: calc(100vw * 2/3); */
        overflow: hidden;
    }

    #mobile-profile-slider .carousel {
        height: 100%;
    }

    #mobile-profile-slider .carousel .carousel-inner {
        height: 100%;
    }

    #mobile-profile-slider .carousel .carousel-inner .carousel-item {
        height: 100%;
    }

    #mobile-profile-slider img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .productRow {
        margin-top: 0px !important;
    }

    #profile-slider,
    #leftButton,
    #rightButton {
        display: none;
    }

    /* Testimonials section */
    .testimonials-section {
        margin: 80px 0 0 0;
        padding: 0;
    }

    /* ABout page */
    .team-card h6 {
        font-size: 14px;
    }

    /* Footer Section */
    .footer {
        padding: 0;
    }

    .footer .top-row .logo {
        align-items: center;
    }

    .footer .top-row .logo .address {
        text-align: center;
    }

    .footer .top-row {
        flex-direction: column;
    }

    .footer .top-row .links {
        margin-top: 40px;
    }

}

/* Media Query - 576px */
@media screen and (max-width: 576px) {

    /* Navbar */
    .navbar {
        padding: 0px 20px;
        height: 80px;
    }

    .navbar .logo a img {
        height: 40px;
    }

    /* Hero Section */
    .hero-section {
        margin-top: 120px;
        padding: 0px 20px;
    }

    /* About Section */
    .about-section {
        padding: 0;
        margin-top: 20px;
    }

    /* Products section */
    .product-section {
        margin-top: 40px;
        padding: 0px 10px;
    }

    /* Testimonials section */
    .testimonials-section {
        margin: 80px 0 0 0;
        padding: 0;
    }

    .testimonials-section .heading .title,
    .testimonials-section .heading .right {
        margin-left: 20px;
    }

    .testimonials-section .testimonials .testimonial-data .testimonial {
        /* min-width: calc(100vw * 0.95); */
        margin: 0px 10px;
    }

    /* Each Product */
    .each-product {
        margin-top: 80px;
        padding: 20px 10px 0px 10px;
    }

    /* About */
    .about {
        margin-top: 80px;
        padding: 20px 10px 0px 10px;
    }

    /* Contact Us */
    .contact-us .content {
        padding: 60px 20px 80px 20px;
    }

    .contact-us .abstract_2 {
        top: -80px;
        right: -50px;
    }

    .contact-us .abstract_2 img {
        width: 150px;
    }

    /* Footer Section */
    .footer {
        padding: 0;
    }

    .footer .top-row .links {
        flex-direction: column;
        margin-top: 0px;
    }

    .footer .top-row .links .category {
        margin-left: 0px;
        margin-top: 20px;
    }

    .footer .top-row .links .category ul li {
        float: left;
        padding: 10px 10px 0px 0px;
    }

}

/* Media Query - 320px */
@media screen and (max-width: 320px) {

    /* Hero Section */

}

/* Product table */

.tables-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 40px auto;
}

.custom-table {
    border-collapse: collapse;
    width: 640px;
    max-width: 100%;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.custom-table th {
    background-color: #2d4a94;
    color: white;
    font-size: 16px;
    text-align: center;
    padding: 12px;
}

.custom-table td {
    border: 1px solid #ccc;
    padding: 10px 12px;
    font-size: 14px;
    vertical-align: top;
    background-color: #fff;
}




/* Card Section  */

.application-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 50px auto;
    max-width: 1400px;
    padding: 0 15px;
}

.application-card {
    position: relative;
    width: 400px;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    border-radius: 5px;
}

.application-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.application-card .triangle {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 60px solid #f2b700;
    /* Yellow triangle */
    border-right: 60px solid transparent;
}

.application-card h3 {
    font-size: 18px;
    margin: 15px 0 5px;
    font-weight: 600;
}

.application-card p {
    padding: 0 15px 20px;
    font-size: 14px;
    color: #333;
}



/* Another Section  */


.feldspar-quality-section,
.feldspar-application-section {
    max-width: 1300px;
    margin: 50px auto;
    padding: 0 15px;
    font-family: 'Arial', sans-serif;
    line-height: 1.7;
    color: #333;
}

.feldspar-quality-section h2,
.feldspar-application-section h2 {
    font-size: 26px;
    font-weight: 600;
    color: #1c1c1c;
}

.section-underline {
    width: 80px;
    height: 3px;
    background-color: #f2b700;
    border: none;
    margin: 10px 0 20px;
}

.feldspar-quality-section ol,
.feldspar-application-section ul {
    margin-left: 20px;
}

.feldspar-quality-section li,
.feldspar-application-section li {
    margin-bottom: 10px;
}




/* Form Section  */



.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.6);
}

/* Modal Box */
.modal-content {
    background-color: #fff;
    margin: 50px auto;
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 750px;
    position: relative;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 26px;
    color: #333;
    cursor: pointer;
}

/* Section Titles */
.modal-content h2 {
    margin-bottom: 20px;
    color: #004a80;
    font-size: 24px;
}

.modal-content h3 {
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 18px;
    color: #222;
}

/* Inputs & Textarea */
input[type="text"],
input[type="email"],
textarea,
input[type="file"] {
    width: 100%;
    padding: 10px 14px;
    margin: 8px 0 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    background: #f9f9f9;
}

/* Grid Layout for Inputs */
.form-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
}

/* Form Section Wrapper */
.form-section {
    margin-bottom: 20px;
}

/* Checkboxes / Radios */
.checkbox-group label,
.radio-group label {
    display: inline-block;
    margin-right: 15px;
    font-size: 14px;
}

/* Submit Button */
.submit-btn {
    background-color: #0062a6;
    color: white;
    font-size: 15px;
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 15px;
    transition: background 0.3s;
}

.submit-btn:hover {
    background-color: #004c86;
}

.something {
    max-width: 1300px;
    margin: auto;
    text-align: center;
}

.something hr {
    justify-content: center;
}



/* Whatsapp Button  */


.whatsapp-logo {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    /* WhatsApp green color */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    /* Ensure it stays on top of other elements */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-logo:hover {
    transform: scale(1.1);
    /* Slightly enlarge on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.whatsapp-logo img {
    width: 40px;
    height: 40px;
}

@media (max-width: 480px) {
    .whatsapp-logo {
        right: 20px;
    }
}