/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

:root {
  /* You can tweak these for your project */
 --font-scale-largest: clamp(3.5rem, 8vw + 1rem, 8rem);
  --font-scale-large:   clamp(2.5rem, 6vw + 0.8rem, 5.5rem);
  --font-scale-medium:  clamp(1.75rem, 4vw + 0.5rem, 3.5rem);
  --font-scale-small:   clamp(1.25rem, 3vw + 0.4rem, 2.25rem);
  --font-scale-tiny:    clamp(1rem, 2vw + 0.3rem, 1.5rem);
}


:root {
  /* Base scaling (desktops and large laptops) */
  --font-scale-largest: clamp(4rem, 6vw + 1rem, 7rem);
  --font-scale-large:   clamp(3rem, 5vw + 1rem, 5.5rem);
  --font-scale-medium:  clamp(2rem, 3.5vw + 0.8rem, 3.5rem);
  --font-scale-small:   clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
  --font-scale-tiny:    clamp(1.1rem, 2vw + 0.4rem, 1.6rem);
}

/* ------------------------------------------- */
/* 🧭 Medium screens (tablets, small laptops) */
/* ------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --font-scale-largest: clamp(3.75rem, 7vw + 0.8rem, 6.5rem);
    --font-scale-large:   clamp(2.95rem, 6vw + 0.7rem, 5rem);
    --font-scale-medium:  clamp(1.9rem, 4.5vw + 0.6rem, 3.25rem);
    --font-scale-small:   clamp(1.45rem, 3vw + 0.5rem, 2.1rem);
    --font-scale-tiny:    clamp(1.15rem, 2.5vw + 0.4rem, 1.5rem);
  }
}

/* ------------------------------------------- */
/* 📱 Small screens (phones, phablets) */
/* ------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --font-scale-largest: clamp(5rem, 13vw + 0.9rem, 7.5rem);
    --font-scale-large:   clamp(3.75rem, 10vw + 0.7rem, 5.75rem);
    --font-scale-medium:  clamp(2.6rem, 8vw + 0.6rem, 3.9rem);
    --font-scale-small:   clamp(2rem, 6vw + 0.5rem, 3.1rem);
    --font-scale-tiny:    clamp(1.45rem, 4vw + 0.35rem, 2.2rem);
  }
}
/* ------------------------------------------- */
/* 🧒 Extra-small screens (≤ 400px) */
/* ------------------------------------------- */
@media (max-width: 400px) {
  :root {
    --font-scale-largest: clamp(4rem, 13vw + 0.8rem, 6rem);
    --font-scale-large:   clamp(3rem, 11vw + 0.6rem, 4.75rem);
    --font-scale-medium:  clamp(2.1rem, 8.5vw + 0.5rem, 3.25rem);
    --font-scale-small:   clamp(1.6rem, 6vw + 0.4rem, 2.5rem);
    --font-scale-tiny:    clamp(1.25rem, 4vw + 0.3rem, 1.8rem);
  }
}
html {
    font-size: var(--prv-100);
    -webkit-text-size-adjust: var(--prv-100);
    display: var(--db);
}

* {
    -webkit-box-sizing: var(--dvl_bb);
    box-sizing: var(--dvl_bb);
}


head {
    display: none;

}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
    margin: 0 !important;
    color: #0F1111;
    padding: 0;
    /*	    background: #fff;*/
    min-height: var(--prv-100);

    font-size: 14px;
    line-height: var(--xp20);
    display: var(--db);

    width: var(--prv-100);
    /* height: var(--prv-100); */
    overflow: auto;
 height: 100%;
    font-family: Arial, sans-serif;
    background: #fff;

}


body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body::-webkit-scrollbar {
    display: none;
}
.scroll-hide::-webkit-scrollbar {
    display: none;
  }

/*
body::-webkit-scrollbar-track
{

background-color: transparent;
	
}
*/

/*
body::-webkit-scrollbar
{

background: none;
}

body::-webkit-scrollbar-thumb
{
border-radius: var(--x10);

background-color: rgba(0, 0, 0, 0.26);
}
*/

div {
    display: var(--db);
}


#page_content {

    margin: 0 auto;
    max-width: none;
    min-width: 1000px;
    overflow: var(--hdn);
}

.space-b-none {
    margin-bottom: var(--dvl_0) !important;
}

.b-none{
    border: none;
}






/*-------------------------*/
/*REUSABLE COMPONENT*/
/*-------------------------*/

section {
    padding: var(--x80) 0px;
}

.row {
    max-width: 1140px;
    margin: var(--dvl_0) auto;
}

.box {
    padding: 1%;
}

/* boxes*/
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child {
    padding-bottom: var(--dvl_0);
}

h2 {
    font-weight: var(--dvl700);

}

h2 {
    -webkit-margin-before: 0.83em;
            margin-block-start: 0.83em;
    -webkit-margin-after: 0.83em;
            margin-block-end: 0.83em;
    -webkit-margin-start: 0px;
            margin-inline-start: 0px;
    -webkit-margin-end: 0px;
            margin-inline-end: 0px;
}

h1,
h2,
h3,
h4 {
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    padding: var(--dvl_0);
    margin: var(--dvl_0);
}

img {
    vertical-align: top;
    border: var(--dvl_0);
}

/*
a, a:link, a:visited {
    text-decoration: none;
        color: #1a0dab;
}

a, a:link, a:hover {
    text-decoration: none;
        color: orange;
}
*/


/* mouse over link */
a {
    color: #000;
    text-decoration: none;
}
a:hover {
    color: var(--col_orange);
   
}

.b-r {
    border-radius: 7px;
}

.b-r-2 {
    border-radius: var(--x5);
}


.box-break {


    margin: var(--dvl_0);
    height: var(--xp20);
    -webkit-box-flex: 1;
        -ms-flex: 1 var(--dvl_0) var(--prv-100);
            flex: 1 var(--dvl_0) var(--prv-100);
    -ms-flex-positive: 1;
        flex-grow: 1;
    -ms-flex-negative: var(--dvl_0);
        flex-shrink: var(--dvl_0);
    -ms-flex-preferred-size: var(--prv-100);
        flex-basis: var(--prv-100);
    background-color: transparent;
    border: none;


}

.content-grid {

    max-width: 1480px;
    margin: var(--dvl_0) auto;
    margin-bottom: 32px !important;

}

.a-ul {

    padding: 0;
    margin: 0 0 0 18px;

}

.noneStyle-ul {

    margin-left: 0;
    color: #111;

}

.a-top-margin-mini {
    margin-top: 4px !important;
}

ul {
    display: var(--db);
    list-style-type: disc;
    -webkit-margin-before: 1em;
            margin-block-start: 1em;
    -webkit-margin-after: 1em;
            margin-block-end: 1em;
    -webkit-margin-start: 0px;
            margin-inline-start: 0px;
    -webkit-margin-end: 0px;
            margin-inline-end: 0px;
    -webkit-padding-start: var(--x40);
            padding-inline-start: var(--x40);
}

/*ANGOMAN CLASSES START HERE*/


tr {
    text-align: left
}



.text-d-n {
    text-decoration: none
}

.oline-n {
    outline: none;
}

.disp-in-float-l,
.width-10,
.width-20,
.width-25,
.width-33-33,
.width-40,
.width-50,
.width-60,
.width-75,
.width-80,
.width-90,
.width-30,
.width-70 {
    display: var(--dinb)
}

.disp-block,
.float-l-r-auto,
.m-l-r-auto {
    display: var(--db)
}

.disp-none {
    display: none
}

.float-l-r-auto {
    float: 0 auto 0 auto
}

.disp-in-float-l,
.float-l,
.width-10,
.width-20,
.width-25,
.width-33-33,
.width-40,
.width-50,
.width-60,
.width-75,
.width-80,
.width-90,
.width-30,
.width-70 {
    float: var(--lft)
}

.float-r {
    float: var(--rht);
}

.p-7,
.p-l-7,
.p-l-r-7 {
    padding-left: var(--x7)
}

.p-7,
.p-l-r-7,
.p-r-7 {
    padding-right: var(--x7)
}

.p-7,
.p-t-7,
.p-t-b-7 {
    padding-top: var(--x7)
}

.p-7,
.p-b-7,
.p-t-b-7 {
    padding-bottom: var(--x7)
}

















.p-5,
.p-l-5,
.p-l-r-5 {
    padding-left: var(--x5)
}

.p-5,
.p-l-r-5,
.p-r-5 {
    padding-right: var(--x5)
}

.p-5,
.p-t-5,
.p-t-b-5 {
    padding-top: var(--x5)
}

.p-5,
.p-b-5,
.p-t-b-5 {
    padding-bottom: var(--x5)
}

.p-10,
.p-l-10,
.p-l-r-10 {
    padding-left: var(--x10)
}

.p-10,
.p-l-r-10,
.p-r-10 {
    padding-right: var(--x10)
}

.p-10,
.p-t-10,
.p-t-b-10 {
    padding-top: var(--x10)
}

.p-10,
.p-b-10,
.p-t-b-10 {
    padding-bottom: var(--x10)
}

.p-15,
.p-l-15,
.p-l-r-15 {
    padding-left: var(--xp15)
}

.p-15,
.p-l-r-15,
.p-r-15 {
    padding-right: var(--xp15)
}

.p-15,
.p-t-15,
.p-t-b-15 {
    padding-top: var(--xp15)
}

.p-15,
.p-b-15,
.p-t-b-15 {
    padding-bottom: var(--xp15)
}

.p-20,
.p-l-20,
.p-l-r-20 {
    padding-left: var(--xp20)
}

