html {
    background-color: transparent;
    width: 100%;
    height: 100%;
}
.sec-con-us{
    width: 200px !important;

}
.menu-toggle{
        border: none;
    color: #f88b30;
    background-color: transparent;

}

#app-content{
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    flex-direction: column;
    margin-bottom: 100px;

}
.menu-toggle{
    display: none
}
.header-right .nav-links{
    flex-direction: row;
    gap: 1rem;
    display: flex;
    align-items: center;

}

body {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8c8c8' fill-opacity='0.21'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    font-size: 0.9rem;
    flex-direction: column;
    background-color: #fffff4;
    min-height: 100%;
    color: #333;
    font-family: "Nunito", sans-serif;
    margin: 0;
    display: flex;
    width: 100%;
    overflow-x: hidden;
    align-items: stretch;
}
*{
    /* outline: 1px solid red; */
}
a{
    text-decoration: none;
    color: #333;

}

li, ul{
      list-style-type: none;

}

body .header{
    justify-self: center;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 10px;
    align-self: center;
    justify-content: space-between;
}

body .body{
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: 0;
    justify-self: center;
    align-self: center;
}

.header{
  position: sticky;
  top: 0;
      height: max-content;

  z-index: 100000000 !important;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
}

.header .logo{
    height: 50px;
    margin-left: 1rem;
}
.header-right{
    gap: 2rem;
    display: flex;
    flex-direction: row;
    margin-right: 2rem;
    align-items: center;

}
.header-right ul{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
}
.sunny-gosyo{
    color: #e07a1f;
    display: flex;
    align-items: center;
    gap: 5px;
}
.sunny-gosyo span{
    font-size: 1rem;
}
ul .sunny-gosyo-li{
    text-decoration: none !important;
}
ul .sunny-gosyo-li:hover span {
   font-weight: bold;
}
.header-right ul li{
    color: #888;
}
.header-right ul li:hover{
    color: #333;

}

.header-right ul .selected{
    font-weight: bold;
    text-decoration: underline 1px solid;
    text-underline-offset: 3px;
    font-size: 1.1rem;
    color: #333;
}

.header-right .contact-us{
    border-radius: 5px;
    border: none;
    outline: none;
    background-color: #f6e841;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    height: max-content;


}
.header-right .contact-us span{
    font-size: 0.9rem;
    font-weight: bold;
}
.header-right .contact-us:hover{
    background-color: #ded038;

}


.body .base {
    width: 95%;
    background-color: #f6e841;
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    gap: 3rem;
    z-index: 1;
    align-items: center;
    position: relative;
    justify-content: center;
    padding: 0 2rem;
    overflow: hidden;
    height: 350px;
    margin-top: 2rem;
    background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(246, 232, 65, 1) 100%);

    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px;
}

.word-play{
    display: flex;
    flex-direction: column;
}
.word-play .first-line{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}
.first-line strong{
    color: #f88b30;
}
.first-line p{
    font-size: 3rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    line-height: 1;

}
.second-line{
    margin-top: 0.5rem;
}

.second-line span{
    font-size: 1.25rem;
    color: #333;
    margin-top: 10px;

}
.sec-con-us{
    padding: 5px 10px;
    border-radius: 25px;
    margin-top: 10px;
    background-color: #f88b30;
    color: #fff;
    font-size: 0.9rem;
    min-width: 200px;
    cursor: pointer;
    height: 35px;
    display: flex;
    align-items: center;
    border: none;
    gap: 5px;
    outline: none;
    justify-content: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.sec-con-us span{
    font-size: 0.9rem;
}
.sec-con-us:hover{
    background-color: #e07a1f;
}

.base-right {
    position: relative;
    width: auto;
    background-color: transparent;
    display: flex;
    justify-content: center;
}

.base-right img {
    display: block;
    max-width: 100%;
    max-height: 450px;
    width: auto;
    height: auto;
    object-fit: contain;

    transform: translateY(0);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}
.bg-shape {
    color: #f6f2c8;
    position: absolute;
    top: -20%;
    right: -10%;
    width: 500px;
    height: 500px;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}
.line-wave path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 3s forwards ease-in-out;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}



.what-we-offer{
    background-color: #ffffff85;
    width: 90%;
    min-height: 300px;
    padding: 2rem;
    align-items: center;
    justify-content: start;
    display: flex;
    flex-direction: column;
}
.what-we-offer .tags{
    font-size: 1.2rem;
    font-weight: normal;
}
.what-we-offer h1{
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
}
.tabs-list{
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    margin-top: 1rem;
}
.tabs-list div span{
    text-transform: uppercase;
    color: #666;
    cursor: pointer;
}
.tabs-list div span:hover{
    color: #333;
}
.tabs-list .selected span{
    font-weight: bold;
    text-underline-offset: 5px;
    text-decoration: underline 2px solid;

}
.tabs-list .selected span{
    color: #e07a1f !important;

}
.what-we-offer-content{
    width: 95%;
    background-color: transparent;
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.what-we-offer-content .product-card {
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 250px;
    gap: 0.5rem;
    overflow: hidden;
    background-color: #ded03820;
    width: 300px;
    border: 1px solid #ccc;
    justify-content: center;

}

.what-we-offer-content .product-card:hover{
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
    background-color: #fff;
    cursor: pointer;
}





.first-chicken{
    padding: 10px;
}
.what-we-offer-content .product-card img {
    width: 100%;
    height: 70%;
    object-fit: contain;
    border-radius: 8px;
}

.product-card .product-name {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin: 0;
}

.what-we-offer .what-we-offer-text{
    margin: 0;
    font-size: 1rem;
    margin-bottom: 1rem;

}
.what-we-offer h1 strong,
.map-con strong,
.stores-list .title strong,
.title-header strong,
.sunny-gosyo-con h1 strong{
    color: #e07a1f;
}
.map-con p, .sunny-gosyo-con h1, .stores-list .title, .title-header{
    font-size: 2rem ;
    font-weight: bold;
    margin: 0;
}

.what-we-offer-content .product-card.first-chicken {
    height: 270px;
    width: 220px;
    background-color: #f6e841;
    transform: scale(1.1);
    border-radius: 5px;
    z-index: 10;
    background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(246, 232, 65, 1) 100%);
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
}
.what-we-offer-content .product-card.first-chicken:hover{
    transform: scale(1.15);
    transition: all 0.3s ease-in-out;
    background-color: #f6e841;
    cursor: pointer;
}

