/* google fonts */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Mukta:wght@400;500;700&family=Rubik:wght@400;500;700&display=swap");

/* global variable */
:root {
    /* font */
    --primary-font: "Lato", sans-serif;
    --secondary-font: "Rubik", sans-serif;
    --third-font: "Mukta", sans-serif;

    /* color */
    --color-primary: #c9a75c;
    /* --color-primary: #f0be40; */
    --color-primary-light: #f0be40;
    --color-secondary: #df1b0d;
    --color-secondary-light: #ff8181;
    --color-dark: #292929;
    --color-dark-normal: #414141;
    --color-dark-light: #6a6a6a;
    --color-dark-lighter: #b0b0b0;
    --color-soft-light: #f9f9f9;
    --color-light: #ffffff;
    --color-lighter: #f5f5f5;
    --color-sky: #11b9ed;

    /* size */
    --size-5: 0.313rem !important;
    --size-10: 0.625rem;
    --size-12: 0.75rem;
    --size-14: 0.875rem;
    --size-15: 0.938rem;
    --size-16: 1rem;
    --size-18: 1.125rem;
    --size-20: 1.25rem;
    --size-24: 1.5rem;
    --size-25: 1.563rem;
    --size-30: 1.875rem;
    --size-35: 2.188rem;
    --size-40: 2.5rem;
    --size-45: 2.813rem;
    --size-50: 3.125rem;
    --size-55: 3.438rem;
    --size-60: 3.75rem;
    --size-65: 4.063rem;
    --size-70: 4.375rem;
    --size-75: 4.688rem;
    --size-80: 5rem;
    --size-85: 5.313rem;
    --size-90: 5.625rem;
    --size-100: 6.25rem;
    --size-150: 9.375rem;
    --size-200: 12rem;
}

/* fonts */
.font-primary {
    font-family: "Lato", sans-serif;
}

.font-secondary {
    font-family: "Rubik", sans-serif;
}

.font-third {
    font-family: "Mukta", sans-serif;
}
/* fonts margin */
p,
a,
h1,
h2,
h3,
h4,
h5 {
    margin: 0;
}

/* font weight */
.font-regular {
    font-weight: 400;
}
.font-medium {
    font-weight: 500;
}
.font-bold {
    font-weight: 700;
}
/* font size */
.p1 {
    font-size: var(--size-12);
}

.p2 {
    font-size: var(--size-14);
    min-width: fit-content;
}

.p3 {
    font-size: var(--size-16);
}

h1 {
    font-size: var(--size-40);
}

h2 {
    font-size: var(--size-30);
}

h3 {
    font-size: var(--size-24);
}

h4 {
    font-size: var(--size-20);
}

h5 {
    font-size: var(--size-18);
}

/* font default color */
p {
    color: var(--color-dark-light);
}

/* list style */
ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

/* link style */
a {
    text-decoration: none;
    margin: 0;
    padding: 0;
    cursor: pointer !important;
}

/* margin */
/* top */
.mt-5 {
    margin-top: var(--size-5) !important;
}
.mt-8{
    margin-top: 8px;
}
.mt-10 {
    margin-top: var(--size-10);
}
.mt-11 {
    margin-top: 11px;
}
.mt-15 {
    margin-top: var(--size-15);
}

.mt-20 {
    margin-top: var(--size-20) !important;
}

.mt-25 {
    margin-top: var(--size-25);
}

.mt-30 {
    margin-top: var(--size-30);
}

.mt-35 {
    margin-top: var(--size-35);
}

.mt-40 {
    margin-top: var(--size-40) !important;
}

.mt-45 {
    margin-top: var(--size-45) !important;
}

.mt-50 {
    margin-top: var(--size-50) !important;
}

.mt-55 {
    margin-top: var(--size-55);
}

.mt-60 {
    margin-top: var(--size-60) !important;
}

.mt-65 {
    margin-top: var(--size-65);
}

.mt-70 {
    margin-top: var(--size-70);
}

