/* Table of Contents
----------------------------------


/*------------------------------ (00)-Global CSS ------------------------------*/
    /*
0- Global CSS
1- Heading CSS   
2- Button CSS
3- Logo Area CSS
4- Page Title CSS
5- Header Area CSS 
6- Footer Area CSS
7- Scroll-Top Area CSS
8- Form CSS
9- Dark Form CSS
10- Swiper Pagination
11- Swiper Navigation CSS
12- CheckBox CSS
13- Sidebar Heading CSS
14- Sidebar CSS
*/

    /*------------------------------ (01)-Home ------------------------------*/
    /*
1- Home-Slider
2- Feature
3- Why Choose Us
4- Section Slider
5- Process
6- Counter
7- Banner
8- Testimonials
9- Blogs
10- Partners Slider
*/

    /*------------------------------ (02)-About ------------------------------*/
    /*
1- About Us
2- Team
3- Team Single
4- Testimonials
5- Faqs
*/

    /*------------------------------ (03)-Services ------------------------------*/
    /*
1- Services
2- Service Single
*/

    /*------------------------------ (04)-Pages ------------------------------*/

    /*--------------- COMPONENTS ---------------*/
    /* 
01- Account-Form 
02- Tab Information
03- Page Single
04- Page Sidebar  
*/

    /*--------------- PAGES ---------------*/
    /*
1- Portfolio
2- Portfolio Single
3- Pricing Plan
4- Appointment
5- Partners
6- Login
7- Register
*/

    /*------------------------------ (05)-Shop ------------------------------*/

    /*--------------- COMPONENTS ---------------*/
    /* 
02- Filter
02- Shop Header
03- product-item
04- Shop-Title
05- Cart-Summary
06- Quantity Box
07- Address
*/


    /*--------------- PAGES ---------------*/
    /*
1- Shop Grid 
2- Shop List
3- Product Single
4- Cart
5- Wishlist
6- Checkout
7- Order Confirmation
*/

    /*------------------------------ (06)-Blog ------------------------------*/

    /*--------------- COMPONENTS ---------------*/
    /* 
01- Blog-Item 
02- Comment
03- Pages No
*/

    /*--------------- PAGES ---------------*/
    /*
1- Blog Grid
2- Blog List
3- Blog Single
*/

    /*------------------------------ (07)-Contact ------------------------------*/



    /*------------------------------ (00)- Global CSS (Start) ------------------------------*/

    /*----- 0- Global CSS -----*/
    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    :root {
        /* Primary & Accent Colors */
        --main-color: #F26B2F;
        --accent-color: #F26B2F;
        --secondary-color: #071952;

        ;
        /* Deep Purple - sections, cards, side menus */

        /* Neutral Colors */
        --background-light: #FFFFFF;
        /* Main background */
        --background-grey: #8DA3B7;
        /* Steel Blue / Grey - borders, less prominent text, backgrounds */
        --black: #000000;
        --white: #FFFFFF;
        --grey: #666666;

        /* Borders & Radius */
        --border-radius-1: 0.5rem;
        --border-radius-2: 1rem;
        --border-radius-3: 50%;
        --border: 0.1rem solid rgba(0, 0, 0, 0.1);
        --custom-border: 0.5rem solid var(--main-color);

        /* Shadows */
        --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);

        /* Text Colors for Readability */
        --text-dark: #0a1e36;
        /* Dark blue for text on light backgrounds */
        --text-light: #FFFFFF;
        /* White text for dark sections */
    }


    * {
        font-family: "Poppins", sans-serif;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        text-decoration: none;
        text-transform: capitalize;
        border: none;
        outline: none;
    }

    *:not(.portfolio-item) {
        -webkit-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }

    *::-moz-selection {
        color: var(--white);
        background-color: var(--main-color);
    }

    *::selection {
        color: var(--white);
        background-color: var(--main-color);
    }

    body {
        background: #f2f3f8;
    }

    html {
        font-size: 62.5%;
        scroll-behavior: smooth;
        scroll-padding-top: 7rem;
    }

    section {
        padding: 3rem 5%;
    }

    ::-webkit-scrollbar {
        width: 0.8rem;
    }

    ::-webkit-scrollbar-track {
        background: var(--secondary-color);
    }

    ::-webkit-scrollbar-thumb {
        border-radius: var(--border-radius-2);
        background: var(--main-color);
    }

    p {
        font-size: 1.6rem;
        line-height: 1.7;
        color: var(--grey);
    }

    img {

        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    /*----- 1- Heading CSS -----*/
    .heading {
        padding-bottom: 2rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .heading .sub {
        letter-spacing: 3.2px;
        letter-spacing: 0.2rem;
        display: inline-block;
        font-size: 32px;
        font-size: 2rem;
        font-weight: 600;
        color: var(--main-color);
        margin-bottom: 8px;
        margin-bottom: 0.5rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
    }

    .heading h2 {
        position: relative;
        text-align: center;
        font-size: 4rem;
        font-weight: 600;
        color: var(--secondary-color);
        text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
        letter-spacing: 0.1rem;
        line-height: 1.2;
        padding-bottom: 1.2rem;
    }

    .heading h2:before {
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 10rem;
        height: 2px;
        content: "";
        background-color: var(--main-color);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .sideheading {
        -webkit-box-align: start;
        -ms-flex-align: start;
        -ms-grid-row-align: flex-start;
        align-items: flex-start;
    }

    .sideheading h2 {
        text-align: left;
    }

    .sideheading h2:before {
        left: 0%;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

    .heading.linear-bg h2 {
        color: var(--white);
    }

    /*----- 2- Button CSS -----*/
    .btn {
        display: inline-block;
        font-size: 1.6rem;
        padding: 1.5rem 3rem;
        text-align: center;
        text-transform: uppercase;
        color: var(--white);
        border-radius: 0.5rem;
        background-color: #1e3a5a;
        cursor: pointer;
    }

    .btn:hover {
        background-position: 100% 0px;
        background: linear-gradient(to right, #dd6f25, #5A377D, #8056A7);
    }

    /*----- 3- Logo Area CSS -----*/
    .logo {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
    }

    .logo img {
        width: auto;
        height: 5.5rem;
    }

    .logo h3 {
        font-size: 3.5rem;
        font-weight: 600;
        color: var(--secondary-color);
        line-height: 1;
    }

    .logo h3 span {
        color: var(--main-color);
    }

    .logo p {
        font-size: 1.5rem;
        line-height: 1;
    }

    /*----- 4- Page Title CSS -----*/
    .page-title {
        background: -webkit-linear-gradient(rgba(0, 0, 0, 0.349), rgba(0, 0, 0, 0.685)), url("../images/sliders/ERPbanner.png");
        background: linear-gradient(rgba(0, 0, 0, 0.418), rgba(0, 0, 0, 0.548)), url("../images/sliders/ERPbanner.png");
        min-height: 40rem;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        -ms-grid-row-align: flex-start;
        align-items: flex-start;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0rem 5%;
        padding-top: 14rem;
        margin-top: 10px;
    }

    .page-title .title h2 {
        color: var(--white);
        font-size: 5rem;
        font-weight: 600;
    }

    .page-title .link {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        padding-top: 1rem;
    }

    .page-title .link a {
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--white);
    }

    .page-title .link a i {
        padding-right: 0.4rem;
    }

    .page-title .link a:hover {
        color: var(--main-color);
    }

    .page-title .link i {
        font-size: 1.8rem;
        color: var(--white);
    }

    .page-title .link span {
        font-size: 1.8rem;
        font-weight: 500;
        color: var(--main-color);
    }

    /*----- 5- Header Area CSS -----*/
    .header {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    .header .header-1 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem 5%;
        background-color: #1e3a5a
    }

    .header.active .header-1 {
        display: none;
    }

    .header .header-contacts {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 3rem;
        list-style-type: none;
    }

    .header .header-contacts li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        font-size: 1.6rem;
    }

    .header .header-contacts i {
        color: var(--white);
    }

    .header .header-contacts span {
        text-transform: none;
        color: var(--white);
    }

    .header .social-contacts {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        list-style-type: none;
    }

    .header .social-contacts li a {
        height: 3rem;
        width: 3rem;
        font-size: 1.6rem;
        color: var(--white);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .header .social-contacts li a:hover {
        color: var(--secondary-color);
    }

    .header .header-2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 7rem;
        padding: 0rem 5%;
        background: var(--white);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .header.active .header-2 {
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .header #menu-btn {
        font-size: 2rem;
        color: var(--grey);
        cursor: pointer;
        display: none;
    }

    .header #menu-btn:hover {
        color: var(--main-color);
    }

    .header .navbar {
        list-style-type: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 100%;
        gap: 1.8rem;
    }

    .mobile-menu {
        display: none;
    }

    .header .container {
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 2rem;
    }

    .header .dropdown-menu {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .header .navbar .nav-btn {
        display: inline-block;
        font-size: 1.7rem;
        font-weight: 500;
        color: var(--secondary-color);
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: none;
        gap: 0.5rem;
    }

    .header .navbar .nav-btn i {
        font-size: 1.5rem;
    }

    .header .navbar .nav-btn:hover {
        color: var(--main-color);
    }

    .header .dropdown-content {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--white);
        padding: 0;
        width: 20rem;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        display: none;
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
        z-index: 1000;
        border-bottom: var(--custom-border);
    }

    .header .dropdown-menu:hover .dropdown-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    .header .dropdown-content a {
        display: block;
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--secondary-color);
        border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
        padding: 1rem;
        cursor: pointer;
    }

    .header .dropdown-content a:hover {
        color: var(--white);
        background-color: var(--main-color);
    }

    /*----- 6- Footer Area CSS -----*/
    .footer {
        /* background: -webkit-linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url("../images/Background/Footer.jpg");
    background:         linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url("../images/Background/Footer.jpg"); */
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background: #1a3350;
    }

    .footer .logo-name h3 {
        color: var(--white);
    }

    .footer .box-container {
        display: -ms-grid;
        display: grid; 
        -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); 
        gap: 3rem;
        padding: 2rem 5%;
    }

    
    .footer-item h2 {
        color: var(--white);
        font-size: 2.0rem;
        font-weight: 500;
        letter-spacing: 0.2rem;
        padding-bottom: 1rem;
        margin-bottom: 2rem;
        position: relative;
    }

    .footer-item h2:before {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 10rem;
        height: 2px;
        content: "";
        background-color: var(--main-color);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

    .footer-item>p {
        padding-top: 2rem;
        padding-bottom: 1rem;
        font-size: 1.5rem;
        line-height: 1.7;
    }

    .footer-item p {
        color: var(--white);
        line-height: 1.5;
        font-weight: 500;
    }

    .footer-item .timings p {
        margin-bottom: 0.7rem !important;
    }

    .footer-item .connect i {
        font-size: 1.6rem;
        color: transparent;
        -webkit-text-stroke: 1px var(--main-color);
        height: 3rem;
        width: 3rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .footer-item .links p i {
        width: 3rem;
        height: 3rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-color: rgba(192, 1, 19, 0.25);
        padding: 1rem;
        border-radius: 5rem;
        color: var(--main-color);
        font-size: 1.5rem;
    }

    .footer-item .connect span {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 10rem;
        flex: 1 1 10rem;
    }

    .footer .social {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .footer .social a {
        height: 4rem;
        width: 4rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: var(--main-color);
        border: 0.15rem solid var(--main-color);
        border-radius: var(--border-radius-3);
    }

    .footer .social a i {
        color: var(--white);
        font-size: 1.7rem;
    }

    .footer .social a:hover {
        border-color: rgba(255, 255, 255, 0.3);
        background-color: var(--secondary-color);
    }

    .footer-item .gmail {
        text-transform: none;
    }

    .footer-item .info p {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .footer-item .info a {
        font-size: 1.5rem;
        color: var(--white);
    }

    .footer-item .links p:hover a {
        color: var(--main-color);
    }

    .footer-item .links p i {
        color: var(--main-color);
        font-size: 1.2rem;
    }

    .footer-item .input-field {
        margin-bottom: 1rem;
    }

    .footer-item .dark-form {
        padding-top: 1rem;
    }

    .footer-item .dark-form .alert {
        display: block;
        font-size: 1.6rem;
        color: var(--main-color);
        padding-top: 1rem;
    }

    .footer .content {
        text-align: center;
        padding: 2rem 0;
        background-color: var(--secondary-color);
    }

    .footer .content p {
        text-decoration: none;
        font-size: 2rem;
        color: var(--white);
    }

    /*----- 7- Scroll-Top Area CSS -----*/
    .scroll-top {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        height: 5rem;
        width: 5rem;
        font-size: 2rem;
        color: var(--white);
        background: var(--main-color);
        border: 0.15rem solid rgba(255, 255, 255, 0.3);
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
        z-index: 900;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        border-radius: var(--border-radius-3);
    }

    .scroll-top:hover {
        background-color: var(--secondary-color);
        cursor: pointer;
    }

    /*----- 8- Form CSS -----*/
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        color: var(--black) !important;
        -webkit-transition: background-color 5000s ease-in-out 0s;
        transition: background-color 5000s ease-in-out 0s;
    }

    .form .input-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .form .box {
        width: 100%;
        background-color: transparent;
        font-size: 1.6rem;
        color: var(--black);
        border-radius: var(--border-radius-1);
        padding: 1rem 1.5rem;
        border: 0.15rem solid rgba(0, 0, 0, 0.1);
        text-transform: none;
    }

    .form .box::placeholder {
        text-transform: capitalize;
    }

    .form .box:focus {
        border-color: var(--main-color);
    }

    .form textarea {
        resize: none;
        height: 20rem;
    }

    .form .btn {
        width: 100%;
        overflow: hidden;
        margin: 1rem 0;
        border-radius: 0.5rem;
    }

    /*----- 9- Dark Form CSS -----*/
    .dark-form input:-webkit-autofill,
    .dark-form input:-webkit-autofill:hover,
    .dark-form input:-webkit-autofill:focus,
    .dark-form input:-webkit-autofill:active {
        -webkit-text-fill-color: var(--white);
        -webkit-transition: background-color 5000s ease-in-out 0s;
        -o-transition: background-color 5000s ease-in-out 0s;
        transition: background-color 5000s ease-in-out 0s;
    }

    .dark-form .input-field {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 20rem;
        flex: 1 1 20rem;
        border: 0.15rem solid rgba(255, 255, 255, 0.9);
        padding: 1.5rem;
        border-radius: var(--border-radius-1);
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
    }

    .dark-form .input-field:hover {
        border-color: var(--main-color);
    }

    .dark-form .input-field label {
        color: transparent;
        -webkit-text-stroke: 1px var(--main-color);
        font-size: 1.6rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .dark-form .box {
        width: 100%;
        font-size: 1.6rem;
        color: var(--white);
        background-color: transparent;
        text-transform: none;
    }

    .dark-form .box::-webkit-input-placeholder {
        text-transform: capitalize;
        color: var(--white);
    }

    .dark-form .box::-moz-placeholder {
        text-transform: capitalize;
        color: var(--white);
    }

    .dark-form .box:-ms-input-placeholder {
        text-transform: capitalize;
        color: var(--white);
    }

    .dark-form .box::placeholder {
        text-transform: capitalize;
        color: var(--white);
    }

    /*----- 10- Swiper Pagination CSS -----*/
    .swiper-pagination-bullet {
        height: 1rem;
        width: 3rem;
        background: #999;
        opacity: 0.7;
        border-radius: 0.2rem;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .swiper-pagination-bullet-active {
        width: 6rem;
        background: var(--main-color);
        opacity: 0.9;
    }

    /*----- 11- Swiper Navigation CSS -----*/
    .swiper-button-next,
    .swiper-button-prev {
        border: 1.5px solid var(--white);
        border-radius: var(--border-radius-3);
        height: 5rem;
        width: 5rem;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 2rem;
        font-weight: bold;
        color: var(--white);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        border-color: rgba(255, 255, 255, 0.3);
        background-color: #666;
    }

    /*----- 12- CheckBox CSS -----*/
    .checkbox-label {
        color: var(--white);
        position: relative;
        padding-left: 2.5rem;
        cursor: pointer;
        font-size: 1.8rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .checkbox-label label {
        cursor: pointer;
    }

    .checkbox-label input {
        position: absolute;
        opacity: 0;
        z-index: -1;
    }

    .checkbox-indicator {
        position: absolute;
        top: 0.2rem;
        left: 0;
        height: 1.6rem;
        width: 1.6rem;
        background: transparent;
        outline: 0.15rem solid var(--white);
        border-radius: 0.2rem;
    }

    .checkbox-label input:checked~.checkbox-indicator {
        background: var(--main-color);
        outline-color: var(--main-color);
    }

    .checkbox-indicator:after {
        content: '';
        position: absolute;
        left: 0.5rem;
        top: 0.2rem;
        width: 0.3rem;
        height: 0.8rem;
        border: solid var(--white);
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        display: none;
    }

    .checkbox-label input:checked~.checkbox-indicator:after {
        display: initial;
    }

    /*----- 13- Sidebar Heading CSS -----*/
    .sidebar-heading h2 {
        font-size: 3rem;
        font-weight: 600;
        color: var(--secondary-color);
        padding-bottom: 1.5rem;
    }

    /*----- 14- Sidebar CSS -----*/
    /*
1- Search
2- Category
3- Recent Items
4- Tags
*/

    .sidebar {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 28rem;
        flex: 1 1 28rem;
    }

    .sidebar .sidebar-item {
        margin-bottom: 1.5rem;
        background-color: var(--white);
        border-bottom: var(--custom-border);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        padding: 1.5rem;
    }

    /*-- 1- Search --*/
    .sidebar .search .input-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        border-radius: 5rem;
        border-top: 0.1rem solid var(--secondary-color);
        border-left: 0.1rem solid var(--secondary-color);
        border-bottom: 0.15rem solid var(--secondary-color);
    }

    .sidebar .search .input-box:hover {
        border-color: var(--main-color);
    }

    .sidebar .search .input-box input {
        border-radius: 5rem;
        width: 100%;
        padding: 1.5rem;
        overflow: hidden;
    }

    .sidebar .search .input-box input:focus {
        border-color: var(--main-color);
    }

    .sidebar .search .input-box button {
        color: var(--white);
        background-color: var(--secondary-color);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0.5rem 2rem;
        font-size: 1.8rem;
        cursor: pointer;
    }

    .sidebar .search .input-box button:hover {
        background-color: var(--main-color);
    }

    /*-- 2- Category --*/
    .sidebar .category a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 1.2rem 0;
        padding-right: 1rem;
        border-bottom: 0.15rem solid rgba(0, 0, 0, 0.1);
    }

    .sidebar .category a:hover {
        background-color: var(--main-color);
    }

    .sidebar .category a span {
        font-size: 1.7rem;
        color: var(--secondary-color);
        font-weight: 500;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
    }

    .sidebar .category a:hover span {
        margin-left: 1rem;
        color: var(--white);
    }

    .sidebar .category a span i {
        font-size: 1.8rem;
        color: var(--main-color);
    }

    .sidebar .category a:hover span i {
        color: var(--white);
    }

    .sidebar .category a:hover p {
        color: var(--white);
    }

    /*-- 3- Recent Post --*/
    .sidebar .post-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .sidebar .post-item:last-child {
        margin-bottom: 0;
    }

    .sidebar .post-item img {
        height: 8rem;
        width: 8rem;
        background-color: var(--grey);
    }

    .sidebar .recent-posts .post-item img {
        width: 10rem;
    }

    .sidebar .post-item a {
        display: inline-block;
        font-size: 2rem;
        font-weight: 600;
        color: var(--secondary-color);
    }

    .sidebar .recent-posts .post-item a {
        font-size: 1.6rem;
    }

    .sidebar .post-item a:hover {
        color: var(--main-color);
    }

    .sidebar .post-item .price p {
        padding-top: 0.5rem;
        font-size: 1.7rem;
        font-weight: bold;
        color: var(--main-color);
    }

    .sidebar .post-item .price span {
        font-size: 1.3rem;
        font-weight: 400;
        color: var(--grey);
        text-decoration: line-through;
        padding-left: 0.2rem;
    }

    .sidebar .post-item h3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.4rem;
        color: var(--grey);
        padding-bottom: 0.5rem;
    }

    .sidebar .post-item h3 i {
        color: var(--main-color);
    }

    .sidebar .post-item h3 span {
        font-weight: 400;
    }

    /*-- 4- Tags --*/
    .sidebar .tags .box-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 0.7rem;
    }

    .sidebar .tag-item {
        color: var(--white);
        background-color: var(--main-color);
        font-size: 1.6rem;
        padding: 1rem 1.8rem;
        border-radius: 5rem;
    }

    .sidebar .tag-item:hover,
    .sidebar .tag-item.active {
        background-color: var(--secondary-color);
        cursor: pointer;
    }

    /*------------------------------ (00)- Global CSS (End) ------------------------------*/



    /*------------------------------ (01)- Home (Start) ------------------------------*/

    /*----- 1- Home-Slider -----*/
    .home {
      padding: 0;
    }
 
    .home-slider {
      position: relative;
      width: 100%;
      height: 95vh; /* Full viewport height */
      overflow: hidden;
    }
 
    .home-slider .swiper-button-next,
    .home-slider .swiper-button-prev {
      opacity: 0;
      transition: opacity 0.3s ease;
    }
 
    .home-slider:hover .swiper-button-next,
    .home-slider:hover .swiper-button-prev {
      opacity: 1;
    }
 
    .home-item {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      position: relative;
      display: flex;
      align-items: center;
    }
 
    /* Assign background images via CSS */
    .home-item.slide-1 { background-image: url('../images/sliders/hero@.png'); }
    .home-item.slide-2 { background-image:  url('../images/sliders/hero7.png'); }
    .home-item.slide-3 { background-image:  url('../images/sliders/hero8.png'); }
    .home-item.slide-4 { background-image:  url('../images/sliders/hero9.png'); }
 
    .home-item .content {
      width: 100%;
      padding: 0 8%;
      text-align: left;
      z-index: 2;
    }
 
    .home-item .content .text {
      max-width: 700px; /* Limit text width for readability */
      margin-left: 50px;
    }
 
    .home-item .content h3 {
      font-size: clamp(2.5rem, 5vw, 5rem); /* Responsive font size */
      font-weight: 700;
      color: black;
      line-height: 1.2;
      margin-bottom: 1.5rem;
     
    }
 
    .home-item .content p {
      font-size: clamp(1.6rem, 2.5vw, 2rem); /* Responsive font size */
      color: black;
      font-weight: 400;
      margin-bottom: 2.5rem;
      max-width: 700px;
      
    }


    .slide-video video {

  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.slide-video .content {
  position: relative;
  z-index: 2; /* So text stays above video */
}





/* Content inside the slide stays above video */
.home-item.slide-video .content {
  position: relative;
  z-index: 2;
}



    /*----- 2- Feature -----*/
    .features .box-container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (minmax(33rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
        gap: 2rem;
        padding-top: 2rem;
    }

    .feature-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .feature-item i {
        padding: 1.5rem;
        width: 7rem;
        height: 7rem;
        font-size: 2.5rem;
        border-radius: var(--border-radius-3);
        color: var(--white);
        background-color: rgba(3, 3, 3, 0.082);
        outline-offset: 0.8rem;
        outline: 0.15rem dashed var(--secondary-color);
        margin-left: 1rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .feature-item:hover i {
        background-color: var(--main-color);
        outline: 0.15rem dotted var(--main-color);
    }

    .feature-item .content {
        margin-top: 2rem;
    }

    .feature-item h3 {
        font-size: 2.5rem;
        font-weight: 600;
        color: var(--secondary-color);
        margin-bottom: 0.5rem;
    }

    .feature-item p {
        font-size: 1.6rem;
        color: var(--black);
        line-height: 1.7;
    }

    /* ===== Clean Minimal Why Choose Us ===== */
.why-choose {
  background-color: #f8fafc;
  padding: 6rem 2rem;
  font-family: 'Inter', sans-serif;
  color: #0f2d52;
}

.why-choose .container {
  max-width: 1400px;
  margin: 0 auto;
}

.why-choose .section-header {
    display: flow;
  text-align: center;
  margin-bottom: 4rem;
}

.why-choose .section-header .subheading {
  color: #f26b2f;
  font-weight: 600;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.why-choose .section-header h2 {
  font-size: 3.8rem;
  font-weight: 800;
  margin: 1rem 0;
  color: #0f2d52;
}

.why-choose .section-header .intro {
  color: #000000;
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.5rem;
  line-height: 1.6;
}

.why-choose .features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 2rem;
}

.why-choose .feature-item {
  background: #ffffff;
  border: 1px solid #e5e9ef;
  border-radius: 1rem;
  padding: 3rem 4rem;
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  transition: all 0.3s ease;
}

.why-choose .feature-item:hover {
  border-color: #f26b2f;
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(15, 45, 82, 0.26);
}

.why-choose .feature-item i {
  font-size: 2rem;
  color: #f26b2f;
  min-width: 2.5rem;
}

.why-choose .feature-item:hover i {
  font-size: 2rem;
     color: #ffffff;
  min-width: 2.5rem;
}



.why-choose .feature-item .text h5 {
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: #0f2d52;
}

.why-choose .feature-item .text p {
  color: #556677;
  line-height: 1.6;
  font-size: 1.3rem;
}


    /*----- 4- Section Slider -----*/
    .section-slider {
        overflow: hidden;
        padding: 0.5rem;
    }

    /*----- 5- Process -----*/
    .process .box-container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (minmax(24rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
        gap: 1.5rem;
    }

    .process-item .image {
        height: 20rem;
        position: relative;
        margin-top: 2rem;
    }

    .process-item .step-no {
        position: absolute;
        top: -1.5rem;
        right: 1rem;
        height: 7rem;
        width: 7rem;
        font-size: 3rem;
        color: transparent;
        -webkit-text-stroke: 1.8px var(--white);
        background-color: var(--main-color);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-clip-path: polygon(10% 0, 100% 0, 100% 20%, 100% 74%, 91% 100%, 0 100%, 0% 80%, 0 26%);
        clip-path: polygon(10% 0, 100% 0, 100% 20%, 100% 74%, 91% 100%, 0 100%, 0% 80%, 0 26%);
    }

    .process-item .content {
        padding-top: 1.5rem;
    }

    .process-item .content h3 {
        font-size: 2.5rem;
        font-weight: 600;
        color: var(--secondary-color);
        margin-bottom: 0.3rem;
    }

    .process-item .content p {
        line-height: 1.4;
    }

    /*----- 6- Counter -----*/
    .counting {
        padding: 4rem 5%;
        margin: 1rem 0;
        min-height: 25rem;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
        gap: 2rem;
        background: -webkit-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../images/sliders/er4.jpg");
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../images/sliders/er1.png");
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
    }

    .counting .box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
    }

    .counting .box i {
        color: var(--main-color);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: top;
        font-size: 5rem;
    }

    .counting .box .count {
        font-size: 5rem;
        font-weight: 500;
        color: var(--white);
    }

    .counting .box h3 {
        font-size: 2rem;
        font-weight: 400;
        color: var(--white);
    }

    /*----- 7- Banner -----*/
    .banner {
        width: 100%;
        padding: 8rem 5%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 2rem;
        background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url("../images/Background/Banner.jpg");
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url("../images/Background/Banner.jpg");
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
    }

    .banner .content {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 45rem;
        flex: 1 1 45rem;
    }

    .banner .heading {
        padding-bottom: 1.5rem;
    }

    .banner h2 {
        font-size: 4rem;
        font-weight: 600;
        line-height: 1.3;
        color: var(--white);
        padding-bottom: 1rem;
    }

    .banner p {
        font-weight: 500;
        color: var(--white);
        padding-bottom: 2rem;
    }

    .banner .image {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 40rem;
        flex: 1 1 40rem;
    }

    /*----- 8- Testimonials -----*/
    .testimonial-bg {
        background: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url("../images/Background/Testimonials.jpg");
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url("../images/Background/Testimonials.jpg");
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
    }

    /*----- 9- Blogs -----*/
    .blog.main .box-container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (minmax(33rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
        gap: 1rem;
    }

    /*----- 10- Partners Slider -----*/
    .home-partners {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .partners .partner-slider {
        overflow: hidden;
    }

    /*------------------------------ (01)-Home (End) ------------------------------*/



    /*------------------------------ (02)-About (Start) ------------------------------*/

    /*--------------- PAGES ---------------*/
    .about-us {
        padding: 0;
    }

    /*----- 1- About Us -----*/
    .about .box-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 5rem;
    }

    .about .image {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 42rem;
        flex: 1 1 42rem;
        height: 50rem;
        position: relative;
    }

    .about .image img {
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        border-radius: 10px;
    }

    .about .experience {
        position: absolute;
        top: 0;
        left: 0%;
        width: 14%;
        padding: 1.4rem;
        color: var(--white);
        background-color: var(--secondary-color);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 2rem;
    }

    

    .about .experience-content {
        font-size: 1.6rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .about .experience span {
        color: var(--white);
        font-size: 5rem;
        line-height: 1.2;
        font-weight: 600;
    }

    .about .experience .icon {
        width: 8rem;
        height: 8rem;
        background-color: var(--main-color);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .about .experience i {
        font-size: 4rem;
        color: transparent;
        -webkit-text-stroke: 2px var(--white);
    }

    .about .content {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 42rem;
        flex: 1 1 42rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .about .content p {
        padding-bottom: 1rem;
    }

    .about .point {
        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }

    .about .point-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        padding-bottom: 1rem;
        font-size: 1.6rem;
    }

    .about .point-item i {
        padding: 0.7rem;
        font-size: 1.5rem;
        border-radius: 5rem;
        background-color: rgba(192, 1, 19, 0.15);
        color: var(--main-color);
    }

    .about .point-item span {
        color: var(--grey);
    }

    /*----- 2- Team -----*/
    .team .box-container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (minmax(24rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
        gap: 1rem;
    }

    .team-item {
        margin-bottom: -4rem;
    }

    .team-item .image {
        height: 35rem;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .team-item .content {
        text-align: center;
        margin: 0rem 1.5rem;
        -webkit-transform: translateY(-4rem);
        transform: translateY(-4rem);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .team-item .text {
        -webkit-clip-path: polygon(13% 0, 100% 0, 100% 30%, 100% 70%, 88% 100%, 0 100%, 0% 70%, 0% 30%);
        clip-path: polygon(13% 0, 100% 0, 100% 30%, 100% 70%, 88% 100%, 0 100%, 0% 70%, 0% 30%);
        padding: 1.5rem 1rem;
        background-color: var(--white);
    }

    .team-item:hover .text {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 30%, 100% 70%, 88% 100%, 0 100%, 0% 70%, 0% 30%);
        clip-path: polygon(0 0, 100% 0, 100% 30%, 100% 70%, 88% 100%, 0 100%, 0% 70%, 0% 30%);
    }

    .team-item .text a {
        color: var(--secondary-color);
        font-size: 2.5rem;
        font-weight: 600;
    }

    .team-item .text a:hover {
        color: var(--main-color);
    }

    .team-item .content h5 {
        color: var(--main-color);
        font-size: 1.8rem;
        font-weight: 400;
        padding-top: 0.5rem;
    }

    .team-item .icon-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        background: var(--main-color);
        -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.5rem;
        padding: 1.5rem;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0%;
        left: 0%;
        -webkit-transition: all 0.4s ease-in-out 0s;
        -moz-transition: all 0.4s ease-in-out 0s;
        -o-transition: all 0.4s ease-in-out 0s;
        transition: all 0.4s ease-in-out 0s;
        z-index: -2;
    }

    .team-item:hover .icon-container {
        -webkit-clip-path: polygon(12% 0, 100% 0, 100% 30%, 100% 70%, 100% 100%, 0 100%, 0% 70%, 0% 30%);
        clip-path: polygon(12% 0, 100% 0, 100% 30%, 100% 70%, 100% 100%, 0 100%, 0% 70%, 0% 30%);
        top: -100%;
    }

    .team-item .icon-container a {
        height: 4rem;
        width: 4rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 1.7rem;
        color: var(--white);
        background-color: var(--secondary-color);
        border-radius: var(--border-radius-3);
        border: 1.5px solid transparent;
    }

    .team-item .icon-container a:hover {
        border-color: var(--white);
        background-color: var(--main-color);
    }

    /*----- 3- Team Single -----*/
    .team-single .box-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 3rem;
    }

    .team-single .image {
        width: 40rem;
        height: 50rem;
        border-radius: var(--border-radius-1);
        overflow: hidden;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .team-single .information {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 60rem;
        flex: 1 1 60rem;
    }

    .team-single .information h2 {
        color: var(--secondary-color);
        font-size: 3rem;
        font-weight: 600;
        padding-bottom: 0.5rem;
    }

    .team-single .information h5 {
        color: var(--main-color);
        font-size: 1.8rem;
        font-weight: 500;
        padding-bottom: 1.5rem;
    }

    .team-single .information .team-about {
        padding-top: 1.5rem;
        border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
    }

    .team-single .text {
        font-size: 1.6rem;
        letter-spacing: 0.2px;
        font-weight: 400;
        color: var(--grey);
        line-height: 1.7;
    }

    .team-single .team-contacts {
        padding-top: 2rem;
        padding-bottom: 1rem;
    }

    .team-single .team-contacts li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        padding-bottom: 1rem;
    }

    .team-single .team-contacts h6 {
        font-size: 2rem;
        font-weight: 600;
        color: var(--secondary-color);
    }

    .team-single .team-contacts i {
        font-size: 1.6rem;
        color: var(--main-color);
        padding-right: 0.5rem;
    }

    .team-single .team-contacts span {
        font-size: 1.6rem;
        color: var(--grey);
        text-transform: none;
    }

    .team-single .icon-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.7rem;
    }

    .team-single .icon-container a {
        height: 4rem;
        width: 4rem;
        border-radius: var(--border-radius-3);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 1.5rem;
        color: var(--white);
        background-color: var(--secondary-color);
    }

    .team-single .icon-container a:hover {
        background-color: var(--main-color);
    }

    .team-single h4 {
        font-size: 3rem;
        font-weight: 500;
        color: var(--black);
        padding-bottom: 0.5rem;
    }

    .team-single .biography {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .team-single .team-skills {
        width: 100%;
    }

    .team-single .skills {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1rem;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .team-single .skill-item {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 40rem;
        flex: 1 1 40rem;
    }

    .team-single .skill-item .box {
        padding: 1rem 0;
    }

    .team-single .skill-item .box h3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0.7rem 0;
        font-size: 1.7rem;
        color: var(--black);
        font-weight: 400;
    }

    .team-single .skill-item .box .progress-bar {
        width: 100%;
        background: var(--secondary-color);
        overflow: hidden;
        height: 1.2rem;
        border-radius: var(--border-radius-2);
    }

    .team-single .skill-item .box .progress-bar span {
        display: block;
        height: 100%;
        background: var(--main-color);
    }

    /*----- 4- Testimonials -----*/
    .testimonial-slider {
        overflow: hidden;
        position: relative;
        padding: 6rem 0;
    }

    .testi-item {
        padding: 4rem 3rem;
        background-color: var(--secondary-color);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        text-align: center;
        gap: 3rem;
        position: relative;
    }

    .testi-item .image {
        position: absolute;
        top: 0%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .testi-item img {
        height: 12rem;
        width: 12rem;
        border-radius: var(--border-radius-3);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        border: 0.3rem solid var(--white);
    }

    .testi-item .content {
        padding-top: 3.5rem;
        position: relative;
    }

    .testi-item .fa-quote-left {
        font-size: 6rem;
        color: var(--grey);
    }

    .testi-item .content .icon-1 {
        position: absolute;
        top: -30%;
        left: -0%;
    }

    .testi-item .content .icon-2 {
        position: absolute;
        bottom: -30%;
        right: -0%;
    }

    .testi-item p {
        padding: 1.5rem 0;
        color: var(--white);
    }

    .testi-item h4 {
        font-size: 2.4rem;
        font-weight: 600;
        color: var(--main-color);
    }

    .testi-item h6 {
        font-size: 1.6rem;
        font-weight: 400;
        color: var(--white);
    }

    /*----- 5- Faqs -----*/
    .faq {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 2rem;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .faq .accordion-container {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 50rem;
        flex: 1 1 50rem;
    }

    .faq .accordion {
        margin-bottom: 1.5rem;
        background-color: var(--white);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .faq .accordion:last-child {
        margin-bottom: 0rem;
    }

    .faq .accordion .accordion-heading {
        padding: 2rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        color: var(--secondary-color);
        cursor: pointer;
    }

    .faq .accordion.active .accordion-heading {
        color: var(--white);
        background-color: var(--secondary-color);
    }

    .faq .accordion .accordion-heading h3 {
        font-size: 2rem;
    }

    .faq .accordion .accordion-heading i {
        height: 3.5rem;
        width: 3.5rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: var(--white);
        background-color: var(--secondary-color);
        font-size: 1.6rem;
    }

    .faq .accordion.active .accordion-heading i {
        background-color: var(--main-color);
    }

    .faq .accordion.active .accordion-content {
        display: block;
    }

    .faq .accordion-content {
        padding: 2rem;
        font-size: 1.5rem;
        line-height: 2;
        color: var(--grey);
        display: none;
    }

    .faq .image {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 35rem;
        flex: 1 1 35rem;
        height: 50rem;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    /*------------------------------ (02)-About (End) ------------------------------*/



    /*----------------------------- (03)-Services (Start) -------------------------- */

    /*---------------- PAGES --------------- */

    /*----- 1- Services -----*/
    .services .box-container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (minmax(32rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
        gap: 1.5rem;
    }

    .service-item {
        background-color: var(--white);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .service-item .image {
        height: 25rem;
        overflow: hidden;
    }

    .service-item:hover img {
        scale: 1.1;
    }

    .service-item .content {
        padding: 2rem;
        padding-top: 4rem;
        position: relative;
    }

    .service-item a {
        display: block;
        position: absolute;
        top: 0%;
        left: 50%;
        width: 90%;
        font-size: 2rem;
        font-weight: 600;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: var(--white);
        background-color: var(--main-color);
        text-align: center;
        padding: 1rem;
        border-radius: 10rem;
    }

    .service-item a:hover {
        color: var(--secondary-color);
    }

    /*----- 2- Single Service -----*/
    .service-info .work {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 2rem;
    }

    .service-info .work ul {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 40rem;
        flex: 1 1 40rem;
    }

    .service-info .work-image {
        padding-top: 1rem;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 40rem;
        flex: 1 1 40rem;
    }

    .service-info .work-image img {
        height: 25rem;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .service-single .sidebar .sidebar-item {
        margin-bottom: 0;
    }

    /*----------------------------- (03)-Services(End) ---------------------------- */



    /*------------------------------ (04)-Pages (Start) ------------------------------*/

    /*--------------- COMPONENTS ---------------*/

    /*----- 01- Account-Form -----*/
    .account-form {
        max-width: 45rem;
        background: var(--secondary-color);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        margin: 0rem auto;
        text-align: center;
    }

    .account-form .content {
        border-radius: 100% 0% 100% 0% / 11% 88% 12% 89%;
        padding: 5rem;
        background-color: var(--white);
    }

    .account-form .icon {
        font-size: 2.5rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        color: var(--secondary-color);
    }

    .account-form h3 {
        font-size: 3rem;
        padding: 1rem 0;
        font-weight: 500;
        color: var(--secondary-color);
        text-transform: uppercase;
    }

    .account-form .input-field {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1rem;
        margin-bottom: 1.5rem;
        border-radius: 10rem;
        overflow: hidden;
        border: 0.1rem solid var(--secondary-color);
    }

    .account-form .input-field:hover {
        border-color: var(--main-color);
    }

    .account-form .input-field label {
        color: var(--white);
        background-color: var(--secondary-color);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 6rem;
        font-size: 1.8rem;
        cursor: pointer;
    }

    .account-form .input-field:hover label {
        background-color: var(--main-color);
    }

    .account-form .box {
        width: 100%;
        background-color: transparent;
        font-size: 1.6rem;
        color: var(--grey);
        padding: 1rem 0;
        text-transform: none;
    }

    .account-form .box::-webkit-input-placeholder {
        text-transform: capitalize;
        color: rgba(0, 0, 0, 0.7);
    }

    .account-form .box::-moz-placeholder {
        text-transform: capitalize;
        color: rgba(0, 0, 0, 0.7);
    }

    .account-form .box:-ms-input-placeholder {
        text-transform: capitalize;
        color: rgba(0, 0, 0, 0.7);
    }

    .account-form .box::placeholder {
        text-transform: capitalize;
        color: rgba(0, 0, 0, 0.7);
    }

    .account-form p {
        padding-top: 2rem;
        font-size: 1.5rem;
        color: rgba(0, 0, 0, 0.7);
        text-align: center;
        padding-bottom: 1rem;
    }

    .account-form .btn {
        width: 100%;
        overflow: hidden;
        margin-top: 1rem;
    }

    .account-form .link {
        font-size: 1.5rem;
        color: var(--main-color);
    }

    .account-form .link:hover {
        text-decoration: underline;
    }

    .account-form .checkbox-label {
        color: var(--grey);
        position: relative;
        padding-left: 2.5rem;
        cursor: pointer;
        font-size: 1.8rem;
        line-height: 1.4;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .account-form .checkbox-label input {
        position: absolute;
        opacity: 0;
        z-index: -1;
    }

    .account-form .checkbox-indicator {
        position: absolute;
        top: 0.2rem;
        left: 0;
        height: 1.6rem;
        width: 1.6rem;
        background: transparent;
        outline: 0.15rem solid var(--grey);
        border-radius: 0.2rem;
    }

    .account-form .checkbox-label input:checked~.checkbox-indicator {
        background: var(--main-color);
        outline-color: var(--main-color);
    }

    .account-form .checkbox-indicator:after {
        content: '';
        position: absolute;
        left: 0.5rem;
        top: 0.2rem;
        width: 0.3rem;
        height: 0.8rem;
        border: solid var(--white);
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        display: none;
    }

    .account-form .checkbox-label input:checked~.checkbox-indicator:after {
        display: initial;
    }

    /*----- 02- Tab Information -----*/
    .tab-buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        list-style-type: none;
        gap: 0.5rem;
        margin-bottom: 2rem;
    }

    .tab-buttons .button {
        font-size: 1.6rem;
        font-weight: 500;
        padding: 1.5rem 3rem;
        color: var(--main-color);
        background-color: transparent;
        border: 0.2rem solid var(--main-color);
        text-transform: uppercase;
    }

    .tab-buttons .button:hover,
    .tab-buttons .button.active {
        color: var(--white);
        background-color: var(--main-color);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        cursor: pointer;
    }

    .tab-section {
        display: none;
    }

    .tab-section.active {
        display: block;
        margin-top: 2rem;
    }

    /*----- 03- Page Single -----*/
    .page-single {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .page-info {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 75rem;
        flex: 1 1 75rem;
    }

    .page-info .image {
        height: 40rem;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .page-info .content {
        padding-top: 2rem;
    }

    .page-info .main-heading {
        display: block;
        font-size: 3.5rem;
        font-weight: 600;
        color: var(--secondary-color);
        padding-bottom: 1rem;
    }

    .page-info p {
        padding-bottom: 1rem;
    }

    .page-info .page-gallery {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
        gap: 1rem;
        padding: 2rem 0;
    }

    .page-info .page-gallery img {
        height: 25rem;
    }

    .page-info .sub-heading {
        display: inline-block;
        font-size: 2.5rem;
        font-weight: 600;
        color: var(--secondary-color);
        padding-bottom: 0.5rem;
    }

    .page-info .sub-section {
        padding-top: 2rem;
    }

    .page-info .sub-section p {
        margin-bottom: -1rem;
    }

    .page-info .sub-section ul {
        list-style: none;
    }

    .page-info .sub-section ul li {
        padding-top: 1rem;
        font-size: 1.5rem;
        color: var(--grey);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
    }

    .page-info .sub-section ul i {
        color: var(--main-color);
        background-color: rgba(192, 1, 19, 0.1);
        padding: 1.5rem;
        border-radius: var(--border-radius-3);
        font-size: 1.4rem;
        height: 1.8rem;
        width: 1rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    /*----- 04- Page Sidebar -----*/
    .page-sidebar {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 25rem;
        flex: 1 1 25rem;
        padding: 4rem;
        background: var(--accent-color);
        border-bottom: var(--custom-border);
        border-color: var(--secondary-color);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .page-sidebar .sub-heading {
        display: inline-block;
        font-size: 2.5rem;
        font-weight: 600;
        color: var(--white);
        padding-bottom: 2rem;
        line-height: 1;
    }

    .page-sidebar .detail-item {
        padding-bottom: 2rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 0.8rem;
    }

    .page-sidebar .detail-item:last-child {
        padding-bottom: 0;
    }

    .page-sidebar .detail-item i {
        height: 2rem;
        width: 2rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 1.8rem;
        color: var(--white);
    }

    .page-sidebar .detail-item h3 {
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--white);
        line-height: 1;
        padding-bottom: 0.5rem;
    }

    .page-sidebar .detail-item .detail-content p {
        font-weight: 400;
        color: #f7f7f7;
        line-height: 1.3;
        text-transform: none;
    }

    .page-sidebar .gmail,
    .page-sidebar .website {
        text-transform: none;
    }

    /*--------------- PAGES ---------------*/

    /*----- 1- Portfolio -----*/
    .portfolio .tab-buttons {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 1.5rem;
    }

    .portfolio-item {
        width: 33.3%;
        padding: 0.5rem;
    }

    .portfolio-content {
        position: relative;
        height: 25rem;
        width: 100%;
    }

    .portfolio-item .content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
        padding: 2rem;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        -webkit-transition: all 0.4s ease-in-out 0s;
        -moz-transition: all 0.4s ease-in-out 0s;
        -o-transition: all 0.4s ease-in-out 0s;
        transition: all 0.4s ease-in-out 0s;
        background-color: rgba(0, 0, 0, 0.8);
        opacity: 0;
    }

    .portfolio-item:hover .content {
        opacity: 1;
    }

    .portfolio-item:hover .content .text {
        padding-top: 1.5rem;
    }

    .portfolio-item .content h5 {
        font-size: 1.8rem;
        font-weight: 400;
        letter-spacing: 0.05rem;
        color: var(--white);
    }

    .portfolio-item .content h4 {
        font-size: 2.5rem;
        font-weight: 600;
        letter-spacing: 0.05rem;
        color: var(--white);
    }

    .portfolio-item .content h4:hover {
        color: var(--main-color);
    }

    .portfolio-item a i {
        font-size: 1.8rem;
        color: var(--white);
        background-color: var(--main-color);
        border: 0.15rem solid var(--main-color);
        border-radius: var(--border-radius-3);
        height: 5rem;
        width: 5rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .portfolio-item a:hover i {
        color: var(--main-color);
        background-color: transparent;
    }

    /*----- 2- Portfolio-Single -----*/
    .portfolio-info .important {
        color: var(--secondary-color) !important;
        font-weight: 600;
    }

    /*----- 3- Pricing -----*/
    .pricing .box-container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (minmax(32rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
        gap: 1.5rem;
    }

    .price-item {
        background-color: var(--white);
        overflow: hidden;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        text-align: center;
        border-radius: var(--border-radius-2);
    }

    .price-item:nth-child(2) {
        background-color: var(--secondary-color);
    }

    .price-item .intro {
        padding: 4rem;
        background-color: var(--secondary-color);
        border-radius: 100% 0% 100% 0% / 11% 88% 12% 89%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .price-item:nth-child(2) .intro {
        background-color: var(--white);
    }

    .price-item h3 {
        text-transform: uppercase;
        color: var(--white);
        font-size: 3rem;
        font-weight: 500;
    }

    .price-item:nth-child(2) h3 {
        color: var(--secondary-color);
    }

    .price-item p {
        color: var(--white);
        font-weight: 400;
    }

    .price-item:nth-child(2) p {
        color: var(--grey);
    }

    .price-item .price {
        margin-top: 1rem;
    }

    .price-item .price p {
        color: var(--white);
        font-size: 7rem;
        font-weight: 600;
    }

    .price-item:nth-child(2) .price p {
        color: var(--secondary-color);
    }

    .price-item span {
        color: var(--white);
        font-size: 2rem;
        font-weight: 400;
        text-transform: lowercase;
    }

    .price-item:nth-child(2) span {
        color: var(--grey);
    }

    .price-item .content {
        padding-bottom: 2rem;
    }

    .price-item ul {
        list-style: none;
        text-align: center;
        margin: 2rem 5%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .price-item ul li {
        padding: 0.9rem 0;
        font-size: 1.6rem;
        color: var(--grey);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.7rem;
    }

    .price-item:nth-child(2) ul li {
        color: var(--white);
    }

    .price-item ul li i {
        color: var(--secondary-color);
        font-size: 1.5rem;
    }

    .price-item:nth-child(2) ul li i {
        color: var(--white);
    }

    /*----- 4- Appointment -----*/
    .appointment .box-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .appointment form .alert {
        display: inline-block;
        font-size: 2rem;
        color: var(--main-color);
        padding-left: 1rem;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }

    .appointment .app-container {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 60rem;
        flex: 1 1 60rem;
        background-color: var(--white);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        padding: 2rem;
    }

    .appointment .input-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .appointment .input-field {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 20rem;
        flex: 1 1 20rem;
        border: 1.5px solid rgba(0, 0, 0, 0.1);
        border-radius: 0.5rem;
        padding: 1.5rem;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
    }

    .appointment .input-field:hover {
        border-color: var(--main-color);
    }

    .appointment .input-field label {
        color: var(--main-color);
        font-size: 1.6rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .appointment .box {
        width: 100%;
        font-size: 1.6rem;
        color: var(--black);
        background-color: transparent;
        text-transform: none;
    }

    .appointment .box::-webkit-input-placeholder {
        text-transform: capitalize;
        color: var(--grey);
    }

    .appointment .box::-moz-placeholder {
        text-transform: capitalize;
        color: var(--grey);
    }

    .appointment .box:-ms-input-placeholder {
        text-transform: capitalize;
        color: var(--grey);
    }

    .appointment .box::placeholder {
        text-transform: capitalize;
        color: var(--grey);
    }

    .appointment textarea {
        height: 15rem;
        resize: none;
    }

    .appointment .text-area {
        -webkit-box-align: start;
        -ms-flex-align: start;
        -ms-grid-row-align: flex-start;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .appointment .select option {
        color: var(--grey);
    }

    .appointment .select {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 20rem;
        flex: 1 1 20rem;
        border: 0.15rem solid rgba(0, 0, 0, 0.1);
        width: 100%;
    }

    .appointment .select-container {
        height: 100%;
        min-width: 100%;
        position: relative;
    }

    .appointment .select-box {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        color: var(--grey);
        background-color: transparent;
        padding: 1.5rem;
        font-size: 1.6rem;
        padding-left: 4.5rem;
    }

    .appointment .select-container label {
        position: absolute;
        height: 100%;
        top: 0;
        left: 1.5rem;
        color: var(--main-color);
        font-size: 1.6rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .appointment .select-container .icon-container {
        width: 4rem;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        z-index: -1;
    }

    .appointment .select-container .icon-container i {
        font-size: 1.6rem;
        color: var(--grey);
    }

    .appointment .image {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 30rem;
        flex: 1 1 30rem;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    /*----- 5- Partners -----*/
    .partners .box-container {
        padding-top: 2rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 2.5rem;
    }

    .partner-item {
        width: 20rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    /*----- 6- Login -----*/
    .login form .info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 2rem 0;
    }

    .login form label {
        font-size: 1.5rem;
        color: var(--grey);
        cursor: pointer;
    }

    /*----- 7- Register -----*/
    .register form .checkbox-label {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        margin: 2rem 0;
    }

    .register form label {
        font-size: 1.5rem;
        color: var(--grey);
        cursor: pointer;
    }

    .register form label span {
        color: var(--main-color);
    }

    /*------------------------------ (03)-Pages (End) ------------------------------*/



    /*------------------------------ (05)-Shop (Start) ------------------------------*/

    /*--------------- COMPONENTS ---------------*/

    /*----- 01- Filter -----*/
    .filter .box-container {
        padding-top: 4rem;
    }

    .filter .slider {
        height: 5px;
        position: relative;
        background: #ddd;
        border-radius: var(--border-radius-2);
    }

    .filter .slider .progress {
        height: 100%;
        left: 25%;
        right: 25%;
        position: absolute;
        border-radius: var(--border-radius-2);
        background: var(--secondary-color);
        -webkit-transition: none;
        transition: none;
    }

    .range-input {
        position: relative;
        -webkit-transition: none;
        transition: none;
    }

    .range-input input {
        position: absolute;
        width: 100%;
        height: 5px;
        top: -5px;
        background: none;
        pointer-events: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    input[type="range"]::-webkit-slider-thumb {
        height: 17px;
        width: 17px;
        border-radius: var(--border-radius-3);
        background: var(--secondary-color);
        pointer-events: auto;
        -webkit-appearance: none;
        -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
    }

    input[type="range"]::-moz-range-thumb {
        height: 17px;
        width: 17px;
        border: none;
        border-radius: var(--border-radius-3);
        background: var(--secondary-color);
        pointer-events: auto;
        -moz-appearance: none;
        -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
    }

    .price-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        color: #242424;
        font-size: 14px;
        line-height: 1.2em;
        font-weight: 400;
        margin-bottom: 0px;
        margin-top: 3rem;
    }

    .filter .price-input {
        width: 15rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: var(--border-radius-2);
        border: 0.1rem solid rgba(0, 0, 0, 0.2);
        padding: 0.5rem;
    }

    .filter .price-input .field {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 0.2rem;
        width: 100%;
        height: 3rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .filter .field input {
        width: 100%;
        height: 100%;
        outline: none;
        font-size: 1.5rem;
        text-align: center;
        -moz-appearance: textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
        color: var(--black);
        background-color: transparent;
    }

    .filter input[type="number"]::-webkit-outer-spin-button,
    .filter input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    .filter .price-input .separator {
        width: 10rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 1.8rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    /*----- 02- Shop Header -----*/
    .shop .intro {
        margin-bottom: 1.5rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 1rem;
        background-color: var(--white);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        padding: 1rem 1.5rem;
        border: 0.1rem solid rgba(0, 0, 0, 0.08);
    }

    .shop .intro .showing {
        font-size: 1.6rem;
        color: var(--grey);
    }

    .shop .intro .styles {
        list-style-type: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1rem;
    }

    .shop .intro .styles a {
        font-size: 2rem;
        color: var(--secondary-color);
    }

    .shop .intro .styles a:hover {
        color: var(--main-color);
    }

    .shop .intro .sorting-type label {
        font-size: 1.6rem;
        color: var(--secondary-color);
        margin-right: 0.5rem;
    }

    .shop .intro .sorting-type select {
        font-size: 1.4rem;
        color: var(--grey);
        background-color: transparent;
        border: var(--border);
        padding: 1rem;
    }

    /*----- 03- product-item -----*/
    .product-item {
        background-color: var(--white);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .product-item .image {
        width: 100%;
        height: 25rem;
        overflow: hidden;
        position: relative;
    }

    .product-item .icon-box {
        position: absolute;
        top: 1rem;
        left: -100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 1rem;
    }

    .product-item:hover .icon-box {
        left: 1rem;
        opacity: 1;
    }

    .product-item .icon-box a {
        height: 4rem;
        width: 4rem;
        font-size: 1.6rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: var(--white);
        background-color: var(--main-color);
    }

    .product-item .icon-box a:hover {
        background-color: var(--secondary-color);
    }

    .product-item .content {
        padding: 2rem;
    }

    .product-item .content .text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 1rem;
        padding-bottom: 1.5rem;
    }

    .product-item h3 {
        font-size: 2.2rem;
        font-weight: 600;
        color: var(--secondary-color);
        line-height: 1;
    }

    .product-item h3:hover {
        color: var(--main-color);
    }

    .product-item .content .rating i {
        font-size: 1.4rem;
        color: var(--main-color);
    }

    .product-item .price {
        font-size: 2rem;
        font-weight: bold;
        color: var(--main-color);
    }

    .product-item .price span {
        font-size: 1.5rem;
        font-weight: 400;
        text-decoration: line-through;
        color: var(--grey);
        padding-left: 0.2rem;
    }

    .product-item p {
        font-size: 1.5rem;
        padding-bottom: 1rem;
    }

    /*----- 04- Shop-Title -----*/
    .shoplist-title {
        background-color: var(--secondary-color);
        color: var(--white);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 1.8rem 1.5rem;
        margin-bottom: 1rem;
    }

    .shoplist-title h3 {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 20rem;
        flex: 1 1 20rem;
        font-size: 2rem;
        text-align: center;
    }


    /*----- 05- Cart-Summary -----*/
    .summary-list {
        background-color: var(--white);
        padding-top: 1rem;
    }

    .summary-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-bottom: 1.5rem;
        font-size: 2rem;
        color: var(--black);
    }

    .summary-item .name {
        font-weight: 600;
    }

    .summary-item .value {
        font-weight: 500;
        color: var(--secondary-color);
    }

    /*----- 06- Quantity Box -----*/
    .quantity.buttons_added {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border: 1px solid #ccc;
        height: 4rem;
        width: 11rem;
        margin: 0 auto;
    }

    .quantity.buttons_added .minus,
    .quantity.buttons_added .plus {
        width: 3rem;
        color: var(--black);
        cursor: pointer;
        background-color: transparent;
    }

    .quantity.buttons_added .minus:hover,
    .quantity.buttons_added .plus:hover {
        background: var(--main-color);
        color: var(--white);
    }

    .quantity .input-text.qty {
        padding: 0 1rem;
        text-align: center;
        background-color: transparent;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }

    .quantity input::-webkit-outer-spin-button,
    .quantity input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin: 0;
    }

    .quantity.buttons_added .minus:focus,
    .quantity.buttons_added .plus:focus {
        outline: none;
    }

    /*----- 07- Address -----*/
    .address-details .address {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 25rem;
        flex: 1 1 25rem;
    }

    .address .title {
        background-color: var(--main-color);
        color: var(--white);
        padding: 1rem 0.5rem;
        margin-bottom: 1rem;
    }

    .address .title h3 {
        font-size: 1.8rem;
    }

    .address .address-info p {
        padding-bottom: 0.5rem;
    }

    .address .address-info p span {
        font-weight: bold;
        color: var(--secondary-color);
        padding-right: 1rem;
    }


    /*--------------- PAGES ---------------*/
    .shop {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.5rem;
    }

    .shop .shop-container {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 75rem;
        flex: 1 1 75rem;
    }

    /*----- 1- Shop Grid -----*/
    .shop .product-container.grid {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
        gap: 1rem;
    }

    /*----- 2- Shop List -----*/
    .shop .product-container.list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .shop .product-container.list .product-item {
        width: 100%;
        text-align: left;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
    }

    .shop .product-container.list .product-item .image {
        height: 100%;
    }

    .shop .product-container.list .product-item .content {
        text-align: left;
        padding: 1.5rem;
    }

    /*----- 3- Single Product -----*/
    .product-single .product-des {
        border-radius: var(--border-radius-2);
        background-color: var(--white);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        padding: 2rem;
        margin-bottom: 3.5rem;
    }

    .product-single .product-des .box-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: start;
        -ms-flex-align: start;
        -ms-grid-row-align: flex-start;
        align-items: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .product-single .product-des .box-container .image {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 35rem;
        flex: 1 1 35rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .product-single .product-des .box-container .image-container {
        max-width: 50rem;
    }

    .product-single .product-des .box-container .image-container .main {
        width: 100%;
        height: 40rem;
        overflow: hidden;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .product-single .product-des .box-container .image .main img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-single .product-des .box-container .image .change-btns {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (minmax(8rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }

    .product-single .product-des .box-container .image .change-btns img {
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        cursor: pointer;
    }

    .product-single .product-des .image .change-btns img:hover,
    .product-single .product-des .image .change-btns img.active {
        border: 0.4rem solid var(--main-color);
    }

    .product-single .product-des .box-container .content {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 45rem;
        flex: 1 1 45rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .product-single .product-des .box-container .content h3 {
        font-size: 3.5rem;
        font-weight: 600;
        color: var(--secondary-color);
    }

    .product-single .product-des .box-container .content .intro {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 1rem 0;
    }

    .product-single .product-des .box-container .content .intro .rating {
        color: var(--main-color);
        font-size: 1.5rem;
    }

    .product-single .product-des .box-container .content .intro span {
        font-size: 1.5rem;
        padding-left: 1rem;
    }

    .product-single .product-des .box-container .content .price {
        font-size: 2rem;
        font-weight: bold;
        color: var(--main-color);
    }

    .product-single .product-des .box-container .content .price span {
        color: var(--grey);
        font-weight: lighter;
        text-decoration: line-through;
    }

    .product-single .product-des .box-container .content p {
        font-size: 1.6rem;
        padding: 2rem 0;
        line-height: 1.7;
        font-weight: 400;
        color: var(--grey);
    }

    .product-des ul {
        list-style: none;
    }

    .product-des ul li {
        padding-bottom: 1.5rem;
        font-size: 1.7rem;
        color: var(--grey);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
    }

    .product-des ul li i {
        padding: 1.5rem;
        border-radius: var(--border-radius-3);
        background-color: rgba(192, 1, 19, 0.1);
        color: var(--main-color);
        font-size: 1.2rem;
        height: 1.8rem;
        width: 1rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .product-single .box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 2rem;
    }

    .product-single .qty {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 1rem 0;
        gap: 1rem;
        width: 15rem;
    }

    .product-single .product-des .box-container .content .btn {
        margin: 2rem 0;
    }

    .product-single .categories,
    .product-single .tags {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0.5rem 0;
    }

    .product-single .qty h4,
    .product-single .categories h4,
    .product-single .tags h4 {
        font-size: 1.8rem;
        color: var(--black);
        font-weight: 600;
    }

    .product-single .categories a,
    .product-single .tags a {
        font-size: 1.6rem;
        color: var(--main-color);
        padding: 0 0.5rem;
    }

    .product-single .categories a:hover,
    .product-single .tags a:hover {
        color: var(--secondary-color);
    }

    .product-single .tab-info {
        margin-top: 4rem;
    }

    .product-info .description p {
        font-size: 1.5rem;
        color: var(--grey);
        line-height: 1.5;
    }

    .product-info .additional-info .item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 2rem;
        padding-bottom: 1rem;
    }

    .product-info .additional-info h3 {
        width: 20rem;
        font-size: 1.8rem;
        color: var(--black);
    }

    .product-info .additional-info span {
        font-size: 1.6rem;
        color: var(--grey);
    }

    .product-info .additional-info .item span.dimension {
        text-transform: lowercase;
    }

    .product-info h2 {
        font-size: 3rem;
        color: var(--black);
        padding-bottom: 1rem;
    }

    .product-info .reviews {
        margin-bottom: 2rem;
    }

    .product-info .leave-reply {
        width: 60rem;
    }

    .featured-items .box-container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (minmax(23rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr));
        gap: 1rem;
    }

    /*----- 4- Cart  ------*/
    .cart .shop-btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        margin-bottom: 2rem;
    }

    .shopping-cart {
        margin-bottom: 2rem;
        overflow-x: auto;
        overflow-y: hidden;
        background-color: var(--white);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .cart .container {
        min-width: 90rem;
    }

    .shopping-cart::-webkit-scrollbar {
        height: 0.8rem;
    }

    .cart .box-container {
        padding: 0rem 1rem;
    }

    .cart-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 1rem 0rem;
        gap: 3rem;
        border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
    }

    .cart-item:last-child {
        border: none;
    }

    .cart-item .box {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 15rem;
        flex: 1 1 15rem;
        text-align: center;
        font-size: 2rem;
        font-weight: 400;
    }

    .cart-item img {
        height: 10rem;
        width: 12rem;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        background-color: #f7f7f7;
    }

    .cart-item .name {
        color: var(--secondary-color);
        font-weight: 600;
    }

    .cart-item .name:hover {
        color: var(--main-color);
    }

    .cart-item .price,
    .cart-item .total {
        color: var(--grey);
    }

    .cart-item .icon {
        font-size: 2rem;
        cursor: pointer;
        color: red;
    }

    .cart-item .icon:hover {
        color: var(--main-color);
    }

    .cart .cart-bottom {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        -ms-flex-align: start;
        -ms-grid-row-align: flex-start;
        align-items: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 5rem;
    }

    .cart .coupon-container {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 50rem;
        flex: 1 1 50rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
    }

    .cart .coupon-container .box {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 30rem;
        flex: 1 1 30rem;
        background-color: transparent;
        font-size: 1.6rem;
        color: var(--grey);
        padding: 1.2rem 1.5rem;
        border: 0.15rem solid rgba(0, 0, 0, 0.1);
        text-transform: none;
    }

    .cart .coupon-container .box::-webkit-input-placeholder {
        text-transform: capitalize;
    }

    .cart .coupon-container .box::-moz-placeholder {
        text-transform: capitalize;
    }

    .cart .coupon-container .box:-ms-input-placeholder {
        text-transform: capitalize;
    }

    .cart .coupon-container .box::placeholder {
        text-transform: capitalize;
    }

    .cart .coupon-container .box:focus {
        border-color: var(--main-color);
    }

    .cart .coupon-container .btn {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 15rem;
        flex: 1 1 15rem;
        margin-top: 0;
    }

    /*-- 2- Cart Total --*/
    .cart .cart-summary {
        width: 40rem;
        padding: 1.5rem;
        margin-left: auto;
        border-top: 0.3rem solid var(--main-color);
        background-color: var(--white);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .cart .cart-summary .btn {
        width: 100%;
        text-align: center;
        margin-top: 1rem;
    }

    /*----- 5- Wishlist ------*/
    .wishlist-container {
        background-color: var(--white);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .wishlist .container {
        min-width: 90rem;
    }

    .wishlist-container::-webkit-scrollbar {
        height: 0.8rem;
    }

    .wishlist .box-container {
        padding: 1rem;
    }

    .wishlist .wishlist-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 1rem 0rem;
        gap: 3rem;
        border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
    }

    .wishlist-item:last-child {
        border: none;
    }

    .wishlist .wishlist-item .box {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 15rem;
        flex: 1 1 15rem;
        text-align: center;
        font-size: 2rem;
        font-weight: 500;
    }

    .wishlist .wishlist-item img {
        height: 10rem;
        width: 12rem;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        background-color: #f7f7f7;
    }

    .wishlist-item .name {
        color: var(--secondary-color);
        font-weight: 600;
    }

    .wishlist-item .name:hover {
        color: var(--main-color);
    }

    .wishlist .wishlist-item .price {
        color: var(--grey);
        font-weight: 500;
    }

    .wishlist .wishlist-item .status.in {
        color: var(--secondary-color);
    }

    .wishlist .wishlist-item .status.out {
        color: red;
    }

    .wishlist .wishlist-item .action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
    }

    .wishlist .wishlist-item .icon {
        font-size: 2rem;
        cursor: pointer;
    }

    .wishlist .wishlist-item .icon:hover {
        color: var(--secondary-color);
    }

    .wishlist .wishlist-item .fa-trash-alt {
        color: red;
    }

    .wishlist .wishlist-item .fa-shopping-cart {
        color: var(--main-color);
    }

    /*----- 6- Checkout -----*/
    /*
1- Payment Method
2- Cart Total
*/

    .checkout {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .checkout h2 {
        font-size: 3.5rem;
    }

    .checkout .box-1 {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 55rem;
        flex: 1 1 55rem;
    }

    .checkout .box-2 {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 35rem;
        flex: 1 1 35rem;
    }

    .checkout-item {
        margin-bottom: 1.5rem;
        padding: 2rem;
        background-color: var(--white);
        border-radius: var(--border-radius-2);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .checkout .box-1 .checkout-item:last-child {
        margin-bottom: 0;
    }

    .checkout .checkbox-label {
        color: var(--secondary-color) !important;
        margin-bottom: 2rem;
        cursor: pointer;
        line-height: 1.2;
    }

    .checkout .checkbox-indicator {
        outline: 0.15rem solid var(--grey) !important;
    }

    .checkout .checkbox-label input:checked~.checkout .checkbox-indicator {
        outline-color: var(--main-color) !important;
    }

    /*-- 1- Payment Method --*/
    .payment-methods .payment {
        margin-bottom: 1.5rem;
    }

    .payment-methods .payment label {
        cursor: pointer;
        font-size: 2rem;
        font-weight: 500;
        color: var(--secondary-color);
        text-transform: uppercase;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
    }

    .payment input:checked+label,
    .payment label:hover {
        color: var(--main-color);
    }

    .payment input[type="radio"] {
        position: absolute;
        opacity: 0;
    }

    .payment input[type="radio"]+.radio-label:before {
        content: '';
        background: #f4f4f4;
        border-radius: 100%;
        border: 0.1rem solid var(--grey);
        display: inline-block;
        width: 2rem;
        height: 2rem;
        position: relative;
        top: 0;
        vertical-align: top;
        cursor: pointer;
        text-align: center;
        -webkit-transition: all 250ms ease;
        transition: all 250ms ease;
    }

    .payment input[type="radio"]:checked+.radio-label:before {
        background-color: var(--main-color);
        -webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
        box-shadow: inset 0 0 0 4px #f4f4f4;
        outline: none;
        border-color: var(--main-color);
    }

    .payment-body {
        display: none;
    }

    .payment-body.active {
        display: block;
    }

    .payment-methods .payment .payment-body p {
        font-size: 1.4rem;
        line-height: 1.8;
        padding-top: 1rem;
    }

    .checkout .btn-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .checkout .btn {
        width: 100%;
        text-align: center;
    }

    /*----- 7- Order Confirmation -----*/
    .order-details .order-details-item {
        width: 100%;
        background-color: var(--white);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        padding: 2rem;
        margin-bottom: 1rem;
    }

    .order-details .order-message {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        background-color: var(--secondary-color);
    }

    .order-details .order-message i {
        height: 3rem;
        width: 3rem;
        font-size: 2.8rem;
        color: var(--main-color);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .order-details .order-message span {
        font-size: 2rem;
        font-weight: 400;
        color: var(--white);
    }

    .order-details .order-intro-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 0.5rem;
    }

    .order-details .address-details {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 50rem;
        flex: 1 1 50rem;
    }

    /*-- 1- Address Details --*/
    .address-details .box-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .address-details .address {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 22rem;
        flex: 1 1 22rem;
    }

    /*-- 2-Order Items --*/
    .order-container {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .order-container::-webkit-scrollbar {
        height: 0.8rem;
    }

    .order-items .container {
        min-width: 90rem;
    }

    .order-items .box-container {
        padding: 0rem 1rem;
    }

    .order-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 1rem 0rem;
        gap: 3rem;
        border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
    }

    .order-item:last-child {
        border: none;
    }

    .order-item .box {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 15rem;
        flex: 1 1 15rem;
        text-align: center;
        font-size: 2rem;
        font-weight: 400;
    }

    .order-item img {
        height: 10rem;
        width: 12rem;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        background-color: #f7f7f7;
    }

    .order-item .name {
        color: var(--secondary-color);
        font-weight: 600;
    }

    .order-item .price,
    .order-item .total {
        color: var(--grey);
    }

    /*-- 3- Order Summary --*/
    .order-details .cart-total {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 30rem;
        flex: 1 1 30rem;
    }

    .order-details .order-intro {
        border-bottom: 0.2rem solid var(--grey);
        margin-bottom: 2rem;
    }

    .order-details .order-intro .order-id {
        font-size: 2rem;
        font-weight: bold;
        color: var(--secondary-color);
        padding-bottom: 1rem;
    }

    .order-details .order-intro .delivery {
        color: var(--grey);
        font-size: 1.8rem;
        padding-bottom: 1rem;
    }

    .order-details .cart-total {
        width: 45rem;
        padding: 1.5rem;
        margin-left: auto;
    }

    /*------------------------------ (05)-Shop (End) ------------------------------*/



    /*------------------------------ (06)-Blog (Start) ------------------------------*/

    /*--------------- COMPONENTS ---------------*/

    /*----- 01- Blog-Item -----*/
    .blog-item {
        background-color: var(--white);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .blog-item .image {
        height: 25rem;
        position: relative;
    }

    .blog-item .category {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background-color: var(--main-color);
        color: var(--white);
        font-size: 1.6rem;
        text-align: center;
        padding: 1rem 1.5rem;
        -webkit-clip-path: polygon(10% 0, 100% 0, 100% 20%, 100% 74%, 91% 100%, 0 100%, 0% 80%, 0 26%);
        clip-path: polygon(10% 0, 100% 0, 100% 20%, 100% 74%, 91% 100%, 0 100%, 0% 80%, 0 26%);
    }

    .blog-item .category:hover {
        background-color: var(--secondary-color);
    }

    .blog-item .content {
        padding: 2rem;
    }

    .blog-item .details {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: 1rem;
    }

    .blog-item .details h3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.7rem;
    }

    .blog-item h3 i {
        height: 2rem;
        width: 2rem;
        font-size: 1.8rem;
        color: var(--main-color);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .blog-item h3 span {
        font-size: 1.5rem;
        font-weight: 500;
        color: var(--grey);
    }

    .blog-item .content .main-heading {
        display: block;
        font-size: 2.7rem;
        font-weight: 600;
        color: var(--secondary-color);
        line-height: 1.3;
        padding-bottom: 0.5rem;
    }

    .blog-item .content .main-heading:hover {
        color: var(--main-color);
    }

    /*----- 02- Comment -----*/
    .comments h4 {
        font-size: 2.5rem;
        color: var(--secondary-color);
        padding-bottom: 2rem;
    }

    .comments .item {
        padding-bottom: 2rem;
    }

    .comments .item:last-child {
        padding-bottom: 0rem;
    }

    .comments .comment {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 2rem;
        -webkit-box-align: start;
        -ms-flex-align: start;
        -ms-grid-row-align: flex-start;
        align-items: flex-start;
        padding-bottom: 1.5rem;
    }

    .comment .comment-image {
        height: 9rem;
        width: 9rem;
        border-radius: var(--border-radius-3);
        border: 0.4rem solid var(--secondary-color);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        overflow: hidden;
    }

    .comment .comment-content {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 35rem;
        flex: 1 1 35rem;
    }

    .comment .comment-intro {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 1rem;
        padding-bottom: 1rem;
    }

    .comment .comment-intro h3 {
        font-size: 2rem;
        font-weight: 600;
        color: var(--secondary-color);
    }

    .comment .comment-intro span {
        height: 0.2rem;
        width: 2rem;
        background-color: var(--main-color);
    }

    .comment .comment-intro h6 {
        font-size: 1.5rem;
        font-weight: 500;
        color: var(--grey);
    }

    .comments .icon-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.3rem;
    }

    .comments .icon-item i {
        color: var(--main-color);
        font-size: 1.5rem;
    }

    .comments .icon-item span {
        color: var(--main-color);
        font-size: 1.6rem;
    }

    .icon-item:hover i,
    .icon-item:hover span {
        cursor: pointer;
        color: var(--secondary-color);
    }

    .comment .text {
        font-size: 1.5rem;
        color: var(--grey);
        line-height: 1.5;
        padding-bottom: 1rem;
    }

    .comment.reply {
        margin-left: 12rem;
    }

    .comment.reply .comment-content {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 20rem;
        flex: 1 1 20rem;
    }

    /*----- 03- Pages No -----*/
    .pages-no {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 2rem 0;
    }

    .pages-no .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1rem;
    }

    .pages-no .item {
        color: var(--secondary-color);
        height: 5rem;
        width: 5rem;
        font-size: 2rem;
        border-radius: 5rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .pages-no .numbers {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1rem;
    }

    .pages-no .numbers .item {
        color: rgba(0, 0, 0, 0.35);
        border: 0.15rem solid rgba(0, 0, 0, 0.35);
    }

    .pages-no .numbers .item.active,
    .pages-no .numbers .item:hover {
        cursor: pointer;
        color: var(--white);
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
    }

    /*--------------- PAGES ---------------*/

    /*----- 1- Blog Grid -----*/
    .blog.grid {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 1.5rem;
    }

    .blog-container {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 75rem;
        flex: 1 1 75rem;
    }

    .blog-container.grid .blog-items {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (minmax(33rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
        gap: 1rem;
    }

    /*----- 2- Blog List -----*/
    .blog.list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.5rem;
    }

    .blog-container.list .blog-item {
        width: 100%;
        margin-bottom: 1rem;
    }

    /*----- 3- Blog Single -----*/
    .blog-info .details {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 2rem;
        padding-bottom: 1.5rem;
        margin-bottom: 1rem;
        border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
    }

    .blog-info .category {
        background-color: var(--main-color);
        color: var(--white);
        font-size: 1.6rem;
        text-align: center;
        padding: 1rem 1.5rem;
        -webkit-clip-path: polygon(10% 0, 100% 0, 100% 20%, 100% 74%, 91% 100%, 0 100%, 0% 80%, 0 26%);
        clip-path: polygon(10% 0, 100% 0, 100% 20%, 100% 74%, 91% 100%, 0 100%, 0% 80%, 0 26%);
    }

    .blog-info .category:hover {
        background-color: var(--secondary-color);
    }

    .blog-info .details h3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.7rem;
    }

    .blog-single .details h3 i {
        font-size: 1.8rem;
        color: var(--main-color);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .blog-single .details h3 span {
        font-size: 1.6rem;
        font-weight: 400;
        color: var(--grey);
    }

    .blog-info .important {
        padding: 2rem;
        font-size: 1.6rem;
        font-weight: 500;
        color: var(--white);
        font-style: italic;
        line-height: 1.8;
        border: 0.1rem solid var(--main-color);
        border-left: 0.5rem solid var(--main-color);
        background-color: var(--secondary-color);
        border-radius: var(--border-radius-1);
        margin-top: 1rem;
        margin-bottom: 2rem;
        margin-left: 1rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 2rem;
    }

    .blog-info .important i {
        font-size: 8rem;
        color: var(--main-color);
    }

    .blog-info .important .intro {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
    }

    .blog-info .important .intro span {
        height: 0.2rem;
        width: 2rem;
        background-color: var(--main-color);
    }

    .blog-info .important .intro h6 {
        font-size: 2rem;
        color: var(--main-color);
        font-style: normal;
    }

    .blog-info .end-details {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
        padding-top: 1.5rem;
        margin-top: 2rem;
        border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
    }

    .blog-info .tags,
    .blog-info .share {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.7rem;
    }

    .blog-info .tags span {
        color: var(--white);
        font-size: 1.6rem;
        padding: 0.9rem 1.8rem;
        border-radius: 5rem;
        background-color: var(--secondary-color);
    }

    .blog-info .tags span:hover {
        background-color: var(--main-color);
    }

    .blog-info .share h3 {
        color: var(--black);
        font-size: 1.6rem;
        padding-right: 1rem;
    }

    .blog-info .share i {
        height: 3rem;
        width: 3rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: var(--white);
        background-color: var(--secondary-color);
        font-size: 1.4rem;
        border-radius: var(--border-radius-3);
    }

    .blog-info .share i:hover {
        background-color: var(--main-color);
        cursor: pointer;
    }

    .blog-single .comments {
        margin: 3rem 0;
    }

    /*-- Leave A Reply --*/
    .leave-reply .form h3 {
        font-size: 2.5rem;
        color: var(--black);
        padding-bottom: 2rem;
    }

    /*------------------------------ (05)-Blog (End) ------------------------------*/



    /*------------------------------ (06)-Contact (Start) ------------------------------*/
    .contact .box-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 2rem;
        background-color: var(--white);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    /*-- Contact Information --*/
    .contact-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 4rem;
        padding: 3rem 0;
    }

    .contact .contact-info .info-item {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 25rem;
        flex: 1 1 25rem;
    }

    .contact .contact-info .info-item .info {
        padding: 2rem;
        text-align: center;
    }

    .contact .contact-info .info-item i {
        height: 7rem;
        width: 7rem;
        margin: 0 auto;
        margin-bottom: 2.5rem;
        outline-offset: 1rem;
        outline: 0.15rem dashed var(--main-color);
        font-size: 3rem;
        border-radius: var(--border-radius-3);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: transparent;
        -webkit-text-stroke: 1px var(--white);
        background: var(--main-color);
    }

    .contact .contact-info .info-item h3 {
        font-size: 2.5rem;
        font-weight: 600;
        color: var(--secondary-color);
        padding-bottom: 0.5rem;
    }

    .contact-info .info-item p {
        font-size: 1.5rem;
    }

    .contact .contact-info .info-item .content {
        text-align: center;
    }

    .contact .contact-info .info-item p.gmail {
        text-transform: none;
    }

    /*-- Contact Form --*/
    .contact-container {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 42rem;
        flex: 1 1 42rem;
        padding: 2rem;
    }

    .contact-form .input-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .contact-form .box {
        width: 100%;
        font-size: 1.6rem;
        color: var(--secondary-color);
        border-radius: 0.5rem;
        border: 0.15rem solid rgba(0, 0, 0, 0.1);
        background-color: transparent;
        text-transform: none;
        padding: 1rem 1.5rem;
    }

    .contact-form .box:focus {
        border-color: var(--main-color);
    }

    .contact-form .box::placeholder {
        text-transform: capitalize;
        color: var(--grey);
    }

    .contact-form textarea.box {
        height: 20rem;
        resize: none;
    }

    .contact-form button {
        color: var(--white);
    }

    .contact-form .alert {
        display: inline-block;
        font-size: 1.7rem;
        color: var(--main-color);
        padding-left: 1rem;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }

    /*-- Google Map --*/
    .contact iframe {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 42rem;
        flex: 1 1 42rem;
    }



    /* ====================================================================
   (01) INDUSTRY SECTION
==================================================================== */
    /* Main Container for the ERP Section */
    .erp-section-container {
        align-items: center;
        width: 100%;
        max-height: 650px;
        max-width: 1200px;
        background-color: white;
        padding: 40px;
        margin-top: 50px;
        margin-bottom: 50px;
        margin-right: auto;
        margin-left: auto;
        border-radius: 20px;
        border: solid rgb(209, 209, 209);
        box-shadow: 0 20px 25px -5px rgba(4, 133, 172, 0.1), 0 10px 10px -5px rgba(4, 140, 158, 0.04);
    }

    /* Section Header Styling */
    .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
    }

    .section-header .divider {
        width: 4px;
        height: 32px;
        background-color: var(--primary-blue);
        margin-right: 16px;
        border-radius: 2px;
    }

    .section-header h2 {
        font-size: 28px;
        font-weight: 700;
        color: var(--dark-text);
        margin: 0;
    }

    /* Module Grid Layout */
    .module-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* Default to 1 column on mobile */
        gap: 20px;
    }

    /* Media query for desktop/tablet view */
    @media (min-width: 768px) {
        .module-grid {
            grid-template-columns: repeat(2, 1fr);
            /* 2 columns on larger screens */
        }
    }

    /* Module Card Styling */
    .module-card {
        display: flex;
        align-items: center;
        padding: 16px;
        background-color: #ffffff;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        /* Light gray border */
        box-shadow: var(--shadow-sm);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    /* Hover Effect */
    .module-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: var(--primary-blue);
    }

    .module-card:hover .icon-wrapper {
        transform: scale(1.1);
    }

    .module-card:hover .icon-wrapper i {
        transform: rotate(10deg);
    }

    /* Icon Wrapper Styling */
    .icon-wrapper {
        flex-shrink: 0;
        padding: 12px;
        margin-right: 16px;
        border-radius: 8px;
        background-color: var(--light-blue-bg);
        color: var(--primary-blue);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #bfdbfe;
        /* Subtle light blue border */
        transition: transform 0.3s ease;
    }

    .icon-wrapper i {
        font-size: 24px;
        transition: transform 0.3s ease;
    }

    /* Title Styling */
    .module-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-color);
        margin: 0;
        line-height: 1.4;
        transition: color 0.3s ease;
    }

    /* Title color change on card hover */
    .module-card:hover .module-title {
        color: var(--primary-blue);
    }

    /* ====================================================================
   (02) ERP MODULES SECTION
==================================================================== */
    /* --- Utility and Section Title Styles --- */
    .container1 {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .erp-card .card-icon img {
        width: 50px;
        height: 50px;
        object-fit: contain;
        transition: transform 0.3s ease-in-out;
    }


    .pt-100 {
        padding-top: 100px;
    }

    .pb-70 {
        padding-bottom: 70px;
    }

    .mb-50 {
        margin-bottom: 50px;
    }

    .text-center {
        text-align: center;
    }

    .sec-title h2 {
        font-size: 28px;
        color: #212529;
        margin-bottom: 15px;
        position: relative;
        display: inline-block;
    }

    .sec-title h2::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        transform: translateX(-50%);
        width: 70px;
        height: 4px;
        background-color: #1cb0bb;
        border-radius: 2px;
    }

    .sec-title p {
        font-size: 15px;
        color: #6c757d;
        max-width: 700px;
        margin: 0 auto;
    }

    /* --- ERP Card Grid --- */
    .erp-grid-four {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }

    .erp-card {
        background: #ffffff;
        padding: 15px 15px;
        border-radius: 12px;
        text-align: center;
        transition: all 0.4s ease-in-out;
        margin-bottom: 30px;
        min-height: 320px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
        overflow: hidden;
        position: relative;
    }

    /* Top Border Highlight on Hover */
    .erp-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        background: linear-gradient(to right, #2582ad, #14fdfd);
        transition: height 0.3s ease-in-out;
        z-index: 0;
        border-radius: 12px 12px 0 0;
    }

    .erp-card:hover::before {
        height: 6px;
    }

    /* Card Hover Animation */
    .erp-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
    }

    /* --- Icon Container (NEW) --- */
    .erp-card .card-icon {
        width: 90px;
        height: 90px;
        margin: 0 auto 25px;
        border-radius: 50%;
        background: linear-gradient(135deg, #35d1dc, #1cb0bb);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 5px 15px rgba(28, 176, 187, 0.2);
        transition: all 0.4s ease-in-out;
        position: relative;
        z-index: 1;
    }

    /* Glow + Scale on Hover */
    .erp-card:hover .card-icon {
        background: linear-gradient(135deg, #1cb0bb, #35d1dc);
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(28, 176, 187, 0.3);
    }

    /* Icon Image */
    .erp-card .card-icon img {
        width: 30px;
        height: auto;
        object-fit: contain;
        filter: brightness(0) invert(1);
        /* White icons */
        transition: transform 0.3s ease-in-out;
    }

    /* Icon Hover Animation */
    .erp-card:hover .card-icon img {
        transform: rotate(8deg) scale(1.1);
    }

    /* --- Text & Links --- */
    .erp-card h4 {
        font-size: 18px;
        color: #343a40;
        margin-top: 0;
        margin-bottom: 15px;
        font-weight: 600;
        position: relative;
        z-index: 1;
    }

    .erp-card p {
        font-size: 12px;
        color: #6c757d;
        margin-bottom: 25px;
        flex-grow: 1;
        position: relative;
        z-index: 1;
    }

    .read-btn {
        display: inline-flex;
        align-items: center;
        color: #35d1dc;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease-in-out;
        font-size: 16px;
        position: relative;
        z-index: 1;
    }

    .read-btn:hover {
        color: #1d8ba7;
        transform: translateX(5px);
    }

    .read-btn i {
        margin-left: 8px;
        font-size: 15px;
        transition: transform 0.3s ease-in-out;
    }

    /* --- Responsive --- */
    @media (max-width: 992px) {
        .erp-grid-four {
            grid-template-columns: repeat(2, 1fr);
        }

        .sec-title h2 {
            font-size: 32px;
        }

        .sec-title p {
            font-size: 17px;
        }

        .pt-100 {
            padding-top: 70px;
        }
    }

    @media (max-width: 576px) {
        .erp-grid-four {
            grid-template-columns: 1fr;
        }

        .sec-title h2 {
            font-size: 28px;
        }

        .sec-title p {
            font-size: 16px;
        }

        .erp-card {
            min-height: unset;
        }

        .pt-100 {
            padding-top: 50px;
        }
    }

    /* ====================================================================
   (03) CUSTOM SOLUTIONS SECTION
==================================================================== */
    /* --- Portable CSS: Start with Local Variable Definitions --- */
    /* --- Portable CSS: Start with Local Variable Definitions --- */
    .custom-solutions {
        /* Define colors locally for portability */
        --main-color: #1e3a5a;
        /* Default brand color for CTAs/icons */
        --primary-color: #1e3a5a;
        /* Dark Blue/Teal (Heading/Diagram Border) */
        --secondary-color: #f18c21;
        /* Orange/Gold (Slogan/Node Accent) */
        --text-color: #333;
        /* General text color */
        --section-bg: #f5f5f5;
        /* Light background for the section */
        --light-bg: #f5f5f5;
        /* Light background for nodes/diagram */
        --white: #ffffff;

        /* General Section Styling */
        padding: 80px 0;
        background: var(--section-bg);
        position: relative;
        overflow: hidden;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .solutions-wrapper {
        display: flex;
        flex-wrap: wrap;
        /* Using space-between for better edge alignment on large screens */
        justify-content: space-between;
        align-items: center;
        max-width: 1300px;
        /* Max width of the content area */
        margin: 0 auto;
        gap: 30px;
        /* Reduced gap slightly */
        padding: 0 40px;
        /* Increased horizontal padding for breathing room */
    }

    /* Content */
    .solutions-content {
        /* Set content to be wide enough (approx 55% share) */
        flex: 1 1 600px;
        min-width: 450px;
        animation: fadeInLeft 1s ease both;
        padding-right: 20px;
        text-align: left;
        box-sizing: border-box;
    }

    .solutions-content h2 {
        font-size: 42px;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 15px;
        line-height: 1.2;
    }

    .solutions-content h4 {
        font-size: 22px;
        font-weight: 600;
        color: var(--secondary-color);
        margin-bottom: 25px;
    }

    .solutions-content p {
        font-size: 17px;
        color: var(--text-color);
        line-height: 1.7;
        margin-bottom: 30px;
    }

    /* List */
    .solutions-list {
        list-style: none;
        padding: 0;
        margin: 0 0 35px;
    }

    .solutions-list li {
        font-size: 16px;
        margin-bottom: 14px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        color: var(--text-color);
        transition: all 0.3s ease;
    }

    .solutions-list li i {
        color: var(--main-color);
        font-size: 20px;
        min-width: 20px;
        line-height: 1;
        margin-top: 3px;
    }

    .solutions-list li:hover {
        color: var(--primary-color);
        transform: translateX(8px);
    }

    .solutions-list li:hover i {
        transform: scale(1.3) rotate(8deg);
    }

    /* CTA */
    .cta-btn {
        padding: 14px 32px;
        background: var(--main-color);
        color: #fff;
        border-radius: 30px;
        font-weight: 600;
        text-decoration: none;
        font-size: 17px;
        display: inline-block;
        transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }

    .cta-btn:hover {
        background: linear-gradient(to right, #dd6f25, #5A377D, #8056A7);
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(30, 58, 90, 0.3);
    }

    /* Image/Diagram Container */
    .solutions-image {
        /* Set diagram container width (approx 45% share) */
        flex: 1 1 500px;
        min-width: 400px;
        animation: fadeInRight 1s ease both;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
        box-sizing: border-box;
    }

    /* ---------------------------------------------------- */
    /* --- ERP DIAGRAM STYLES (Final Sizing Fix) --- */
    /* ---------------------------------------------------- */

    .diagram-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 110%;
        max-width: 850px;
        min-height: 700px;
        /* Increased min-height for vertical space */
        position: relative;
        padding: 0;
    }

    .diagram-style {
        position: relative;
        /* Increased the max-width/height to give nodes maximum space without overlap */
        width: min(850px, 105%);
        height: min(850px, 105%);
        aspect-ratio: 1 / 1;
        display: block;
        margin: auto;
    }

    /* .center {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 160px;
        height: 160px;
        background: var(--white);
        border: 2px solid var(--primary-color);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
        z-index: 2;
        padding: 10px;
        box-sizing: border-box;
    } */



    .center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px; 
    height: 120px; 
    background: var(--white);
    border: 2px solid var(--primary-color);
    border-radius: 10px; 
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
    z-index: 2;
    padding: 10px;
    box-sizing: border-box;
}


    .logo-container {
        width: 80%;
        margin-bottom: 5px;
    }

    .logo-container img {
        width: 100%;
        height: auto;
    }

    .center p {
        margin: 0;
        font-size: 12px;
        color: var(--secondary-color);
        font-weight: bold;
        letter-spacing: 1px;
        padding: 0 10px;
    }

    .node {
        position: absolute;
        width: 112px;
        height: auto;
        background: var(--white);
        border-radius: 15px;
        border-left: 5px solid var(--secondary-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        color: var(--text-color);
        cursor: pointer;
        z-index: 2;
        transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
        padding: 5px;
        line-height: 1.4;
        box-sizing: border-box;
    }

    .node:hover {
        transform: translateY(-7px) scale(1.08);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
        background: var(--light-bg);
    }

    .node img {
        /* Correct filter to match the requested blue/dark color */
        filter: invert(16%) sepia(30%) saturate(1478%) hue-rotate(180deg) brightness(98%) contrast(93%);
        width: 25px;
        height: auto;
        margin-bottom: 4px;
    }

   .node {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.6s ease-out;
}

.node.show {
  opacity: 1;
  transform: scale(1);
}


    #linesCanvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
    }

    /* ---------------------------------------------------- */
    /* --- Animations and Responsive Adjustments --- */
    /* ---------------------------------------------------- */

    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translateX(-40px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(40px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(40px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 1100px) {

        /* Stacks columns for tablets and smaller desktops */
        .solutions-wrapper {
            flex-direction: column;
            gap: 50px;
            max-width: 900px;
            padding: 0 1px;
        }

        .solutions-content {
            text-align: center;
            padding: 0 15px;
            flex: 1 1 100%;
            min-width: auto;
        }

        .solutions-list {
            display: inline-block;
            text-align: left;
        }

        .solutions-image {
            flex: 1 1 100%;
            padding: 0;
        }
    }

    /* Mobile device specific sizing... */
    @media (max-width: 768px) {
        .custom-solutions {
            padding: 60px 0;
        }

        .diagram-container {
            min-height: 550px;
        }

        .solutions-content h2 {
            font-size: 32px;
        }

        .solutions-content h4 {
            font-size: 18px;
        }

        .solutions-content p {
            font-size: 15px;
        }

        .solutions-list li {
            font-size: 14px;
        }

        .solutions-list li i {
            font-size: 18px;
        }
        .cta-btn {
            font-size: 15px;
            padding: 12px 28px;
        }
        .center {
            width: 150px;
            height: 150px;
        }

        
   

        .node {
            width: 110px;
            height: 70px;
            font-size: 9px;
        }

        .node img {
            width: 20px;
        }
    }

    @media (max-width: 480px) {
        .custom-solutions {
            padding: 40px 0;
        }

        .diagram-container {
            min-height: 400px;
        }
        .solutions-content h2 {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .solutions-content h4 {
            font-size: 16px;
            margin-bottom: 20px;
        }

        .solutions-content p {
            font-size: 14px;
            margin-bottom: 25px;
        }

        .solutions-list li {
            font-size: 13px;
            margin-bottom: 10px;
        }
        .cta-btn {
            font-size: 14px;
            padding: 10px 25px;
        }

        .center {
            width: 100px;
            height: 100px;
        }

            .center p {
     
        font-size: 8px;}

        .node {
            width: 70px;
            height: 50px;
            font-size: 6px;
        }

        .node img {
            width: 15px;
        }
    }


    .node-icon {
  width: 50px;      /* default width */
  height: auto;
  max-width: 10vw;  /* scale based on viewport */
}

@media screen and (max-width: 768px) {
  .node-icon {
    max-width: 15vw;
  }
}

@media screen and (max-width: 480px) {
  .node-icon {
    max-width: 20vw;
  }
}


    @media (max-width: 768px) {
  .solutions-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0 auto;
  }

  .diagram-container {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 550px;
    width: 100%;
  }

  .diagram-style {
    margin: 0 auto;
    width: 90%;
    height: auto;
  }
}

@media (max-width: 480px) {
  .diagram-container {
    min-height: 400px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .diagram-style {
    width: 95%;
    height: auto;
    margin: 0 auto;
  }
}


    /* ====================================================================
   (04) BENEFITS & ANALYTICS SECTION
==================================================================== */
    .benefits-analytics-section {
        padding: 80px 20px;
        background-color: #fdfdfd;
        font-family: 'Poppins', sans-serif;
    }

    .benefits-analytics-section .container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .section-grid {
        display: flex;
        gap: 40px;
        flex-wrap: wrap;
    }

    /* Box */
    .section-box {
        flex: 1;
        min-width: 300px;
        background: #fff;
        padding: 40px 30px;
        border-radius: 15px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }

    .section-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
    }

    .section-box h3 {
        font-size: 28px;
        margin-bottom: 20px;
        color: #222;
        font-weight: 700;
    }

    .section-box .subtitle {
        font-size: 16px;
        font-style: italic;
        margin-bottom: 20px;
        color: #555;
    }

    /* Checklist */
    .check-list {
        list-style: none;
        padding: 0;
    }

    .check-list li {
        position: relative;
        padding-left: 35px;
        font-size: 16px;
        margin-bottom: 15px;
        color: #333;
    }

    .check-list li::before {
        content: '✔';
        position: absolute;
        left: 0;
        top: 0;
        font-size: 18px;
        color: var(--main-color);
    }

    .check-list li:hover::before {
        transform: scale(1.3) rotate(10deg);
    }







    /*=====  erp section   ===== */

    /* Full Updated CSS */

    /* Base Styles */
    .text-center {
        text-align: center;
    }

    .mb-10 {
        margin-bottom: 2.5rem;
    }

    h2 {
        /* Base size is 4rem, which is large, but is overridden by the media query */
        font-size: 4rem;
        font-weight: 800;
        color: #f3f5f8;
        margin-bottom: 1rem;
    }

    @media (min-width: 640px) {
        h2 {
            /* This is the effective size for h2 on screen widths 640px and up */
            font-size: 2.25rem;
        }
    }

    p {
        color: #ffffff;
        max-width: 88rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* Grid Layout */
    .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    @media (min-width: 640px) {
        .grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1024px) {
        .grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
        }
    }

    /* Grid Card */
    .grid-card {
        position: relative;
        border-radius: 0.75rem;
        overflow: hidden;
        aspect-ratio: 4 / 3;
        cursor: pointer;
        transform: scale(1);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease-in-out;
        z-index: 1;
        transform-origin: center center;
    }

    .grid-card:hover {
        transform: scale(1.04);
        /* Slightly bigger hover scale */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        z-index: 10;
    }

    .grid-card-inner {
        height: 100%;
        width: 100%;
        position: relative;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        color: white;
        background-size: cover;
        background-position: center;
    }

    .grid-card:hover .text-2xl {
        font-size: 2.9rem;
        /* was 2.5rem */
        transition: font-size 0.3s ease;
    }

    .grid-card:hover .text-sm {
        font-size: 1.35rem;
        /* was 1.125rem */
        transition: font-size 0.3s ease;
    }

    .grid-card:hover .text-xs {
        font-size: 1.4rem;
        /* was 1rem */
        transition: font-size 0.3s ease;
    }


    /* Overlay */
    .red-overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.137);
        mix-blend-mode: multiply;
        transition: background-color 0.4s ease-in-out;
    }

    .grid-card:hover .red-overlay {
        background-color: rgba(7, 7, 7, 0.747);
    }

    /* Content Positioning */
    .relative {
        position: relative;
    }

    .z-10 {
        z-index: 10;
    }

    /* Increased Text Sizes */
    .text-2xl {
        /* INCREASED FONT SIZE: Card Title (H3) */
        font-size: 2.5rem;
        /* Increased from 1.5rem for bigger text */
    }

    .font-bold {
        font-weight: 700;
    }

    .mb-1 {
        margin-bottom: 0.25rem;
    }

    .text-sm {
        /* INCREASED FONT SIZE: Card Description (P) */
        font-size: 1.125rem;
        /* Increased from 0.875rem for bigger text */
    }

    .font-medium {
        font-weight: 500;
    }

    /* .opacity-80 {
    opacity: 0.8;
} */
    /* Uncomment if you want to explicitly define opacity on text-sm */

    /* Detailed Content (On Hover) */
    .detailed-content {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out;
    }

    .grid-card:hover .detailed-content {
        opacity: 1;
        max-height: 500px;
        margin-top: 0.75rem;
    }

    /* Detailed Content List Items */
    .text-xs {
        /* INCREASED FONT SIZE: Detailed List Items */
        font-size: 1rem;
        /* Increased from 0.75rem for bigger text */
    }

    .list-disc {
        list-style-type: disc;
    }

    .pl-5 {
        padding-left: 1.25rem;
    }

    .mt-2 {
        margin-top: 0.5rem;
    }

    .space-y-1>*+* {
        margin-top: 0.25rem;
    }

    /* Read More Button */
    .read-more-btn {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
        font-size: 12px;
        margin-top: 1rem;
        display: inline-block;
        background-color: white;
        color: #bd5f08;
        font-weight: 700;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    .read-more-btn:hover {
        background-color: #e5e7eb;
    }

    .grid-card:hover .read-more-btn {
        opacity: 1;
        transform: translateY(0);
    }

    .sechead {
        color: #1e3a5a;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
        font-size: 40px;
        font-family: 'Poppins', sans-serif;

    }

    .smallp {
        color: #1e3a5a;
        text-align: center;
        margin-top: px;
        margin-bottom: 30px;
        font-size: 20px;
        font-family: 'Poppins', sans-serif;
    }

    /* Background Images */
    .bg-erp {
       background-image: url('https://www.cxtoday.com/wp-content/uploads/2022/11/erp-system-850.jpg');
    }

    .bg-mobility {
        background-image: url('https://tse2.mm.bing.net/th/id/OIP.FZfl-SY0jcjzsNRoBRqk5wHaEK?w=948&h=533&rs=1&pid=ImgDetMain&o=7&rm=3');
    }

    .bg-analytics {
        background-image: url('https://assets.datamation.com/uploads/2024/01/dm_20240102-types-of-data-analytics.png');
    }

    .bg-hrm {
        background-image: url('https://nmo.ai/wp-content/uploads/2023/12/HR-Management-Systems-scaled-1.png');
    }

    .bg-crm {
        background-image: url('https://wallpaperaccess.com/full/2053114.jpg');
    }

    .bg-industry {
        background-image: url('https://t4.ftcdn.net/jpg/06/56/82/81/360_F_656828152_3PGDdfXDpJ775DxY4VWXDVJz8asCJSZu.jpg');
    }

    .bg-Inventory {
        background-image: url('https://traceverified.com/wp-content/uploads/2018/10/tracechain-tu-van-chuoi-cung-ung-768x368.jpg');
    }

    .bg-Quality {
        background-image: url('https://t4.ftcdn.net/jpg/01/80/59/13/360_F_180591333_XuzZhgyFhglLs6c2JUvhEOyEPp2hu0GI.jpg');
    }





    /* section  */

    .challenges-section {
        background: white;
        padding: 60px 10%;
    }

    .challenges-section h2 {
        text-align: center;
        font-size: 28px;
        margin-bottom: 50px;
        font-weight: bold;
        color: var(--text-color);
    }

    .challenges-section h2 span {
        color: var(--primary-color);
    }

    .challenge-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px 70px;
        align-items: start;
    }

    .challenge-item {
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }

    .challenge-item img {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid var(--secondary-color);
        flex-shrink: 0;
    }

    .challenge-content h3 {
        margin: 0 0 10px;
        font-size: 18px;
        color: var(--main-color);
    }

    .challenge-content p {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        color: var(--text-color);
    }

    /* Responsive */
    @media (max-width: 900px) {
        .challenge-grid {
            grid-template-columns: 1fr;
        }
    }


    /* Scoped ExtrudeX Benefits CSS */
    .extrudex-benefits-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 80px 10%;
        position: relative;
        overflow: hidden;
        font-family: 'Poppins', sans-serif;
        color: #0F2D52;
        background-color: #fff;
    }

    .extrudex-benefits-wrapper::before {
        content: "";
        position: absolute;
        top: 0;
        left: -5%;
        width: 40%;
        height: 100%;
        background: linear-gradient(160deg, #f6f9fc 0%, #eef3f9 100%);
        border-top-right-radius: 150px;
        border-bottom-right-radius: 150px;
        z-index: 0;
    }

    .extrudex-benefits-image {
        width: 45%;
        z-index: 2;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .extrudex-benefits-image img {
        width: 100%;
        height: auto;
        border-radius: 20px;
        object-fit: cover;
    }

    .extrudex-benefits-content {
        width: 50%;
        z-index: 2;
        padding-left: 40px;
    }

    .extrudex-benefits-content h2 {
        font-size: 3.2rem;
        font-weight: 700;
        margin-bottom: 20px;
        color: #0F2D52;
    }

    .extrudex-benefits-content h2 span {
        color: #F26B2F;
    }

    .extrudex-benefit-point {
        margin-bottom: 25px;
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.6s ease;
    }

    .extrudex-benefit-point.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .extrudex-benefit-title {
        font-size: 1.8rem;
        font-weight: 600;
        position: relative;
        display: inline-block;
        margin-bottom: 8px;
    }

    .extrudex-benefit-title::after {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 50px;
        height: 3px;
        background: #F26B2F;
        border-radius: 1px;
    }

    .extrudex-benefit-desc {
        color: #202325;
        line-height: 1.8;
        font-size: 1.4rem;
    }

    @media (max-width: 950px) {
        .extrudex-benefits-wrapper {
            flex-direction: column;
            text-align: center;
            padding: 60px 5%;
        }

        .extrudex-benefits-wrapper::before {
            display: none;
        }

        .extrudex-benefits-image {
            width: 90%;
            margin-bottom: 40px;
        }

        .extrudex-benefits-content {
            width: 100%;
            padding: 0;
        }

        .extrudex-benefit-title::after {
            left: 50%;
            transform: translateX(-50%);
        }
    }


    /* Dashboards & Analytics Section */
    .extrudex-analytics-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 80px 10%;
        position: relative;
        overflow: hidden;
        font-family: 'Poppins', sans-serif;
        color: #0F2D52;
        background-color: #fff;
    }

    .extrudex-analytics-wrapper::before {
        content: "";
        position: absolute;
        top: 0;
        right: -5%;
        width: 40%;
        height: 100%;
        background: linear-gradient(160deg, #f6f9fc 0%, #eef3f9 100%);
        border-top-left-radius: 150px;
        border-bottom-left-radius: 150px;
        z-index: 0;
    }

    .extrudex-analytics-image {
        width: 45%;
        z-index: 2;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .extrudex-analytics-image img {
        width: 100%;
        height: auto;
        border-radius: 20px;
        object-fit: cover;
    }

    .extrudex-analytics-content {
        width: 50%;
        z-index: 2;
        padding-right: 40px;
    }

    .extrudex-analytics-content h2 {
        font-size: 2.8rem;
        font-weight: 700;
        margin-bottom: 30px;
        color: #0F2D52;
    }

    .extrudex-analytics-content h2 span {
        color: #F26B2F;
    }

    .extrudex-analytics-point {
        margin-bottom: 20px;
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.6s ease;
    }

    .extrudex-analytics-point.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .extrudex-analytics-desc {
        color: #4a5c6e;
        line-height: 1.6;
        font-size: 1.8rem;
    }

    @media (max-width: 950px) {
        .extrudex-analytics-wrapper {
            flex-direction: column-reverse;
            text-align: center;
            padding: 60px 5%;
        }

        .extrudex-analytics-wrapper::before {
            display: none;
        }

        .extrudex-analytics-image {
            width: 90%;
            margin-bottom: 40px;
        }

        .extrudex-analytics-content {
            width: 100%;
            padding: 0;
        }
    }





   /* ================================
   Extrudex Info Section (4 Cards, Centered Icons)
   ================================ */
.extrudex-info-wrapper {
  padding: 100px 8%;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
 
  
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  font-family: 'Poppins', sans-serif;
  color: #0f2d52;
  text-align: center;
}

/* ---------- Header Section ---------- */
.extrudex-info-header h2 {
    color: #071952;
  font-size: 3rem;
  margin-bottom: 15px;
  font-weight: 700;
}

.extrudex-info-header h2 span {
  color: #f26b2f;
}

.extrudex-info-header p {
  font-size: 1.4rem;
  color: #4a5c6e;
  max-width: 850px;
  margin: 0 auto 60px;
  line-height: 1.7;
}

/* ---------- Grid Layout ---------- */
.extrudex-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 35px;
  margin-bottom: 60px;
}

/* ---------- Info Card ---------- */
.info-card {
  background: #fff;
  border-radius: 18px;
  padding: 50px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border-top: 4px solid transparent;
  text-align: center;
  position: relative;
}

.info-card:hover {
  transform: translateY(-6px);
 
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
}

/* ---------- Centered Icon ---------- */
.info-card i {
  font-size: 2.5rem;
  color: #f26b2f;
  background: rgba(242, 107, 47, 0.12);
  padding: 20px;
  border-radius: 50%;
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  transition: all 0.3s ease;
}

.info-card:hover i {
  background: #f26b2f;
  color: #fff;
  transform: scale(1.1);
}

/* ---------- Card Title & Text ---------- */
.info-card h3 {
  font-size: 1.7rem;
  color: #0f2d52;
  margin-bottom: 15px;
  font-weight: 600;
}

.info-card p {
  font-size: 1.4rem;
  color: #4a5c6e;
  margin-bottom: 20px;
  line-height: 1.7;
}

/* ---------- Bullet List ---------- */
.info-card ul {
  list-style: none;
  padding-left: 0;
  text-align: left;
  display: inline-block;
}

.info-card ul li {
  font-size: 1.4rem;
  color: #324a60;
  margin-bottom: 8px;
  position: relative;
  padding-left: 20px;
  line-height: 1.6;
}

.info-card ul li::before {
  content: "•";
  color: #f26b2f;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.3rem;
}

/* ---------- CTA Box ---------- */
.cta-box {
  margin-top: 20px;
}

.cta-box p {
  font-size: 1.3rem;
  margin-bottom: 20px;
  color: #0f2d52;
}

.cta-btn {
  display: inline-block;
  background: #1e3a5a;
  color: #fff;
  padding: 14px 38px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-btn:hover {
  background: #d85a1d;
  transform: translateY(-3px);
}

/* ---------- Responsive Design ---------- */
@media (max-width: 1024px) {
  .extrudex-info-header h2 {
    font-size: 2.6rem;
  }

  .extrudex-info-header p {
    font-size: 1.25rem;
  }

  .info-card {
    padding: 40px 25px;
  }

  .info-card i {
    width: 70px;
    height: 70px;
    font-size: 2.4rem;
  }
}

@media (max-width: 768px) {
  .extrudex-info-wrapper {
    padding: 70px 6%;
  }

  .extrudex-info-header h2 {
    font-size: 2.2rem;
  }

  .extrudex-info-header p {
    font-size: 1.1rem;
  }

  .info-card ul {
    text-align: center;
  }

  .info-card ul li {
    padding-left: 0;
  }

  .info-card ul li::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .info-card {
    padding: 35px 20px;
  }

  .info-card h3 {
    font-size: 1.4rem;
  }

  .info-card p {
    font-size: 1rem;
  }
}

    /* ==== Aluminium ERP Section - Compact ExtrudeX Style ==== */
    .aluminium-erp-section {
        display: flex;
        max-width: 1300px;
        margin: 60px auto;
        background: linear-gradient(135deg, #fff 0%, #f9f9f9 100%);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        font-family: 'Poppins', sans-serif;
    }

    .left-column {
        flex: 1;
        position: relative;
    }

    .image-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* filter: grayscale(100%); */
        transition: transform .5s;
    }

    .image-container img:hover {
        transform: scale(1.05);
    }

    .left-column h1 {
        position: absolute;
        bottom: 30px;
        left: 30px;
        color: #f2692f;
        font-size: 2.8rem;
        font-weight: 800;
        line-height: 1.2;
        background: rgba(255, 255, 255, 0.808);
        padding: 15px 20px;
        border-radius: 8px;
        max-width: 90%;
    }

    .right-column {
        flex: 1;
        padding: 50px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #fff;
    }

    .innovation-header {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
    }

    .decorator-line {
        width: 30px;
        height: 3px;
        background: #f2692f;
        margin-right: 15px;
        border-radius: 2px;
    }

    .right-column h2 {
        font-size: 3.5rem;
        font-weight: 700;
        color: #333;
        margin: 0;
    }

    .innovation-text p {
        font-size: 1.6rem;
        line-height: 1.6;
        color: #555;
        margin-bottom: 30px;
    }

    .accordion-menu {
        border-top: 1px solid #eee;
    }

    .accordion-item {
        border-bottom: 1px solid #eee;
        cursor: pointer;
        transition: background .3s;
    }

    .accordion-item:hover {
        background: #fdf5f0;
    }

    .accordion-title {
        display: flex;
        align-items: center;
        font-size: 2rem;
        font-weight: 600;
        color: #333;
        padding: 15px 0;
    }

    .plus-icon {
        display: inline-block;
        font-size: 1.8rem;
        font-weight: 900;
        margin-right: 12px;
        color: #f2692f;
        transition: transform .3s;
    }

    .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height .4s, padding .4s;
        font-size: 1.5rem;
        color: #555;
        padding: 0;
        line-height: 1.5;
    }

    .accordion-item.active .accordion-content {
        max-height: 200px;
        padding: 10px 0 20px 22px;
    }

    .accordion-item.active .plus-icon {
        transform: rotate(45deg);
    }

    @media(max-width:992px) {
        .aluminium-erp-section {
            flex-direction: column;
        }

        .left-column h1 {
            position: relative;
            bottom: auto;
            left: auto;
            margin: 20px;
            background: transparent;
            color: #f2692f;
            text-align: center;
        }

        .right-column {
            padding: 30px 20px;
        }
    }



    /* ===== Bento ERP Full Scoped CSS ===== */
.bento-erp-container {
  font-family: 'Inter', sans-serif;
  background-color: #f5f5f5;
  color: #1f2937;
  padding: 0;
  margin: 0;
}

/* Grid Container */
.bento-erp-container .bento-erp-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: 20px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem;
}

/* Boxes */
.bento-erp-container .box {
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  padding: 3.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.bento-erp-container .box:hover {
  transform: translateY(-5px);
}

/* Grid Placement */
.bento-erp-container .box.demo { grid-column: span 8; grid-row: span 2; }
.bento-erp-container .box.features { grid-column: span 4; grid-row: span 1; }
.bento-erp-container .box.cta { grid-column: span 4; grid-row: span 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #1e3a5a; color: #fff; text-align: center; }
.bento-erp-container .box.testimonials { grid-column: span 8; grid-row: span 1; }
.bento-erp-container .box.metrics { grid-column: span 4; grid-row: span 1; }

/* Headings */
.bento-erp-container h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  color: #111827;
}

/* Form Styles */
.bento-erp-container form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.7rem;
}

.bento-erp-container form .full-width {
  grid-column: span 2;
}

.bento-erp-container .input-field {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #d1d5db;
  outline: none;
  font-size: 1.6rem;
  background-color: #f9fafb;
  transition: all 0.3s ease;
}

.bento-erp-container .input-field:focus {
  border-color: #1e3a5a;
  box-shadow: 0 0 0 2px rgba(220,38,38,0.2);
  background-color: #fff;
}

/* Country Code Field */
.bento-erp-container .country-code {
  display: flex;
}

.bento-erp-container .country-code span {
  background-color: #f3f4f6;
  padding: 0.75rem 1.2rem;
  border-radius: 0.75rem 0 0 0.75rem;
  border: 1px solid #d1d5db;
  border-right: none;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.bento-erp-container .country-code input.input-field {
  border-radius: 0 0.75rem 0.75rem 0;
  border-left: none;
  flex: 1;
  background-color: #f9fafb;
}

/* Submit Button */
.bento-erp-container button.submit-btn {
  grid-column: span 2;
  background-color: #1e3a5a;;
  color: white;
  border: none;
  padding: 1.0rem;
  font-size: 1.8rem;
  font-weight: 600;
  border-radius: 0.5rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: background 0.3s ease;
}

.bento-erp-container button.submit-btn:hover {
  background-color: #ac4d24;;
}

/* CTA Button */
.bento-erp-container .cta button {
  background-color: white;
  color:#1e3a5a;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1.5rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: all 0.3s ease;
}

.bento-erp-container .cta button:hover {
  background-color: #f3f3f3;
}

/* Core Features */
.bento-erp-container .features-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-top: 1.2rem;
}

.bento-erp-container .feature-item {
  display: flex;
  text-align: center;
  background-color: #f2f3fe;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.bento-erp-container .feature-item:hover {
  transform: translateY(-3px);
}

.bento-erp-container .feature-icon {
  font-size: 2.0rem;
  color: #F26B2F;;
  margin-right: 0.75rem;
  display: flex;

}

.bento-erp-container .feature-text {
    font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
}

/* Testimonials */
.bento-erp-container .testimonial-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.bento-erp-container .testimonial-item {
  background-color: #f3f4f6;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.bento-erp-container .testimonial-item:hover {
  transform: translateY(-3px);
}

.bento-erp-container .testimonial-item p {
  font-style: italic;
  font-size: 1.8rem;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}

.bento-erp-container .testimonial-item span {
  font-weight: 600;
  color: #F26B2F;;
  font-size: 1.2rem;
 align-items: end;
}

/* Metrics */
.bento-erp-container .metrics {
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
}

.bento-erp-container .metric {
  background-color: #f3f4f6;
  border-radius: 1rem;
  text-align: center;
  padding: 1rem;
  font-weight: 700;
  font-size: 1.5rem;
}

.bento-erp-container .metric .number {
  font-size: 3rem;
  color: #F26B2F;;
  font-weight: 800;
}

/* Responsive */
@media (max-width: 1024px) {
  .bento-erp-container .box.demo,
  .bento-erp-container .box.features,
  .bento-erp-container .box.cta,
  .bento-erp-container .box.testimonials,
  .bento-erp-container .box.metrics {
    grid-column: span 12;
  }
  .bento-erp-container form {
    grid-template-columns: 1fr;
  }
  .bento-erp-container button.submit-btn {
    grid-column: span 1;
  }
}



/* ===============================
   ERP Modules Section Styles
   =============================== */
.erpModule-section {
  font-family: "Inter", sans-serif;
  background-color: #f4f6f9;
  padding: 80px 0;
}

.erpModule-title {
  margin-bottom: 45px;
}

.erpModule-heading {
  font-size: 32px;
  font-weight: 700;
  color: #0F2D52;
  position: relative;
  display: inline-block;
}

.erpModule-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.erpModule-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  text-align: center;
  padding: 25px 20px;
  flex: 1 1 260px;
  max-width: 290px;
  max-height: auto;
  transition: all 0.3s ease;
  border-top: 4px solid transparent;
  margin-bottom: 30px;
  cursor: pointer;
}

.erpModule-card:hover {
  transform: translateY(-6px);
  border-top-color: #F26B2F;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.erpModule-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.erpModule-icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.erpModule-name {
  font-size: 20px;
  font-weight: 600;
  color: #0F2D52;
  margin-bottom: 10px;
}

.erpModule-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  min-height: 60px;
}

.erpModule-btn {
  margin-top: 15px;
}

.erpModule-link {
  font-weight: 600;
  font-size: 15px;
  color: #F26B2F;
  text-decoration: none;
  transition: color 0.3s;
}

.erpModule-link:hover {
  color: #4B2E83;
}

/* Responsive */
@media (max-width: 992px) {
  .erpModule-row {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .erpModule-card {
    max-width: 90%;
    width: 400px;
    margin-left:auto;
    margin-right:auto

}
}
.erpModule-subline {
  font-size: 16px;
  color: #555;
  margin-top: 8px;
  font-weight: 400;
}


/* =================== ExtrudeX ERP Module Features CSS =================== */

/* ========== Page Layout ========== */
.sub-module-page {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 2rem 1rem;
    font-family: 'Arial', sans-serif;
    scroll-behavior: smooth;
    max-width: 1600px;
    margin: 0 auto;
}

/* Heading Section */
.sub-module-page-heading {
    margin-top: 50px;
    margin-bottom: 50px;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sub-module-page-heading h2 {
    margin: auto;
    font-size: 40px;
    color: #0F2D52;
}

.sub-module-page-heading p {
    color: #06101b;
    max-width: 1400px;
    margin: 0 auto;
    line-height: 1.6;
}

/* =================== Sidebar Navigation =================== */
.sub-module-page .sidebar-nav {
    flex: 0 0 380px;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 3rem 2rem;
    position: sticky;
    top: 12rem;
    height: fit-content;
    box-shadow: 0 8px 25px rgba(15, 45, 82, 0.15);
    transition: all 0.3s ease;
}

.sub-module-page .sidebar-nav:hover {
    box-shadow: 0 12px 30px rgba(15, 45, 82, 0.25);
}

.sub-module-page .nav-title {
    font-size: 2.6rem;
    font-weight: 700;
    color: #F26B2F;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sub-module-page .module-boxed-menu .services-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sub-module-page .module-boxed-menu .services-list li {
    margin-bottom: 0.8rem;
}

.sub-module-page .module-boxed-menu .services-list li a {
    display: block;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    color: #0F2D52;
    font-weight: 500;
    font-size: 1.8rem;
    position: relative;
    transition: all 0.3s ease;
}

.sub-module-page .module-boxed-menu .services-list li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0%;
    background-color: #F26B2F;
    border-radius: 2px;
    transition: height 0.3s ease;
}

.sub-module-page .module-boxed-menu .services-list li a:hover::before,
.sub-module-page .module-boxed-menu .services-list li a.active::before {
    height: 60%;
}

.sub-module-page .module-boxed-menu .services-list li a:hover,
.sub-module-page .module-boxed-menu .services-list li a.active {
    background-color: rgba(242, 107, 47, 0.2);
    color: #F26B2F;
    transform: translateX(5px);
}

/* Optional icons in sidebar */
.sub-module-page .module-boxed-menu .services-list li a i {
    margin-right: 0.8rem;
    color: #F26B2F;
}

/* =================== Main Content =================== */
.sub-module-page .module-content {
    flex: 1;
}

.sub-module-page .module-feature-section {
    margin-bottom: 3rem;
    padding: 2rem;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(15, 45, 82, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.sub-module-page .module-feature-section:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(15, 45, 82, 0.15);
}

.sub-module-page .feature-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #0F2D52;
}

.sub-module-page .feature-description h3 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #4B2E83;
}

.sub-module-page .feature-description p {
    margin-bottom: 0.85rem;
    line-height: 1.7;
    color: #333333;
}

.sub-module-page .feature-description ul {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
}

.sub-module-page .feature-description ul li {
    margin-bottom: 0.8rem;
    font-size: 1.4rem;
    position: relative;
    color: #0F2D52;
}

.sub-module-page .feature-description ul li::before {
    content: "•";
    color: #F26B2F;
    position: absolute;
    left: -1rem;
}

/* =================== RESPONSIVE DESIGN =================== */

/* ---------- Tablet (992px and below) ---------- */
@media screen and (max-width: 991px) {
    .sub-module-page {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .sub-module-page .sidebar-nav {
        position: relative;
        top: 0;
        width: 100%;
        flex: 1;
        box-shadow: 0 6px 18px rgba(15, 45, 82, 0.15);
    }

    .sub-module-page-heading h2 {
        font-size: 32px;
    }

    .sub-module-page .feature-title {
        font-size: 2.4rem;
    }
}

/* ---------- Mobile (768px and below) ---------- */
@media screen and (max-width: 768px) {
    .sub-module-page {
        padding: 1rem;
    }

    .sub-module-page .sidebar-nav {
        padding: 2rem 1.5rem;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .sub-module-page .nav-title {
        font-size: 2rem;
        text-align: center;
    }

    .sub-module-page .module-boxed-menu .services-list li a {
        font-size: 1.6rem;
        padding: 0.6rem 0.8rem;
    }

    .sub-module-page .feature-title {
        font-size: 2rem;
    }

    .sub-module-page .feature-description p {
        font-size: 1.4rem;
    }
}

/* ---------- Small Mobile (480px and below) ---------- */
@media screen and (max-width: 480px) {
    .sub-module-page-heading h2 {
        font-size: 26px;
    }

    .sub-module-page .sidebar-nav {
        padding: 1.5rem 1rem;
    }

    .sub-module-page .module-boxed-menu .services-list li a {
        font-size: 1.4rem;
    }

    .sub-module-page .feature-title {
        font-size: 1.8rem;
    }
}


/* careers */



/* Namespaced styles to prevent overriding other CSS */
.resume-form-container {
  font-family: Arial, sans-serif;
  background: #f7f7f7;
  padding: 20px;
}

.resume-form {
  max-width: 1000px;
  margin: auto;
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.resume-form h2 {
  margin-bottom: 20px;
  color: #2c3e50;
  border-bottom: 2px solid #ff6600;
  padding-bottom: 5px;
}

.resume-form .form-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.resume-form .form-group label {
    font-size: 16px;
  margin-bottom: 5px;
  font-weight: bold;
}

.resume-form .form-group input,
.resume-form .form-group select,
.resume-form .form-group textarea {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 100%;
  font-size: 14px;
}

.resume-form .form-group textarea {
  resize: vertical;
}

.resume-form .row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.resume-form .row .form-group {
  flex: 1;
  min-width: 150px;
}

.resume-form .buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.resume-form .buttons button {
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.resume-form .buttons .reset-btn {
  background: #7f8c8d;
  color: #fff;
}

.resume-form .buttons .submit-btn {
  background: #ff6600;
  color: #fff;
}

.resume-form .success-message {
  text-align: center;
  color: green;
  margin-top: 15px;
  display: none;
}

.resume-form .error-message {
  text-align: center;
  color: red;
  margin-top: 15px;
  display: none;
}







/* custom slider */

 /* =====================
       MAIN SLIDER CONTAINER
    ====================== */
    .custom-slide-hero {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      background: #fff;
    }

    /* Each Slide */
    .custom-slide-hero .slide {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4rem 8%;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 100%;
      opacity: 0;
      transition: all 0.9s ease;
    }

    .custom-slide-hero .slide.active {
      left: 0;
      opacity: 1;
    }

    /* =====================
       TEXT SECTION
    ====================== */
    .custom-slide-hero .slide-text {
      flex: 1;
      max-width: 50%;
      color: var(--thm-black);
      padding-right: 2rem;
      z-index: 2;
    }

    .custom-slide-hero .slide-text h2 {
      font-size: 3rem;
      color: var(--thm-base);
      margin-bottom: 1rem;
      line-height: 1.2;
    }

    .custom-slide-hero .slide-text p {
      font-size: 1.2rem;
      line-height: 1.6;
      margin-bottom: 1.5rem;
      color: #333;
    }

    .custom-slide-hero .slide-text .btn {
      background: var(--thm-base);
      color: #fff;
      padding: 0.8rem 1.8rem;
      border-radius: 8px;
      text-decoration: none;
      transition: 0.3s;
      display: inline-block;
    }

    .custom-slide-hero .slide-text .btn:hover {
      background: var(--thm-black);
    }

    /* =====================
       IMAGE SECTION
    ====================== */
    .custom-slide-hero .slide-img {
      flex: 1;
      max-width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .custom-slide-hero .slide-img img {
      width: 100%;
      max-width: 500px;
      border-radius: 12px;
      object-fit: cover;
      
    }

    /* =====================
       NAVIGATION BUTTONS
    ====================== */
    .custom-slide-hero .nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 2rem;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      border: none;
      padding: 0.5rem 1rem;
      cursor: pointer;
      border-radius: 50%;
      transition: 0.3s;
      z-index: 10;
    }

    .custom-slide-hero .nav-btn:hover {
      background: var(--thm-base);
    }

    .custom-slide-hero .prev {
      left: 20px;
    }

    .custom-slide-hero .next {
      right: 20px;
    }

    /* =====================
       RESPONSIVE DESIGN
    ====================== */
    @media (max-width: 1024px) {
      .custom-slide-hero .slide-text h2 {
        font-size: 2.5rem;
      }
      .custom-slide-hero .slide-text p {
        font-size: 1.1rem;
      }
    }

    @media (max-width: 768px) {
      .custom-slide-hero {
        min-height: 40vh;
        padding-bottom: 5rem;
      }

      .custom-slide-hero .slide {
        flex-direction: column-reverse;
        text-align: center;
        padding: 3rem 1.5rem;
        position: absolute;
        top: 0;
        left: 100%;
        height: auto;
      }

      .custom-slide-hero .slide.active {
        left: 0;
        opacity: 1;
        position: relative;
      }

      .custom-slide-hero .slide-img {
        max-width: 600px;
        margin-bottom: 2rem;
      }

      .custom-slide-hero .slide-img img {
        width: 100%;
        max-width: 550px;
       
      }

      .custom-slide-hero .slide-text {
        max-width: 100%;
        padding: 0;
      }

      .custom-slide-hero .slide-text h2 {
        font-size: 2rem;
      }

      .custom-slide-hero .slide-text p {
        font-size: 1rem;
        margin-bottom: 1.2rem;
      }

      .custom-slide-hero .slide-text .btn {
        padding: 0.7rem 1.4rem;
        font-size: 0.9rem;
      }

      .custom-slide-hero .nav-btn {
        font-size: 1.5rem;
        top: 90%;
        transform: translateY(-50%);
      }

      .custom-slide-hero .prev {
        left: 35%;
      }

      .custom-slide-hero .next {
        right: 35%;
      }
    }

    @media (max-width: 480px) {
      .custom-slide-hero .slide-text h2 {
        font-size: 1.6rem;
      }

      .custom-slide-hero .slide-text p {
        font-size: 0.95rem;
      }

      .custom-slide-hero .slide-img img {
        max-width: 300px;
      }
    }