/*  NOTES
Headings :  font-family: 'Cinzel Decorative', cursive;
Body :      font-family: 'Roboto', sans-serif;  

  
Colors: featured:  #F0EAED
        dark-text: #8E7483 
        light-text: white


*/

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

/* Gridlex reset */

[class*="col-"] { padding: 0;}

[class*=grid] {  margin: 0; }


img { max-width: 100%; }



/*  Temporary Styles */
/*
* {
    border: 2px solid rgb(200,200,200);
} 

html, 
body {
    border: none;
} 

 h1,h2,h3,h4,h5,h6,p, a {
    border: 2px solid rgb(179, 84, 84);
} 
*/



/* Reusable utility classes——————————-—*/


/* Padding Utility Classes */ 
.padded { padding: 5%; }
.padded-sm { padding: 2.5%; }
.padded-lg { padding: 10%;  }

.padded-05 { padding: 0.5rem; }
.padded-1 { padding: 1rem; }
.padded-2 { padding: 2rem; }

.padded-t { padding-top: 5%; }
.padded-b { padding-bottom: 5%; }
.padded-l { padding-left: 5%; }
.padded-r { padding-right: 5%; }

.padded-r-1 {padding-right: 1rem;}
.padded-l-1 {padding-left: 1rem;}

.padded-tb { padding-top: 5%; padding-bottom: 5%; }
.padded-lr { padding-left: 5%; padding-right: 5%; }

.padded-t-1 { padding-top: 1rem; }
.padded-b-1 { padding-bottom: 1rem; }
.padded-l-1 { padding-left: 1rem; }
.padded-r-1 { padding-right: 1rem; }

.padded-t-2 { padding-top: 2rem; }
.padded-b-2 { padding-bottom: 2rem; }
.padded-l-2 { padding-left: 2rem; }
.padded-r-2 { padding-right: 2rem; }

.padded-t-0 { padding-top: 0; }
.padded-b-0 { padding-bottom: 0; }
.padded-l-0 { padding-left: 0; }
.padded-r-0 { padding-right: 0; }

/* Margin Utility Classes */ 

.margin-t { margin-top: 5%; }
.margin-b { margin-bottom: 5%; }
.margin-l { margin-left: 5%; }
.margin-r { margin-right: 5%; }

.margin-t-1 { margin-top: 1rem; }
.margin-b-1 { margin-bottom: 1rem; }
.margin-l-1 { margin-left: 1rem; }
.margin-r-1 { margin-right: 1rem; }

.margin-t-2 { margin-top: 2rem; }
.margin-b-2 { margin-bottom: 2rem; }
.margin-l-2 { margin-left: 2rem; }
.margin-r-2 { margin-right: 2rem; }

.margin-t-0 { margin-top: 0; }
.margin-b-0 { margin-bottom: 0; }
.margin-l-0 { margin-left: 0; }
.margin-r-0 { margin-right: 0; }

.margin-tb { margin-top: 5%; margin-bottom: 5%; }
.margin-lr { margin-left: 5%; margin-right: 5%; }


/* Height Classes */

.tall-30 { min-height: 30vh; }
.tall-40 { min-height: 40vh; }
.tall-45 { min-height: 45vh; }
.tall-50 { min-height: 50vh; }
.tall-60 { min-height: 60vh; }
.tall-70 { min-height: 70vh; }
.tall-80 { min-height: 80vh; }
.tall-90 { min-height: 90vh; }
.tall-100 { min-height: 100vh; }


/* Typography font styles———-————————-—*/

body {
    font-family: 'Roboto', sans-serif; 
    color:#8E7483;
}

h2, h3, h4, h5, h6 {
    font-family: 'Cinzel Decorative', cursive;
	line-height: 1.1;
	margin-bottom: 1.2rem;
}

h2 span {
    display: block;
    font-size: 9vw;
}

.lg-heading {
    font-size: 5.5vw;
    line-height: 1.1;
    text-transform: uppercase;
}

h2 {
    font-size: 4.2rem;
    line-height: 1;
}
h3 {
    font-size: 1.7rem;
    text-transform: uppercase;
}

h4 {
    font-size: 1.1rem;
    text-transform: none;
}


p {
	line-height: 1.4; 
	margin-bottom: 1rem;
}

p:last-child {
    margin-bottom: 0;
}






/* General typography & universal styles——————-———*/

