/* *****************FONT - POPPINS******************* */
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/* *****************FONT - AMATIC SC******************* */
@font-face {
    font-family: 'Amatic SC';
    src: url('/fonts/AmaticSC-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Amatic SC';
    src: url('/fonts/AmaticSC-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* ======= AMATIC SC ======= */
.amaticRegular {
    font-family: 'Amatic SC';
    font-weight: 400;
    font-style: normal;
}

.amaticBold {
    font-family: 'Amatic SC';
    font-weight: 700;
    font-style: normal;
}


/* ======= POPPINS ======= */
.poppinsRegular {
    font-family: 'Poppins';
    font-weight: 400;
    font-style: normal;
}

.poppinsThin {
    font-family: 'Poppins';
    font-weight: 100;
    font-style: normal;
}

.poppinsThinItalic {
    font-family: 'Poppins';
    font-weight: 100;
    font-style: italic;
}

.poppinsExtraLight {
    font-family: 'Poppins';
    font-weight: 200;
    font-style: normal;
}

.poppinsExtraLightItalic {
    font-family: 'Poppins';
    font-weight: 200;
    font-style: italic;
}

.poppinsLight {
    font-family: 'Poppins';
    font-weight: 300;
    font-style: normal;
}

.poppinsLightItalic {
    font-family: 'Poppins';
    font-weight: 300;
    font-style: italic;
}

.poppinsItalic {
    font-family: 'Poppins';
    font-weight: 400;
    font-style: italic;
}

.poppinsMedium {
    font-family: 'Poppins';
    font-weight: 500;
    font-style: normal;
}

.poppinsMediumItalic {
    font-family: 'Poppins';
    font-weight: 500;
    font-style: italic;
}

.poppinsSemiBold {
    font-family: 'Poppins';
    font-weight: 600;
    font-style: normal;
}

.poppinsSemiBoldItalic {
    font-family: 'Poppins';
    font-weight: 600;
    font-style: italic;
}

.poppinsBold {
    font-family: 'Poppins';
    font-weight: 700;
    font-style: normal;
}

.poppinsBoldItalic {
    font-family: 'Poppins';
    font-weight: 700;
    font-style: italic;
}

.poppinsExtraBold {
    font-family: 'Poppins';
    font-weight: 800;
    font-style: normal;
}

.poppinsExtraBoldItalic {
    font-family: 'Poppins';
    font-weight: 800;
    font-style: italic;
}

.poppinsBlack {
    font-family: 'Poppins';
    font-weight: 900;
    font-style: normal;
}

.poppinsBlackItalic {
    font-family: 'Poppins';
    font-weight: 900;
    font-style: italic;
}

/* ********************************************************************************************** */

/* COLOR BACKGROUNDS */
.pinkBG {
    background-color: #F21187;
}

.blueBG {
    background-color: #0BB1B3;
}

.priceBG {
    background-color: #33c4c5;
}

.lightBlueBG {
    background-color: #E3F2F9;
}

.cardBG {
    background-color: #F6FCFF;
}

/* TEXT COLOR  */
.pinkText {
    color: #F21187;
}

.blueText {
    color: #0BB1B3;
}

.darkBlueText {
    color: #0F6869;
}

.grayText {
    color: #4A4A4A;
}
.grayText2 {
    color: #3C3C3C;
}

/* BACKGROUND IMAGE */
.pawPattern {
    background-color: #EC1D8A;
    background-image: url('/images/pawPattern.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.heartPattern {
    background-color: #E3F2F9;
    background-image: url('/images/heartPattern.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.darkPawPattern {
    background-color: #0BB1B3;
    background-image: url('/images/pawPattern.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.locationPattern {

    background-image: url('/images/pawPattern.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}