@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Rambla:wght@400;700&display=swap');


/* text color */

.text-primary-white{
    color: var( --clr-text-100);
}

.text-secondary-orange{
    color: var(--clr-text-200);
}
.text-accent-gary{
    color: var(--clr-text-300);
}
.blue-text{
    color: var(--clr-accent-500);
}
.orange-text{
    color: var( --clr-accent-400);
}


/* background color */

.bg-primary-nav{
    background: var(--clr-bg-200);
}

.bg-100{
    background: var(--clr-bg-100);
}

.bg-300{
    background: var(--clr-bg-300);
}

.bg-400{
    background: var( --clr-bg-400);
}

.bg-card-100{
    background: var(--clr-card-100);
}

.bg-card-200{
    background: var(--clr-card-200);
}


/* font-weight */

.fw-bold{font-weight: var(--fw-bold);}
.fw-semi-bold{font-weight: var(--fw-semi-bold);}
.fw-regular{font-weight: var(--fw-regular);}


/* heading */
.fs-primary-heading{font-size: var(--fs-primary-heading); line-height: 1.1;}

.fs-secondary-heading{font-size: var(--fs-secondary-heading); line-height: 1.1;}



/* Font-size */
.fs-300{font-size: var(--fs-300);}
.fs-400{font-size: var(--fs-400);}
.fs-500{font-size: var(--fs-500);}
.fs-600{font-size: var(--fs-600);}

/* Padding size */

.padding-block-900{
    padding: var(--size-900);
}
.padding-block-800{
    padding: var(--size-800);
}
.padding-block-700{
    padding: var(--size-700);
}
.padding-block-600{
    padding: var(--size-600);
}
.padding-block-500{
    padding: var(--size-500);
}
.padding-block-400{
    padding: var(--size-400);
}
.padding-block-300{
    padding: var(--size-300);
}
.padding-block-200{
    padding: var(--size-200);
}
.padding-block-100{
    padding: var(--size-100);
}
/* margin size */

.margin-block-900{
    padding: var(--size-900);
}
.margin-block-800{
    padding: var(--size-800);
}
.margin-block-700{
    padding: var(--size-700);
}
.margin-block-600{
    padding: var(--size-600);
}
.margin-block-500{
    padding: var(--size-500);
}
.margin-block-400{
    padding: var(--size-400);
}
.margin-block-300{
    padding: var(--size-300);
}
.margin-block-200{
    padding: var(--size-200);
}
.margin-block-100{
    padding: var(--size-100);
}

.padding-left-right{
    padding: var(--padding-left-right);
}
/* Menu Name Hidden */

.visually-hidden {
    position: absolute;
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0,0,0,0) !important;
      white-space: nowrap !important;
      border: 0 !important;
}

    
.button{
    text-decoration: none;
    cursor: pointer;
    border: 0;
    border-radius: 3px;
    padding: 1.25em 2.5em;
    background: var(--clr-button-100);
    color: var(--clr-text-100);
    font-size: var(--fs-button);
    font-weight: var(--fw-bold);
    line-height: 1;
}
.button-blue{
    text-decoration: none;
    cursor: pointer;
    border: 0;
    border-radius: 3px;
    padding: 1.25em 2.5em;
    background: var(--clr-button-200);
    color: var(--clr-text-100);
    font-size: var(--fs-button);
    font-weight: var(--fw-bold);
    line-height: 1;
}
.button-blue-line{
    background: none;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    border-radius: 3px;
    padding: 1.25em 2.5em;
    border: 2px solid var(--clr-button-200);
    color: var(--clr-text-100);
    font-size: var(--fs-button);
    font-weight: var(--fw-bold);
    line-height: 1;
}
.button-white{
    width: 86%;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    padding: 1.25em 2.5em;
    background: var(--clr-bg-100);
    color: var(--clr-text-300);
    font-size: var(--fs-button);
    line-height: 1;
}
.button-Send{
    width: 30%;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    padding: 1.25em 2.5em;
    background: var(--clr-bg-100);
    color: var(--clr-text-300);
    font-size: var(--fs-button);
    line-height: 1;
}
.button-black{
    width: 86%;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    padding: 1.25em 2.5em;
    background: var(--clr-bg-200);
    color: var(--clr-text-10);
    font-size: var(--fs-button);
    line-height: 1;
}
.button-blue-line:hover,
.button-blue-line:focus-visible{
    background: var(--clr-bg-400);
    color: var(--clr-text-100);
    transition: all 0.5s ease-in-out;
}

.button:hover, 
.button:focus-visible{
    background: var(--clr-bg-400);
    color: var(--clr-text-100);
    transition: all 0.5s ease-in-out;
}
.button-blue:hover, 
.button-blue:focus-visible{
    background: var(--clr-bg-400);
    color: var(--clr-text-100);
    transition: all 0.5s ease-in-out;
}

.cool-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--clr-accent-400);
    transition: width .3s;
}

.cool-link:hover::after {
    width: 100%;
}

/* change default bootstrap color */
.navbar-toggler{
    background: var(--clr-bg-100);
}

.container{
    --max-width: 1110px;
    --padding: 1rem;

    width: min(var(--max-width), 100% - var(--padding));
    margin-inline: auto;
}

.cool-link-active {
    color: var(--clr-accent-400);
}
.brdrc{
    border-radius: 100px;
}
.width100{
    width: 100%;
}