*,
*:before,
*:after {
    box-sizing: inherit;
}

html {
    font-family: sans-serif;
    min-height: 100dvh;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    min-height: 100dvh;
    background:  
        linear-gradient(
    180deg,
    hsla(152, 80%, 16%, 0.233) 0%,
    hsla(110, 23%, 31%, 0.575) 18%,
    hsla(93, 22%, 38%, 0.804) 31%,
    hsl(83deg 21% 43%) 41%,
    hsl(77deg 20% 48%) 52%,
    hsla(77, 22%, 53%, 0.963) 63%,
    rgb(162, 174, 117) 86.97%,
    hsla(68, 30%, 61%, 0.126) 100%
  ), 
    url(images/coffee-cups2.webp) repeat-x scroll, 
    url(images/coffee-beans-short.webp) repeat-x left bottom,
        fixed 
    url(images/textured-paper.webp) repeat-x,
        fixed 
          linear-gradient(
            to bottom, 
            rgba(60, 164, 86, 0.436) 2%, 
            rgba(131, 161, 123, 0) 64%
            )
        #062212;
}

.wrapper {
    display: grid;
    width: min(100%, 800px);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 0px;
    margin-bottom: 10px;
    box-shadow: 0 2px 2px #000;
    background: #ede0d4;
    border-left: 8px solid #6f4e37;
    border-right: 8px solid #6f4e37;
}

header {
    display: flex;
    border-radius: 10px;
    border: 2px solid #d4a373;
    margin: 20px;
    background: 
        url(images/yeah-coffee-green.webp) no-repeat top 0px right 0px / cover, 
        url(images/latte-beans.webp) no-repeat center center / cover,  
        #000;
    box-shadow: inset 0 2px 4px #3b2f2f;
    padding: 20px;
    display: flex;
    align-items: end;
    justify-content: center;
    background:
        linear-gradient(rgba(20, 50, 30, 0.35), rgba(20, 50, 30, 0.65)),
        url("images/latte-beans.webp") center/cover no-repeat,
        #000;;
    border-radius: 20px;
    margin: 0px 20px 0px 80px;
}

header h1 {
    flex: 1 1 auto;
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: 0;
    color: #f5ebe0;
    line-height: 4;
    text-align: center;
    letter-spacing: 4px;
    text-shadow: 0 -2px 2px #6f4e37;
    box-shadow: rgb(212, 163, 115) -2px 4px 14px inset;
    background: 
        transparent 
        linear-gradient(
            to bottom, 
            hsla(106, 28%, 62%, 0.7) 1px, 
            hsla(110, 19%, 52%, 0.7) 2px, 
            rgb(8, 33, 24)
        );
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    backdrop-filter: blur(2px);
    /* clamp() smallest - dynamic - largest */
    margin: 0;
    line-height: 48px;
    font-size: clamp(10px, 5vw, 40px);
}

/* START - .nav-main */
.nav-main {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    padding: 1rem;
    background: transparent;
    padding-left: 18px;
}

.nav-main-menu-toggle {
    background: #d7e8ef;
    background: 
        transparent 
        linear-gradient(
            to bottom, 
            #b8825c8d 1px, 
            #7b563c9e 2px, 
            #4f3827
        );
    border: 2px solid #fdf6ec;
    border-bottom: 8px solid #fdf6ec;
    border-radius: 35px;
    cursor: pointer;
    padding: 0.35rem;
    line-height: 0;
    box-shadow: 0px 1px 6px #231911 inset;
}

.nav-main-menu-toggle rect {
    fill: #fdf6ec;
    transition: transform 0.35s ease, opacity 0.35s ease, width 0.35s ease;
}

/* SET SVG TRANSFORMS - based on individual elements not SVG box */
.nav-main-menu-toggle svg * {
    transform-box: fill-box;
}

/* HAMBURGER MENU ICON */
.nav-main-menu-toggle rect:nth-child(1) {
    transition: all 2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transform-origin: center;
}

.nav-main-menu-toggle rect:nth-child(2) {
    transition: all 2.25s linear;
    transform-origin: center;
}

.nav-main-menu-toggle rect:nth-child(3) {
    transition: all 2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transform-origin: center;
}

/* JAVASCRIPT WILL ADD - aria-expanded="true" - to .nav-main-menu-toggle */
.nav-main-menu-toggle[aria-expanded="true"] rect:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.nav-main-menu-toggle[aria-expanded="true"] rect:nth-child(2) {
    opacity: 0;
}