.mt-75 {
    margin-top: var(--size-75);
}

.mt-80 {
    margin-top: var(--size-80);
}

.mt-85 {
    margin-top: var(--size-85);
}

.mt-90 {
    margin-top: var(--size-90) !important;
}

.mt-95 {
    margin-top: var(--size-95);
}

.mt-100 {
    margin-top: var(--size-100) !important;
}

.mt-150 {
    margin-top: var(--size-150) !important;
}

/* bottom */
.mb-5 {
    margin-bottom: var(--size-5) !important;
}

.mb-10 {
    margin-bottom: var(--size-10);
}

.mb-15 {
    margin-bottom: var(--size-15);
}

.mb-20 {
    margin-bottom: var(--size-20);
}

.mb-25 {
    margin-bottom: var(--size-25);
}

.mb-30 {
    margin-bottom: var(--size-30) !important;
}

.mb-35 {
    margin-bottom: var(--size-35);
}

.mb-40 {
    margin-bottom: var(--size-40) !important;
}

.mb-45 {
    margin-bottom: var(--size-45) !important;
}

.mb-50 {
    margin-bottom: var(--size-50);
}

.mb-55 {
    margin-bottom: var(--size-55);
}

.mb-60 {
    margin-bottom: var(--size-60) !important;
}

.mb-65 {
    margin-bottom: var(--size-65);
}

.mb-70 {
    margin-bottom: var(--size-70);
}

.mb-75 {
    margin-bottom: var(--size-75);
}

.mb-80 {
    margin-bottom: var(--size-80);
}

.mb-85 {
    margin-bottom: var(--size-85);
}

.mb-90 {
    margin-bottom: var(--size-90) !important;
}

.mb-95 {
    margin-bottom: var(--size-95);
}

.mb-100 {
    margin-bottom: var(--size-100);
}

.mb-150 {
    margin-bottom: var(--size-150) !important;
}

.mb-200 {
    margin-bottom: 12.5rem;
}
/* left */
.ml-5 {
    margin-left: var(--size-5);
}

.ml-10 {
    margin-left: var(--size-10);
}

.ml-15 {
    margin-left: var(--size-15) !important;
}

.ml-20 {
    margin-left: var(--size-20) !important;
}

.ml-25 {
    margin-left: var(--size-25) !important;
}

.ml-30 {
    margin-left: var(--size-30);
}

.ml-35 {
    margin-left: var(--size-35);
}

.ml-40 {
    margin-left: var(--size-40);
}

.ml-45 {
    margin-left: var(--size-45);
}

.ml-50 {
    margin-left: var(--size-50);
}

.ml-55 {
    margin-left: var(--size-55);
}

.ml-60 {
    margin-left: var(--size-60);
}

.ml-65 {
    margin-left: var(--size-65);
}

.ml-70 {
    margin-left: var(--size-70);
}

.ml-75 {
    margin-left: var(--size-75);
}

.ml-80 {
    margin-left: var(--size-80);
}

.ml-85 {
    margin-left: var(--size-85);
}

.ml-90 {
    margin-left: var(--size-90);
}

.ml-95 {
    margin-left: var(--size-95);
}

.ml-100 {
    margin-left: var(--size-100);
}

.ml-150 {
    margin-left: var(--size-150);
}
/* right */
.mr-5 {
    margin-right: var(--size-5);
}

.mr-10 {
    margin-right: var(--size-10);
}

.mr-15 {
    margin-right: var(--size-15);
}

.mr-20 {
    margin-right: var(--size-20);
}

.mr-25 {
    margin-right: var(--size-25) !important;
}

.mr-30 {
    margin-right: var(--size-30);
}

.mr-35 {
    margin-right: var(--size-35);
}

.mr-40 {
    margin-right: var(--size-40);
}

.mr-45 {
    margin-right: var(--size-45);
}

.mr-50 {
    margin-right: var(--size-50);
}

.mr-55 {
    margin-right: var(--size-55);
}

.mr-60 {
    margin-right: var(--size-60);
}

