/* Box */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Font Family */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight:300;
    src: url(../fonts/OpenSans/OpenSans-Light.ttf);
}
@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300;
    src: url(../fonts/OpenSans/OpenSans-LightItalic.ttf);
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/OpenSans/OpenSans-Regular.ttf);
}
@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 400;
    src: url(../fonts/OpenSans/OpenSans-Italic.ttf);
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/OpenSans/OpenSans-Medium.ttf);
}
@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 500;
    src: url(../fonts/OpenSans/OpenSans-MediumItalic.ttf);
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/OpenSans/OpenSans-SemiBold.ttf);
}
@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 600;
    src: url(../fonts/OpenSans/OpenSans-SemiBoldItalic.ttf);
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/OpenSans/OpenSans-Bold.ttf);
}
@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 700;
    src: url(../fonts/OpenSans/OpenSans-BoldItalic.ttf);
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 800;
    src: url(../fonts/OpenSans/OpenSans-ExtraBold.ttf);
}
@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 800;
    src: url(../fonts/OpenSans/OpenSans-ExtraBoldItalic.ttf);
}

/* Nunito Sans Font Family */
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight:200;
    src: url(../fonts/NunitoSans/NunitoSans-ExtraLight.ttf);
}
@font-face {
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 200;
    src: url(../fonts/NunitoSans/NunitoSans-ExtraLightItalic.ttf);
}
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight:300;
    src: url(../fonts/NunitoSans/NunitoSans-Light.ttf);
}
@font-face {
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 300;
    src: url(../fonts/NunitoSans/NunitoSans-LightItalic.ttf);
}
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/NunitoSans/NunitoSans-Regular.ttf);
}
@font-face {
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 400;
    src: url(../fonts/NunitoSans/NunitoSans-Italic.ttf);
}
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/NunitoSans/NunitoSans-Medium.ttf);
}
@font-face {
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 500;
    src: url(../fonts/NunitoSans/NunitoSans-MediumItalic.ttf);
}
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/NunitoSans/NunitoSans-SemiBold.ttf);
}
@font-face {
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 600;
    src: url(../fonts/NunitoSans/NunitoSans-SemiBoldItalic.ttf);
}
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/NunitoSans/NunitoSans-Bold.ttf);
}
@font-face {
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 700;
    src: url(../fonts/NunitoSans/NunitoSans-BoldItalic.ttf);
}
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 800;
    src: url(../fonts/NunitoSans/NunitoSans-ExtraBold.ttf);
}
@font-face {
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 800;
    src: url(../fonts/NunitoSans/NunitoSans-ExtraBoldItalic.ttf);
}
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 900;
    src: url(../fonts/NunitoSans/NunitoSans-Black.ttf);
}
@font-face {
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 900;
    src: url(../fonts/NunitoSans/NunitoSans-BlackItalic.ttf);
}


/* Root Variables */
:root {
    --bs-font-family: "Open Sans", sans-serif;
    --bs-font-family-Nunito: "Nunito Sans", sans-serif;
    --bs-font-Light: 300;
    --bs-font-regular: 400;
    --bs-font-medium: 500;
    --bs-font-semibold: 600;
    --bs-font-bold: 700;
    --bs-font-extrabold: 800;
    --bs-neutrals-bg-grey-50: #F8FAFC;
    --bs-neutrals-bg-grey-100: #F1F5F9;
    --bs-neutrals-bg-grey-200: #E2E8F0;
    --bs-neutrals-bg-grey-300: #CBD5E1;
    --bs-neutrals-bg-grey-400: #94A3BB;
    --bs-neutrals-bg-grey-500: #64748B;
    --bs-neutrals-bg-grey-600: #475569;
    --bs-neutrals-bg-grey-700: #334155;
    --bs-neutrals-bg-grey-800: #1E293B;
    --bs-neutrals-bg-grey-900: #0F172A;
    --bs-primary-bg-pink-50: #FFE5F0;
    --bs-primary-bg-pink-300: #FFCCE1;
    --bs-primary-bg-pink-500: #FF7FB3;
    --bs-primary-bg-pink-700: #FF3185;
    --bs-primary-bg-pink-900: #CC276A;
    --bs-secondary-bg-blue-50: #E5E6FF;
    --bs-secondary-bg-blue-300: #C0C2FF;
    --bs-secondary-bg-blue-500: #5459FF;
    --bs-secondary-bg-blue-700: #2E318C;
    --bs-secondary-bg-blue-900: #222466;
    --bs-success-bg-green-50: #ECFDF5;
    --bs-sucess-bg-green-300: #6EE787;
    --bs-success-bg-green-500: #10B981;
    --bs-success-bg-green-700: #047857;
    --bs-warning-bg-yellow-50: #FFFBEB;
    --bs-warning-bg-yellow-300: #FCD34D;
    --bs-warning-bg-yellow-500: #F59E0B;
    --bs-warning-bg-yellow-700: #B45309;
    --bs-error-bg-red-50: #FEF2F2;
    --bs-error-bg-red-300: #FFB2B2;
    --bs-error-bg-red-500: #EF4444;
    --bs-error-bg-red-700: #B91C1C;
    --bs-shades-bg-white: #ffffff;
    --bs-shades-bg-black: #000000;
    --bs-font-color-body: #505050;
    --bs-font-color-heading: #454545;
}

