@import url('https://fonts.googleapis.com/css2?family=Kaisei+Tokumin:wght@400;500;700&family=Poppins:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');

:root{
    --lg-font: 'Kaisei Tokumin', serif;
    --sm-font: 'Poppins', sans-serif;
    --pink: #41B652;
    --opposite: #ffbf00;
}


body{
    font-family: var(--sm-font);
}

.brand-color {
    color:var(--pink);
    font-family: 'Dancing Script', cursive;
}

.main-color {
    color:var(--pink);
}
.opposite-color {
    color:var(--opposite);
}

.font700{
 font-weight: 700;;
}

.fireworks {
    position: absolute;
      top: 0;
      left: 0;
    width: 100%;
    height: 100%;
  }
  
.padtop {
    margin-top:88px;
}

/* button */
.bg-primary{
    background-color: var(--pink)!important;
}

.btn:not(.nav-btns button){
    background-color: #fff;
    color: rgb(85, 85, 85);
    padding: 10px 28px;
    border-radius: 25px;
    border: 1px solid rgb(85, 85, 85);
}
.btn:not(.nav-btns button):hover{
    background-color: var(--pink);
    color: #fff;
    border-color: var(--pink);
}

/* text color */
.text-primary{
    color: var(--pink)!important;
}

/* navbar */
.navbar{
    -webkit-box-shadow: 0 3px 9px 3px rgba(0, 0, 0, 0.1);
            box-shadow: 0 3px 9px 3px rgba(0, 0, 0, 0.1);
}
.navbar-brand img{
    width: 70px;
}
.navbar-brand span{
    letter-spacing: 2px;
    font-family: var(--lg-font);
}
.nav-link:hover{
    color: var(--pink)!important;
}
.nav-item{
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}

a.nav-link.active {
    color: var(--pink)!important;
}

/* header */

.vh-100 {
    height: calc(100vh - 100px)!important;
}

.carousel-inner h1{
    font-size: 60px;
    font-family: var(--lg-font);
}
.carousel-item .btn{
    border-color: #fff!important;
}
.carousel-item .btn:hover{
    border-color: var(--pink)!important;
}

/* title */
.title h2::before{
    position: absolute;
    content: "";
    width: 4px;
    height: 50px;
    background-color: var(--pink);
    left: -20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

/* collection */
.active-filter-btn{
    background-color: var(--pink)!important;
    color: #fff!important;
    border-color: var(--pink)!important;
}
.filter-button-group .btn:hover{
    color: #fff!important;
}

.collection-img span {
    top: 20px;
    right: 20px;
    width: auto;
    font-size: 12px;
    padding: 5px 10px;
}

/* special */
.special-img span{
    top: 20px;
    right: 20px;
}
.special-list .btn{
    padding: 8px 20px!important;
}
.special-img img{
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.special-img:hover img{
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2);
}

/* offers */
#offers{
    background: url(../images/offer_img.jpg) center/cover no-repeat;
}
#offers .row{
    min-height: 60vh;
}
.offers-content span{
    font-size: 28px;
}
.offers-content h2{
    font-size: 60px;
    font-family: var(--lg-font);
}
.offers-content .btn{
    border-color: transparent!important;
}

/* about */
#about{
    /* background-color: rgba(179, 179, 179, 0.05); */
}

/* newsletter */
#newsletter{
    background-color: rgba(179, 179, 179, 0.05);
}
#newsletter p{
    max-width: 600px;
}
#newsletter .input-group{
    max-width: 500px;
}
#newsletter .form-control{
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}
#newsletter .btn{
    background-color: var(--pink);
    color: #fff;
    border-color: var(--pink);
}
#newsletter .btn:hover{
    background-color: #000;
    border-color: #000;
}

/* footer */
footer .brand{
    font-family: var(--lg-font);
    letter-spacing: 2px;
}
footer a{
    -webkit-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}
footer a:hover{
    color: var(--pink)!important;
}

.copy {
    background: var(--pink);
    font-size: 13px;
    color: #fffbfb;
}

.accordion-button:not(.collapsed) {
    color: var(--bs-green);
    background-color: var(--bs-yellow);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;
    font-weight: 500;
}

#faq {
  clear:both;   
}

.fac-details {
    max-width: 800px;
}


.loader {
    position: fixed;
    left: 0px;                  
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    background: url({{ asset('assets/images/loader.gif') }}) 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}

#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999}
#loader-wrapper .loader-section{position:fixed;top:0;width:50%;height:100%;background:rgb(0, 0, 0);z-index:1000;opacity:.5;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
#loader-wrapper .loader-section.section-left{left:0}
#loader-wrapper .loader-section.section-right{right:0}
#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#3498db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:1001}
#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#e74c3c;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}
#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#f9c922;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}
#loader-logo{display:block;position:absolute;left:48%;top:46%;background:url("../images/user-bg-2.html") no-repeat center center;z-index:1001}

@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
.loaded #loader-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all 0.3s 1s ease-out;transition:all 0.3s 1s ease-out}
.loaded #loader-wrapper .loader-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}
.loaded #loader-wrapper .loader-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}
.loaded #loader{opacity:0;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}
.progress{background-color:rgba(255,64,129,0.22)}
.no-js #loader-wrapper{display:none}


/* media queries */
@media(min-width: 992px){
    .nav-item{
        border-bottom: none;
    }
}

@media screen and (max-width: 480px) {
  .nav-btns {
    display:none;
  }
}

@media screen and (max-width: 767px) {

  .carousel-item h1 {
    font-size:30px;
  }
}