.p-20,
.p-l-r-20,
.p-r-20 {
    padding-right: var(--xp20)
}

.p-20,
.p-t-20,
.p-t-b-20 {
    padding-top: var(--xp20)
}

.p-20,
.p-b-20,
.p-t-b-20 {
    padding-bottom: var(--xp20)
}

.m-5,
.m-t-5,
.m-t-b-5 {
    margin-top: var(--x5)
}

.m-5,
.m-b-5,
.m-t-b-5 {
    margin-bottom: var(--x5)
}

.m-5,
.m-l-5,
.m-l-r-5 {
    margin-left: var(--x5)
}

.m-5,
.m-l-r-5,
.m-r-5 {
    margin-right: var(--x5)
}

.m-10,
.m-t-10,
.m-t-b-10 {
    margin-top: var(--x10)
}

.m-10,
.m-b-10,
.m-t-b-10 {
    margin-bottom: var(--x10)
}

.m-10,
.m-l-10,
.m-l-r-10 {
    margin-left: var(--x10)
}

.m-10,
.m-l-r-10,
.m-r-10 {
    margin-right: var(--x10)
}

.m-15,
.m-t-15,
.m-t-b-15 {
    margin-top: var(--xp15)
}

.m-15,
.m-b-15,
.m-t-b-15 {
    margin-bottom: var(--xp15)
}

.m-15,
.m-l-15,
.m-l-r-15 {
    margin-left: var(--xp15)
}

.m-15,
.m-l-r-15,
.m-r-15 {
    margin-right: var(--xp15)
}

.m-20,
.m-t-20,
.m-t-b-20 {
    margin-top: var(--xp20)
}

.m-20,
.m-b-20,
.m-t-b-20 {
    margin-bottom: var(--xp20)
}

.m-20,
.m-l-20,
.m-l-r-20 {
    margin-left: var(--xp20)
}

.m-20,
.m-l-r-20,
.m-r-20 {
    margin-right: var(--xp20)
}

.m-30,
.m-t-30,
.m-t-b-30 {
    margin-top: var(--x30)
}

.m-30,
.m-b-30,
.m-t-b-30 {
    margin-bottom: var(--x30)
}

.m-30,
.m-l-30,
.m-l-r-30 {
    margin-left: var(--x30)
}

.m-30,
.m-l-r-30,
.m-r-30 {
    margin-right: var(--x30)
}

.m-40,
.m-t-40,
.m-t-b-40 {
    margin-top: var(--x40)
}

.m-40,
.m-b-40,
.m-t-b-40 {
    margin-bottom: var(--x40)
}

.m-40,
.m-l-40,
.m-l-r-40 {
    margin-left: var(--x40)
}

.m-40,
.m-l-r-40,
.m-r-40 {
    margin-right: var(--x40)
}




.m-50,
.m-t-50,
.m-t-b-50 {
    margin-top: var(--xp50)
}

.m-50,
.m-b-50,
.m-t-b-50 {
    margin-bottom: var(--xp50)
}

.m-50,
.m-l-50,
.m-l-r-50 {
    margin-left: var(--xp50)
}

.m-50,
.m-l-r-50,
.m-r-50 {
    margin-right: var(--xp50)
}



.m-70,
.m-t-70,
.m-t-b-70 {
    margin-top: var(--xp70)
}

.m-70,
.m-b-70,
.m-t-b-70 {
    margin-bottom: var(--xp70)
}

.m-70,
.m-l-70,
.m-l-r-70 {
    margin-left: var(--xp70)
}

.m-70,
.m-l-r-70,
.m-r-70 {
    margin-right: var(--xp70)
}


.m-60,
.m-t-60,
.m-t-b-60 {
    margin-top: var(--xp60)
}

.m-60,
.m-b-60,
.m-t-b-60 {
    margin-bottom: var(--xp60)
}

.m-60,
.m-l-60,
.m-l-r-60 {
    margin-left: var(--xp60)
}

.m-60,
.m-l-r-60,
.m-r-60 {
    margin-right: var(--xp60)
}




.m-l-r-auto {
    margin-left: auto;
    margin-right: auto
}

.c-p,
button {
    cursor: pointer
}

.clear-b {
    clear: both
}

.clear-l {
    clear: left
}

.clear-r {
    clear: right
}

.b-2-black {
    border: 2px solid #000
}

.b-2-red {
    border: 2px solid var(--col_red)
}
.b-2-grey {
    border: 2px solid #dfdfdf
}
.b-2-green {
    border: 2px solid var(--col_green)
}
.b-2-dark-green {
    border: 2px solid var(--col_dgreen)
}
.b-2-dark-red {
    border: 2px solid var(--col_red_d)
}
.b-2-r-5-black {
    border: 2px solid #000
}

.border-3 {
    border: 3px solid var(--col_grey)
}

.border-2 {
    border: 2px solid var(--col_grey)
}
.b-3-red {
    border: 3px solid var(--b_red)
}
.b-3-focus-red:focus {
    border: 3px solid var(--b_red)
}

.b-3-l-gray {
    border-left: 3px solid var(--col_grey)
}

.b-3-r-gray {
    border-right: 3px solid var(--col_grey)
}

.b-3-t-gray {
    border-top: 3px solid var(--col_grey)
}

.b-3-b-gray {
    border-bottom: 3px solid var(--col_grey)
}

.b-2-l-gray {
    border-left: 2px solid var(--col_grey)
}

.b-2-r-gray {
    border-right: 2px solid var(--col_grey)
}

.b-2-t-gray {
    border-top: 2px solid var(--col_grey)
}

.b-2-b-gray {
    border-bottom: 2px solid var(--col_grey)
}



.b-1-silver,
.b-1-l-silver {
    border-left: 1px solid #7b7b7b
}

.b-1-silver,
.b-1-r-silver {
    border-right: 1px solid #7b7b7b
}

.b-1-silver,
.b-1-t-silver {
    border-top: 1px solid #7b7b7b
}

.b-1-b-silver,
.b-1-silver {
    border-bottom: 1px solid #7b7b7b
}








.b-1-lgrey,
.b-1-l-lgrey {
    border-left: 1px solid #d8d8d8
}

.b-1-lgrey,
.b-1-r-lgrey {
    border-right: 1px solid #d8d8d8
}

.b-1-lgrey,
.b-1-t-lgrey {
    border-top: 1px solid #d8d8d8
}
.b-1-b-lgrey,
.b-1-lgrey {
    border-bottom: 1px solid #d8d8d8
}



.b-1-dGrey,
.b-1-l-dGrey {
    border-left: 1px solid #c6c6c6
}

.b-1-dGrey,
.b-1-r-dGrey {
    border-right: 1px solid #c6c6c6
}

.b-1-dGrey,
.b-1-t-dGrey {
    border-top: 1px solid #c6c6c6
}

.b-1-b-dGrey,
.b-1-dGrey {
    border-bottom: 1px solid #c6c6c6
}











.b-1-black,
.b-1-l-black {
    border-left: 1px solid #000
}

.b-1-black,
.b-1-r-black {
    border-right: 1px solid #000
}

.b-1-black,
.b-1-t-black {
    border-top: 1px solid #000
}

.b-1-b-black,
.b-1-black {
    border-bottom: 1px solid #000
}

.b-2-black,
.b-2-l-black {
    border-left: 2px solid #000
}

.b-2-black,
.b-2-r-black {
    border-right: 2px solid #000
}

.b-2-black,
.b-2-t-black {
    border-top: 2px solid #000
}

.b-2-b-black,
.b-2-black {
    border-bottom: 2px solid #000
}

.input-b-2-left-side-round {
    border-top-left-radius: var(--xp50);
    border-bottom-left-radius: var(--xp50);
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    border-left: 2px solid #000;
    border-right: none;
    outline: 0;
    padding-left: var(--x10)
}

.input-b-2-left-side-round:focus {
    border-top-left-radius: var(--xp50);
    border-bottom-left-radius: var(--xp50);
    border-top: 2px solid var(--col_blue);
    border-bottom: 2px solid var(--col_blue);
    border-right: 2px solid var(--col_blue);
    border-left: 2px solid var(--col_blue);
    padding-left: var(--x10)
}

.input-b-2-right-side-round {
    border-top-right-radius: var(--xp50);
    border-bottom-right-radius: var(--xp50);
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    border-left: none;
    border-right: 2px solid #000
}

.width-25 {
    width: var(--prv-25)
}

.width-75 {
    width: 75%
}

.width-30 {
    width: 30%
}

.width-70 {
    width: 70%
}

.width-20 {
    width: var(--prv-20)
}

.width-80 {
    width: var(--prv-80)
}

.width-33-33 {
    width: var(--prv-33)
}

.width-100 {
    width: var(--prv-100);
    height: auto
}

.width-100-y {
    width: var(--prv-100);
    height: auto;
    overflow-y: auto
}

.width-50 {
    width: var(--prv-50)
}

.width-10 {
    width: 10%
}

.width-90 {
    width: var(--prv-90)
}

.width-60 {
    width: 60%
}

.width-40 {
    width: 40%
}
.width-50x {
    width: var(--xp50)
}
.width-25x {
    width: var(--px25)
}
.width-40x {
    width: var(--px40)
}
.width-60x {
    width: var(--xp60)
}

.width-80x {
    width: var(--x80)
}
.width-90x {
    width: var(--x90)
}
.width-100x {
    width: var(--x100)
}

.width-150x {
    width: var(--x150)
}



.width-200x {
    width: var(--px200)
}