/* Typography */
.w-bold{
    font-weight: var(--bs-font-bold) !important;
}
.w-extraBold{
    font-weight: var(--bs-font-extrabold);
}
.w-semiBold{
    font-weight: var(--bs-font-semibold) !important;
}
.w-regular{
    font-weight: var(--bs-font-regular) !important;
}
h1.large{
    font-family: var(--bs-font-family-Nunito);
    font-size: 72px;
    line-height: 82px;
    font-weight: var(--bs-font-regular);
    color: var(--bs-secondary-bg-blue-900);
}
h1.large span{
    font-weight: var(--bs-font-bold);
}
h1{
    font-family: var(--bs-font-family-Nunito);
    font-size: 48px;
    line-height: 56px;
    font-weight: var(--bs-font-extrabold);
    color: var(--bs-font-color-heading);
}
h2{
    font-family: var(--bs-font-family-Nunito);
    font-size: 40px;
    line-height: 48px;
    font-weight: var(--bs-font-bold);
    color: var(--bs-font-color-heading);
}
h3{
    font-family: var(--bs-font-family-Nunito);
    font-size: 32px;
    line-height: 40px;
    font-weight: var(--bs-font-bold);
    color: var(--bs-font-color-heading);
}
h4{
    font-family: var(--bs-font-family-Nunito);
    font-size: 28px;
    line-height: 36px;
    font-weight: var(--bs-font-bold);
    color: var(--bs-font-color-heading);
}
h5{
    font-family: var(--bs-font-family-Nunito);
    font-size: 24px;
    line-height: 32px;
    font-weight: var(--bs-font-bold);
    color: var(--bs-font-color-heading);
}
h6{
    font-family: var(--bs-font-family-Nunito);
    font-size: 20px;
    line-height: auto;
    font-weight: var(--bs-font-bold);
    color: var(--bs-font-color-heading);
}
p.large{
    font-family: var(--bs-font-family);
    font-size: 18px;
    line-height: 28px;
    font-weight: var(--bs-font-regular);
    color: var(--bs-font-color-body);
}
p.small{
    font-family: var(--bs-font-family);
    font-size: 14px;
    line-height: normal;
    font-weight: var(--bs-font-regular);
    color: var(--bs-font-color-body);
}
p{
    font-family: var(--bs-font-family);
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--bs-font-regular);
    color: var(--bs-font-color-body);
}
p.semibold{
    font-family: var(--bs-font-family);
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--bs-font-semibold);
    color: var(--bs-font-color-body);
}
p.bold{
    font-family: var(--bs-font-family);
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--bs-font-bold);
    color: var(--bs-font-color-body);
}
a{
    text-decoration: none;
    font-family: var(--bs-font-family);
    color: var(--bs-font-color-body);
}

header li a {
    font-family: var(--bs-font-family-Nunito);
    color: var(--bs-font-color-body);
}