.first-chicken img {
    height: 80% !important;
    object-fit: contain;
}
.what-we-offer-content .product-card:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.what-we-offer-content .product-card:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

}


.our-story, .cooking-ideas{
    background-color: transparent;
    width: 90%;
    padding: 2rem;
}
.cooking-ideas p{
    margin: 0;
    margin-bottom: 1rem;
}

.our-story-content{
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-template-rows: 1fr;
    gap: 2rem;
    width: 100%;
}
.carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    height: 500px;
    padding: 10px;
    box-sizing: border-box;
}

.carousel-container {
    display: flex;
    gap: 0;
    overflow-x: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: 5px;
    width: 100%;
    height: calc(100% - 28px);
    padding: 0;
    box-sizing: border-box;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.carousel-container > .hero-image,
.carousel-container > .skeleton-wrapper {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.carousel-container .hero-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.carousel-container .skeleton-wrapper {
    position: relative;
    overflow: hidden;
}

.carousel-container .skeleton-wrapper .skeleton-img {
    position: absolute;
    inset: 0;
    height: 100%;
    border-radius: 5px;
}

.carousel-container .skeleton-wrapper .hero-image {
    position: relative;
    z-index: 1;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #e0791fb0;
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
    z-index: 5;
    transition: 0.3s;
    height: 50px;
    width: 50px;
    align-items: center;
    display: flex;
    justify-content: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.nav-btn:hover { background: #e07a1f; }
.prev { left: 10px; }
.next { right: 10px; }

.dots-container {
    text-align: center;
    position: absolute;
    bottom: 15px;
    width: 100%;
    margin-top: 10px;
}

.dot {
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: rgb(155, 155, 155);
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: 0.3s;
}

.dot.active { background-color: #e07a1f; width: 25px; border-radius: 10px; }

.our-story-texts h1, .cooking-ideas h1{
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
}

.our-story-texts h1 strong, .cooking-ideas h1 strong{
    color: #e07a1f;
}

.our-story-texts p{
    font-size: 1.2rem;
    color: #333;
    margin-top: 10px;
}

.our-story-texts p br{
    margin-top: 1rem;
}

.video-section{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: min-content;

}
.video-section div{
    display: flex;
    flex-direction: row;
}
.video-section h2{
    width: 100%;
    font-size: 0.9rem;
    margin: 2px;
}

.video-section .video-responsive {
    margin-right: 5px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    /* height: revert-rule; */
    flex: 1;

}

.fb-video-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: #f0f2f5;
}

.fb-video-container iframe {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}




.cooking-ideas-content{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    width: 100%;
    margin-top: 1rem;
}
.cooking-idea-card{
    height: 300px;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 5px;
}
.cooking-idea-card:hover{
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.cooking-idea-card p{
    font-weight: bold;
    margin: 5px;
}
.cooking-idea-card iframe{
    width: 100%;
    height: 85%;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
.cooking-idea-card p{
    font-size: 0.9rem;
    margin: 10px;
    text-align: center;
    color: #f88b30;
}


.wavy-line {
    margin-top: 2rem;
  --s: 44px; /* size of the wave */
  --b: 5px; /* thickness of the line */
  --m: 0.4; /* curvature of the wave [0 2] */

  background: #f6e74172;
  --R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
  height: calc(2*var(--R));
  width: 90%;
  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--m)*var(--s)), var(--_g))
     calc(50% - 2*var(--s)) calc(50% - var(--s)/2 - var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--m)*var(--s)),var(--_g))
     50% calc(50% + var(--s)/2 + var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x;
}


.follow-us{
    margin-top: 1rem;
    text-align: center;
}
.follow-us p a{
    background-color:#0866ff;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;

}
.follow-us p a:hover{
    background-color:#0858d8;
}
.follow-us p{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}
.follow-us p a span{
    font-size: 0.9rem;
}

.footer {
  background-color: #f6e841;
  color: white;
  padding: 60px 20px 20px 20px;
  text-align: center;
  height: 300px;
  width: 100%;
  margin-top: 3rem;
}

.fotter-top-curve {
  mask:
    radial-gradient(40.82px at 50% 56px,#000 99%,#0000 101%) calc(50% - 70px) 0/140px 100%,
    radial-gradient(40.82px at 50% -21px,#0000 99%,#000 101%) 50% 35px/140px 100% repeat-x;

  -webkit-mask:
    radial-gradient(40.82px at 50% 56px,#000 99%,#0000 101%) calc(50% - 70px) 0/140px 100%,
    radial-gradient(40.82px at 50% -21px,#0000 99%,#000 101%) 50% 35px/140px 100% repeat-x;
}