.nav-main-menu-toggle[aria-expanded="true"] rect:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* END - .nav-main-menu-toggle */

#nav-main-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 220px;
    margin: 0.75rem 0 0;
    padding: 0.5rem 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    border: 2px solid #fdf6ec;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
    background: 
        transparent 
        linear-gradient(
            to left, 
            hsla(106, 28%, 62%, 0.7) 1px, 
            hsla(110, 16.77%, 33.82%, 0.91) 34.45%, 
            rgb(8, 33, 24) 74.37%
        );
}

#nav-main-menu:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    margin: 20px;
    animation: coffeeDropIn 0.99s cubic-bezier(0.59, 0.7, 0.59, 1.93);
}

@keyframes coffeeDropIn {
    0% {
        opacity: 0;
        transform: translateY(-14px);
    }
    35% {
        opacity: 1;
        transform: translateY(8px);
    }
    55% {
        transform: translateY(-4px);
    }
    75% {
        transform: translateY(3px);
    }
    90% {
        transform: translateY(-1px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#nav-main-menu li a {
    color: #FEFDF1;
    text-decoration: none;
    display: block;
    padding: 0.85rem 1.25rem;
    font-weight: bold;
}

#nav-main-menu li a:hover {
    background: 
        transparent 
        linear-gradient(
            to right, 
            #221811 42.86%, 
            #906648c2 72.27%, 
            #6f4e37eb
        );
    color: #FEFDF1;
    
}

#nav-main-menu li a:focus {
    background: #973511;
    color: #FEFDF1;
}

#nav-main-menu li a:active {
    background: 
        transparent 
        linear-gradient(
            to right, 
            #29532e 23.53%, 
            #29532eb6 60.92%, 
            #29532e92
        );
    color: #FEFDF1;
}

/* END - .nav-main */

section {
    position: relative;
    border-radius: 10px;
    background: #f7f1e8;
    border: 2px solid #d8c3a5;
    border-radius: 18px;
    padding: 24px;
    margin: 30px 20px;
    box-shadow: inset 0 2px 4px #3b2f2f, 0 6px 14px rgba(100, 80, 24, 0.18);
    background: 
        transparent 
        linear-gradient(
            to bottom, 
            hsla(107, 28%, 62%, 0.195) 1px, 
            hsla(110, 19%, 52%, 0.326) 2px, 
            rgba(8, 33, 24, 0.092)
        );
}

section img {
    float: right;
    margin: 0 0 15px 20px;
    border-radius: 50%;
    border: 4px solid #d4a373;
    box-shadow: 0 4px 10px rgba(77, 60, 16, 0.62);
}