/* Buttons */
.btn-small{
    background-color: var(--bs-primary-bg-pink-700);
    font-size: 16px;
    line-height: 24px;
    padding: 3px 20px;
    min-width: 125px;
    height: 32px;
}
.btn-medium{
    background-color: var(--bs-primary-bg-pink-700);
    font-size: 16px;
    line-height: 24px;
    padding: 7px 20px;
    min-width: 141px;
    height: 40px;
}
.btn-large{
    background-color: var(--bs-primary-bg-pink-700);
    font-size: 16px;
    line-height: 24px;
    padding: 10px 20px;
    min-width: 157px;
    height: 48px;
}
.btn-exLarge,  .btn.btn-exLarge:focus-visible{
    background-color: var(--bs-primary-bg-pink-700);
    font-size: 18px;
    line-height: 18px;
    padding: 20px 25px;
    min-width: 180px;
}
.btn, button.btn:focus-visible{
    color: var(--bs-shades-bg-white);
    font-weight: var(--bs-font-semibold);
    font-family: var(--bs-font-family);
    border-radius: 12px;
    border: 1px solid var(--bs-primary-bg-pink-700);
}
.btn:hover{
    background-color: var(--bs-primary-bg-pink-900);
    border: 1px solid var(--bs-primary-bg-pink-900);
}
.btn.active{
    background-color: var(--bs-primary-bg-pink-500);
    border: 1px solid var(--bs-primary-bg-pink-500);
}
.btn-o {
    color: var(--bs-primary-bg-pink-700);
    font-weight: var(--bs-font-bold);
    font-family: var(--bs-font-family);
    border-radius: 4px;
    background-color: transparent;
    border: 1px solid var(--bs-primary-bg-pink-500);
}
.btn-outline-sm {
    font-size: 16px;
    line-height: 24px;
    min-width: 125px;
    height: 32px;
    padding: 3px 20px;
}
.btn-outline-md{
    font-size: 16px;
    line-height: 24px;
    padding: 7px 20px;
    height: 40px;
    min-width: 141px;
}
.btn-outline-lg{
    font-size: 16px;
    line-height: 24px;
    padding: 10px 20px;
    min-width: 157px;
    height: 48px;
}
.btn-outline-extraLg{
    font-size: 20px;
    line-height: 28px;
    padding: 12px 20px;
    min-width: 180px;
    height: 56px;
}
.btn-o:hover{
    background-color: var(--bs-primary-bg-pink-50);
}
.btn-o.active{
    background-color: var(--bs-primary-bg-pink-500);
    border: 1px solid var(--bs-primary-bg-pink-500);
    color: var(--bs-shades-bg-white);
}
body section button.btn {
    border-radius: 10px;
    background: linear-gradient(180deg, #ff7cb1, #ff3185);
    height: auto;
    border: none !important;
    position: relative;
    transition: color .3s ease;
    z-index: 1;
    overflow: hidden;
}
body section button.btn:before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f12b7c, #d40056);
    transition: left .4s ease;
    z-index: -1;
}
body section button.btn:hover:before{
    left: 0;
}
 

/* section spacing */
.section-spacing{
    padding: 3.15em 0;
}
.section-spacing-large{
    padding: 5.63em 0;
}
.heading_spacing{
    padding-bottom: 0.6em;
} 
h2 span{
    color: var(--bs-primary-bg-pink-700);
}

/* Media Queries for mobile Typography */
@media screen and (max-width:992px) {
    h1.large{
        font-size: 52px;
        line-height: 64px;
    }
    h1{
        font-size: 30px;
        line-height: 38px;
    }
    h2{
        font-size: 28px;
        line-height: 35px;
    }
    h3{
        font-size: 24px;
        line-height: 30px;
    }
    h4{
        font-size: 20px;
        line-height: 24px;
    }
    h5{
        font-size: 18px;
        line-height: 22px;
    }
    h6{
        font-size: 16px;
        line-height: 20px;
    }
    p{
        font-size: 14px;
    }
    p.semibold{
        font-size: 14px;
    }
    p.bold{
        font-size: 14px;
    }
    p.large{
        font-size: 16px;
    }
}
/* Media queries for container */
@media screen and (max-width:576px){
    .container{
        max-width: 100%;
    }
}
@media screen and (max-width:767.5px) and (min-width:577px){
    .container{
        max-width: 540px;
    }
}
@media screen and (max-width:992px) and (min-width:768px){
    .container{
        max-width: 740px;
    }
    .btn-outline-extraLg,.btn-exLarge {
        font-size: 18px;
        line-height: 26px;
        padding: 10px 14px;
        min-width: 160px;
        height: 48px;
    }
     
}
@media screen and (max-width:1200px) and (min-width:993px){
    .container{
        max-width: 920px;
    }
}
@media screen and (max-width:1440px) and (min-width:1201px){
    .container{
        max-width: 1140px;
    }
}
@media screen and (min-width:1441px){
    .container{
        max-width: 1320px;
    }

}
@media screen and (max-width: 768px) {
    .btn-outline-extraLg,.btn-exLarge {
        font-size: 16px;
        line-height: 24px;
        padding: 8px 16px;
        min-width: 145px;
        height: 44px;
    }
    main .btn.btn-exLarge:focus-visible {
        min-width: 145px;
    }
}