.width-250x {
    width: var(--px250)
}
.width-270x {
    width: 270px
}

.width-300x {
    width: 300px
}

.width-350x {
    width: 350px
}

.width-400x {
    width: 400px
}
.width-450x {
    width: 450px
}
.width-500x {
    width: 500px
}

.hit-auto {
    height: auto!important;
}
.hit-10 {
    height: var(--x10)
}
.hit-15 {
    height: var(--xp15)
}

.hit-20 {
    height: var(--xp20)
}

.hit-25 {
    height: 25px
}

.hit-30 {
    height: var(--x30)
}

.hit-35 {
    height: 35px
}

.hit-40 {
    height: var(--x40)
}

.hit-45 {
    height: 45px
}

.hit-50 {
    height: var(--xp50)
}

.hit-60 {
    height: var(--xp60)
}

.hit-70 {
    height: var(--xp70)
}
.hit-80 {
    height: var(--x80)
}
.hit-90 {
    height: var(--x90)
}
.hit-100 {
    height: var(--x100)
}
.hit-190 {
    height: 190px
}
.hit-200 {
    height: 200px
}
.hit-210 {
    height: 210px
}
.hit-220 {
    height: 220px
}
.hit-230 {
    height: 230px
}


.hit-150 {
    height: var(--x150)
}
.hit-140 {
    height: 140PX
}
.hit-160 {
    height: var(--x160)
}
.hit-170 {
    height: var(--x170)
}
.hit-180 {
    height: var(--x180)
}

.hit-100p {
    height: var(--prv-100)
}
.hit-130 {
    height: 130px
}
.hit-250 {
    height: var(--px250)
}
.hit-500 {
    height: var(--px500)
}
.min-h-10 {
    min-height: var(--x10)
}
.min-h-20 {
    min-height: var(--xp20)
}
.min-h-30 {
    min-height: var(--x30)
}
.min-h-40 {
    min-height: var(--x40)
}
.min-h-50 {
    min-height: var(--xp50)
}
.min-h-60 {
    min-height: var(--xp60)
}
.min-h-70 {
    min-height: var(--xp70)
}
.min-h-80 {
    min-height: var(--x80)
}
.min-h-90 {
    min-height: var(--x90)
}
.min-h-100 {
    min-height: var(--x100)
}
.min-h-125 {
    min-height: var(--x125)
}
.min-h-150 {
    min-height: var(--x150)
}
.min-h-175 {
    min-height: var(--x175)
}
.min-h-200 {
    min-height: var(--px200)
}
.min-h-225 {
    min-height:  var(--px225)
}
.min-h-250 {
    min-height: var(--px250)
}



.max-h-10 {
    max-height: var(--x10)
}
.max-h-20 {
    max-height: var(--xp20)
}
.max-h-30 {
    max-height: var(--x30)
}
.max-h-40 {
    max-height: var(--x40)
}
.max-h-50 {
    max-height: var(--xp50)
}
.max-h-60 {
    max-height: var(--xp60)
}
.max-h-70 {
    max-height: var(--xp70)
}
.max-h-80 {
    max-height: var(--x80)
}
.max-h-90 {
    max-height: var(--x90)
}
.max-h-100 {
    max-height: var(--x100)
}
.max-h-125 {
    max-height: var(--x125)
}
.max-h-150 {
    max-height: var(--x150)
}
.max-h-175 {
    max-height: var(--x175)
}
.max-h-200 {
    max-height: var(--px200)
}
.max-h-225 {
    max-height:  var(--px225)
}
.max-h-250 {
    max-height: var(--px250)
}
.max-h-300 {
    max-height: var(--px300)
}
.max-h-350 {
    max-height: var(--px350)
}
.max-h-400 {
    max-height: var(--px400)
}
.max-h-450 {
    max-height: var(--px450)
}
.max-h-500 {
    max-height: var(--px500)
}


.test{
    background-color: rgba(73, 73, 73, 0.412);
}




.f-s-8 {
    font-size: 8px;
}
.f-s-9 {
    font-size: 9px
}
.f-s-10 {
    font-size: 10px
}
.f-s-11 {
    font-size:11px
}
.f-s-12 {
    font-size: var(--px12)
}

.f-s-13 {
    font-size: var(--px13)
}

.f-s-14 {
    font-size: var(--px14)
}

.f-s-15 {
    font-size: var(--xp15)
}

.f-s-16 {
    font-size: var(--px16)
}

.f-s-17 {
    font-size: var(--px17)
}

.f-s-18 {
    font-size: var(--px18)
}

.f-s-19 {
    font-size: var(--px19)
}

.f-s-20 {
    font-size: var(--xp20)
}

.f-s-21 {
    font-size: var(--px21)
}

.f-s-22 {
    font-size: var(--px22)
}

.f-s-23 {
    font-size: var(--px23)
}

.f-s-24 {
    font-size: var(--px24)
}

.f-s-25 {
    font-size: var(--px25)
}

.f-s-26 {
    font-size: var(--px26)
}

.f-s-27 {
    font-size: var(--px27)
}

.f-s-28 {
    font-size: var(--px28)
}

.f-s-29 {
    font-size: var(--px29)
}

.f-s-30 {
    font-size: var(--x30)
}

.f-s-31 {
    font-size: var(--px31)
}

.f-s-32 {
    font-size: var(--px32)
}

.f-s-33 {
    font-size: var(--px33)
}

.f-s-34 {
    font-size: var(--px34)
}

.f-s-35 {
    font-size: var(--px35)
}

.f-s-36 {
    font-size: var(--px36)
}

.f-s-37 {
    font-size: var(--px37)
}

.f-s-38 {
    font-size: var(--px38)
}

.f-s-39 {
    font-size: var(--px39)
}

.f-s-40 {
    font-size: var(--x40)
}

.f-s-41 {
    font-size: var(--px41)
}

.f-s-42 {
    font-size: var(--px42)
}

.f-s-43 {
    font-size: var(--px43)
}

.f-s-44 {
    font-size: var(--px44)
}

.f-s-45 {
    font-size: var(--px45)
}

.f-s-46 {
    font-size: var(--px46)
}

.f-s-47 {
    font-size: var(--px47)
}

.f-s-48 {
    font-size: var(--px48)
}

.f-s-49 {
    font-size: var(--px49)
}

.f-s-50 {
    font-size: var(--xp50)
}

.lux-cart-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: #222;
}

/* 2) Item Name (e.g. “Silk Scarf”) */
.lux-item-name {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0.2px;
  color: #333;
}

/* 3) Item Description (small text under name) */
.lux-item-desc {
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #666;
}

/* 4) Subtotal Label (e.g. “Subtotal”) */
.lux-subtotal-label {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  /* text-transform: uppercase; */
  letter-spacing: 0.5px;
  color: #444;
}

/* 5) Subtotal Amount (e.g. “$349.00”) */
.lux-subtotal-amount {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 1px;
  color: #111;
}

/* 6) “Proceed to Checkout” Button Text */


/* 7) “Continue Shopping” Link */
.lux-link-continue {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  text-decoration: underline;
  color: #555;
}