.mr-65 {
    margin-right: var(--size-65);
}

.mr-70 {
    margin-right: var(--size-70);
}

.mr-75 {
    margin-right: var(--size-75);
}

.mr-80 {
    margin-right: var(--size-80);
}

.mr-85 {
    margin-right: var(--size-85);
}

.mr-90 {
    margin-right: var(--size-90);
}

.mr-95 {
    margin-right: var(--size-95);
}

.mr-100 {
    margin-right: var(--size-100);
}

.mr-150 {
    margin-right: var(--size-150);
}

/* padding */
/* top */
.pt-5 {
    padding-top: var(--size-5) !important;
}

.pt-10 {
    padding-top: var(--size-10);
}

.pt-15 {
    padding-top: var(--size-15);
}

.pt-20 {
    padding-top: var(--size-20);
}

.pt-25 {
    padding-top: var(--size-25);
}

.pt-30 {
    padding-top: var(--size-30);
}

.pt-35 {
    padding-top: var(--size-35);
}

.pt-40 {
    padding-top: var(--size-40);
}

.pt-45 {
    padding-top: var(--size-45);
}

.pt-50 {
    padding-top: var(--size-50);
}

.pt-55 {
    padding-top: var(--size-55);
}

.pt-60 {
    padding-top: var(--size-60);
}

.pt-65 {
    padding-top: var(--size-65);
}

.pt-70 {
    padding-top: var(--size-70);
}

.pt-75 {
    padding-top: var(--size-75);
}

.pt-80 {
    padding-top: var(--size-80);
}

.pt-85 {
    padding-top: var(--size-85);
}

.pt-90 {
    padding-top: var(--size-90) !important;
}

.pt-95 {
    padding-top: var(--size-95);
}

.pt-100 {
    padding-top: var(--size-100) !important;
}

.pt-120 {
    padding-top: 120px !important;
}

.pt-150 {
    padding-top: var(--size-150) !important;
}
/* bottom */
.pb-5 {
    padding-bottom: var(--size-5) !important;
}
.pb-11 {
    padding-bottom: 11px !important;
}

.pb-10 {
    padding-bottom: var(--size-10);
}

.pb-15 {
    padding-bottom: var(--size-15);
}

.pb-20 {
    padding-bottom: var(--size-20);
}

.pb-25 {
    padding-bottom: var(--size-25);
}

.pb-30 {
    padding-bottom: var(--size-30);
}

.pb-35 {
    padding-bottom: var(--size-35);
}

.pb-40 {
    padding-bottom: var(--size-40) !important;
}

.pb-45 {
    padding-bottom: var(--size-45);
}

.pb-50 {
    padding-bottom: var(--size-50);
}

.pb-55 {
    padding-bottom: var(--size-55);
}

.pb-60 {
    padding-bottom: var(--size-60) !important;
}

.pb-65 {
    padding-bottom: var(--size-65);
}

.pb-70 {
    padding-bottom: var(--size-70);
}

.pb-75 {
    padding-bottom: var(--size-75);
}

.pb-80 {
    padding-bottom: var(--size-80) !important;
}

.pb-85 {
    padding-bottom: var(--size-85) !important;
}

.pb-90 {
    padding-bottom: var(--size-90) !important;
}

.pb-95 {
    padding-bottom: var(--size-95) !important;
}

.pb-100 {
    padding-bottom: var(--size-100) !important;
}

.pb-150 {
    padding-bottom: var(--size-150) !important;
}
.pb-180 {
    padding-bottom: 180px !important;
}
.pb-200 {
    padding-bottom: 200px !important;
}
/* left */
.pl-5 {
    padding-left: var(--size-5) !important;
}

.pl-10 {
    padding-left: var(--size-10);
}

.pl-15 {
    padding-left: var(--size-15);
}

.pl-20 {
    padding-left: var(--size-20);
}

.pl-25 {
    padding-left: var(--size-25);
}

.pl-30 {
    padding-left: var(--size-30);
}

