/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
/* @media (min-width: 768px) {} */

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */


@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&display=swap');

:root {
    /* Default Colors */
    --clr-black: #000;
    --clr-white: #ffffff;
    
    /* Custom Colors */
    --clr-teal-primary: #13D4D4;
    --clr-teal-dark: #186363;
    --clr-teal-light: #D6FFFF;
    --clr-blue: #008CFF;
    --clr-1b1-black: #1B1B1B;
    --clr-333-black: #333;
    --clr-686-black: #686c6d;
    --clr-767-black: #767676;
    --clr-a3a-black: #A3A3A3;
    --clr-f2f-black: #F2F2F2;
    --clr-ddd-black-title: #DEDEDE;
    --clr-border-black: #A3A3A3;

    --clr-btn-red-light: #E5383B;
    --clr-main-red: #E61B0A;
    --clr-main-blue: #0056D3;
    --clr-blue: #008CFF;
    --clr-green: #74EB00;
    --clr-bg-green: #29bf12;


    --clr-dark-bg-green: black;
    
    /* sizes */
    --size-xxs: 0.5rem;
    --size-xs: 0.75rem;
    --size-sm: 0.875rem;
    --size-base: 1rem;
    --size-lg: 1.125rem;
    --size-xl: 1.25rem;
    --size-2xl: 1.5rem;
    --size-3xl: 2rem;
    --size-4xl: 2.5rem;
    --size-5xl: 2.75rem;
    --size-6xl: 3.1rem;
    --size-7xl: 3.3rem;
    --size-8xl: 4rem;
    --size-9xl: 5rem;
    --size-10xl: 7rem;
    --size-11xl: 8rem;
    --size-12xl: 9rem;
    --size-13xl: 10rem;

    --title: 3.75rem;
    --sub-title: 1.75rem;

    --title-mb: 2.5rem;
}



* {
margin: 0;
line-height: calc(1em + 0.5rem);
}

html {
    scroll-behavior: smooth;
    }
    

body {
    font-family: "Poppins", sans-serif;
    background-color: var(--clr-white);
    /* background-color: var(--clr-333-black); */
    color: var(--clr-black);
    /* margin-bottom: 1000px; */
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  user-select: none;
}

button {
  display: inline-block;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

a {
  color: var(--clr-blue000);
  text-decoration: none;
}

.section__heading {
    font-size: var(--size-6xl);
    margin-bottom: 3rem;
}

.container {
  width: 100%;
  max-width: 1440%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  /* border: 1px solid red; */
}

.top__section {
    margin-top: 5rem;
}

.section {
  margin-top: 9.3rem;
}

.section__sm {
    margin-top: 3.5rem;
}

.section__base {
    margin-top: 5rem;
}

.section__lg {
    margin-top: 12.5rem;
}

.section__container {
    margin-top: 1.8rem;
}

.hidden {
    display: none !important;
}


/* xs */
@media (min-width: 475px) {
    .container {
        max-width: 475px;
    }
}

/* sm */
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

/* md */
@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

/* lg */
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
        padding-left: 5rem;
        padding-left: 2.5rem;
        padding-right: 5rem;
        padding-right: 2.5rem;
    }

    .section__base {
        margin-top: 7.5rem;
    }

    .section__lg {
        margin-top: 8.5rem;
    }

    .section__container {
        margin-top: 3.4rem;
    }
    
}

/* xl */
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }

    .top__section {
        margin-top: 6.25rem;
    }

    .section__sm {
        margin-top: 5rem;
    }
    
}

/* 2xl */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
}