/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 09 2025 | 09:31:21 */
/*======================================>
    HTML - CSS
=========================================	>*/

html{
    scroll-behavior: auto !important;
}

a,
.btn,
button,
p,
input,
select,
textarea,
li,
img,
svg path,
*::after,
*::before,
h1,
h2,
h3,
h4,
h5,
h6 {
	transition: all 0.6s linear 0s !important;
}




/*======================================>
    Preloader - CSS
=========================================	>*/
.preloader {
    background: #ffffff;
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 99999999999999999999;
}

.labfloxLoader {
	position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
}

.labfloxLoader img {
    animation-fill-mode: both;
    animation-name: flipInY;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}






/*======================================>
    Header - CSS
=========================================	>*/

#menu-item-28 a span {
    border-radius: 30px;
    background-color: #ffffff;
    color: #000000;
}

.fusion-header {
    height: 94px !important;
    /*position: absolute !important;*/
    /*background-color: transparent !important;*/
    top: 0% !important;
}


.fusion-logo {
    position: absolute;
    top: 0px;
    left: 0px;
}


.fusion-header-has-flyout-menu .fusion-flyout-menu-bg {
    background-color: #ff5a58fa;
}



/* standard logo */
.fusion-logo .fusion-logo-link .fusion-standard-logo,
.fusion-logo .fusion-logo-link .fusion-sticky-logo {
    width: 350px;
}

