/* ===== Start - Variables ===== */
:root {
    /* Start - Colour Variables */
    --white:#ffffff;
    --black:#393D46;
    --grey:#A0A0A0;
    --red:#FF5670;
    --orange:#FF7953;
    --yellow:#FCB600;
    --green:#85D1A0;
    --till:#1FA499;
    --till-light:#3CD1A2;
    --blue:#46C7EC;
    --bg-blue:#F5F9FC;

    --shadow-black:hsla(221.5, 10.2%, 24.9%,0.1);
    /* End - Colour Variables */



    /* Default Font */
    --font-primary: 'Poppins', sans-serif;



    /* Start - Font Weight Variables */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semi-bold: 600;
    --weight-bold: 700;
    /* End - Font Weight Variables */



    /* Start - Font Size Variables */
    --size-xs: 16rem;
    --size-small: 17.5rem;
    --size-regular: 20rem;
    --size-medium:22.5rem;
    --size-large: 32rem;
    --size-xl: 48rem;
    /* End - Font Size Variables */



    /* Start - Padding Value Variables */
    --page-pad:8%;
    --slider-pad:5%;
    --section-pad:120px;
    --sub-section-pad:70px;
    /* End - Padding Value Variables */

}
    /* Variables Value Change In Breakpoints */
    @media (max-width: 1400px) {
        :root {
            --size-small: 17rem;
            --size-regular: 19rem;
            --size-medium:20rem;
            --size-large: 30rem;
            --size-xl: 45rem;


            --page-pad:6%;
            --slider-pad:3%;
            --section-pad:105px;
            --sub-section-pad:65px;
        }
    }
    @media (max-width: 1200px) {
        :root {
            --size-small: 16rem;
            --size-regular: 18rem;
            --size-medium:19rem;
            --size-large: 28rem;
            --size-xl: 40rem;


            --page-pad:5%;
            --section-pad:95px;
            --sub-section-pad:60px;
        }
    }
    @media (max-width: 1000px) {
        :root {
            --size-large: 27rem;
            --size-xl: 38rem;


            --page-pad:4%;
            --section-pad:90px;
            --sub-section-pad:55px;
        }
    }
    @media (max-width: 768px) {
        :root {
            --size-regular: 17rem;
            --size-medium:18rem;
            --size-large: 25rem;
            --size-xl: 35rem;


            --slider-pad:35px;
            --section-pad:80px;
            --sub-section-pad:60px;
        }
    }
    @media (max-width: 500px) {
        :root {
            --size-small: 15.5rem;
            --size-regular: 16.5rem;
            --size-medium:17rem;
            --size-large: 22rem;
            --size-xl: 32rem;


            --page-pad:3%;
            --slider-pad:0;
            --section-pad:60px;
            --sub-section-pad:55px;
        }
    }
/* ===== End - Variables ===== */



/* ===== Start - Global Settings ===== */
html {
    font-size: 6.25%;
    scroll-behavior: smooth;
}



/* All Component Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    transition: all 0.1s ease-out;
}



/* Body Styles */
body {   
    font-family: var(--font-primary);
    overflow-x: hidden;
}
    @media (min-width: 1526px) {
        body {
            width: 1526px;
            margin: auto;
        }
    }
    @media (max-width: 350px) {
        body {
            width: 350px;
            margin: auto;
        }
    }



/* Start - Global Font Styles */
h1, h2, h3, h4, h5, h6, p, a {
    color: var(--black);
    font-weight: var(--weight-regular);
}

h1 {font-size: var(--size-large);}
h2 {font-size: var(--size-medium);}
h3 {font-size: var(--size-regular);}
h4 {font-size: var(--size-small);}
h5 {font-size: var(--size-xs);}

a , p {
    font-size: var(--size-regular);
    text-decoration: none;
}

.Highlight {font-size: var(--size-xl);}
.Medium {font-weight: var(--weight-medium);}
.Semi-Bold {font-weight: var(--weight-semi-bold);}
.Bold {font-weight: var(--weight-bold);}

.Black {color: var(--black);}
.White {color: var(--white);}
.Yellow {color: var(--yellow);}
.Red {color: var(--red);}
.Green {color: var(--green);}
.Till {color: var(--till-light);}
.Blue {color: var(--blue);}
.Orange {color: var(--orange);}



ul {
    list-style: none;
}
/* End - Global Font Styles */



/* Customize Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px; 
}

::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: var(--orange);
}


::selection {
    color: var(--white);
    background-color: var(--till-light);
}
/* ===== End - Global Settings ===== */