:root {
    /*Font Size*/
    --Desc-body: 100%; /* Base font size */
    --Line-hight-body:160%;
    --Line-hight-headers:140%;
    /* --Mob-body:14px; */
    --scale-factor: 1.2; /* Scale factor */
    --h6: calc(var(--Desc-body) * var(--scale-factor));
    --h5: calc(var(--h6) * var(--scale-factor));
    --h4: calc(var(--h5) * var(--scale-factor));
    --h3: calc(var(--h4) * var(--scale-factor));
    --h2: calc(var(--h3) * var(--scale-factor));
    --h1: calc(var(--h2) * var(--scale-factor));
    --small: calc(var(--Desc-body) / var(--scale-factor));
    --sub-text: calc(var(--small) / var(--scale-factor));

    /*Font Family*/
    --desc-body: Poppins;
    --desc-h: Quicksand;

    /* Colors */
    --color-whitesmoke-100: #f1f1f1;
    --light-gray: #efefef;
    --persian-green: #00a693;
    --body-text: #555;
    --dark-teal: #085467;
    --color-gold: #f3c208;
    --color-gainsboro: #d9d9d9;
    --color-gray-100: rgba(129, 129, 139, 0.2);
    --color-gray-200: rgba(255, 255, 255, 0.07);

    /* Gaps */
    --gap-44xl: 63px;
    --section: 100px;
    --gap-mini: 15px;
    --gap-32: 32px;
    --gap-0: 0px;
    --gap-50: 50px;
    --gap-card: 1rem;
    --gap-20: 20px;
    --gap-5: 5px;

    /* Border radiuses */
    --card: 32px;
    --btn: 16px;

    /* Effects */
    --beumorphic-v2:5px 5px 10px #d0d0d0, -5px -5px 10px #ffffff;
    /* -10px -11px 15px #fff, 10px 10px 16px rgba(0, 0, 0, 0.24); */
    --neumorphic: 5px 5px 10px #d0d0d0,
    -5px -5px 10px #ffffff;
  }

@media (max-width: 900px) {
   :root{
   --Desc-body: 87.5%; 
}
}