@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300&family=Roboto:wght@300&display=swap');
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);


:root {
/*    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;*/


    /* Override Variables */
    --font-family-sans-serif1: 'Source Sans Pro' -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-family-sans-serif: "cwTeXYen", sans-serif;
    
    --gray-dark:  #404040;
    --purple: #533777;

    /* Page Variables */
    --font-family-serif: Dongle, serif;
    --color-text:  var(--gray-dark);
    --font-family-text1:  var(--font-family-serif);
    --font-family-text:  var(--font-family-sans-serif);
    --light-blue: #e1f7f5;
    --light-purple: #C290D2;
    --gold1: #ccab67;
    --gold2: #d1b376;
    --gold3: #d6bb85;
    --gold4: #dbc494;
    --gold5: #e0cca3;
    --copper: #faccaf;
    --pastel-green: #367b30;
    --pastel-green2: #2a530a;
    --green: #00a64e;
    --blue: #29c0a1;
    --dark-grey: #272727;
    --black: #1b2328;
    --pink: #ddb4a9;
    --bright-orange: #ff9d5c;
    --dark-blue: #2E5984;
    --brown: #594128;
    --light-brown: #6b4e30;

}

.family-sans {
    font-family: var(--font-family-sans-serif);
    font-size: 25px;
}

body {
    font-family: var(--font-family-sans-serif);
	color: var(--color-text);
    color: var(--gold2);
	font-weight: 200;
}

#page-home {
    background-color: #000000; 
}

#page-brand {
    background: url(../images/noodle1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
    min-height: 750px;
}

#page-popular {
    background-color:#1b2328;
}

/* product icons */
.layout-product-icons a.btn-gold {
    border: transparent;
    text-align: center;
    font-size: 1.65em;
    font-weight: 500;
    color: var(--gold1);
}

.layout-product-icons a.btn:hover {
    border-bottom: transparent;
    color: var(--gold3);
}

.layout-product-icons a span {
    display:block;
    font-size: 0.8em;
}

hr {
    margin-top: 1rem;
    margin-bottom: 2rem;
    border: 0;
    border-top: 1px solid whitesmoke;
    opacity: 100;
  }


.layout-popular .card {
   border-style: none;
   background-color: #1b2328;
}

.layout-popular .layout-image {
    border-radius: 8px;
}

.layout-popular a {
    text-decoration: none; 
    padding: 6px;  
}

.layout-popular .layout-title {
    font-size: 1.8em;
    font-weight: 500;
    color: var(--gold3);
    margin-bottom: 5px;
}

.layout-popular .layout-text {
    font-size: 1.2em;
    font-weight: 500;
    color: var(--gold2);
}

/* motto icons */

.layout-motto-icons .layout-icon {
    font-size: 2em;
}

/* .page-motto-icons-header .page-section-title {
    color:var(--brown);
    font-size: 3em;
    font-weight: 600;
}

.layout-motto-icons .layout-title {
    color:var(--gold1);
    font-weight: 600;
} */





@media (max-width: 414px) {
    #page-brand {
        min-height: 950px;
    } 
}

@media (max-width: 280px) {
    #page-brand {
        min-height: 1250px;
    }   
}

.site-header .layout-image {
    max-height: 60px;
}

.navbar-nav {
    text-align: right;
    font-size: 0.9em;
}

.navbar-nav a {
    color: var(--gold3);
}

.navbar-nav a:hover {
    color: var(--gold5);
}

.layout-brand {
    min-height: 70vh; 
}

.layout-brand .page-section-title b {
    font-size: 1.1em;
    color: var(--gold3);
    font-weight:  100;
} 

.layout-brand .page-section-title {
    font-size: 3em;
    color: var(--gold3);
} 

.layout-brand .page-section-title1 {
    font-size: 2.5em;
} 

.layout-brand .page-section-text {
    font-size: 1.5em;
    color: var(--gold4);
} 

.page-section-header .page-section-title {
    font-size: 3.3em;
    font-family: var(--font-family-sans-serif);
    font-weight: 200;
    color: var(--gold2);
}