section h2 {
    display: inline-block;
    background: #6b8f71;
    color: #fdf6ec;
    padding: 10px 18px;
    border-left: 8px solid #d4a373;
    border-radius: 6px;
    margin: 5px 0 18px 0;
    border-bottom: 2px solid #062212;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

p {
    margin: 5px 0 10px;
    line-height: 1.7;
    max-width: 60ch;
}

img {
    width: 100%;
}

.section-subscribe {
  padding: 0px;
}

.btn-center{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* first button */ 

.main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  display: inline-block;
  text-align: center;
  line-height: 60px;
  width: 190px;
  height: 60px;
  font-size: 1.2em;
  background: #3b2f2f;
  border: none;
  border-radius: 50px;
  color: #e4e9e8;
  outline: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.4s;
  margin: 10px;
}

.btn-small {
  font-size: .8em;
  width: 150px;
  height: 50px;
  line-height: 50px;
}

.btn-large {
  font-size: 1.8em;
  width: 240px;
  height: 75px;
  line-height: 70px;
}

.btn:hover {
  box-shadow: inset 0 0 0 4px #6b8f71, 
              inset 0 0 0 8px #d4a373, 
              inset 0 0 0 12px #6f4e37,
              inset 0 0 0 16px #3b2f2f;
  background: #fdf6ec;
  color: #3b2f2f;
}

.btn:focus {
  background: #d4a373;
  color: #3b2f2f;
}

.btn:active {
  background: #9a654fac;
  color: #fdf6ec;
}

.btn-cta {
  background: #a64b2a;
  color: #fdf6ec;
}

.btn-cta:hover {
  box-shadow: inset 0 0 0 4px #6b8f71, 
              inset 0 0 0 8px #d4a373, 
              inset 0 0 0 12px #6f4e37,
              inset 0 0 0 16px #a64b2a;
  background: #fdf6ec;
  color: #3b2f2f;
}
.btn-cta:focus {
  background: #d4a373;
  color: #3b2f2f;
}

.btn-cta:active {
  background: #a64b2aa2;
  color: #fcf5ee;
}

.btn-act-fast {
  background: #29542d;
  color: #fdf6ec;
}

.btn-act-fast:hover {
  box-shadow: inset 0 0 0 4px #6b8f71, 
              inset 0 0 0 8px #d4a373, 
              inset 0 0 0 12px #6f4e37,
              inset 0 0 0 16px #29542d;
  background: #fdf6ec;
  color: #3b2f2f;
}
.btn-act-fast:focus {
  background: #d4a373;
  color: #3b2f2f;
}

.btn-act-fast:active {
  background: #29542d9b;
  color: #fdf6ec;
}

/* first button end */ 

/* second button */ 
.ui-btn {
  --btn-default-bg: #3b2f2f;
  --btn-padding: 15px 20px;
  --btn-hover-bg: #3b2f2f;
  --btn-transition: .3s;
  --btn-letter-spacing: .1rem;
  --btn-animation-duration: 1.2s;
  --btn-shadow-color: rgb(144, 95, 61);
  --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
  --hover-btn-color: #e1b991;
  --default-btn-color: #fdf6ec;
  --font-size: 1.2em;
  --font-weight: 600;
  --font-family: Menlo,Roboto Mono,monospace;
  text-decoration: none;
}

.ui-btn {
  box-sizing: border-box;
  padding: var(--btn-padding);
  display: inline-block;
  align-items: center;
  justify-content: center;
  color: var(--default-btn-color);
  font: var(--font-weight) var(--font-size) var(--font-family);
  background: var(--btn-default-bg);
  border: none;
  cursor: pointer;
  transition: var(--btn-transition);
  overflow: hidden;
  box-shadow: var(--btn-shadow);
  margin: 10px;
}

.ui-btn-small {
  font-size: .8em;
}

.ui-btn-large {
  font-size: 1.8em;
}

.ui-btn span {
  letter-spacing: var(--btn-letter-spacing);
  transition: var(--btn-transition);
  box-sizing: border-box;
  position: relative;
  background: inherit;
}

.ui-btn span::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  background: inherit;
}

.ui-btn-cta {
  background: #a64b2a;
  color: #ede0d4;
  text-decoration: none;
}

.ui-btn-act-fast {
  background: #29542d;
  color: #fdf6ec;
  text-decoration: none;
}

.ui-btn:hover, .ui-btn:focus {
  background: var(--btn-hover-bg);
}

.ui-btn:hover span, .ui-btn:focus span {
  color: var(--hover-btn-color);
}

.ui-btn:hover span::before, .ui-btn:focus span::before {
  animation: chitchat linear both var(--btn-animation-duration);
}

.ui-btn:active {
  box-shadow: inset 0 0 0 5px #d4a373;
}

.ui-btn-cta:active {
  box-shadow: inset 0 0 0 5px #a64b2a;
}

.ui-btn-act-fast:active {
  box-shadow: inset 0 0 0 5px #29542d;
}

@keyframes chitchat {
  0% {
    content: "B";
  }

  5% {
    content: "U";
  }

  10% {
    content: "ZZ";
  }

  15% {
    content: "!!";
  }

  20% {
    content: "BUZ";
  }

  25% {
    content: "BUZ";
  }

  30% {
    content: "BUZZ";
  }

  35% {
    content: "BUZZ";
  }

  40% {
    content: "BUZZ!";
  }

  45% {
    content: "*UZZ!";
  }

  50% {
    content: "&*ZZ";
  }

  55% {
    content: "BUZZ!";
  }

  60% {
    content: "*!@%!";
    right: 0;
  }

  65% {
    content: "!&*%@";
    right: 0;
  }

  70% {
    content: "@%&*!";
    right: 0;
  }

  75% {
    content: "BUZZ";
    right: 0;
  }

  80% {
    content: "ZZ!";
    right: 0;
  }

  85% {
    content: "UZ!";
    right: 0;
  }

  90% {
    content: "*";
    right: 0;
  }

  95% {
    content: "!";
    right: 0;
  }

  100% {
    content: "";
    right: 0;
  }
}
/* second button end */ 

/* third button start */ 
.fold-btn {
  position: relative;
  font-size: 1.2em;
  padding: 0.7em 1.4em;
  background-color: #3b2f2f;
  text-decoration: none;
  border: none;
  border-radius: 0.5em;
  color: #fdf6ec;
  text-shadow: 0 3px 3px #3b2f2fd4;
  box-shadow: 0.3em 0.3em 0.3em #3b2f2f93;
  margin: 10px;
}

