/** Responsive **/



@media (max-width: 1024px){
    footer h6{
        font-size: .9rem;
    }
}


@media(min-width: 1025px){
    #the-problem .standard-paddin {
        paddin: 15rem;
    }
}

@media(max-width: 768px){
    footer>.container{
        width: 100%;
        padding-right: var(--bs-gutter-x, 0.75rem);
        padding-left: var(--bs-gutter-x, 0.75rem);
        margin-right: auto;
        margin-left: auto;
        max-width: initial;
    }
}

@media(min-width: 768px) {
    /* .footer-list-menu>*>div {
        border-right: 1px solid var(--bs-primary);
    } */

    /* .footer-list-menu * {
        flex: 1 0 0%;
    } */

    #promotion-carousel .splide__arrow--prev{
        left: -3em;
    }

    #promotion-carousel .splide__arrow--next{
        right: -3em;
    }

    #store-sign p{
        font-size: 1.4rem;
    }



}

@media(max-width: 1200px){
    .btn.w-50 {
        width: 70%!important;
        display: inline-block!important;
    }
}

@media (max-width: 991.5px){
    .w-75 {
        width: 100%!important;
    }

    /** entry banner **/
    .banner .h3{
        font-size: 1.1rem;
    }

    .banner.lon .caption {
        position: relative;
        padding-top: 2rem;
        paddin: 4.5rem;
    }

    .banner.lon .h3, .h3-on-mobile {
        font-size: 1.25rem;
        /* font-weight: normal; */
    }


    
    .banner.lon img {
        position: absolute;
        bottom: 0;
    }

    /** home **/
    
    .display-4 {
        font-size: 1.7rem;
    }

    /* #main-mobile-slider .caption h2, #main-slider .caption h2 {
        font-size: 1.1rem;
    } */
    
    #main-mobile-slider .splide__arrow--prev, #main-slider .splide__arrow--prev {
        left: .4;
    }

    #main-mobile-slider .splide__arrow--next, #main-slider .splide__arrow--next {
        right: .4;
    }

    #main-mobile-slider .circle h3, #main-slider .circle h3 {
        font-size: 1.2em;
        text-transform: uppercase;
    }

    #main-slider .circle{
        font-size: 80%;
        position: absolute;
        right: 10;
        width: 120px;
        height: 120px;
    }
    
    #main-mobile-slider .circle, #main-slider .circle {
        width: 85px;
        height: 85px;
        position: absolute;
        right: 10;
    }

    .hm-banner {
        padding-left: 0.5rem!important;
        padding-right: 0.5rem!important;
    }

    .btn.btn-min-width {
        min-width: 150px;
        padding-top: 0.5rem;
        paddin: 0.5rem;
    }

    #site-header .btn {
        padding: 0.5rem 20px;
    }
	

}

@media(max-width:767px) {



    :root {
        --standard-padding: 30px;
        --standard-padding-sm: 30px;
    }

    .for-large {
        display: none;
    }

    .for-small {
        display: block;
        margin-left: -12px;
        margin-right: -12px;
    }

    .w-75 {
        max-width: 100%;
    }

    .makes {
        background-size: 170% !important;
        paddin: 0px !important;
    }

    /* #main-slider .circle{
        font-size: 80%;
        position: absolute;
        right: 10;
        width: 120px;
        height: 120px;
    } */

    /** nav **/
    .custom-logo{
        max-width: 68px;
    }

    .navbar-dark .navbar-toggler {
        border: 1px solid white;
        opacity: 1;
        padding: 0px 3px;
    }

  


    

    .makes {
        paddin: 55%!important;
        background-position: 100% 100%!important;
    }

    .makes .content.w-75 {
        width: 100%!important;
    }

    #promotion-carousel{
        position: relative;
    }

    #promotion-carousel:before, #promotion-carousel:after {
        content: '';
        position: absolute;
        width: 15%;
        height: 100%;
        background: rgba(255, 255, 255, 0.6);
        z-index: 1;
        top: 0;
        bottom: 0;
    }

    #promotion-carousel:before{
        left: 0;
        background: linear-gradient(to left, rgba(254, 243, 255, 0), rgba(214, 225, 207, 1));
    }

    #promotion-carousel:after{
        right: 0;
        background: linear-gradient(to right, rgba(245, 245, 245, 0), rgba(255, 255, 255, 1));
    }

    #promotion-carousel .pd-card{
        border: 1px solid #b1d3c4;
    }

    /** our company **/
    .fs-md {
        font-size: 0.875rem;
    }

    /** our pizza **/
    .our-pizza .standard-padding-sm-top {
        padding-top: 0px;
    }
    
    .our-pizza-result .standard-paddin {
       paddin: 0px;
    }

    /** fresh slice area **/
    section.video-section .h-75 {
        height: 55%!important;
    }
	
	
	/** franchise **/



    /** footer **/
    footer h6{
        font-size: .9rem;
        /* white-space: nowrap; */
    }
    

}


@media(min-width: 580px){
    
    .footer-list-menu * {
        flex: 1 0 0%;
    }
    
    .footer-list-menu>*>div {
        border-right: 1px solid var(--bs-primary);
    }
    .fre-img-1 {
        max-width: 125px;
    }
    .fre-img-2 {
        max-width: 200px;
    }

}


@media (max-width: 575px){

    #main-slider .caption h5{
        font-size: 1rem;
    }

    .banner.lon .h3, .h3-on-mobile {
        font-size: 17.6px;
    }

    .full-width-mobile{
        margin-left: -12px!important;
        margin-right: -12px!important;
    }
    img.fre-img-1 {
        max-width: 100px;
    }

    .h3, h3 {
        font-size: 1.2rem;
    }

    .large-on-mobile{
        max-width: 130%;
        right: 0;
    }


    
}

@media(max-width:499px) {
    #main-slider .splide__list {
        max-height: 60vh;
    }

    footer h6{
        white-space: nowrap;
    }
	

}


/** App Banner **//

@media(min-width:992px){
	.app-buttons {
		margin: 10px;
		margin-top: 15px;
}
}
	

	
	@media (max-width: 992px) {
  .container-fluid {
    flex-direction: column;
  }
}
	
	@media (max-width: 992px) {
  .col-md-4 {
    float:none;
  }
}
	
	/* CSS for mobile devices (screens smaller than 768px) */
@media (max-width: 992px) {
    .responsive-margin-1 {
        margin-bottom: 20px;
		margin-top:20px;
    }
}
		/* CSS for mobile devices (screens smaller than 768px) */
@media (max-width: 992px) {
    .responsive-margin-2 {
		margin-top:20px;
    }
}

/* CSS for tablets (screens between 768px and 1024px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .responsive-margin-1 {
        margin-bottom: 20px; /* adjust this value as needed */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .order-1 {
        margin-bottom: 10px; /* adjust this value as needed */
    }
}
	
	

@media (max-width: 992px) {
    .custom-responsive > [class*='col-'] {
        flex-basis: 100%;
        max-width: 100%;
    }
}


@media (max-width: 992px) {
    .custom-responsive .order-1 {
        order: 1;
    }
    .custom-responsive .order-2 {
        order: 2;
    }
    .custom-responsive .order-3 {
        order: 3;
    }
    .custom-responsive > [class*='col-'] {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* CSS for tablets (screens between 768px and 1024px) */
@media (min-width: 992px) and (max-width: 1200px) {
    #app-store-button, #app-store-button {
        margin-bottom: 0px; /* adjust this value as needed */
		margin-right: 0px;
		margin-left: 0px;
		position: center;
    }
}

/** Responsive **/