@media (min-width: 320px) and (max-width: 480px) {
    .page-section-header .page-section-title {
        font-size: 2.25em;
        font-family: var(--font-family-sans-serif);
        font-weight: 200;
        color: var(--gold2);
    }
      
}

.page-section-header .page-section-text {
    font-size: 2.5em;
    font-weight: 200;
    color:var(--gold2);
}

.page-section-header .layout-image {
    max-width: 332px;
}




#page-floater {
    background: var(--black);
}

.layout-floater img {
    border-radius: 8px;
    padding-right: 0;
    padding-left: 0;
}

.layout-box .layout-title {
font-size: 2.2em;
color:var(--gold3);   
}

.layout-box .layout-text {
font-size: 1.3em;
}


/* #page-video {
    background: var(--black);
} */


@media (min-width: 1200px) {

#page-floater{
    margin:70px 0 50px 0;
    padding-bottom: 135px;
}

.layout-floater .layout-container{
    position:relative;
}

.layout-floater .layout-image1{
    max-width:  310px;
    top:50%;
    left:50%;
    transform:translate(-129%,-20%);
}

.layout-floater .layout-image2{
    max-width:  330px;
    position:absolute;
    transform: translate(-29%,34%);
}

.layout-floater .layout-image3{
    max-width:  450px;
    position:absolute;
    transform: translate(61%,102%);
}

.layout-floater .layout-box{
    position:absolute;
    transform: translate(78%,-20%) scale(1.2);
}

} 


@media (min-width: 991px) and (max-width: 1200px) {

#page-floater{
    margin:70px 0 20px 0;
    padding-bottom: 20px;
}

.layout-floater .layout-container{
    position:relative;
}

.layout-floater .layout-image1{
    max-width:  280px;
    top:50%;
    left:50%;
    transform:translate(-115%,-20%);
}

.layout-floater .layout-image2{
    max-width:  280px;
    position:absolute;
    transform: translate(-22.5%,25%);
}

.layout-floater .layout-image3{
    display:none;
}

.layout-floater .layout-box{
    position:absolute;
    transform: translate(85%,-5%);
}

} 


@media (min-width: 768px) and (max-width: 990px){

#page-floater{
    margin:70px 0 0 0;
}

.layout-floater .layout-container{
    position:relative;
}

.layout-floater .layout-image1{
    display:none;
}

.layout-floater .layout-image2{
    max-width:  380px;
}

.layout-floater .layout-image3{
    display:none;
}

.layout-floater .layout-box{
    padding-left:60px;
}

} 


@media (max-width: 768px) {

#page-floater{
    margin:70px 0 0 0;
}

.layout-floater .layout-container{
    position:relative;
}

.layout-floater .layout-image1{
    display:none;
}

.layout-floater .layout-image2{
    max-width:  300px;
}

.layout-floater .layout-image3{
    display:none;
}

}


.layout-video .layout-image {
    max-width: 90px;
    border-radius: 100%;
    border-width: 100px;
}

.layout-video .layout-image2 {
    max-width: 90px;     
    display: flex;
    align-items: center;
    align-content: center;   
}

.layout-video .layout-title {
    font-size: 1.55em;
    color: var(--gold1);
}




#page-contact{
    background: var(--black);
}

.layout-contact .layout-icon {
    font-size: 2em;
}

.layout-contact .icon {
    vertical-align: -6px;
    text-rendering: auto;
    width: 42px;
    height: 42px;
}

.layout-contact .layout-icon1 {
    font-size: 2em;
    color:var(--gold1);
}

.layout-contact .layout-icon2 {
    font-size: 2.25em;
    color:var(--gold1);
}

.layout-contact .layout-title{
    font-size: 1.8em;
}

.layout-contact .layout-text {
    font-size: 1.3em;
}

.layout-contact .layout-text1 {
    color: var(--gold1);
    text-decoration: none;
}

.layout-contact .layout-text1:hover {
    color: wheat;
}

.layout-contact .layout-text2 {
    font-size:medium;
}