.bg-featured { background-color: #F0EAED;  }
.bg-dark     { background-color: #8E7483;  }

.light-text { color: white; } 

.big-text      { font-size: 3.5rem;}
.medium-text   { font-size: 2rem;  }
.small-text    { font-size: 1.6rem;}

.left   { text-align: left; }
.center { text-align: center; }
.right  { text-align: right; }


.uppercase { text-transform: uppercase;}


a {
    text-decoration: none;
    color: inherit;
  }

.button {
    color: white;
    border: 1px solid #8E7483;
    border-radius: 1.5rem;
    background-color:#8E7483;
    padding: 0.7rem 1.5rem;
    display: inline-block;
    font-size: 1.1rem;
}

.button:hover {
    color: #8E7483;
    background-color: #c6d8cf;
    border: 1px solid #c6d8cf;
}

.subtitle { 
    font-style: italic;
    font-size: 1.2rem;
    color: #baaab3;
}

.subtle p {
    font-size: 0.8rem;
    opacity: 0.8;
}




/* Header & Footer Styles————————————————*/

header a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    padding: 0.5rem;
}
header a:hover {
    color: #c6d8cf;
}

header {
    padding: 2% 5%
}

.logo h1 {
    font-family: 'Cinzel Decorative', cursive;
    font-size: 2.5rem;
}


footer {
    padding: 5%;
}
  
footer a {
    padding: 0 0.1rem;
    margin: 0.2rem;
}
footer a:hover {
    color: #c6d8cf;
}

footer h3 {
    font-size: 1.6rem;
}

footer h4 {
    margin-bottom: 0.1rem;
    letter-spacing: 0.06em;
}

.border-line {
    border: none;
    border-bottom: 1px solid white;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.border-line-dark {
    border: none;
    border-bottom: 1px solid #8E7483;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

span a {
    display: inline-block;
}

.social-links a {
    display: inline-block;
    font-size: 1.2rem;
    padding: 0 0.5rem;
    margin: 0 0.1rem;
}


/* Header banner overlay --*/

.bg-overlay {
    position: relative;
}
.bg-overlay::before {
    content: ""; 
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
}
.bg-overlay > * {
    position: relative;
}

/* Gradient Overlay  */ 

.bg-overlay-gradient::before { 
    background: linear-gradient(-30deg, rgba(177, 163, 163, 0.3), rgba(0,0,0,0));
} 
  

/* Images & Background Images—————————-—— */

.bg-image {
    background-color: #8E7483;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.bg-image-banner { background-image: url('images/cake-layered-co-11.jpg'); }
.bg-image-1 { background-image: url('images/cake-layered-co-1.jpg'); }
.bg-image-2 { background-image: url('images/cake-layered-co-2.jpg'); }
.bg-image-3 { background-image: url('images/cake-layered-co-3.jpg'); }
.bg-image-4 { background-image: url('images/cake-layered-co-4.jpg'); }
.bg-image-5 { background-image: url('images/cake-layered-co-5.jpg'); }
.bg-image-6 { background-image: url('images/cake-layered-co-6.jpg'); }
.bg-image-7 { background-image: url('images/cake-layered-co-7.jpg'); }
.bg-image-8 { background-image: url('images/cake-layered-co-8.jpg'); }
.bg-image-9 { background-image: url('images/cake-layered-co-9.jpg'); }
.bg-image-10 { background-image: url('images/cake-layered-co-10.jpg'); }
.bg-image-11 { background-image: url('images/cake-layered-co14.jpg'); }


.shape-rounder { border-radius: 10rem; }
.shape-round-corner { border-radius: 1.5rem; }

.capped-width {
    max-width: 1000px;
    margin: auto;
}

/* Aspect Ratio  */
.portrait-tall { padding-bottom: 175%; }
.portrait { padding-bottom: 125%; }
.square { padding-bottom: 100%; }
.square-long { padding-bottom: 110%; }
.landscape { padding-bottom: 59%; }
.landscape-wide { padding-bottom: 56%; }

/* Background Position */
.bg-pos-t { background-position: top; }
.bg-pos-b { background-position: bottom; }
.bg-pos-l { background-position: left; }
.bg-pos-r { background-position: right; }
.bg-pos-unique { background-position: 50% 50%; }


.gallery [class*="col-"] {
  padding: 0.5%;
}
.gallery-shop [class*="col-"] {
    padding: 2%;
  }

/* Image Positions --*/
.relative { position: relative; }

.position-1 {
    position: relative;
    bottom: -20%;
    left: 0;
    z-index: 1;
}
.position-2  {
    position: relative;
    bottom: -8%;
    right: -5%;
}
.position-3  {
    position: relative;
    left: -12%;
    top: 8%;
}
.position-4  {
    position: relative;
    top: -22%;
    left: -10%;
}

.image-position-unique {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    text-align: center; /* Center text within the column */
}


/*-- Testimonial Block -------------------*/
.quote-icon {
    color: #baaab3;
    font-size: 6rem;
    display: inline-block;
    line-height: 1;
 }


 /*-- Shop Block -------------------*/
.shop-text-block {
    border: 5px solid white;
    padding: 5%;
}



 /*---Subscribe form---*/
 .subscribe form input {
    width: 50%;
    font-family: inherit;
    background-color: white;
    border: 2px solid white;
    border-radius: 6px;
    margin: 0.5rem 0;
    padding: 0.4rem;
    padding-top: 0.5rem;
    letter-spacing: 0.08rem;
}
  
.subscribe form button {
    background-color: white;
    color: #8E7483;
    border: none;
    border-radius: 6px;
    /*margin: 0.5rem 0;*/
    padding: 0.5rem 1rem;
    letter-spacing: 0.1em;
    font-size: 1rem;
}


/*---Order Contact form------------*/
form input, 
form textarea, form select {
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.5rem;
  background-color: #F0EAED;
  border: 2px solid #F0EAED;
  border-radius: 6px;
  outline: none;
  font-family: inherit;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
}

form input:focus,
form textarea:focus {
  border-color: #8E7483;
}

textarea {
  min-height: 5rem;
}

form label {
  margin-top: 1rem;
  display: block;
  color: #8E7483;
  font-size: 0.9rem;
}

form button {
    background-color: #8E7483;
    color: white;
    border: 1px solid #8E7483;
    border-radius: 1.5rem;
    padding: 0.8rem 2.5rem;
    display: inline-block;
    font-size: 1rem;
    text-transform: uppercase;
    /*margin: 0.5rem 0;*/
}

form button:hover {
    color: #8E7483;
    background-color: #c6d8cf;
    border: 1px solid #c6d8cf;
}

.form-select {
    color: #8E7483;
}





/* General CSS  Respondive Styles (Apply everywhere unless overrided) */ 

.show-xs, 
.show-sm,
.show-md,
.mobile-menu {
	display: none;
}

/* ------- MD Media Query (64em / 1024px) --------------- */ 
/* - Styles added here will apply at devices smaller than 576px, or zoomed in equivalent */ 

@media(max-width:64em) {

    body { border: 2px solid green; padding: 0.5rem;}

	.show-md { display: block; }
	.hide-md { display: none;  }

    .md-tall-60 { min-height: 60vh; }
    .md-tall-70 { min-height: 70vh; }
    .md-tall-80 { min-height: 80vh; }

    h2              { font-size: 3.3rem;}
    .medium-text    { font-size: 1.8rem;  }
    .big-text       { font-size: 3.1rem;}

}

/* ------- SM Media Query (48em / 768px) --------------- */ 
/* - Styles added here will apply at devices smaller than 768px, or zoomed in equivalent */ 


@media(max-width:48em) {

    html { font-size: 14px;}
    p {font-size: 1.1rem; }

    body { border: 2px solid blue;}

	 .show-sm { display: block; }
	 .hide-sm { display: none;  }

     .sm-text-center    { text-align: center;}
     .sm-text-left      { text-align: left;}
     .sm-text-right     { text-align: right;}
     
     .sm-padded         { padding: 5%;}
     .sm-padded-1       { padding: 1rem;}
     .sm-padded-05      { padding: 0.5rem}
     
     .sm-padded-t-0     { padding-top:0; }
     .sm-padded-b-0     { padding-bottom:0;}
     .sm-padded-l-0     { padding-left:0;}
     .sm-margin-l-0     { padding-left:0;}
     .sm-margin-r-0     { padding-right:0;}

     .bg-image-banner-sm { 
        background-image: url('images/cake-layered-co-11.jpg');
        background-position: 25% 50%;
     }

    .logo h1        { font-size: 2rem; }
    h2              { font-size: 3rem;}
    h3              { font-size: 1.5rem;}
    .big-text       { font-size: 2.8rem;}
    .medium-text    { font-size: 1.7rem;  }

    .flex-flip-sm { flex-direction: column-reverse; }
     
}

/* ------- XS Media Query (36em / 576px) --------------- */ 
/* - Styles added here will apply at devices smaller than 576px, or zoomed in equivalent */ 

@media(max-width:36em) {

    

    body { border: 2px solid lightblue;}

	.show-xs { display: block; }
	.hide-xs { display: none;  }

    h1 {
        font-size: 1.5rem;
        line-height: 1.1;
    }

    h2              { font-size: 2.2rem;}
    h3              { font-size: 1.3rem;}
    .medium-text    { font-size: 1.4rem;  }
    .big-text       { font-size: 1.8rem;}
    .xs-subtle p {
        font-size: 0.6rem;
        opacity: 0.8;
    }

    .xs-tall-50 { min-height: 50vh; }
    .xs-tall-60 { min-height: 60vh; }
    .xs-tall-70 { min-height: 70vh; }

    .xs-padded-0       { padding: 0;}

    .bg-dark-xs     { background-color: #8E7483;  }
    .light-text-xs  { color: white; } 

    
    
}



/* ------- XXS Media Query (25em / 400px) --------------- */ 
/* - Styles added here will apply at devices smaller than 576px, or zoomed in equivalent */ 

@media(max-width:25em) {

    html { font-size: 12px;}

	[class*="grid"] .xxs-stack { 
        flex-basis: 100%;
        max-width: 100%;
    }

}