/*
Theme Name: Bark & Bloom
Description: Flatsome child theme for Bark & Bloom
Author: Gareth
Template: flatsome
Version: 4.7
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

@font-face {
	font-family: 'Montserrat';
	src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'ardegan';
	src: url('fonts/ardegan.ttf') format('truetype');
	font-style: normal;
	font-display: swap;
}

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

@font-face {
	font-family: 'RobotoSlab';
	src: url('fonts/RobotoSlab-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 500 600 700 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'LogoFont';
	src: url('fonts/STIXTwoText-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 500 600 700 800;
	font-style: normal;
	font-display: swap;
}

/*
@font-face {
	font-family: 'Lexend';
	src: url('fonts/Lexend-VariableFont_wght.ttf') format('truetype');
	font-style: normal;
	font-display: swap;
}
*/

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

body {
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-display: swap;
	color: #422522;
}

.emoji-font {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  }
  

/*
.logo-column {
    display: flex;
    align-items: flex-end;
    padding-bottom: 10px;
}
*/

.logo-text {
    font-family: LogoFont;
    font-weight: 500;
}

h1.banner {
	background: transparent;
	font-weight: 700;
	letter-spacing: .1em;
	font-size: 3.0em;
	margin-bottom: 0em;
	color: white;
}
	
p.banner {
	background: transparent;
	font-weight: 600;
	font-size: 2.2em;
	line-height: 1.2;
	margin-top: 0.4em;
	margin-bottom: 0em;
	color: white;
}

.lead-text {
    text-align: justify;
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 5px;
    padding-bottom: 0px;
}

.call-to-action {
    text-align: center;
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 15px;
    color: #800020;
}

h2.section-title {
	color: #800020;
	text-transform: lowercase;
	letter-spacing: 0.1em;
	font-family: 'Montserrat';
	font-size: 1.6em;
	font-weight: bold;
}

/* CERRY BLOSSOM BACKGROUND IMAGE */

.bb-background {
    background-image: url('https://barkandbloomdoggrooming.co.uk/wp-content/uploads/General/cherry-blossom4.png');
    background-size: contain; 
    background-position: right; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    padding-top: 0px;
    padding-bottom: 0px;
    /* Optional: Set a background color as a fallback */
    /*background-color: white;*/
    
}

/* OPEN WHATSAPP POPUP */

#qr-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgb(255, 240, 243);*/
    display: none;
    justify-content: center;
    align-items: center;
}

#qr-popup {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    position: relative;
    text-align: center;
    border: 2px solid #800020; /* Border with a black color */
}

.scan-text {
    font-weight: 600;
    font-size: 1.5em;
    color: #422522;
    margin-bottom: 0;
}


/*----------------------------------------*/

@media only screen and (max-width: 768px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

    .header_logo {
      visibility: hidden;
    }
    
    .bb-background {
        background-image: url('https://barkandbloomdoggrooming.co.uk/wp-content/uploads/General/cherry-blossom-mob.png');
    }
    
    h2.section-title { 
    font-size: 1.3em;
    }
    
    .call-to-action {
        font-size: 1.3em;
    }

}