.fold-btn-small {
  font-size: .8em;
}

.fold-btn-large {
  font-size: 1.8em;
}

.fold-btn::before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, rgb(213, 206, 192, 1) 1%, rgba(214, 205, 191) 35.29%, rgba(211,163,115,1) 67.23%, #6b8f71 87.82%);
  border-radius: 0 0 0.5em 0;
  box-shadow: 0.2em 0.2em 0.2em #3b2f2f;
  transition: 0.3s;
}

.fold-btn-act-fast {
  background: #29542d;
}
.fold-btn-cta {
  background: #a64b2a;
}

.fold-btn:hover::before {
  width: 1.6em;
  height: 1.6em;
}

.fold-btn:focus,
.fold-btn-cta:focus,
.fold-btn-act-fast:focus{
  background: #d4a373;
  color: #3b2f2f;
}

.fold-btn:active {
  box-shadow: 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.3);
  transform: translate(0.1em, 0.1em);
}

/* third button end */ 

/* fourth button start */ 
.bean-btn {
  all: unset;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  border-radius: 100em;
  background-color: rgba(0, 0, 0, 0.75);
  box-shadow:
    -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
    0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
    margin: 10px;
}

.bean-btn-small {
  font-size: .8em;
}

.bean-btn-large {
  font-size: 1.8em;
}

.bean-btn::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: calc(100% + 0.3em);
  height: calc(100% + 0.3em);
  top: -0.15em;
  left: -0.15em;
  border-radius: inherit;
  background: linear-gradient(
    -135deg,
    rgba(5, 5, 5, 0.5),
    transparent 20%,
    transparent 100%
  );
  filter: blur(0.0125em);
  opacity: 0.25;
  mix-blend-mode: multiply;
}

.bean-btn .bean-btn-outer {
  position: relative;
  z-index: 1;
  border-radius: inherit;
  transition: box-shadow 300ms ease;
  will-change: box-shadow;
  box-shadow:
    0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1),
    0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5),
    0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25);
}

.bean-btn:hover .bean-btn-outer {
  box-shadow:
    0 0 0 0 rgba(5, 5, 5, 1),
    0 0 0 0 rgba(5, 5, 5, 0.5),
    0 0 0 0 rgba(5, 5, 5, 0.25);
}

.bean-btn-inner {
    display: block;
  --inset: 0.035em;
  position: relative;
  z-index: 1;
  border-radius: inherit;
  padding: 1em 1.5em;
  background-image: linear-gradient(
    135deg,
    #3b2f2f,
    rgba(214, 207, 193, 1)
  );
  transition:
    box-shadow 300ms ease,
    clip-path 250ms ease,
    background-image 250ms ease,
    transform 250ms ease;
  will-change: box-shadow, clip-path, background-image, transform;
  overflow: clip;
  clip-path: inset(0 0 0 0 round 100em);
  box-shadow:
        /* 1 */
    0 0 0 0 inset #6b8f71,
    /* 2 */ -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25),
    /* 3 */ 0 0 0 0 inset rgba(5, 5, 5, 0.1),
    /* 4 */ 0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25),
    /* 5 */ 0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1),
    /* 6 */ 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
    /* 7 */ -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25);
}

.bean-btn-inner-cta {
    background-image: linear-gradient(
      135deg,
      #a64b2a,
      rgba(180, 180, 180, 1)
  );
}

.bean-btn-inner-act-fast {
    background-image: linear-gradient(
      135deg,
      #29542d,
      rgba(180, 180, 180, 1)
  );
}

.bean-btn:hover .bean-btn-inner {
    clip-path: inset(
    clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px)
      clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 100em
  );
    box-shadow:
        /* 1 */
    0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75),
    /* 2 */ -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5),
    /* 3 */ 0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5),
    /* 4 */ 0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15),
    /* 5 */ 0 0 0 0 inset rgba(80, 79, 61, 0.881),
    /* 6 */ 0.12em 0.12em 0.12em inset rgba(196, 207, 134, 0.25),
    /* 7 */ -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25);
}

.bean-btn .bean-btn-inner span {
    position: relative;
   z-index: 4;
    font-family: "Inter", sans-serif;
    letter-spacing: -0.05em;
    font-size: 1.2em;
    font-weight: 500;
    color: #eaf1e8;
    -webkit-background-clip: text;
    background-clip: text;
    transition: transform 250ms ease;
    display: block;
    will-change: transform;
    text-shadow: #3b2f2f 0 0 0.1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.bean-btn:hover .bean-btn-inner span {
    transform: scale(0.975);
}

