/* Add custom CSS styles below */ 
/* Container */

.hero .container {
    width: 100%;
    max-width: 1600px;
    margin: auto;
    padding: 0 20px;
    padding-right: 30px;
}

/* Hero */

.hero {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 872px;

    background-image: url("https://raw.githubusercontent.com/themiifyHG/uploavideos/main/uploads/1783940009833_converted-Frame_4.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero .hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 550px;
}

.hero .hero-title {
    margin: 0;
    font-size: 52px;
    font-weight: 900;
    line-height: 1.2;
    color: #000;
}

.hero .hero-description {
    margin: 0;
    font-size: 20px;
    line-height: 1.7;
    color: #333;
}

.hero .hero-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 15px 28px;

    background: #B87A5C;
    color: #fff;

    text-decoration: none;
    border-radius: 6px;

    transition: .3s ease;
}

.hero .hero-btn:hover {
    background: #9d6449;
}

/* ========================= */
/* Tablet */
/* ========================= */

@media (max-width: 992px) {

    .hero {
        min-height: 550px;
    }

    .hero .hero-title {
        font-size: 42px;
    }

    .hero .hero-description {
        font-size: 18px;
    }
}

/* ========================= */
/* Mobile */
/* ========================= */

@media (max-width: 768px) {

    .hero {
        min-height: 500px;
        text-align: center;
        min-height:250px !important;
        background-position:right
    }

    .hero .hero-content {
        align-items: start;
        max-width: 100%;
        text-align:start;
        gap:10px;
    }

    .hero .hero-title {
        font-size: 34px;
        line-height: 1.3;
    }

    .hero .hero-description {
        width: 270px;
        font-size: 14px !important;
        font-weight:900;
        line-height: 1.8;
        text-shadow:1px 1px 10px #ffffffba ;
    }

    .hero .hero-btn {
        width: 100%;
        max-width: 100px;
        padding:10px !important;
    }
}

/* ========================= */
/* Small Mobile */
/* ========================= */

@media (max-width: 480px) {

    .hero {
        min-height: 420px;
    }

    .hero .hero-title {
        font-size: 28px;
    }

   .hero  .hero-description {
        font-size: 15px;
    }

    .hero .hero-btn {
        padding: 14px 24px;
    }
}


body#app {
    background-color:#FFF8F6;
}
#mainnav{
    background-color:#FFFEFE;
}

/*transparent to img*/
.s-block--fixed-banner .banner--fixed img ,
.s-block--banners  .grid .banner-entry {
    background-color:transparent !important;
}

/*photos slider full width */
section.s-block--photos-slider .swiper{
    padding:0;
}
section.s-block--photos-slider .swiper .swiper-slide{
    padding:0;
    width:100%;
}
section.s-block.s-block--photos-slider {
    margin-top:0;
}
section.s-block--photos-slider  button.s-slider-nav-arrow.swiper-button-disabled {
    visibility:hidden;
}

/*title elment list*/
section.s-block--banners .s-block__title {
    justify-content:center;
}
section.s-block--banners .right-side{
    padding:20px 0 ;
}
@media(min-width:768px){
section.s-block--banners .s-block__title h2{
    font-size:31px;
}
}

/*element list */
.s-block--banners > .grid a.banner-entry {
        grid-row: span 1 / span 2 ;
}
@media(min-width:768px){
   .s-block--banners > .grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        max-width: 900px;
        margin: auto;
    } 
  .s-block--banners > .grid a.banner-entry {
        height:350px;
    }
}
@media(max-width:768px){
    .s-block--banners > .grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    .s-block--banners > .grid a.banner-entry {
        height:100px;
    }
}
.index section{
  margin-bottom: 50px;
}
/*-------footer--------*/

.store-footer__inner {
    background-color: #272220 !important;
    color:#ECE0DB;
}
.md\:flex.items-center.justify-between.py-4.container.text-center {
    background-color: #272220 !important;
    margin: 0;
    max-width: 100% !important;
}
.md\:flex.items-center.justify-between.py-4.container.text-center p{
    color:#ECE0DB;
}
@media(max-width:768px){
    .store-footer__inner *{
        justify-content:center;
        text-align:center;
    }
}