@media (min-width: 200px) and (max-width: 950px) {
    .fusion-header-wrapper .fusion-header-v1 .fusion-header {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    .fusion-header-wrapper .fusion-header-v1 .fusion-header .fusion-row {
        margin: 0;
    }
}






.Header_Line .fusion-builder-row .fusion-layout-column {
	margin-bottom: 0px;
}
.Header_Line .fusion-builder-row .fusion-layout-column .fusion-column-wrapper .fusion-image-carousel {
	    margin-bottom: 0px;
}





/*======================================>
    About Us - CSS
=========================================	>*/
.About_Section::before {
    position: absolute !important;
	content: '' !important;
	background: url(https://shreejibread.com/wp-content/uploads/2025/02/landing-slider-2.png) no-repeat;
	width: 137px !important;
	height: 232px !important;
	background-size: 100% !important;
	left: 0%;
	top: 0%;
	background-position: left;
	transition: all 0.6s linear;
}



.About_Section::after {
    position: absolute !important;
    content: '' !important;
    background: url(https://shreejibread.com/wp-content/uploads/2025/03/landing-slider-1.png) no-repeat;
    width: 267px !important;
    height: 621px !important;
    background-size: 60% !important;
    top: 0%;
    right: 0%;
    background-position: right;
    transition: all 0.6s linear;
    /*transform: rotate(90deg)*/
}


.Our_Value_Card .fusion-column-wrapper {
    box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.07);
    margin: 10px;
    border-radius: 10px;
}






/*======================================>
    Products Section - CSS
=========================================	>*/

.Products_Card .fusion-column-wrapper {
    /*padding: 30px;*/
    margin: 20px !important;
}


.Wheat-Bread .fusion-column-wrapper {
    background: linear-gradient(to top, #522b19 0%, #522b19 50%, #f0c2ae 50%, #f0c2ae 100%);
}

.Garlic-Bread .fusion-column-wrapper {
    background: linear-gradient(to top, #f094a1 0%, #f094a1 50%, #802937 50%, #802937 100%);
}

.Elephant-Bread .fusion-column-wrapper {
    background: linear-gradient(to top, #383257 0%, #383257 50%, #afcded 50%, #afcded 100%);
}

.Indian-Bread .fusion-column-wrapper{
    background: linear-gradient(to top, #a10a0a 0%, #a10a0a 50%, #fa8686 50%, #fa8686 100%);
}

.Sandwich-Bread .fusion-column-wrapper{
    background: linear-gradient(to top, #cc421a 0%, #cc421a 50%, #ff9e85 50%, #ff9e85 100%);
}



#Product_Wheat_Bread_1 .fusion-column-wrapper {
	background: linear-gradient(to top, #f0bba3 0%, #f0bba3 65%, transparent 50%, transparent 100%);
}
#Product_Wheat_Bread_2 .fusion-column-wrapper {
	background: linear-gradient(to top, #947d75 0%, #947d75 65%, transparent 50%, transparent 100%);
}

#Product_Ekeohant_Bread .fusion-column-wrapper {
    background: linear-gradient(to top, #b0ddff 0%, #b0ddff 65%, transparent 50%, transparent 100%);
}

#Product_Garlic_Bread .fusion-column-wrapper {
    background: linear-gradient(to top, #faa3b0 0%, #faa3b0 65%, transparent 50%, transparent 100%);
}

#Product_Mahuva_Bread .fusion-column-wrapper {
    background: linear-gradient(to top, #f9f0a2 0%, #f9f0a2 65%, transparent 50%, transparent 100%);
}
#Product_Indian_Bread .fusion-column-wrapper {
    background: linear-gradient(to top, #df5455 0%, #df5455 65%, transparent 50%, transparent 100%);
}
#Product_Okay_Bread .fusion-column-wrapper {
    background: linear-gradient(to top, #bddae8 0%, #bddae8 65%, transparent 50%, transparent 100%);
}
#Product_Sandwich_Bread .fusion-column-wrapper {
    background: linear-gradient(to top, #dd633f 0%, #dd633f 65%, transparent 50%, transparent 100%);
}
#Product_Slice_Bread_1 .fusion-column-wrapper {
    background: linear-gradient(to top, #e2d0bd 0%, #e2d0bd 65%, transparent 50%, transparent 100%);
}
#Product_Slice_Bread_2 .fusion-column-wrapper {
    background: linear-gradient(to top, #874d7d 0%, #874d7d 65%, transparent 50%, transparent 100%);
}
#Product_Tiny_Bread .fusion-column-wrapper {
    background: linear-gradient(to top, #fad96d 0%, #fad96d 65%, transparent 50%, transparent 100%);
}
#Product_25_Rupee_Bread .fusion-column-wrapper {
    background: linear-gradient(to top, #dd3d3e 0%, #dd3d3e 65%, transparent 50%, transparent 100%);
}
#Product_Family_Bread .fusion-column-wrapper {
    background: linear-gradient(to top, #f6f6f6 0%, #f6f6f6 65%, transparent 50%, transparent 100%);
}
#Product_Frutti_Bread .fusion-column-wrapper {
    background: linear-gradient(to top, #e25a5c 0%, #e25a5c 65%, transparent 50%, transparent 100%);
}
#Product_Immunity_Bread .fusion-column-wrapper {
    background: linear-gradient(to top, #efa870 0%, #efa870 65%, transparent 50%, transparent 100%);
}

#Product_Pao .fusion-column-wrapper {
    background: linear-gradient(to top, #c71f35 0%, #c71f35 65%, transparent 50%, transparent 100%);
}

#Product_Frutti_Toast_1 .fusion-column-wrapper {
    background: linear-gradient(to top, #eb5c8f 0%, #eb5c8f 65%, transparent 50%, transparent 100%);
}
#Product_Frutti_Toast_2 .fusion-column-wrapper {
    background: linear-gradient(to top, #a4c95f 0%, #a4c95f 65%, transparent 50%, transparent 100%);
}
#Product_Mawa_Toast .fusion-column-wrapper {
    background: linear-gradient(to top, #a4a3d1 0%, #a4a3d1 65%, transparent 50%, transparent 100%);
}
#Product_Milk_Rusk_Toast .fusion-column-wrapper {
    background: linear-gradient(to top, #3ebcd2 0%, #3ebcd2 65%, transparent 50%, transparent 100%);
}
#Product_Tal_Toast .fusion-column-wrapper {
    background: linear-gradient(to top, #f4c10c 0%, #f4c10c 65%, transparent 50%, transparent 100%);
}
#Product_Vanilla_Toast .fusion-column-wrapper {
    background: linear-gradient(to top, #a1c95e 0%, #a1c95e 65%, transparent 50%, transparent 100%);
}
#Product_Premium_Mawa_Rusk_Toast .fusion-column-wrapper {
    background: linear-gradient(to top, #9693bf 0%, #9693bf 65%, transparent 50%, transparent 100%);
}
#Product_Premium_Butter_Rusk_Toast .fusion-column-wrapper {
    background: linear-gradient(to top, #e1c53e 0%, #e1c53e 65%, transparent 50%, transparent 100%);
}
#Product_Premium_Milk_Rusk_Toast .fusion-column-wrapper {
    background: linear-gradient(to top, #33acbf 0%, #33acbf 65%, transparent 50%, transparent 100%);
}
#Product_Premium_Kaju_Rusk_Toast .fusion-column-wrapper {
    background: linear-gradient(to top, #7b8624 0%, #7b8624 65%, transparent 50%, transparent 100%);
}
#Product_Premium_Tal_Rusk_Toast .fusion-column-wrapper {
    background: linear-gradient(to top, #e3ae0c 0%, #e3ae0c 65%, transparent 50%, transparent 100%);
}

#Product_Namkeen .fusion-column-wrapper {
    background: linear-gradient(to top, #d3494e 0%, #d3494e 65%, transparent 50%, transparent 100%);
}
#Product_Pizaa_Parrty .fusion-column-wrapper {
    background: linear-gradient(to top, #ef7f1b 0%, #ef7f1b 65%, transparent 50%, transparent 100%);
}
#Product_Pizza .fusion-column-wrapper {
    background: linear-gradient(to top, #ffcc01 0%, #ffcc01 65%, transparent 50%, transparent 100%);
}
#Product_Atta_Khari .fusion-column-wrapper {
    background: linear-gradient(to top, #8d5a3a 0%, #8d5a3a 65%, transparent 50%, transparent 100%);
}






/*======================================>
    Testimonial Section - CSS
=========================================	>*/



.Testimonial_Section::after {
    position: absolute !important;
    content: '' !important;
    background: url(https://shreejibread.com/wp-content/uploads/2025/02/landing-slider-9.png) no-repeat;
    width: 239px !important;
    height: 333px !important;
    background-size: 100% !important;
    bottom: 0%;
    right: 0%;
    background-position: right;
    transition: all 0.6s linear;
    transform: rotate(90deg);
}

.card_button {
    display: flex;
    gap: 10px;
    justify-content: center;
}


.wrapper {
  position: relative;
}
.card_button i {
    height: 50px;
    width: 50px;
    cursor: pointer;
    font-size: 1.25rem;
    text-align: center;
    line-height: 50px;
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 50%;
    transition: all 0.6s ease-out;
}

.card_button i:hover {
    background: #f9f0a2;
    color: #000000;
}


.wrapper .carousel{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 2) - 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  border-radius: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel.no-transition {
  scroll-behavior: auto;
}

.carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.carousel.dragging .card {
  cursor: grab;
  user-select: none;
}

.carousel .card {
  scroll-snap-align: start;
  list-style: none;
  cursor: pointer;
  padding-bottom: 15px;
  flex-direction: column;
  border-radius: 8px;
  padding: 15px;
}


.card .img img {
    width: 68px;
    height: 58px;
    margin-bottom: 20px;
}

.carousel .card p {
  color: #ffffff;
}

.carousel .card h2 {
  font-weight: 500;
  font-size: 1.56rem;
  margin: 30px 0 5px;
  color: #f9f0a2;
}

.carousel .card span {
  color: #6A6D78;
  font-size: 1.31rem;
  color: #ffffff;
}

@media screen and (max-width: 900px) {
  .wrapper .carousel {
    grid-auto-columns: calc((100% / 2) - 9px);
  }
}

@media screen and (max-width: 850px) {
  .wrapper .carousel {
    grid-auto-columns: 100%;
  }
}








.Contact_Form_Section::before {
    position: absolute !important;
    content: '' !important;
    background: url(https://shreejibread.com/wp-content/uploads/2025/02/New-Project-1.png) no-repeat;
    width: 350px !important;
    height: 250px !important;
    background-size: 100% !important;
    top: 0%;
    left: -5%;
    background-position: right;
    transition: all 0.6s linear;
}








.Contact_Form .fusion-column-wrapper {
    box-shadow: 0px 20px 80px 0px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}

.Contact_Fomr_Home .wpcf7-submit {
    margin-top: 20px !important;
	width: 100% !important;
    border-radius: 50px !important;
    background: #ff3318 !important;
    transition: all 0.6s linear !important;
}
.Contact_Fomr_Home .wpcf7-submit:hover {
    /*background-color: #0f304f !important;*/
    background: #822200 !important;
}

.Contact_Fomr_Home textarea::placeholder,
.Contact_Fomr_Home input::placeholder {
    color: #00000054;
}

.Contact_Fomr_Home textarea,
.Contact_Fomr_Home input {
    transition: all 300ms linear 0ms;
    border-radius: 0px !important;
}

.Contact_Fomr_Home textarea:focus,
.Contact_Fomr_Home input:focus {
    border-color: #00000054 !important;
}

.Contact_Fomr_Home .wpcf7-not-valid-tip {
    font-size: 13px !important;
}



















/*======================================>
    Responsive - CSS
=========================================>*/

@media (min-width: 1025px) and (max-width: 1500px) {}


@media (min-width: 1024px) and (max-width: 1228px) {}




@media (min-width: 200px) and (max-width: 699px) {}


@media (min-width: 700px) and (max-width: 1024px) {
    /* standard logo */
    .fusion-logo .fusion-logo-link .fusion-standard-logo,
    .fusion-logo .fusion-logo-link .fusion-sticky-logo, 
    .fusion-logo .fusion-logo-link .fusion-mobile-logo {
        width: 270px !important;
    }
    .fusion-logo {
        top: 0px;
        left: 0px;
    }
}

@media (min-width: 0px) and (max-width: 699px) {
    /* standard logo */
    .fusion-logo .fusion-logo-link .fusion-standard-logo,
    .fusion-logo .fusion-logo-link .fusion-sticky-logo, 
    .fusion-logo .fusion-logo-link .fusion-mobile-logo {
        width: 250px !important;
    }
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}



/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {}

/* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {}

/* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    .About_Section::before {
        display: none;
    }
    .Contact_Form_Section::before {
        display: none;
    }
}

/* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}

/* ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) {
    .About_Section::before {
        display: none;
    }
    .Contact_Form_Section::before {
        display: none;
    }
}

/* ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px */
@media (min-width: 320px) and (max-width: 480px) {
    .About_Section::before {
        display: none;
    }
    .Contact_Form_Section::before {
        display: none;
    }
}




@media only screen and (max-width: 320px) {}



@media only screen and (max-width: 970px) {}

@media (min-width: 0px) and (max-width: 640px) {}




@media (min-width: 640px) and (max-width: 1024px) {
    h1 {
        font-size: 54px !important;
    }

    h2 {
        font-size: 38px !important;
    }

    h3 {
        font-size: 26px !important;
    }
}

@media (min-width: 0px) and (max-width: 640px) {
    h1 {
        font-size: 54px !important;
    }

    h2 {
        font-size: 38px !important;
    }

    h3 {
        font-size: 26px !important;
    }
}

@media only screen and (max-width: 1600px) {}








/*======================================>
    Footer - CSS
=========================================>*/

.Useful_Link p {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.Useful_Link p a {
    color: #ffffff;
    transition: all 0.6s ease-out;
}
.Useful_Link p a:hover {
    margin-left: 10px;
}