.bean-btn,
.bean-btn-cta:focus,
.bean-btn-act-fast:focus {
    background: #d4a373;
}

.bean-btn:active .bean-btn-inner {
  transform: scale(0.975);
}

/* fourth button end */

/* email subscribe 2 */
.callout {
    font-family: sans-serif;
    padding: 12px;
    background: linear-gradient(
        to top,
        #2c5030,
        #4b2c20,
        #a64b2a,
        #f4d19b
    );
    box-shadow: 0 0 20px rgba(255, 200, 120, 0.4);
    border-radius: 15px;
}

.callout-heading {
    font-size: 2em;
    text-transform: uppercase;
    margin: 5px 0 18px 0;
    display: inline-block;
    background: #6b8f71;
    border-left: 8px solid #d4a373;
    box-shadow: -1px .5px #201b1b92;
    border-radius: 8px;
    padding: 12px 18px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: clamp(1rem, 6vw, 2rem);
    line-height: 1.1;
    text-shadow: 0 2px 2px #3b2f2f;
}

.callout-heading::after {
    content: " ☕";
}

.callout-intro {
    color: #FEFDF1;
    font-size: 1.25em;
    line-height: 1.6;
    max-width: 55ch;
    margin-bottom: 24px;
}

.subscribe-newsletter {
    --color-white-20: hsla(0, 0%, 100%, 0.20);
    --color-text: #fdf6ec;
    --color-green-light: #6d937491;
    --color-dark-brown: #201b1b;
    --color-black-60: hsla(0, 0%, 0%, 0.60);
    --color-button-dark: #a64b2a;
    --color-button-light: #f4d19b;
    --z-index: -1;
}

.subscribe-newsletter {
    transition: all 1s ease-in;
    background: var(--color-white-20);
    border-radius: .5em;
}

.subscribe-newsletter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
}

.subscribe-newsletter {
    border: 2px solid #d4a373;
    border-radius: 14px;
    background: rgba(253, 246, 236, 0.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    padding: 10px;
}

.subscribe-newsletter label {
    color: var(--color-text);
    font-weight: bold;
}

.subscribe-newsletter fieldset {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
}

.subscribe-newsletter fieldset:first-child {
    flex: 1 1 auto;
}

.subscribe-newsletter fieldset:last-child::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("images/spinner-double.svg") no-repeat center;
    z-index: var(--z-index, -1);
}

.subscribe-newsletter input:not([type="radio"]):not([type="checkbox"]) {
    appearance: none;
    border: none;
    border-radius: 0;
}

.subscribe-newsletter input {
    position: relative;
    font-family: inherit;
    font-size: 1.2em;
    line-height: 2.4;
    letter-spacing: 0.05em;
    padding: 0 .5em;
    margin: 0;
    color: var(--color-button-dark);
}

.subscribe-newsletter input[type=email], 
.subscribe-newsletter input[type=text] {
    background: var(--color-text);
    color: #3b2f2f;
}

.subscribe-newsletter input[type=text]:focus,
.subscribe-newsletter input[type=email]:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-button-dark);
}

.subscribe-newsletter input::placeholder {
    position: relative;
    color: var(--color-button-dark);
    opacity: .4
}

.subscribe-newsletter input::placeholder {
    transition: 2s cubic-bezier(1, 1.65, 0.35, 1.32), opacity .25s ease;
}

.subscribe-newsletter input:focus::placeholder {
    transform: translateX(100%);
    transition: transform 1s cubic-bezier(0.15, 0.69, 0.7, -0.42), opacity 2s ease;
    opacity: 0
}

.subscribe-newsletter input[type=submit],
.subscribe-newsletter input[type=submit]:invalid {
    background: var(--color-button-dark);
    color: var(--color-text);
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 1em;
    transition: all 1s .5s ease-in;
    transform-origin: right center;
    transform: scale(1);
    box-shadow: 0 0 0px 0px var(--color-black-60);
}

.subscribe-newsletter input[type="submit"] {
    background: #a64b2a;
    color: var(--color-text);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.64, 0.36, 0, 1.53), box-shadow 0.2s ease;
}

.subscribe-newsletter:valid input[type=submit] {
    color: #6C321E;
    background: var(--color-button-light);
    transform: scale(1);
    box-shadow: 3px 1px 4px var(--color-black-60), 3px 2px 4px var(--color-black-60);
}