.pl-35 {
    padding-left: var(--size-35);
}

.pl-40 {
    padding-left: var(--size-40) !important;
}

.pl-45 {
    padding-left: var(--size-45);
}

.pl-50 {
    padding-left: var(--size-50);
}

.pl-55 {
    padding-left: var(--size-55);
}

.pl-60 {
    padding-left: var(--size-60);
}

.pl-65 {
    padding-left: var(--size-65);
}

.pl-70 {
    padding-left: var(--size-70);
}

.pl-75 {
    padding-left: var(--size-75);
}

.pl-80 {
    padding-left: var(--size-80);
}

.pl-85 {
    padding-left: var(--size-85);
}

.pl-90 {
    padding-left: var(--size-90);
}

.pl-95 {
    padding-left: var(--size-95);
}

.pl-100 {
    padding-left: var(--size-100);
}

.pl-150 {
    padding-left: var(--size-150);
}
/* right */
.pr-5 {
    padding-right: var(--size-5) !important;
}

.pr-10 {
    padding-right: var(--size-10);
}

.pr-15 {
    padding-right: var(--size-15);
}

.pr-20 {
    padding-right: var(--size-20);
}

.pr-25 {
    padding-right: var(--size-25);
}

.pr-30 {
    padding-right: var(--size-30);
}

.pr-35 {
    padding-right: var(--size-35);
}

.pr-40 {
    padding-right: var(--size-40) !important;
}

.pr-45 {
    padding-right: var(--size-45);
}

.pr-50 {
    padding-right: var(--size-50) !important;
}

.pr-55 {
    padding-right: var(--size-55);
}

.pr-60 {
    padding-right: var(--size-60);
}

.pr-65 {
    padding-right: var(--size-65);
}

.pr-70 {
    padding-right: var(--size-70);
}

.pr-75 {
    padding-right: var(--size-75);
}

.pr-80 {
    padding-right: var(--size-80);
}

.pr-85 {
    padding-right: var(--size-85);
}

.pr-90 {
    padding-right: var(--size-90);
}

.pr-95 {
    padding-right: var(--size-95);
}

.pr-100 {
    padding-right: var(--size-100);
}

.pr-150 {
    padding-right: var(--size-150);
}

/* color */
.color-primary {
    color: var(--color-primary);
}

.color-primary-light {
    color: var(--color-primary-light);
}

.color-secondary {
    color: var(--color-secondary);
}

.color-secondary-light {
    color: var(--color-secondary-light);
}

.color-dark {
    color: var(--color-dark);
}

.color-dark-normal {
    color: var(--color-dark-normal);
}

.color-dark-light {
    color: var(--color-dark-light);
}
.color-light-text {
    color: #6a6a6a;
}
.color-dark-lighter {
    color: var(--color-dark-lighter);
}

.color-light {
    color: var(--color-light);
}

.color-lighter {
    color: var(--color-lighter);
}

.color-sky {
    color: var(--color-sky);
}
/* bg color */
.bg-primary {
    background-color: var(--color-primary) !important;
}
.bg-primary-light {
    background-color: var(--color-primary-light) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}
.bg-soft-light {
    background-color: #f9f9f9;
}
.bg-secondary-light {
    background-color: var(--color-secondary-light);
}

.bg-dark {
    background-color: var(--color-dark) !important;
}

.bg-dark-normal {
    background-color: var(--color-dark-normal);
}

.bg-dark-light {
    background-color: var(--color-dark-light) !important;
}

.bg-dark-lighter {
    background-color: var(--color-dark-lighter);
}

.bg-light {
    background-color: var(--color-light) !important;
}

.bg-lighter {
    background-color: var(--color-lighter);
}

.bg-sky {
    background-color: var(--color-sky);
}

.bg-sky-lite {
    background-color: #cdeef9;
}

/* index */
.zIndex-1 {
    z-index: 1;
}
.zIndex-2 {
    z-index: 2;
}
/* opacity */
.opacity-0 {
    opacity: 0;
}