.txt-gradient {
  background: linear-gradient(110deg, #0a8fff, #be4edd 35%, #ff305c 65%, #ff8a00);
  background-clip: text;
  -webkit-background-clip: text; /* For Safari and older Chrome */
  color: transparent;
  -webkit-text-fill-color: transparent; /* For Safari */
  /* display: inline-block; */
  /* font-weight: 700; */
}

.txt-gradient-2 {
  background: linear-gradient(112deg,
    #007CF0 0%,
    #7B61FF 35%,
    #FF5E9E 68%,
    #ffa43c 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* font-weight: 700;
  display: inline-block; */
}

.headline-largest {
  font-size: var(--font-scale-largest);
  /* font-weight: 700; */
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.headline-large {
  font-size: var(--font-scale-large);
  /* font-weight: 700; */
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.headline-medium {
  font-size: var(--font-scale-medium);
  /* font-weight: 600; */
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.headline-small {
  font-size: var(--font-scale-small);
  /* font-weight: 600; */
  line-height: 1.2;
}

.headline-tiny {
  font-size: var(--font-scale-tiny);
  /* font-weight: 500; */
  line-height: 1.3;
}

/* @media (max-width: 480px) {
  .headline-largest { line-height: 1.1; }
  .headline-large { line-height: 1.15; }
} */


.luxury-heading-playfair {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
   
    letter-spacing: 1px;
    /* margin-bottom: 0.5rem; */
    text-transform: uppercase;
    /* luxury-para-lora */
  }

  /* Roman‑inspired all‑caps */
  .luxury-heading-cinzel {
    font-family: 'Cinzel', serif;
    font-weight: 700;
 
    letter-spacing: 2px;
    /* margin-bottom: 0.5rem; */
    text-transform: uppercase;
    /* luxury-para-raleway */
  }

  /* Refined old‑style serif */
  .luxury-heading-cormorant {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
  
    letter-spacing: 0.5px;
    /* margin-bottom: 0.5rem; */
    /* luxury-para-josefin */
  }

  /* Script flourish for logos */
  .luxury-heading-script {
    font-family: 'Great Vibes', cursive;
    font-weight: 400;

    /* margin-bottom: 0.3rem; */
    /* luxury-para-lora */
  }

  /* — Paragraph styles — */

  /* Classic readable serif */
  .luxury-para-lora {
    font-family: 'Lora', serif;
  
    line-height: 1.6;
    /* margin-bottom: 1.5rem; */
  }

  /* Elegant sans with personality */
  .luxury-para-josefin {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
 
    line-height: 1.6;
    /* margin-bottom: 1.5rem; */
  }

  /* Clean modern sans */
  .luxury-para-raleway {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
  
    line-height: 1.6;
    /* margin-bottom: 1.5rem; */
  }


  .luxury-heading-elegant {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 700;
 
    text-transform: uppercase;
    letter-spacing: 1px;
    /* margin-bottom: 0.5rem; */
    color: #222;
  }

  /* Heading: Modern Minimal Sans – Helvetica Neue thin & wide
     Best with .luxury-para-clean */
  .luxury-heading-minimal {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
   
    text-transform: uppercase;
    letter-spacing: 2px;
    /* margin-bottom: 0.5rem; */
    color: #333;
  }

  /* Heading: Luxe Handwritten – Brush Script MT flourish
     Best with .luxury-para-italic */
  .luxury-heading-flourish {
    font-family: 'Brush Script MT', cursive;
    font-weight: 400;

    /* margin-bottom: 0.3rem; */
    color: #111;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  }

  /* Heading: Transitional Hybrid – Lucida Bright italic charm
     Best with .luxury-para-lite */
  .luxury-heading-transitional {
    font-family: 'Lucida Bright', Georgia, serif;
    font-style: italic;
    font-weight: 400;
  
    letter-spacing: 0.5px;
    /* margin-bottom: 0.5rem; */
    color: #222;
  }

  /*—— Paragraph Styles ——*/

  /* Paragraph: Classic Body – Georgia serif readability */
  .luxury-para-classic {
    font-family: Georgia, 'Times New Roman', Times, serif;
   
    line-height: 1.8;
    /* margin-bottom: 1.5rem; */
    color: #555;
  }

  .luxury-heading-voltaire {
    /* pick a crisp, geometric sans‑serif available on most OSes */
    font-family: "Trebuchet MS", Verdana, Tahoma, sans-serif;
    font-weight: 700;                   /* bold strokes */
                     /* adjust as needed */
    text-transform: uppercase;          /* all‑caps */
    letter-spacing: 0.2em;              /* generous spacing */
    line-height: 1.2;                   /* tighten the lines */
    /* subtle text‑stroke for a sharper edge (WebKit only) */
    -webkit-text-stroke: 0.5px #222;
  }
  
  /* — Approximate “Montserrat” paragraph with system‑font + CSS — */
  .luxury-para-montserrat {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;                   /* light weight */
   
    line-height: 1.6;
    /* margin-bottom: 1.5rem; */
    color: #444;
  }


.fst-arial {
    font-family: Arial, Helvetica, sans-serif;
  }

  .fst-verdana {
    font-family: Verdana, Geneva, sans-serif;
  }

  .fst-georgia {
    font-family: Georgia, serif;
  }

  .fst-times {
    font-family: 'Times New Roman', Times, serif;
  }

  .fst-courier {
    font-family: 'Courier New', Courier, monospace;
  }

  .fst-tahoma {
    font-family: Tahoma, Geneva, sans-serif;
  }

  .fst-trebuchet {
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
  }

  .fst-comic {
    font-family: 'Comic Sans MS', cursive, sans-serif;
  }

  .fst-impact {
    font-family: Impact, Charcoal, sans-serif;
  }

  .fst-lucida {
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  }

  .fst-palatino {
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  }

  .fst-garamond {
    font-family: Garamond, serif;
  }

  .fst-bookman {
    font-family: 'Bookman Old Style', serif;
  }

  .fst-arial-black {
    font-family: 'Arial Black', Gadget, sans-serif;
  }

  .fst-avant-garde {
    font-family: 'Avant Garde', sans-serif;
  }

  .fst-geneva {
    font-family: Geneva, Tahoma, sans-serif;
  }

  .fst-helvetica {
    font-family: Helvetica, sans-serif;
  }

  .fst-lucida-console {
    font-family: 'Lucida Console', Monaco, monospace;
  }

  .fst-perpetua {
    font-family: Perpetua, serif;
  }

  .fst-roboto {
    font-family: 'Roboto', sans-serif;
  }

  .fst-open-sans {
    font-family: 'Open Sans', sans-serif;
  }

  .fst-lato {
    font-family: 'Lato', sans-serif;
  }

  .fst-oswald {
    font-family: 'Oswald', sans-serif;
  }

  .fst-merriweather {
    font-family: 'Merriweather', serif;
  }

  .fst-pt-sans {
    font-family: 'PT Sans', sans-serif;
  }

  .fst-raleway {
    font-family: 'Raleway', sans-serif;
  }

  .fst-noto-sans {
    font-family: 'Noto Sans', sans-serif;
  }





.f-w-b {
    font-weight: var(--dvl700)
}

.f-w-600 {
    font-weight: var(--dvl600)
}
.f-w-400 {
    font-weight: 400
}

.text-hover-blue:hover {
    color: var(--col_blue);
    cursor: pointer
}

.text-hover-orange:hover {
    color: var(--col_orange)
}

.text-hover-blue-orange {
    color: var(--col_blue);
    cursor: pointer
}

.text-hover-blue-orange:hover {
    color: var(--col_orange);
   
}

.text-hover-orange-blue {
    color: var(--col_orange);
    cursor: pointer
}

.text-hover-orange-blue:hover {
 
    color: var(--col_blue);
}

.text-hover-green-orange {
    color: #00bfaf;
    cursor: pointer
}

.text-hover-green-orange:hover {
    color: var(--col_orange)
}

.text-hover-black-blue {
    color: var(--col_black);
    cursor: pointer
}

.text-hover-black-blue:hover {
    color: var(--col_blue);
    cursor: pointer
}
.bt-red-dark-hover {
    background-color: var(--col_red);
    color: #fff;
}
.bt-red-dark-hover:hover {
    background-color: var(--col_red_d);
}
.bt-red {
    background-color: #ffb0b0;
    color: #000000;
}
.bt-red:hover {
     background-color: #d72b2b;
      color: #ffffff;
}
.bt-l-red {
    background-color: #ffe4e4;
    color: #000000;
}
.bt-l-red:hover {
     background-color: #ffcccc;
}
.bt-orange-dark-hover {
    background-color: var(--col_orange)
}

.bt-orange-dark-hover:hover {
    background-color: var(--col_orange_hovd)
}
.bt-orange {
    background-color: var(--col_orange)
}

.bt-orange:hover {
    background-color: var(--col_orange_hovd)
}
.bt-green {
    background-color: #2da49d;
    color: #ffffff
}

.bt-green:hover {
    background-color: #279089
}


.bt-purple {
 background:#6B46FF; color:#fff; box-shadow:0 8px 20px rgba(107,70,255,0.12);
}
.bt-purple:hover {
 background:#8465ff; color:#fff; box-shadow:0 8px 20px rgba(107,70,255,0.12);
}
.bt-purple-magical {
  background: -o-linear-gradient(315deg, #9b5de5, #6a00f4);
  background: linear-gradient(135deg, #9b5de5, #6a00f4);
  color: #fff;
  text-align: center;
  /* font-size: 1.1rem; */
  font-weight: 600;

  border: none;
  border-radius: 12px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-box-shadow: 0 4px 12px rgba(155, 93, 229, 0.4);
          box-shadow: 0 4px 12px rgba(155, 93, 229, 0.4);
}

.bt-purple-magical:hover {
  background: -o-linear-gradient(315deg, #b673f8, #7a1efc);
  background: linear-gradient(135deg, #b673f8, #7a1efc);
  -webkit-box-shadow: 0 6px 18px rgba(155, 93, 229, 0.6);
          box-shadow: 0 6px 18px rgba(155, 93, 229, 0.6);
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}


/* .button_base {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    padding: 12px 28px;
    border: none;
    cursor: pointer;
    transition: all 0.4s ease;
    border-radius: 4px;
    text-transform: uppercase;
  }
  
  /* Black luxury button */
  /* .button_base, .bt-black  {
 
    background-color: #000;
    color: #fff;
    border: 1px solid transparent;
  }  */






 




  .bt-black-lux {
    /* display: inline-block; */
    text-align: center;
    background-color: #000;
    color: #fff;
   
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
            transform-origin: center center;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
 
  }
 

  .bt-black-lux:hover {
    -webkit-transform: scale(0.95);
        -ms-transform: scale(0.95);
            transform: scale(0.95);
  }

  .bt-black-bold {
    /* display: inline-block; */
    text-align: center;
    background-color: #000;
    color: #fff;
   
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
            transform-origin: center center;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
 
  }
 

  .bt-black-bold:hover {
 background-color: #0f0f0f;
  }

  .bt-white-lux {
    /* display: inline-block; */
    text-align: center;
    background-color: #ffffff;
    color: #000000;
     /* -webkit-box-shadow: 2px 5px 5px 2px rgba(0, 0, 0, 0.206);
        -moz-box-shadow: 2px 5px 5px 2px rgba(0, 0, 0, 0.206);
        box-shadow: 2px 5px 5px 2px rgba(0, 0, 0, 0.206); */
      border: 1px solid #878787 ;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    cursor: pointer;
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
            transform-origin: center center;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
 
  }
 

  .bt-white-lux:hover {
    -webkit-transform: scale(0.95);
        -ms-transform: scale(0.95);
            transform: scale(0.95);
  }
  .bt-grey-lux {
    /* display: inline-block; */
    text-align: center;
    background-color: #e1e1e1;
    color: #000000;
     /* -webkit-box-shadow: 2px 5px 5px 2px rgba(0, 0, 0, 0.206);
        -moz-box-shadow: 2px 5px 5px 2px rgba(0, 0, 0, 0.206);
        box-shadow: 2px 5px 5px 2px rgba(0, 0, 0, 0.206); */
      border: 1px solid #e1e1e1 ;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    cursor: pointer;
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
            transform-origin: center center;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
 
  }
 

  .bt-grey-lux:hover {
    -webkit-transform: scale(0.95);
        -ms-transform: scale(0.95);
            transform: scale(0.95);
  }
 


.bt-disable{
    border:1px solid rgb(221, 221, 221);
        color: #a4a4a4;
        background-color:#ededed;
        font-weight: 600;

}

.bt-black{
    border:1px solid rgb(0, 0, 0);
        color: #ffffff;
        background-color:#000000;
        font-weight: 600;
    
}

.bt-black:hover { 
  background-color:#232323;
 }
.bt-downgrade{
    border:1px solid rgb(0, 0, 0);
        color: #ffffff;
        background-color:#9AA08A;
        font-weight: 600;
    
}

.bt-downgrade:hover { 
  background-color:#b0b4a4;
 }






  /* .bt-black:hover {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
  } */

  .button_base, .bt-white  {
    /* composes: button_base; */
    background-color: var(--col_white);
    color: #000;
    border: 1px solid #000;
  }

  .bt-white:hover {

    background-color: #000;
    color: var(--col_white);
    border: 1px solid var(--col_white);
  }









.bt-blue-dark-hover {
    background-color: var(--bt_blue);
    color: white;
    
}

.bt-blue-dark-hover:hover {
    background-color: var(--bt_blue_hovd);
}

.bt-grey-dark-hover {
    background-color: var(--bt_grey);
}

.bt-grey-dark-hover:hover {
    background-color: var(--bt_grey_hovd);
}
.bt-grey {
    background-color: var(--bt_grey);
}

.bt-grey:hover {
    background-color: var(--bt_grey_hovd);
}
.bt-l-blue {
   background-color: #c8e6ff;
}

.bt-l-blue:hover {
    background-color: #a3d5ff;
}


.bt-l-green {
   background-color: #d9ffea;
}

.bt-l-green:hover {
   background-color: #c1ffdd;
}

.bt-grey-hover:hover {
    background-color: var(--bt_grey2_hovd);
}

.bt-blue-hover:hover {
    background-color: var(--col_blue);
    color: var(--txt_w);
}
.bt-blue {
    background-color: var(--col_blue);
    color: var(--txt_w);
}
.bt-blue:hover {
    background-color: var(--bt_blue_hovd);

    
}

.bt-yellow-dark-hover {
    background-color: var(--bt_yellow);
}

.bt-yellow-dark-hover:hover {
    background-color: var(--bt_yellow_hovd);
}
.bt-yellow {
    background-color: var(--bt_yellow);
}

.bt-yellow:hover {
    background-color: var(--bt_yellow_hovd);
}

.bt-bluishgreen-dark-hover {
    background-color: var(--bt-bluishgreen);
}

.bt-bluishgreen-hover:hover {
    background-color: var(--bt-bluishgreen_hovd);
}

.bt-lightgrey-hover:hover {
    background-color:  var(--bt-lightgrey_hovd);
}




.image-wrapper {

  
position: relative;
  overflow-x: hidden;   /* Hide horizontal overflow */
  overflow-y: visible;

}





.text-blue {
    color: var(--txt_blue);
}

.text-green {
    color: var(--txt_green);
}
.text-orange {
    color: var(--col_orange)
}
.text-Red {
    color: var(--col_red)
}
.text-red {
    color: var(--col_red)
}
.text-reda {
    color: var(--col_reda)
}

.text-light-black {
    color: var(--col_lblack)
}

.text-silver-grey {
    color: var(--txt_sblack)
}

.text-white {
    color: var(--txt_w)
 
}
.stroke-white{
-webkit-text-stroke: 0.5px #ffffff;  
}
.text-purple {
    color: var(--txt_prpl)
}

.text-grey {
    color: var(--txt_g)
}

.text-dgrey {
    color: var(--txt_dg)
}

.line-n {
    line-height: var(--lnn)
}



.line-90 {
    line-height: var(--prv-90)
}

.line-80 {
    line-height: var(--prv-80)
}

.line-150 {
    line-height: var(--prv-150)
}

.line-200 {
    line-height: var(--prv-200)
}

.line-250 {
    line-height: var(--prv-250)
}

.line-300 {
    line-height: var(--prv-300)
}



.break-word {
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    word-break: break-all; 
  }
.img-auto-fit {
    max-width: var(--prv-100);
    max-height: var(--prv-100);
    display: var(--db);
    vertical-align: middle
}

.im-nre {
    background-repeat: no-repeat
}

.im-re {
    background-repeat: repeat
}

.im-po-c {
    background-position: var(--pos_c)
}



.NOellip,
.line-1-ellip,
.line-2-ellip,
.line-3-ellip,
.line-4-ellip,
.line-5-ellip {

  /* display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;            
  text-overflow: ellipsis;     
  white-space: normal;         
  word-break: break-word; */

    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: var(--hdn);
    -o-text-overflow: var(--elpv);
       text-overflow: var(--elpv);
    white-space: normal
}

.line-1-ellip {
    -webkit-line-clamp: 1
}

.line-2-ellip {
    -webkit-line-clamp: 2
}

.line-3-ellip {
    -webkit-line-clamp: 3
}

.line-4-ellip {
    -webkit-line-clamp: 4
}

.line-5-ellip {
    -webkit-line-clamp: 5
}


/* .line-2-ellip::after,
.line-3-ellip::after,
.line-4-ellip::after,
.line-5-ellip::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 1.2em; 
  width: 40%;    
  background: linear-gradient(to right, transparent, #fff);
} */








.ph-ellip-1::-webkit-input-placeholder{
    
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    
}








.ph-ellip-1::-moz-placeholder{
    
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    
}








.ph-ellip-1:-ms-input-placeholder{
    
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    
}








.ph-ellip-1::-ms-input-placeholder{
    
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    
}








.ph-ellip-1::placeholder{
    
        white-space: nowrap;
        overflow: hidden;
        -o-text-overflow: ellipsis;
           text-overflow: ellipsis;
    
}

.b-2-blue-hover:hover {
    border: 2px solid var(--col_blue)
}

.b-2-blue{
    border: 2px solid var(--col_blue)
}

.b-2-black-hover:hover {
    border: 2px solid #000
}

.b-3-blue-hover:hover {
    border: 3px solid var(--col_blue)
}





.text-hover-black {
  color: #888888; /* Soft luxury grey */
  text-decoration: none;
  -webkit-transition: color 0.3s ease, -webkit-text-decoration-color 0.3s ease;
  transition: color 0.3s ease, -webkit-text-decoration-color 0.3s ease;
  -o-transition: color 0.3s ease, text-decoration-color 0.3s ease;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
  transition: color 0.3s ease, text-decoration-color 0.3s ease, -webkit-text-decoration-color 0.3s ease;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  -webkit-text-decoration-color: transparent;
          text-decoration-color: transparent;
  cursor: pointer;
}

.text-hover-black:hover {
  color: #000000; /* Smooth transition to black */
  text-decoration: underline;
  -webkit-text-decoration-color: #000000;
          text-decoration-color: #000000;
}



.b-2-gray-dark-hover {
    border: 2px solid var(--col_grey)
}
.b-2-dark-grey {
    border: 2px solid var(--col_drkgrey)
}

.b-2-gray-dark-hover:hover {
    border: 3px solid var(--col_grey_d)
}

.t-c {
    text-align: var(--pos_c)
}

.t-l {
    text-align: left
}

.t-r {
    text-align: right
}

.b-2-blue-focus:focus {
    border: 2px solid var(--col_blue)
}

.b-2-black-focus:focus {
    border: 2px solid #000
}

.b-3-blue-focus:focus {
    border: 3px solid var(--col_blue)
}

.b-2-r-5-black,
.border-2,
.rds-5 {
    border-radius: var(--x5)
}


.rds-t-10{
    border-top-left-radius: var(--xp10); 
    border-top-right-radius: var(--xp10); 
}
.rds-b-10{
    border-bottom-left-radius: var(--xp10); 
    border-bottom-right-radius: var(--xp10); 
}
.rds-t-15{
    border-top-left-radius: var(--xp15); 
    border-top-right-radius: var(--xp15); 
}
.rds-b-15{
    border-bottom-left-radius: var(--xp15); 
    border-bottom-right-radius: var(--xp15); 
}
.rds-t-20{
    border-top-left-radius: var(--xp20); 
    border-top-right-radius: var(--xp20); 
}
.rds-b-20{
    border-bottom-left-radius: var(--xp20); 
    border-bottom-right-radius: var(--xp20); 
}
.rds-t-25{
    border-top-left-radius: 25px; 
    border-top-right-radius: 25px; 
}
.rds-b-25{
    border-bottom-left-radius: 25px; 
    border-bottom-right-radius: 25px; 
}
.rds-t-50{
    border-top-left-radius: var(--xp50); 
    border-top-right-radius: var(--xp50); 
}
.rds-b-50{
    border-bottom-left-radius: var(--xp50); 
    border-bottom-right-radius: var(--xp50); 
}
.border-3,
.rds-10 {
    border-radius: var(--x10)
}

.rds-15 {
    border-radius: var(--xp15)
}

.rds-20 {
    border-radius: var(--xp20)
}
.rds-25 {
    border-radius: 25px
}

.rds-50 {
    border-radius: var(--xp50)
}

.o-y {
    overflow-y: auto
}

.o-x {
    overflow-x: auto
}

.o-y-h {
    overflow-y: var(--hdn)
}

.o-x-h {
    overflow-x: var(--hdn)
}

.o-y-x {
    overflow: auto
}
.o-a {
    overflow: auto
}

.o-h {
    overflow: var(--hdn)
}

.o-x-s {
    overflow-x: scroll
}

.o-y-s {
    overflow-y: scroll
}

.b-2-lightblack {
    border: 2px solid var(--col_grey_d)
}

.bg-w {
    background-color: #fff
}
.bg-black {
    background-color: rgb(0, 0, 0)
}

.bg-black-tra1{
    background-color: rgba(73, 73, 73, 0.583);
}
.bg-black-tra2{
    background-color: rgba(73, 73, 73, 0.37);
}
.bg-black-blur{
    
background: rgba(0, 0, 0, 0.584);
-webkit-box-shadow: 0 4px var(--x30) rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px var(--x30) rgba(0, 0, 0, 0.1);
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
/* border: 1px solid rgba(0, 0, 0, 0.3); */
}

.bg-blur{
    backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.bg-white-blur {
    /* make it translucent so you see what's behind */
    background: rgba(255, 255, 255, 0.5);
  
    /* the magic blur of whatever's behind the element */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  
    /* optional polish */
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); */
    contain: none; /* Ensure full layout containment */
  -webkit-transform: translateZ(0);
          transform: translateZ(0); /* Trigger new composite layer */
  }




.square {
  aspect-ratio: 1 / 1;
  width: min(100%, 100%);
  height: auto;
 
}


.bg-black-blur-2{
    
background: rgba(0, 0, 0, 0.72);
-webkit-box-shadow: 0 4px var(--x30) rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px var(--x30) rgba(0, 0, 0, 0.1);
backdrop-filter: blur(9.8px);
-webkit-backdrop-filter: blur(9.8px);
/* border: 1px solid rgba(0, 0, 0, 0.3); */
}

.bg-lgrey {
    background-color: #ededed
}
.bg-l-grey {
    background-color: #f7f7f7
}

.bg-snowb {
    background-color: #f0f8ff
}

.bg-grey {
    background-color: var(--col_grey)
}

.bg-sbg {
    background-color: #f1f1f1
}
.bg-d-grey {
    background-color: #c3c3c3
}
.bg-d-black {
    background-color: #303030
}

.bg-slg {
    background-color: #f0f0f0
}


.bg-l-blue{
background-color: #c8e6ff;
}
.bg-l-blue2{
background-color: #F8FAFC;
}

.bg-blue{
background-color: var(--col_blue);
}
.bg-hov-blue:hover{
background-color: var(--col_blue);
color: white;
}

.bg-hov-black:hover{
background-color: rgb(15, 15, 15)!important;
color: white;
}

.bg-l-pink {
    background-color: #ffdcdc;
}
.bg-red {
    background-color: #c20000;
}
.bg-l-red {
    background-color: #ff5c5c;
}

.bg-green {
    background-color: #2da49d;
}
.bg-green-2 {
    background-color: green;
}
.bg-l-green-1 {
    background-color: #d9ffea;
}

.bg-l-green-2{
    background-color: #f4fbf9;
    }
.bg-orange {
    background-color: var(--col_orange);
}
.bg-l-orange {
    background-color: rgb(255, 196, 86);
}
.bg-yellow {
    background-color: #FFFF00;
}

.bg-l-yellow {
    background-color: #ffffa9;
}
.bg-purple {
    background-color: #800080;
}
.bg-l-purple {
    background-color: #B19CD9;
}
.bg-l-orange {
    background-color: var(--col_l_orange);
    /* background-color: rgb(255, 230, 183); */
}

/*  mode */

.base-1-white {
   
    background-color: var(--m-basic-1);
}
.base-2-ivory {
 
    background-color: 	var(--m-basic-2);
}

.base-3-gainsboro {
 
    background-color: 	var(--m-basic-3)
}
.base-4-light-gray {
 
    background-color: var(--m-basic-4);
}
.base-5-silver {
 
    background-color: var(--m-basic-5);
}

.base-6-dim-gray {
 
    background-color: var(--m-basic-6);
}
.base-7-dark-gray {
 
    background-color: var(--m-basic-7);
}
.base-8-light-slate-gray {
 
    background-color: var(--m-basic-8);
}
.base-9-slate-gray {
 
    background-color: var(--m-basic-9);
}



/* mode end */

.uns {
    -webkit-user-select: var(--non);
       -moz-user-select: var(--non);
        -ms-user-select: var(--non);
            user-select: var(--non);
  }

.flx-con,
.flx-c-around,
.flx-con-nw,
.flx-wrap {
    display: var(--dflx)
}

.flx-con-nw,
.flx-nw {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
}

.flx-di-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column
}

.flx-di-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row
}
.flx-start-top {
 
    -webkit-box-pack: start;
 
        -ms-flex-pack: start;
 
            justify-content: flex-start;
}
.flx-start-bottom {
  
    -webkit-box-pack: end;
  
        -ms-flex-pack: end;
  
            justify-content: flex-end;
}
.flx-item-center {
  
    -webkit-box-align: center;
  
        -ms-flex-align: center;
  
            align-items: center;
}


.flx-gap-15{
    gap: 15px;
}
.top-this-item{
    
    position: absolute; /* Position it explicitly */
    top: 0; /* Stick it to the top of the container */
    left: 50%; /* Center it horizontally */
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); /* Adjust for centering */
  
   

}
.flx-di-col-re {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse
}

.flx-di-row-re {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse
}

.flx-wrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap
}

.flx-c,
.flx-c-around {
    -webkit-box-pack: var(--pos_c);
        -ms-flex-pack: var(--pos_c);
            justify-content: var(--pos_c)
}

.flx-e {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end
}

.flx-s {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start
}

.flx-space-a {
    -ms-flex-pack: distribute;
        justify-content: space-around
}

.flx-space-b {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between
}

.flx-c-around {
    -webkit-box-align: var(--pos_c);
        -ms-flex-align: var(--pos_c);
            align-items: var(--pos_c)
}

.flx-box-2 {
    -webkit-box-flex: var(--prv-50);
        -ms-flex: var(--prv-50);
            flex: var(--prv-50);
    max-width: var(--prv-50)
}

.flx-box-3 {
    -webkit-box-flex: var(--prv-33);
        -ms-flex: var(--prv-33);
            flex: var(--prv-33);
    max-width: var(--prv-33)
}

.flx-box-4 {
    -webkit-box-flex: var(--prv-25);
        -ms-flex: var(--prv-25);
            flex: var(--prv-25);
    max-width: var(--prv-25)
}

.flx-box-5 {
    -webkit-box-flex: var(--prv-20);
        -ms-flex: var(--prv-20);
            flex: var(--prv-20);
    max-width: var(--prv-20)
}

.flx-box-6 {
    -webkit-box-flex: var(--prv-16_66);
        -ms-flex: var(--prv-16_66);
            flex: var(--prv-16_66);
    max-width: var(--prv-16_66)
}

.flx-box-7 {
    -webkit-box-flex: var(--prv-14_e);
        -ms-flex: var(--prv-14_e);
            flex: var(--prv-14_e);
    max-width: var(--prv-14_e)
}

.flx-box-8 {
    -webkit-box-flex: var(--prv-12_e);
        -ms-flex: var(--prv-12_e);
            flex: var(--prv-12_e);
    max-width: var(--prv-12_e)
}

.flx-gap-fill,
.flx-remaining-gap-fill,
.flx-remaining
{
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}
.ta-con {
    display: table
}

.ta-cell {
    display: b table-cell
}

.vart-mid {
    vertical-align: middle
}

.vart-bot {
    vertical-align: bottom
}

.vart-top {
    vertical-align: top
}


/*css start here */

.min-width-320 {
    min-width: 320px;
    /* height: auto; */
   
}

.truck-p-c {
    background-color: #494949;
}



.text-area-adjusting {
    min-height: var(--x100);
    max-height: var(--x100);
    min-width: var(--prv-100);
    max-width: var(--prv-100);
}

.width-mx {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}
.hit-mx {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
}
.hit-mn {
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
}
.width-mn {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
}

.width-mx-150 {
    max-width: 150px!important;
    width: 150px;
}
.width-mx-300 {
    max-width: 300px!important;
    width: 300px;
}
.width-mx-350 {
    max-width: 350px!important;
    width: 350px;
}
.width-mx-400 {
    max-width: 400px!important;
    width: 400px;
}

.width-mx-500 {
    /* flex: 1 0 auto!important; */
    /* width: 500px; */
    max-width: 500px;
}

.mx-w,
.width-mx-600 {
    max-width: 600px!important;
    width: 600px;
}

.width-mx-700 {
    max-width: 700px!important;
    width: 700px;
}
.width-mx-800 {
    max-width: 800px!important;
    width: 800px;
}


.container {
    display: var(--dflx);
}


.width-mn-100 {
   
    min-width: 100px;
}
.width-mn-200 {
    min-width: 200px;
}
.width-mn-300 {
    min-width: 300px;
}

.min-w,
.width-mn-1000 {
    min-width: 1000px;
}




/*ANGOMAN CLASSES END HERE*/


.b-2-yellow-hover:hover {
     border: 2px solid #ffed56
}



.text-l-green{
    color:#00d4af;
}
.borderred {
    border: 3px solid var(--b_red);
    
}
.borderred:focus {
    border: 3px solid var(--b_red);
}

.width-130x {
    width: 130px;
   
}

.width-160x {
    width: var(--x160);
   
}

.width-170x {
    width: var(--x170);
}

.width-180x {
    width: var(--x180);
}

.bt-gray-dark-hover-1{
    background-color: grey;
    }
    .bt-gray-dark-hover-1:hover{
    background-color: rgba(128, 128, 128, 0.709);
    }
    .width-350x{
        width: 350px;
    }
    .width-250x{
        width: var(--px250);
    }
    .pos-r{
        position: var(--pos_r);;
    }
    .pos-s{
        position: var(--pos_s);
    }
    .pos-a{
        position: var(--pos_a);
    }
.event-none,.click-throw{
    pointer-events: none
}
    .textarea-fit{
        min-width: var(--prv-100);
        max-width: var(--prv-100);
        min-height: var(--x100);
        max-height: 1000px;
    }



    .shadow-1{
        -webkit-box-shadow: 2px 5px 5px 2px rgba(0, 0, 0, 0.206);
        box-shadow: 2px 5px 5px 2px rgba(0, 0, 0, 0.206);
      
     
            /* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); horizontal-offset vertical-offset blur-radius color */
     
    }

    .shadow{
        -webkit-box-shadow: 8px 8px 25px var(--px12) rgba(0,0,0,0.43);
        box-shadow: 8px 8px 25px var(--px12) rgba(0,0,0,0.43);
            
    }

    .shadow-l{
        -webkit-box-shadow: -13px 1px 47px -11px rgba(0,0,0,0.206);
        box-shadow: -13px 1px 47px -11px rgba(0,0,0,0.206);
            
    }
    .shadow-u{
        -webkit-box-shadow: -2px -12px 25px -6px rgba(0,0,0,0.36);
        box-shadow: -2px -12px 25px -6px rgba(0,0,0,0.36);
    }


    /* ////////////// */



    .smooth-bottom{
        -webkit-transition: bottom 0.2s ease-in-out;
        -o-transition: bottom 0.2s ease-in-out;
        transition: bottom 0.2s ease-in-out;
    }

    .smooth-height{
   
        -webkit-transition: max-height 0.5s ease-in-out;
   
        -o-transition: max-height 0.5s ease-in-out;
   
        transition: max-height 0.5s ease-in-out;
    }
    .smooth-opacity{
   
        -webkit-transition: opacity 0.3s ease;
   
        -o-transition: opacity 0.3s ease;
   
        transition: opacity 0.3s ease;
    }

    
    @-webkit-keyframes fadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
      }

    
    @keyframes fadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
      }
      
      @-webkit-keyframes fadeOut {
        from { opacity: 1; }
        to   { opacity: 0; }
      }
      
      @keyframes fadeOut {
        from { opacity: 1; }
        to   { opacity: 0; }
      }
    .fade-init {
        opacity: 0;
      }
      
     
      /* 3) Class that kicks off the fadeIn */
      .fade-in {
        -webkit-animation-name: fadeIn;
                animation-name: fadeIn;
        -webkit-animation-duration: 0.6s;
                animation-duration: 0.6s;
        -webkit-animation-timing-function: ease-in-out;
                animation-timing-function: ease-in-out;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
      }



.black-card-hover {
 
  -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
 
  transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
 
  -o-transition: transform 0.3s ease, box-shadow 0.3s ease;
 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
 
  transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
}

.black-card-hover:hover {
  -webkit-transform: translateY(-6px);
      -ms-transform: translateY(-6px);
          transform: translateY(-6px);
  -webkit-box-shadow: 0 8px 20px rgba(255, 255, 255, 0.924);
          box-shadow: 0 8px 20px rgba(255, 255, 255, 0.924);
}
.card-expanded-init {
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1;
}

.card-expanded-init.expanded {
  position: fixed;
  margin: 0;
  z-index: 9999;
  border-radius: 0;
  -webkit-box-shadow: 0 0 40px 10px white;
          box-shadow: 0 0 40px 10px white;
}   
      
      /* 2) Class that kicks off the fadeOut */
      .fade-out {
        -webkit-animation-name: fadeOut;
                animation-name: fadeOut;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
      }

@-webkit-keyframes fadeGlow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes fadeGlow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Base dot styling */

/* Active-state fade animation */
.status-heartbeat {
  -webkit-animation: fadeGlow 1.2s ease-in-out infinite;
          animation: fadeGlow 1.2s ease-in-out infinite;
}

@-webkit-keyframes pulse {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }
}

@keyframes pulse {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }
}

/* Base dot styling */


/* Active-state pulse animation */
.status-pulse {
  -webkit-animation: pulse 2s ease-in-out infinite;
          animation: pulse 2s ease-in-out infinite;
}
 .zoom-out-image {
      display: block;
      width: 100%;
      height: auto;
      -webkit-transform: scale(2);
          -ms-transform: scale(2);
              transform: scale(2); /* start zoomed in */
      -webkit-animation: zoomToNormal 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
              animation: zoomToNormal 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    @-webkit-keyframes zoomToNormal {
      from {
        -webkit-transform: scale(2);
                transform: scale(2);
      }
      to {
        -webkit-transform: scale(1);
                transform: scale(1);
      }
    }

    @keyframes zoomToNormal {
      from {
        -webkit-transform: scale(2);
                transform: scale(2);
      }
      to {
        -webkit-transform: scale(1);
                transform: scale(1);
      }
    }






    .opacity-0{
   
        opacity: 0;
    }
    .opacity-1{
   
        opacity: 1;
    }



    
    .smooth-zoom{
        -webkit-transition: -webkit-transform 0.3s ease;
        transition: -webkit-transform 0.3s ease;
        -o-transition: transform 0.3s ease;
        transition: transform 0.3s ease;
        transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    }


      
      .zoom-in {
        -webkit-transform: scale(1.2);
            -ms-transform: scale(1.2);
                transform: scale(1.2);
      }
      .zoom-out {
        -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
                transform: scale(0.5);
      }
      .zoom-normal {
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1); 
      }

.zoomOUT-instant {
-webkit-transform: scale(0);
    -ms-transform: scale(0);
        transform: scale(0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}
.zoomOUT-smooth {
 -webkit-transform: scale(0);
     -ms-transform: scale(0);
         transform: scale(0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
}
/* This class shows the element smoothly */
.zoomIN-smooth {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
}



.my-item {
  overflow: hidden; 
  /* (You can add other styling—borders, background, padding, etc.—here.) */
}

/* 1) Collapsed state: no height, no width, invisible */
.item-collapsed {
     overflow: hidden;



  max-height: 0;
  max-width: 0;
  opacity: 0;
  /* Remove padding so nothing “peeks” out: */
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  /* Smoothly animate these properties when changing in/out of `.collapsed`: */
  -webkit-transition: 
    max-height 0.3s ease, 
    max-width 0.3s ease, 
    opacity 0.3s ease,
    padding 0.3s ease;
  -o-transition: 
    max-height 0.3s ease, 
    max-width 0.3s ease, 
    opacity 0.3s ease,
    padding 0.3s ease;
  transition: 
    max-height 0.3s ease, 
    max-width 0.3s ease, 
    opacity 0.3s ease,
    padding 0.3s ease;
}

/* 2) Expanded state: big max-height/max-width so content shows */
.item-expanded {
     overflow: hidden;


  /* Choose values ≥ the element’s possible content size. */
  max-height: 1000px; 
  max-width: 1000px;
  opacity: 1;
  /* Restore whatever padding you normally want: */
  padding-top: 10px;    /* example padding */
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-transition: 
    max-height 0.3s ease, 
    max-width 0.3s ease, 
    opacity 0.3s ease,
    padding 0.3s ease;
  -o-transition: 
    max-height 0.3s ease, 
    max-width 0.3s ease, 
    opacity 0.3s ease,
    padding 0.3s ease;
  transition: 
    max-height 0.3s ease, 
    max-width 0.3s ease, 
    opacity 0.3s ease,
    padding 0.3s ease;
}





    @-webkit-keyframes add-anim {
        from {
            -webkit-transform: scale(0);
                    transform: scale(0);
            opacity: 0;
        }
        to {
            -webkit-transform: scale(1);
                    transform: scale(1);
            opacity: 1;	
        }
    }





    @keyframes add-anim {
        from {
            -webkit-transform: scale(0);
                    transform: scale(0);
            opacity: 0;
        }
        to {
            -webkit-transform: scale(1);
                    transform: scale(1);
            opacity: 1;	
        }
    }
    
    /* animate new box */

    .anim-scale {
        animation: add-anim .1s linear;
        -webkit-animation: add-anim .1s linear;
}

.anim-zoom-in-out{
    -webkit-animation: zoomInOut 5s infinite;
            animation: zoomInOut 5s infinite;
}

@-webkit-keyframes zoomInOut {
    0%, 100% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.2);
                transform: scale(1.2);
    }
}

@keyframes zoomInOut {
    0%, 100% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.2);
                transform: scale(1.2);
    }
}

