:root {

    /*2b2d33*/
    --container-max-width: 1360px;

    /* Brand Colors */
    --brand-main-color: #007fec;
    --brand-second-color: #0057cc;
    --brand-third-color: #1b2129;
    --brand-fourth-color: #272d39;

    /* Soft */

    /* Backgrounds */
    --bg-white: #ffffff;
    --bg-gray-100: #f8f8f8;
    --bg-gray-200: #eaeaea;

    /* Colors */
    --text-white: #ffffff;
    --text-black: #000000;
    --text-second: #444444;


    /* Borders */
    --border-primary-soft: rgba(0, 87, 204, .2);
    --border-color: #eee;
    --border-radius: 25px;
    --border-radius-md: 15px;
    --border-radius-sm: 10px;
    --border-radius-xs: 5px;

    /* Buttons */
    --btn-bg: var(--brand-main-color);
    --btn-color: #fff;
    /**/
    --btn-black-bg: #000000;
    --btn-black-color: #fff;


    /* Navbar */
    --navbar-height: 85px;

    --navbar-color: #000000;
    /* --navbar-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); */
    --navbar-shadow: 0 1px 30px rgba(0, 0, 0, 0.070);




    /* Card ( box ) Style Colors */
    --card-bg: #fff;
    --card-padding: 1rem;
    --card-color: #212121;
    --card-shadow: 18px 0 87px rgba(10, 15, 70, .07);
    --card-border: none;
    --card-border-radius: 12px;



    /* Start Inputs */
    --input-text-color: #6f6b80;
    --input-main-bg: #fefefe;
    --input-border-color: #d6dbe5;
    --input-border-radius: var(--border-radius-sm);
    --input-height: 54px;


    /* On Foucs */
    --input-text-color-on-foucs: #212121;
    --input-main-bg-on-foucs: #ffffff;
    --input-border-on-foucs: var(--brand-main-color);


    /* ========================= NEW ========================= */
    /* ========================= NEW ========================= */
    /* ========================= NEW ========================= */
    /* ========================= NEW ========================= */
    /* ========================= NEW ========================= */
    /* ========================= NEW ========================= */



    /* ========================= Layout ========================= */
    --layout-container-max-width: 1360px;
    --layout-navbar-height: 85px;

    /* ========================= Brand Colors ========================= */
    --color-brand-primary: #007fec;
    --color-brand-secondary: #0057cc;
    --color-brand-dark: #1b2129;
    --color-brand-dark-alt: #272d39;


    /* ========================= Soft Brand Colors ========================= */

    --color-soft-primary: rgba(0, 87, 204, .08);
    --border-soft-primary: rgba(0, 87, 204, .2);


    /* ========================= Background shortcuts ========================= */

    --bg-soft-primary: var(--color-soft-primary);
    --bg-soft-secondary: var(--color-soft-secondary);
    --bg-soft-dark: var(--color-soft-dark);

    /* ========================= Neutral / Base Colors ========================= */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-100: #f8f8f8;
    --color-gray-200: #eaeaea;
    --color-gray-400: #444444;
    --color-gray-500: #6f6b80;
    --color-gray-600: #212121;
    --color-border: #eeeeee;

    /* ========================= Backgrounds ========================= */
    --bg-page: var(--color-white);
    --bg-muted: var(--color-gray-100);
    --bg-muted-alt: var(--color-gray-200);

    /* ========================= Typography ========================= */
    --text-primary: var(--color-gray-600);
    --text-secondary: var(--color-gray-400);
    --text-inverse: var(--color-white);

    /* ========================= Border Radius ========================= */
    --radius-xl: 25px;
    --radius-lg: 15px;
    --radius-md: 10px;
    --radius-sm: 5px;

    /* ========================= Buttons ========================= */
    --btn-primary-bg: var(--color-brand-primary);
    --btn-primary-color: var(--color-white);

    --btn-dark-bg: var(--color-black);
    --btn-dark-color: var(--color-white);

    /* ========================= Navbar ========================= */
    --navbar-bg: rgb(255, 255, 255);
    --navbar-text-color: var(--color-black);
    --navbar-shadow: 0 1px 30px rgba(0, 0, 0, 0.07);

    /* ========================= Cards ========================= */
    --card-bg: var(--color-white);
    --card-padding: 1rem;
    --card-text-color: var(--color-gray-600);
    --card-radius: 12px;
    --card-shadow: 18px 0 87px rgba(10, 15, 70, 0.07);
    --card-border: none;

    /* ========================= Form Inputs ========================= */
    --input-height: 54px;
    --input-bg: #fefefe;
    --input-text-color: var(--color-gray-500);
    --input-border-color: #d6dbe5;
    --input-radius: var(--radius-md);

    /* Focus State */
    --input-bg-focus: var(--color-white);
    --input-text-focus: var(--color-gray-600);
    --input-border-focus: var(--color-brand-primary);

    /* ========================= Swiper========================= */
    --swiper-pagination-bottom: 12px;
    --swiper-pagination-top: auto;

}


@media (max-width:768px) {
    :root {
        /* Navbar */
        --navbar-height: 75px;
        --layout-navbar-height: 75px;
    }


}