.subscribe-newsletter fieldset input[type=submit]:disabled {
    background: var(--color-dark-brown);
    color: var(--color-text);
    transform: scale(1);
    box-shadow: 0 0 0px 0px var(--color-black-60);
}

.subscribe-newsletter label {
    color: var(--color-text);
    line-height: 1.625em;
    padding: 0 .5em;
    font-weight: bold;
}

.subscribe-newsletter.sending {
    background: var(--color-green-light);
}

.subscribe-newsletter.received {
    background: var(--color-green-light);
}

.subscribe-newsletter .subscribe-newsletter-message-error {
    background: var(--color-button-dark);
}

.subscribe-newsletter .subscribe-newsletter-message-success {
    background: #22181168;
    color: var(--color-text);
    font-size: 1.6em;
    flex: 1;
    text-align: center;
    border-radius: 10px;
}

.subscribe-newsletter input[type="submit"]:hover {
    background: #6b8f71;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.subscribe-newsletter input[type="submit"]:active {
    transform: translateY(1px);
}
/* email subscribe 2 end */

footer {
    display: flex;
    gap: 20px;
    margin: 0 20px 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

footer a {
    color: #6b8f71;
    text-decoration: none;
    line-height: 2;
}

footer a:first-child {
    margin-right: auto;
}

footer a,
footer a[href^="javascript"] {
    position: relative;
    color: #f5ebe0;
    background-color: #6b8f71;
    border-radius: 3px;
    padding: 0 10px;
    box-shadow: 0 2px 2px #000;
}

footer a,
footer a[href^="javascript"]:active {
    top: 2px;
}

footer a:hover {
    color: #f5ebe0;
    background-color: #6f4e37;
}

footer a:visited {
    background-color: #445d49;
}

footer a:focus {
    color: #f5ebe0;
    outline: 2px solid #3b2f2f;
}

footer a:active {
    color: #f5ebe0;
}

@media (min-width: 48rem) {
    .wrapper {
        margin: 10px auto;
        margin-top: 10px;
    }
    
    header {
        height: 300px;
        padding: 40px;
        background: 
            url(images/coffee-pot2.webp) no-repeat top -36px right 9px / 300px 300px, 
            url(images/yeah-coffee-green.webp) no-repeat center center / cover, 
            linear-gradient(
                to bottom, 
                hsl(130, 14%, 49%), 
                hsl(130, 15%, 39%))
            #3b2f2f;
        margin: 20px;
    }

    header h1 {
        padding: 8px 10px;
        font-size: 2.50em;
        line-height: 2;
        align-self: flex-end;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    .nav-main {
        position: static;
        width: 745px;
        margin: 0 0 0 20px;
        border-radius: 10px;
        border: 2px solid #d4a373;
        box-shadow: inset 0 2px 4px #3b2f2f;
        padding: 0;
        background: 
        transparent 
        linear-gradient(
            to bottom, 
            hsla(106, 28%, 62%, 0.7) 1px, 
            hsla(110, 16.77%, 33.82%, 0.91) 34.45%, 
            rgb(8, 33, 24) 74.37%
        );
    }

    .nav-main-menu-toggle {
        display: none;
    }

    #nav-main-menu {
        position: static;
        width: 100%;
        margin: 0;
        padding: 0.75rem 1.5rem;
        list-style: none;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 2rem;
        background: transparent;
        border: 0;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: none;
    }

     #nav-main-menu li {
        margin: 0;
        padding: 0;
    }

    #nav-main-menu li a {
        display: inline-block;
        padding: 0.75rem 0;
        line-height: normal;
        color: #FEFDF1;
        border: 0;
        background: transparent;
        text-decoration: none;
    }

    #nav-main-menu li a:hover {
        color: #ffb873;
        background: none;
        border: 2px solid #ffb873;
        border-radius: 10px;

    }

    #nav-main-menu li a:focus {
        color: #FEFDF1;
        outline: 2px solid #a64b2a;
        background: none;
        outline-style: dashed;
    }

    #nav-main-menu li a:active {
        color: #e9d19c;
        background: none;
        border: 2px solid #6b8f71;
        border-radius: 10px;
    }

    img {
        width: 250px;
        float: right;
        margin: 10px 5px 10px 8px;
    }

     .callout {
        padding: 10px;
    }
    .subscribe-newsletter {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .subscribe-newsletter-fillin {
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .subscribe-newsletter:valid input[type=submit] {
        transform: scale(1.2);
    }
}