.anim-image-zoom {
    -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    -o-transition: transform 0.5s ease, opacity 0.5s ease;
    transition: transform 0.5s ease, opacity 0.5s ease;
    transition: transform 0.5s ease, opacity 0.5s ease, -webkit-transform 0.5s ease;
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
            transform-origin: center center;
    /* visibility: hidden; */
    opacity: 0;
}

.anim-image-zoom.anim-image-zoomed {
    opacity: 1;
    /* visibility: visible; */
}


.anim-fade-infade-out {
    /* Set the initial opacity */
    opacity: 0;
    
    /* Set up the animation */
    -webkit-animation: fadeInOut 4s ease-in-out infinite;
            animation: fadeInOut 4s ease-in-out infinite;
}

/* Define the keyframes for the fade-in and fade-out animation */
@-webkit-keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


.skeleton {
	background-color: #e2e5e7;
	background-image: -webkit-gradient(
		linear,
		left top, right top,
		from(rgba(255, 255, 255, 0)), 
		color-stop(rgba(255, 255, 255, 0.5)), 
		to(rgba(255, 255, 255, 0))
	);
	background-image: -o-linear-gradient(
		left,
		rgba(255, 255, 255, 0), 
		rgba(255, 255, 255, 0.5), 
		rgba(255, 255, 255, 0)
	);
	background-image: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0), 
		rgba(255, 255, 255, 0.5), 
		rgba(255, 255, 255, 0)
	);
	background-size: 40px 100%;
	background-repeat: no-repeat;
	background-position: left -40px top 0;
	-webkit-animation: shine1 1s ease infinite;
	        animation: shine1 1s ease infinite;
}
.skeletonSHINE {

	background-image: -webkit-gradient(
		linear,
		left top, right top,
		from(rgba(255, 255, 255, 0)), 
		color-stop(rgba(255, 255, 255, 0.5)), 
		to(rgba(255, 255, 255, 0))
	);
	background-image: -o-linear-gradient(
		left,
		rgba(255, 255, 255, 0), 
		rgba(255, 255, 255, 0.5), 
		rgba(255, 255, 255, 0)
	);
	background-image: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0), 
		rgba(255, 255, 255, 0.5), 
		rgba(255, 255, 255, 0)
	);
	background-size: 40px 100%;
	background-repeat: no-repeat;
	background-position: left -40px top 0;
	-webkit-animation: shine1 1s ease infinite;
	        animation: shine1 1s ease infinite;
}