.opacity-0-6 {
    opacity: 0.6;
}

.opacity-0-9 {
    opacity: 0.9;
}

.opacity-1 {
    opacity: 1;
}

/* position */
.top0 {
    top: 0;
}

.left0 {
    left: 0;
}

.left1 {
    left: 1%;
}

.left20 {
    left: 20%;
}

.right0 {
    right: 0;
}

.right1 {
    right: 1%;
}
.row-g-5{
    row-gap: 26px;
}
.position-relative {
    position: relative !important;
}
.position-relative-flex {
    position: relative !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.position-absolute {
    position: absolute;
}

.position-absolute-central {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 11;
}

.position-absolute-top {
    position: absolute;
    top: 0%;
    transform: translateY(-50%);
}
.position-absolute-bottom {
    position: absolute;
    bottom: 0;
    transform: translateY(50%);
}
/* tab button */
[data-tab-content] {
    display: none;
}

.active[data-tab-content] {
    display: block;
}
/* 
.tab-button {
    height: 100%;
    border: 0;
    background-color: transparent;
    font-size: var(--size-14);
    font-weight: 400;
    color: var(--color-dark-normal);
    padding-bottom: var(--size-15);
    padding-left: var(--size-10);
    padding-right: var(--size-10);
} */

/* button */

.primary-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-primary);
    background-color: transparent;
    width: var(--size-200);
    height: var(--size-50);
    font-size: var(--size-14);
    font-weight: 400;
    color: var(--color-primary);
    margin: auto;
    transition: all 0.2s linear;
}

.primary-btn1 {
    border: 1px transparent;
    background-color: transparent;
    width: 150px;
    height: 60px !important;
    font-size: var(--size-16);
    font-weight: 400;
    color: var(--color-primary);
    transition: all 0.2s linear;
}
/* .primary-btn1 {
    border: 1px transparent;
    background-color: transparent;
    font-size: var(--size-16);
    font-weight: 400;
    color: var(--color-primary);
    transition: all 0.2s linear;
    padding: 1em 3em;
} */
.primary-btn2 {
    border: 1px solid var(--color-lighter);
    background-color: transparent;
    width: var(--size-200);
    height: var(--size-50);
    font-size: var(--size-14);
    font-weight: 400;
    color: var(--color-dark-normal);
    display: block;
    margin: auto;
    transition: all 0.2s linear;
}

.secondary-btn {
    width: var(--size-150);
    height: var(--size-50);
    background-color: var(--color-dark);
    color: var(--color-light);
    font-size: var(--size-14);
    font-weight: 400;
    transition: all 0.2s linear;
}

.secondary-btn-red {
    width: var(--size-150);
    height: var(--size-50);
    background-color: transparent;
    border: 1px transparent;
    font-size: var(--size-14);
    font-weight: 400;
    color: var(--color-secondary);
    transition: all 0.2s linear;
}

.primary-border-radius {
    border-radius: 50%;
}

.slider-btn {
    height: var(--size-50);
    width: var(--size-50);
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-light);
    transition: all 0.2s linear;
}
.slider-btn:hover {
    background: var(--color-dark) !important;
}
.slider-btn1 {
    height: var(--size-50);
    width: var(--size-50);
    border: 0;
    /* border: 1px solid var(--color-primary); */
    border-radius: 50%;
    background-color: var(--color-light);
    color: var(--color-dark-light);
    transition: all 0.2s linear;
}

.secondary-slider-btn {
    height: var(--size-50);
    width: var(--size-50);
    border: 1px solid var(--color-lighter);
    /* border: 1px solid var(--color-secondary); */
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-light) !important;
    color: var(--color-dark-light);
}
.home-3 .secondary-slider-btn {
    height: var(--size-50);
    width: var(--size-50);
    border: 1px solid var(--color-lighter);
    border-radius: 50%;
    background-color: var(--color-secondary);
    color: var(--color-light) !important;
    color: var(--color-dark-light);
}