.site-footer {
    background: var(--black);
    margin-top: 3;
}

.site-footer .layout-text {
    font-size: small;
}





#page-aboutus {
    background-color:#1b2328;
}

#page-letter {
    background-color: #fffaf7; 
}

.layout-message {
    min-height: 650px;
}

.layout-message .page-section-title {
    font-size: 2.2em;
    color: #d7b673;
}

.layout-message .page-section-text {
    font-size: 1.7em;
    font-weight: 600;
    color:#74665e;
    line-height: 2;
}

.layout-message .layout-image1 {
    max-width:500px;
}

.layout-message .layout-image2 {
    max-width:550px;
}

.message {
    position: relative;
}





#page-shop {
    background-color:#1b2328;
}

#layout-carousel {
    margin:0 0 185px 0;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    display: none;    
}

.carousel-indicators {
    margin-bottom: -30px;
}

.btn-warning {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #ff6f00;
    --bs-btn-border-color: #ff6f00;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #f06a02;
    --bs-btn-hover-border-color: #ff6f00;
    --bs-btn-focus-shadow-rgb: 217,164,6;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #ff6f00;
    --bs-btn-active-border-color: #ff6f00;
    --bs-btn-active-shadow: inset 0 3px 5px rgb(255, 255, 255);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #fa5130;
    --bs-btn-disabled-border-color: #fa5130;
}

.layout-noodle .layout-title {
    font-size: 2.3em;
    font-weight: 600;
    color: #545454;
    margin-bottom: 0px;
}

.fa-heart {
    color: #ff8787;
}

.fa-gift {
    color: #ccab67;
}

.layout-noodle .layout-text1 {
    font-size: 1.4em;
    font-weight: 600;
    color: dimgray;
}

.layout-noodle .layout-text2 {
    font-size: 1.4em;
    font-weight: 600;
    color: #c93d5f;
}

.layout-noodle .layout-text3 {
    font-size: 1.35em;
    text-indent: 18px;
    font-weight: 600;
    color: #c93d5f;
}

.layout-noodle .layout-text {
    font-size: 1.3em;
    font-weight: 600;
    color: dimgray;

}

/* shop button */
.btn {
	margin-bottom: 10px;
    font-size:larger;
}

#btn-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: none;
    padding: 0px;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    color: var(--gold1);
    border-color: var(--gold1);
}




/* product tabs */
.layout-products a.nav-link.active {
    border: transparent;
    border-bottom: 4px solid var(--gold2) !important;
    text-align: center;
    font-size: 1.75em;
    font-weight: 600;
    color: var(--brown);
}

.layout-products a.nav-link {
    border-bottom: transparent;
    text-align: center;
    font-size: 1.75em;
    font-weight: 600;
    color: var(--brown);
    padding-bottom: 1px;
}

.layout-products .nav-tabs {
    display:flex;
}

.layout-products .nav-tabs a span {
    display:block;
    font-size: 0.8em;
}

.page-products-header .page-section-title {
    font-size: 2.3em;
    font-weight: 600;
    color: var(--gold1);
    margin-bottom: 10px;
}

.layout-products .layout-title {
    font-size: 1.8em;
    font-weight: 600;
    color: var(--brown);
    margin-bottom: 5px;
}

.layout-products .layout-text {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--gold3);
}

/* products.html page*/
.layout-cards .layout-title {
    font-size: 1.8vem;
    font-weight: 600;
    color: var(--brown);
    margin-bottom: 5px;
}

@media (min-width: 320px) and (max-width: 480px) {
    .layout-cards .layout-title {
        font-size: 1.425em;
        font-weight: 600;
        color: var(--brown);
        margin-bottom: 5px;
    } 
}


/* products.html page */
.layout-cards .layout-text {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--gold3);
}

.layout-cards .layout-image {
    border-radius: 8px;
}

.card {
   display: flex;
   justify-content: flex-start;
   border-style: none;
}

.layout-cards a {
    text-decoration: none; 
}

.layout-popular .cards {
    display: flex;
    justify-content: flex-start;
    border-style: none;
}