@-webkit-keyframes shine1 {
	to {
		background-position: right -40px top 0;
	}
}

@keyframes shine1 {
	to {
		background-position: right -40px top 0;
	}
}







.flex-center{
    display: var(--dflx);
    -webkit-box-pack: var(--pos_c);
        -ms-flex-pack: var(--pos_c);
            justify-content: var(--pos_c);
    -webkit-box-align: var(--pos_c);
        -ms-flex-align: var(--pos_c);
            align-items: var(--pos_c);
}
.flex-center-hor{
    display: var(--dflx);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    /* align-items: center; */
}
/* .flex-center-hor2{
    display: var(--dflx);
    justify-content: center;
    align-items: center;
} */
.flex-center-ver{
    display: var(--dflx);
 
    -webkit-box-align: center;
 
        -ms-flex-align: center;
 
            align-items: center;
}



.grad-blue-dark{
    background: #43C1FF;
background: -webkit-gradient(linear, left bottom, left top, from(#43C1FF), to(#015CFF));
background: -o-linear-gradient(bottom, #43C1FF, #015CFF);
background: linear-gradient(to top, #43C1FF, #015CFF);
}

.grad-orange-dark{
    background: rgb(255,236,54);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(29%, rgba(255,236,54,1)), to(rgba(255,183,48,1)));
    background: -o-linear-gradient(top, rgba(255,236,54,1) 29%, rgba(255,183,48,1) var(--prv-100));
    background: linear-gradient(180deg, rgba(255,236,54,1) 29%, rgba(255,183,48,1) var(--prv-100));
}


.small-hidden{

    width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: var(--hdn);
  position: var(--pos_a);
  z-index: -1;
}




  /* Hide scrollbar buttons */
  /* .scroll-1::-webkit-scrollbar-button {
    display: none;
  } */

  /* Set scrollbar track color */
  .scroll-1::-webkit-scrollbar-track {
    background-color: transparent; /* Transparent background */
  }

  /* Set scrollbar thumb color */
  .scroll-1::-webkit-scrollbar-thumb {
    background-color: #ffffff; /* Gray color */
    border-radius: 10px;
  }

  /* Set scrollbar width */
  .scroll-1::-webkit-scrollbar {
    width: 8px; /* Slim scrollbar width */
  }

  /* Optional: Hide scrollbar on Firefox */
  .scroll-1 {
    scrollbar-width: thin;
   
  }

/*  */
.scroll-2 {
    overflow: auto; /* Enable scrolling only when needed */
    max-height: 200px; /* Example for scrollable area */
    scrollbar-width: thin; /* For Firefox: Thin scrollbar */
    scrollbar-color: #888 transparent; /* For Firefox: Thumb and track colors */
  }
  
  /* Webkit-based browsers (Chrome, Edge, Safari) */
  .scroll-2::-webkit-scrollbar {
    width: 10px; /* Width of vertical scrollbar */
    height: 10px; /* Height of horizontal scrollbar */
  }
  
  .scroll-2::-webkit-scrollbar-thumb {
    background-color: #888; /* Thumb color */
    border-radius: 10px; /* Rounded corners for the thumb */
    border: 2px solid transparent; /* Space around the thumb for visibility */
    background-clip: padding-box; /* Ensures the border-radius is visible */
  }
  
  .scroll-2::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker thumb on hover */
  }
  
  .scroll-2::-webkit-scrollbar-track {
    background-color: transparent; /* Transparent track */
    border-radius: 10px; /* Optional: round the track (not widely supported) */
  }
  
  /* Completely hide scrollbars if not needed */
  .scroll-2::-webkit-scrollbar {
    display: none;
  }
  
  .scroll-2:hover::-webkit-scrollbar {
    display: block; /* Only show scrollbar on hover */
  }







  /*  */
  .loader1 {
    border: 3px solid #f3f3f3; /* Light gray border */
    border-top: 3px solid #3498db; /* Blue border */
    border-radius: 50%;
    width: 13px;
    height: 13px;
    -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite; /* Apply animation */
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/*  */

.rotate-upside-down,.rotate-180 {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}
.smooth-hit-1 {
    overflow: hidden;
    -webkit-transition: height 0.4s ease-in-out;
    -o-transition: height 0.4s ease-in-out;
    transition: height 0.4s ease-in-out;
    /* height: 0; */
}
.scroll-lock {
    overflow: hidden;
}

.header-fixed-1{
    top: 0; 
    left: 0; 
    position: fixed;
z-index: 999;
}

.header-fixed-2{
    top: 0; 
    left: 0; 
    position: fixed;
z-index: 1100;
}

.header-fixed-3{
    top: 0; 
    left: 0; 
    position: fixed;
z-index: 1500;
}


.footer-fixed-1{
    bottom: 0; 
    left: 0; 
    position: fixed;
z-index: 998;
}


.footer-fixed-2{
    bottom: 0; 
    left: 0; 
    position: fixed;
z-index: 1098;
}

.footer-fixed-3{
    bottom: 0; 
    left: 0; 
    position: fixed;
z-index: 1200;
}
.footer-fixed-10{
    bottom: 0; 
    left: 0; 
    position: fixed;
z-index: 2200;
}

    .sidebar-right {
        position: fixed;
        top: 0;
        right: 0;
        width: 0;
        height: 100%;
        -webkit-transition: width 0.2s ease-in-out;
        -o-transition: width 0.2s ease-in-out;
        transition: width 0.2s ease-in-out;
        overflow-x: hidden;
        overflow: hidden;
        z-index: 1200;
    }
    .sidebar-right-expanded-mob {
      
        width: 100%;
      
    }
    .sidebar-right-expanded {
      
        width: 400px;
      
    }


    .footer-expand {
        position: fixed;
        bottom: 0;
        left: 0;
        -webkit-transition: height 0.2s ease-in-out;
        -o-transition: height 0.2s ease-in-out;
        transition: height 0.2s ease-in-out;
        /* transition: width 0.2s ease-in-out; */
        overflow-x: hidden;
        /* overflow: hidden; */
        z-index: 1200;
    }
    .header-smooth {
        position: fixed;
        bottom: 0;
        left: 0;
        -webkit-transition: height 0.2s ease-in-out;
        -o-transition: height 0.2s ease-in-out;
        transition: height 0.2s ease-in-out;
        /* transition: width 0.2s ease-in-out; */
        overflow-x: hidden;
        overflow: hidden;
        /* z-index: 1200; */
    }
    .footer-expanded-ver {
      
        height: 300px;
      
    }
    .footer-hide,
    .header-hide {
      
        height: 0px!important;
      
    }
    
    .footer-expanded-hor {
      
        width: 400px;
      
    }

    .banner-center {
        width: 100%;         /* Full width of the container */
        height: 250px;       /* Set the height of the banner */
        overflow: hidden;    /* Hide the overflow on the sides */
        position: relative;  /* Position relative to contain the image */
      }
  
      .banner-center .banner-inner {
        position: absolute;  /* Absolute positioning to center the image */
        top: 50%;            /* Center vertically */
        left: 50%;           /* Center horizontally */
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%); /* Translate to truly center */
        /* height: 100%;        Set the height to 100% to fill the container */
        width: auto;         /* Keep the aspect ratio */
      }

   /* ////////////////////////////////////////////// */

   .flx-main-parent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
 
    width: 100%;
    height: auto;
    /* align-items: stretch; */
}

/* Super-Duper-Parent */
.super-parent {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-negative: 1;
        flex-shrink: 1;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    width: 100%;
    /* height: 100%; */
}

/* Intermediate Containers */
.flx-parent {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* Child Element */
.flx-child {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    min-width: 100px;
    max-width: 500px;
    width: 100%;
    /* box-sizing: border-box; */
    /* padding: 10px; */
    /* margin: 10px auto; */
    /* text-align: center; */
}