.home1-slider-btnPRIV {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 0.5%;
    transform: translateY(-50%);
    height: var(--size-50);
    width: var(--size-50);
    border: 1px solid #f9f9f9;
    border-radius: 50%;
    /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
    background-color: var(--color-light);
    color: var(--color-dark-normal);
    z-index: 1;
}

.home1-slider-btnNXT {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.5%;
    height: var(--size-50);
    width: var(--size-50);
    border: 1px solid #f9f9f9;
    border-radius: 50%;
    /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
    background-color: var(--color-light);
    color: var(--color-dark-normal);
    z-index: 1;
}

/* button hover */

.tab-button:focus-within {
    /* border-bottom: 1px solid var(--color-primary); */
    color: var(--color-primary);
}

.slider-btn-hover:hover {
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
    background-color: var(--color-primary);
    color: var(--color-light);
}

.primary-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-light);
}

.primary-btn1:hover {
    background-color: var(--color-primary);
    color: var(--color-light);
}

.primary-btn2:hover {
    background-color: var(--color-primary);
    color: var(--color-light);
}

/* .secondary-btn:hover{
    background-color: var(--color-dark);
    color: var(--color-light);
} */

.secondary-btn-red:hover {
    background-color: var(--color-secondary);
    color: var(--color-light);
}

.slider-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-light);
}

.slider-btn1:hover {
    background-color: var(--color-primary);
    color: var(--color-light);
}

.secondary-slider-btn:hover {
    color: var(--color-light);
    background-color: var(--color-primary);
}
.home-3 .secondary-slider-btn:hover {
    color: var(--color-light);
    background-color: var(--color-dark);
}

/* .secondary-hover:hover {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
} */

/* border */

.primary-border {
    border: 1px solid var(--color-primary);
}

.secondary-border {
    border: 1px solid var(--color-secondary);
}

.light-border {
    border: 1px solid var(--color-light);
}

.lighter-border {
    border: 1px solid var(--color-lighter);
}

.dark-border {
    border: 1px solid var(--color-dark);
}

.lighter-dark-border {
    border: 1px solid #e1e1e1;
}

/* shadow */
.shadow-primary {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.shadow-secondary {
    box-shadow: 2px 2px 4px 0px #00000015 !important;
}
/* button hover  */
.hover-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--color-light) !important;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: var(--color-primary) !important;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.home-3 .hover-btn{
    background: var(--color-secondary) !important;
}

.hover-btn:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-dark);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.hover-btn-2 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    border: 1px solid var(--color-primary);
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: transparent !important;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.home-3 .hover-btn-2{
    border: 1px solid var(--color-secondary) !important;
}

.hover-btn-2:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* border: 3px solid var(--color-primary) !important; */
    border-radius: 50px;
    background: var(--color-primary);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.home-3 .hover-btn-2::before{
    background: var(--color-secondary) !important;
}
.hover-square {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: transparent !important;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.hover-square:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-primary) !important;
    color: var(--color-light);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hover-btn:active,
.hover-btn-2:active,
.hover-btn:focus,
.hover-btn-2:focus,
.hover-btn-2:hover,
.hover-btn:hover {
    color: var(--color-light) !important;
}
.hover-square:hover,
.hover-square:active,
.hover-square:focus {
    color: var(--color-light) !important;
}
.hover-btn:active:before,
.hover-btn-2:active:before,
.hover-square:active:before,
.hover-btn:focus:before,
.hover-btn-2:focus:before,
.hover-square:focus:before,
.hover-btn:hover:before,
.hover-btn-2:hover:before,
.hover-square:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.active-btn {
    background-color: var(--color-dark) !important;
    border: 0px solid transparent !important;
}
.active-btn-2 {
    background-color: var(--color-primary) !important;
    color: var(--color-light) !important;
}

.primary-link {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}
.primary-link:hover {
    color: var(--color-primary) !important;
}

/* .actived {
    background-color: #000000;
    transition: 0.3s;
    border-radius: 0px 20px 20px 0px;
    color: var(--color-primary) !important;
} */