:root{
  scroll-behavior:auto;
  --primary1: 198,32,47; /* #C6202F */
  --primary2: 215,215,215; /* #D7D7D7 */
  --bs-body-color: 35,31,32; /* #231F20 */
  --color_black: 0,0,0;
  --color_white: 255,255,255;
  --baseFont: "Karla", sans-serif;
  --imgPrimary1: invert(12%) sepia(69%) saturate(7150%) hue-rotate(353deg) brightness(114%) contrast(86%);
  --imgPrimary2: invert(65%) sepia(99%) saturate(609%) hue-rotate(4deg) brightness(102%) contrast(105%);
  --imgBase: invert(39%) sepia(0%) saturate(0%) hue-rotate(172deg) brightness(94%) contrast(93%);
  --imgWhite: invert(100%) sepia(100%) saturate(0%) hue-rotate(13deg) brightness(103%) contrast(102%);
  --imgBlack: invert(0%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(93%) contrast(103%);
  --padding: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem);
  --mb:1.875rem;
  --bs-breadcrumb-divider: '»';
  --bs-border-radius: clamp(1rem, 0.8rem + 1vw, 2rem);
}

::selection {color: rgb(var(--color_white)); background: rgb(var(--primary1));}
body {font-family: var(--baseFont); font-weight: 400; font-variant-ligatures: no-common-ligatures; color: rgba(var(--bs-body-color));}
a:hover, a:focus {outline: none; -webkit-box-shadow: none; box-shadow: none; text-decoration: none; color: rgb(var(--primary1));}
button:focus {outline: none;}
a {color: rgb(var(--baseColor));}
.container {width: 100%; max-width: 1410px;}

.transition {-webkit-transition: all .3s linear; transition: all .3s linear;}

.clr-base {color: rgba(var(--bs-body-color));}
.clr-1 {color: rgb(var(--primary1)) !important;} .bg-clr-1 {background-color: rgb(var(--primary1)) !important;}
.clr-2 {color: rgb(var(--primary2)) !important;} .bg-clr-2 {background-color: rgb(215 215 215 / 20%) !important;}
.clr-3 {color: rgb(var(--primary3)) !important;} .bg-clr-2 {/*background-color: rgb(var(--primary2)) !important; */ background-color: rgb(215 215 215 / 38%) !important;}
.bg-clr-3 {background-color: rgb(var(--primary3)) !important;}
.bg-clr-4 {background-color: rgb(var(--primary4)) !important;}
.bg-clr-3-light {background: rgba(var(--primary3),0.05);}
.imgPrimary1 {filter: var(--imgPrimary1);}
.imgPrimary3 {filter: var(--imgPrimary3);}
.rounded.sm {border-radius: calc(var(--bs-border-radius) - 8px) !important;}

/* button custom */
.btn-custom {position: relative; font-weight: 500; border: 1px solid rgb(var(--primary1)); color: rgb(var(--primary1)); overflow: hidden; transition: all .2s linear; padding: 0.75rem 1.875rem;}
.btn-custom:hover, .btn-custom:focus, .btn-custom:active {background: rgb(var(--primary1)); color: rgb(var(--color_white));}
.btn-custom.filled {background: rgb(var(--primary1)); color: rgb(var(--color_white));}
.btn-custom.filled:hover {background: rgb(var(--color_black)); color: rgb(var(--color_white));}
.bg-clr-2 .btn-custom:hover {background-color: rgb(var(--primary1)); color: rgb(var(--color_white));}

.link {text-decoration: none; display: flex; align-items: center;}
.link .icon-arrow {border-color: #57534E;}
.link:hover .icon-arrow {border-color: rgb(var(--primary1));}
.link:hover .icon-arrow:before {filter: var(--imgPrimary1);}

/* owl-carousel */
.owl-flex .owl-stage {display: flex;}
.owl-carousel.style01 .owl-dots {text-align: center; margin-top: 1.5rem;}
.owl-carousel.style01 .owl-dots .owl-dot span{width: 12px; height: 12px; border-radius: 50%; background: rgb(var(--primary2)); display: block; margin: 0 5px;}
.owl-carousel.style01 .owl-dots .owl-dot.active span{background: rgb(var(--primary1)) !important;}
.owl-carousel.style01 .owl-nav {display: flex; justify-content: center; margin-top: 1rem;}
.owl-carousel.style01 .owl-nav button{width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #6D6F71; opacity: 0.7;}
.owl-carousel.style01 .owl-nav button:before {content: ''; background: url('../images/right-caret-icon.svg') center center no-repeat; width: 12px; height: 24px;}
.owl-carousel.style01 .owl-nav button.owl-prev:before {transform: rotate(180deg);}
.owl-carousel.style01 .owl-nav [class^='owl-'].disabled {cursor: default; opacity: 0.25;}
.owl-carousel.style01 .owl-nav.disabled {display: none;}
.owl-carousel.style01.primary3 .owl-nav button {background: rgb(var(--primary3));}
.owl-carousel.style01.primary1 .owl-nav button {border-color: rgb(var(--primary1));}
.owl-carousel.style01.primary1 .owl-nav button:before{filter: var(--imgPrimary1);}
.owl-carousel.style01.clr-white .owl-nav button {border-color: rgb(var(--color_white));}
.owl-carousel.style01.clr-white .owl-nav button:before{filter: var(--imgWhite);}
.owl-carousel .item:not(:first-child) {display: none;}

.bg-clr-1 .owl-carousel.style01 .owl-dots .owl-dot span {background: rgb(var(--color_white));}
.bg-clr-1 .owl-carousel.style01 .owl-dots .owl-dot.active span {background: rgb(var(--primary2)) !important;}

#wrapper {max-width: 1920px; margin: 0 auto; position: relative; overflow: hidden;}

/* header */
header {width: 100%; left: 0; right: 0; top: 30px; margin: 0 auto; transition: all 0.3s; z-index: 99 !important;}
header .navbar {transition: all 0.3s linear; z-index: 10; background-color: rgb(var(--color_white)); border-radius: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem); padding: 0.25rem 1.875rem;}
header .navbar .navbar-toggler:focus{outline: none; box-shadow: none;}
header .navbar .navbar-brand {padding-left: 1rem;}
header .navbar .navbar-brand img{transition: all .2s linear;}
header .navbar .navbar-nav .nav-item {margin: 0 1rem;}
header .navbar .navbar-nav .nav-link {padding: 0.6rem 0; color: #525252; font-weight: 500;}
header .navbar .navbar-nav .nav-item:hover > .nav-link, header .navbar .navbar-nav .current-menu-item a {color: rgb(var(--primary1));}

header .dropdown:hover > .dropdown-menu {display: block; top: 100%;}
header .dropdown-menu {width: 250px; border: 0; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08) !important; padding: 1rem 0; border-radius: 0;}
header .dropdown-menu .dropdown-item:focus, header .dropdown-menu .dropdown-item:hover {color: rgb(var(--primary1)); background-color: transparent;}
header .dropdown-menu li {margin: 0 !important;}
header .dropdown-item {--bs-dropdown-link-color: rgb(var(--baseColor)); white-space: normal; padding: 0.3rem 1rem;}

header.fixed {box-shadow: 0px 4px 50px rgba(44, 48, 50, 0.1); border: none; top: 0; background: rgb(var(--color_white));}
header.fixed .navbar {padding: 1rem 0;}
header.fixed .navbar .navbar-brand {background: none; padding: 0;}
header.fixed .navbar .navbar-brand img {width: 100px; height: auto;}
/* header.fixed .navbar .navbar-nav .nav-link {color: var(--bs-body-color);}
header.fixed .navbar .navbar-nav .nav-item:hover > .nav-link {color: rgb(var(--primary3));} */

/* banner */
.banner {position: relative; aspect-ratio: 1440/639; overflow: hidden;}
.banner .item {position: relative; aspect-ratio: 1440/639;}
.banner .item:before {content: ''; position: absolute; inset: 0; background: linear-gradient(252deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.60) 94%);}
.banner .container {position: absolute; inset: 0;}
.banner .title {font-size: clamp(2rem, 1.6rem + 2vw, 4rem); line-height: 70px;}
.banner .owl-item.active .banner-text p {animation-duration: 500ms; animation-fill-mode: both; animation-name: fadeInUp; animation-delay: 0.3s;}
.banner .owl-item.active .banner-text .title {animation-duration: 1s; animation-fill-mode: both; animation-name: fadeInUp; animation-delay: 0.7s;}
.banner .owl-item.active .banner-text .btn {animation-duration: 1s; animation-fill-mode: both; animation-name: fadeInUp; animation-delay: 0.9s;}
.banner .owl-carousel.style01 .owl-dots {position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; margin: 0;}
.banner .owl-carousel.style01 .owl-dots .owl-dot span {margin: 0.25rem 0; background: rgb(var(--color_white));}

.has-pattern:before {content: ''; position: absolute; inset: 0; background: url('../images/pattern.png') center top / cover no-repeat;  opacity: 0.03; }

/*.has-pattern-our-story:before {content: ''; position: absolute; inset: 0; background: url('https://isconbalajifoods.com/wp-content/uploads/2026/01/Background-image-1920-x-778px-copy.png') center top / cover no-repeat; }
*/


.bg-clr-1.has-pattern:before {opacity: 0.05; mix-blend-mode: multiply;}
.bg-clr-2.has-pattern:before {opacity: 0.2; mix-blend-mode: soft-light;}

/* Typography */
.padding {padding: var(--padding) 0;}
h2.title {font-size: clamp(1.75rem, 1.6rem + 0.75vw, 2.5rem);}
h3.sub-title {font-size: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);}
h1, h2, h3, h4 {letter-spacing: -1px;}

/* pic */
.pic {overflow: hidden;}
.pic img {transition: 0.4s;}
.pic:hover img {transform: scale(1.08);}

.why-choose .item {padding: 45px 0 0;}
.why-choose .item .icon {width: 90px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; transform: translateX(-50%); top: -45px;}
.why-choose .item .icon img {width: auto;}
.why-choose .item .box {padding: 4rem 1.5rem 1.5rem; aspect-ratio: 1/1;}
.why-choose .tagline {--bs-border-color: #D9D9D9;}
.why-choose .statistics {display: flex; justify-content: space-between; flex-wrap: wrap;}
.why-choose .statistics .item div:first-of-type {font-size: clamp(1.875rem, 1.75rem + 0.625vw, 2.5rem);}

.our-brands .row {gap: 2rem 0;}

.our-brands img {
	
	/*aspect-ratio: 16/7; object-fit: contain; */
}

.delectable-delights .item .title {font-size: clamp(1.125rem, 0.9rem + 1.125vw, 2.25rem); line-height: normal; color: #FCB021;}
.delectable-delights .content-block {position: absolute; inset: 0; padding: 1rem; background: none; transition: 0.4s; display: flex; flex-direction: column;}
.delectable-delights .content-block p, .delectable-delights .content-block .btn-custom {opacity: 0; visibility: hidden;}
.delectable-delights .content-block .btn-custom {transform: translateY(70px); transition: 0.7s; position: relative;}
.delectable-delights .content-block .btn-custom:after {content: ''; background: url('../images/caret-icon.svg') center center no-repeat; width: 1.5rem; height: 1.5rem; filter: var(--imgWhite); position: absolute; right: 1.5rem; top: calc(50% - 0.75rem); transition: 0.4s;}
.delectable-delights .item:hover .content-block {background-color: rgba(0,0,0,0.7);}
.delectable-delights .item:hover .content-block p, .delectable-delights .item:hover .content-block .btn-custom {opacity: 1; visibility: visible;}
.delectable-delights .item:hover .content-block .btn-custom {transform: none;}
.delectable-delights .item:hover .content-block .btn-custom:hover:after {filter: var(--imgPrimary1);}
.delectable-delights .item:hover .content-block .btn-custom:hover {background: rgb(var(--primary1));}
.delectable-delights .item:hover .content-block .btn-custom:hover:after {filter: var(--imgWhite); transform: translateX(5px);}

.video-bg {position: relative; aspect-ratio: 1410/390;}
.video-bg .btn-play {position: absolute; inset: 0; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; margin: auto; transition: 0.4s;}
.video-bg .btn-play img {filter: var(--imgPrimary1);}
.video-bg .btn-play:hover {background: rgb(var(--primary1)) !important;}
.video-bg .btn-play:hover img {filter: var(--imgWhite);}

.news-events {padding-top: calc(var(--padding)*3); margin-top: calc(var(--padding) * -2);}
.news-events .img-wrapper {aspect-ratio: 450/255;}

.international-footprints .item {aspect-ratio: 210/210; max-width: 210px; display: flex; align-items: center; justify-content: center; padding: 1.75rem; overflow: hidden;}
.international-footprints .item img {width: auto;}

.world-map {max-width: 1170px; margin: 0 auto;}
.world-map .location {position: absolute; width: 12px; height: 12px; background: rgb(var(--primary1)); border-radius: 50%; border: 1px solid rgb(var(--color_white)); display: block;}
.world-map .india {left: 71.36%; top: 50%;}
.world-map .a {left: 46.15%; top: 30.84%;}
.world-map .b {left: 47%; top: 35%;}
.world-map .c {left: 50%; top: 37.95%;}
.world-map .d {left: 53.67%; top: 37.43%;}
.world-map .e {left: 58.37%; top: 25.47%;}
.world-map .f {left: 58.54%; top: 49.56%;}
.world-map .g {left: 70.85%; top: 20.10%;}
.world-map .h {left: 80.68%; top: 37.60%;}
.world-map .i {left: 84.95%; top: 41.59%;}
.world-map .j {left: 79.31%; top: 46.27%;}
.world-map .k {left: 76.75%; top: 50.25%;}
.world-map .l {left: 74.35%; top: 61.52%;}
.world-map .m {left: 76.06%; top: 67.07%;}
.world-map .n {left: 83.50%; top: 77.64%;}
.world-map .o {left: 93.58%; top: 90.12%;}

.certifications .item .rounded-circle {aspect-ratio: 1/1; max-width: 146px; display: flex; align-items: center; justify-content: center; margin: 0 auto; padding: 1rem 1.25rem;}
.certifications .item .text {text-transform: uppercase; line-height: normal;}
@media (min-width: 1200px) {
  .row-cols-xl-7>* {width: calc(100%/7);}
}
@media (min-width: 1400px) {
  .row-cols-xxl-9>* {width: calc(100%/9);}
}

.contact-block-wrapper .contact-block {background: url('../images/contact-block-bg.jpg') center center / cover no-repeat; overflow: hidden; padding: calc(var(--padding) / 1.5);}
.contact-block-wrapper .contact-block .text {font-size: clamp(1.75rem, 1.35rem + 2vw, 3.75rem);}
.contact-block-wrapper .contact-block:before {content: ''; background: rgba(var(--color_black),0.5); position: absolute; inset: 0;}
.contact-block-wrapper:after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: rgb(var(--bs-body-color));}

.accordion .accordion-button {--bs-accordion-btn-padding-y: 1.25rem; --bs-accordion-btn-padding-x: 1.5rem; --bs-accordion-btn-bg: rgba(var(--primary3)); font-family: var(--baseMediumFont); font-size: 1.25rem; --bs-accordion-btn-color: rgb(var(--primary5)); border-radius: 0.25rem !important; --bs-accordion-active-bg: rgba(var(--primary1)); --bs-accordion-active-color: rgb(var(--color_white)); box-shadow: none;}
.accordion .accordion-button::after {filter: var(--imgPrimary5);}
.accordion .accordion-body {--bs-accordion-btn-padding-x: 1.5rem;}
.accordion .accordion-button:not(.collapsed)::after {filter: var(--imgWhite);}

/*.accordion.style1 .card {--bs-card-bg: transparent;}
.accordion.style1 .card-header {background-color: transparent;}
.accordion.style1 .card-header a {text-decoration: none; --bs-border-color: #D9D9D9; position: relative;}
.accordion.style1 .card-header a:not(.collapsed) {color: rgb(var(--primary1)); --bs-border-color: transparent;}
.accordion.style1.has-arrow .card-header a:before {content: ''; position: absolute; right: 0; top: calc(50% - 12px); width: 1.5rem; height: 1.5rem; background: url('../images/dwn-arrow.svg') center center no-repeat; filter: var(--imgPrimary3); transition: 0.4s;}
.accordion.style1.has-arrow .card-header a:not(.collapsed):before {transform: rotate(180deg);}

.accordion.style2 .card {--bs-card-bg: transparent;}
.accordion.style2 .card-header {background-color: transparent;}
.accordion.style2 .card-header a {text-decoration: none; --bs-border-color: #D9D9D9; position: relative;}
.accordion.style2 .card-header a:not(.collapsed) {--bs-border-color: #d9d9d9; background: #FFF7ED;}
.accordion.style2.has-arrow .card-header a span.icon {position: relative; background: #d9d9d9; width: 1.75rem; height: 1.75rem; border-radius: 50%; position: absolute; right: 1rem; top: calc(50% - 0.875rem); display: flex; align-items: center; justify-content: center;}
.accordion.style2.has-arrow .card-header a span.icon:before {content: ''; position: absolute; background: url('../images/right-caret-icon.svg') center center no-repeat; width: 12px; height: 24px; filter: var(--imgWhite); transform: rotate(90deg);}
.accordion.style2.has-arrow .card-header a:not(.collapsed) span {background: rgb(var(--primary1));}
.accordion.style2.has-arrow .card-header a:not(.collapsed) span.icon:before {transform: rotate(-90deg);}*/

/* footer */
footer {background-color: rgb(var(--bs-body-color));}
.quick-contact a {font-size: clamp(1.5rem, 1.35rem + 0.75vw, 2.25rem); font-weight: 700; color: rgb(var(--primary2)); text-decoration: none;}
.quick-contact a:hover {color: rgb(var(--color_white));}

.quick-contact.inner a {color: rgb(var(--bs-body-color));}
.quick-contact.inner a:hover {color: rgb(var(--primary1));}

footer hr{opacity: 1; border-top-color: rgba(139, 139, 139, 0.50);}

footer .middle h5{color: rgb(var(--color_white)); position: relative; pointer-events: none;}
footer .middle h5:before, footer .middle h5:after {display: none;}
footer .middle ul{margin: 0 0 48px; padding: 0; list-style: none;}
footer .middle ul li{margin-bottom: 12px; line-height: normal;}
footer .middle ul li:last-child{margin-bottom: 0;}
footer .middle ul li a{color: rgb(var(--color_white)); text-decoration: none; font-weight: 300;}
footer .middle ul li a:hover, footer .middle ul li.current-menu-item a {color: rgb(var(--primary2));}

footer .middle h5:before {content: '+'; position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; background-color:rgba(var(--primary4),0.05); transition: 0.4s; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 300;}
footer .middle h5:not(.collapsed):before {content: '-';}
footer .middle .accordion [class^='col-']:first-child .block h5 {padding: 0 !important;}
footer .middle .accordion [class^='col-']:first-child .block h5:before {display: none !important;}

footer .bottom {color: rgba(217,217,217,0.5);}
footer .bottom a {color: rgba(217,217,217,0.5); font-size: 0.875rem; text-decoration: none;}
footer .bottom a:hover{color: rgb(var(--primary2));}
footer .social-media a img{filter: var(--imgWhite); top: 0; position: relative; transition: top .2s linear;}
footer .social-media a:hover img{top: -2px;}

.totop {bottom: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; position: fixed; right: -60px; z-index: 99; background-color: rgb(var(--primary1)); text-align: center; opacity: 0; border-radius: 50%; box-shadow: 0px 10px 29.7px 3.3px rgba(0, 0, 0, 0.2);}
.totop img{filter : var(--imgWhite); transform: rotate(-90deg); width: 20px;}

/* inner styles */
.inner-banner {position: relative; aspect-ratio: 1920/400; overflow: hidden;}
.inner-banner img {height: 100%; object-fit: cover;}
.inner-banner .container {position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 2rem;}
.inner-banner h1 {font-size: clamp(2rem, 1.6rem + 2vw, 4rem); color: rgb(var(--color_white)); letter-spacing: -2px;}
.inner-banner .breadcrumb {--bs-breadcrumb-item-active-color: rgb(var(--color_white)); --bs-link-color: rgb(var(--color_white)); --bs-breadcrumb-divider-color: rgb(var(--color_white));}
.inner-banner .breadcrumb a {color: rgb(var(--color_white)); text-decoration: none;}
.inner-banner .breadcrumb a:hover {color: rgb(var(--primary2));}

.counters {counter-reset: section;}
.counters h3::before {
  counter-increment: section;
  content: counter(section);
  width: 32px; height: 32px; border-radius: 50%; background: rgb(var(--bs-body-color)); color: rgb(var(--color_white)); display: flex; align-items: center; justify-content: center;
  position: absolute; left: 0; top: 0;
}
.counters h3, .counters p {padding-left: 3rem;}

/* timeline */
.timeline {position: relative; overflow: hidden;}
.timeline .slider {padding: 0 2.5rem; position: relative;}
.timeline .slider:after {content: ''; border-bottom: 1px solid #D9D9D9; position: absolute; left: 2.5rem; right: 2.5rem; bottom: 6px; z-index: -1;}
.timeline .slider .owl-item {padding-bottom: 2.5rem; position: relative;}
.timeline .owl-item:after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 12px; height: 12px; margin: 0 auto; border-radius: 50%; background: #D9D9D9; border: 1px solid transparent;}
.timeline .owl-item:hover:after {background: #fff; border-color: rgb(var(--primary1));}
/* .timeline .owl-carousel>div {overflow: visible;} */
.timeline .item .timeline-inner {display: flex; flex-direction: column; background: rgb(var(--primary2)); padding: 1rem; transition: 0.4s;}
.timeline .owl-item:hover .timeline-inner {background: rgb(var(--primary1)); color: rgb(var(--color_white));}
.timeline .owl-item:hover .timeline-inner h3 {color: rgb(var(--primary2)) !important;}
.timeline .owl-carousel.style01 .owl-nav {margin-top: 0;}
.timeline .owl-carousel.style01 .owl-nav button {position: absolute; left: 0; top: calc(50% - 14px);}
.timeline .owl-carousel.style01 .owl-nav button.owl-next {left: auto; right: 0;}
/* .timeline .item .year:before {content: ''; position: absolute; left: 0; top: 50%; right: 0; height: 1px; background: #D9D9D9;}
.timeline .item .year-wrapper .line {position: absolute; left: 0.7rem; top: 60px; background: rgb(var(--primary1)); height: 48px; width: 1px; transition: 0.4s;} */
/* .timeline .item .content-wrapper {padding-top: 50px; padding-left: 0.7rem;} */
/* .timeline .item .year {font-size: clamp(2rem, 1.6rem + 2vw, 4rem); line-height: 70px;} */
/* .timeline .owl-item:nth-child(even) .item .year-wrapper {order: 2;}
.timeline .owl-item:nth-child(even) .year-wrapper .line, .timeline .owl-item:nth-child(even) .item .year-wrapper .line:before {top: calc(100% - 110px); bottom: 0;}
.timeline .owl-item:nth-child(even) .item .text {order: 1;}
.timeline .owl-item:nth-child(even) .item .content-wrapper{padding-top: 0; padding-bottom: 50px; justify-content: flex-end;} */

/* nav-tabs */
.nav-tabs.style1 {border-bottom: 0; margin-bottom: 1.5rem; justify-content: center; background: rgb(var(--color_white)); border-radius: calc(var(--bs-border-radius) + 1rem); padding: 0.75rem;}
.nav-tabs.style1 .nav-item.show .nav-link, .nav-tabs.style1 .nav-link.active {background-color: rgb(var(--color_black)); color: rgb(var(--color_white));}
.nav-tabs.style1 .nav-link {border: none; font-size: 1.25rem; font-weight: 600; color: rgb(var(--bs-body-color)); padding:0.4rem 1.5rem; border-radius: calc(var(--bs-border-radius) + 1rem);}
.nav-tabs.style1.dark {background: rgb(var(--bs-body-color));}
.nav-tabs.style1.dark .nav-link {color: rgb(var(--color_white));}
.nav-tabs.style1.dark .nav-item.show .nav-link, .nav-tabs.style1.dark .nav-link.active {background: rgb(var(--color_white)); color: rgb(var(--bs-body-color));}

.ibf-values .tab-content{border-radius: 1.875rem; padding: clamp(1rem, 0.45rem + 2.75vw, 3.75rem); background-color: rgb(var(--color_white));}

/*  director-desk */
.director-desk{padding-bottom: calc(var(--padding) * 3);  margin-bottom: calc(var(--padding) * -2);}
.director-desk p{line-height: 1.3;}

.director-message .box{padding: clamp(1.875rem, 1.5rem + 1.875vw, 3.75rem); height: 100%;}
.director-message .box  p{line-height: 1.3;}
.director-message .box p:last-child{margin-bottom: 0;}

.journey:before {content: ''; background: url('../images/line-vector.svg') center center no-repeat; filter: var(--imgPrimary1); position: absolute; left: 0; right: 0; width: 369px; height: 100%; margin: 0 auto; z-index: -1; display: none;}

.custom-form .form-control, .custom-form .form-select {padding: 1.125rem;}

.product-range .btn {--bs-border-color: #d9d9d9;}
.product-range .slider .item .pic a {aspect-ratio: 322/322;}
.product-range .slider .item .pic a img {width: 100%; height: 100%; object-fit: cover;}

.grid-container {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1.5rem;}
.grid-container .column:first-child {grid-row: 1 / span 2;}
@media (max-width: 768px) {
  .grid-container {display: block;}
}

.carousel-indicators {justify-content: flex-start; margin: 0 2rem 2rem;}
.carousel-indicators [data-bs-target] {width: 12px; height: 12px; border-radius: 50%; background: rgb(var(--primary2)); display: block; margin: 0 5px; border: 0; opacity: 1;}
.carousel-indicators [data-bs-target].active {background: rgb(var(--primary1));}

.owl-carousel.o-x-visible .owl-stage-outer {overflow: visible;}

.wpcf7-checkbox, .wpcf7-post_checkbox {display: flex; flex-wrap: wrap;}
.wpcf7-checkbox .wpcf7-list-item, .wpcf7-post_checkbox .wpcf7-list-item {flex: 0 0 33.33%; width: 33.33%; margin: 0;}

input[type="checkbox"] {accent-color: rgb(var(--primary1));}

.customNav-hungritos-retail-range.owl-nav button {border-color: rgb(var(--color_white)) !important; opacity: 1 !important;}
.customNav-hungritos-retail-range.owl-nav button:before {filter: var(--imgWhite) !important;}

.gallery a img {aspect-ratio: 360/230;}

.goverlay {background: rgba(0,0,0,.75);}

.gslide-media.gslide-inline {border-radius: var(--bs-border-radius);}
.gslide-media.gslide-inline, .gslide-inline .ginlined-content {height: auto !important;}

@media (max-width: 767.98px) {
  .nav-tabs {display: none;}
  .nav-tabs-dropdown {display: block; margin-bottom: 1rem;}
}

@media (min-width: 768px) {
  .nav-tabs-dropdown {display: none;}
}

.dwn-btn {position: absolute; right: calc(5rem + 12px); top: 0;}
.bg-clr-1 .dwn-btn {border-color: rgb(var(--color_white)); color: rgb(var(--color_white));}
.bg-clr-1 .dwn-btn:hover {border-color: rgb(var(--color_black)); background-color: rgb(var(--color_black));}
#dehydrated-potato-flakes .dwn-btn {right: 12px;}
/*
@media (min-width: 1366px) and (max-width: 1920px) {
    .corner-icon {
        display: none !important;
        visibility: hidden;
        opacity: 0;
    }
}

@media (max-width: 1366px) and (min-width: 1281px) {
    .has-pattern-our-story:before {
        background-position: 90% center;
        background-size: 113% auto;
    } .corner-icon {
        display: none !important;
        visibility: hidden;
        opacity: 0;
    }
}

@media (max-width: 1280px) and (min-width: 1025px) {
    .has-pattern-our-story:before {
        background-position: 90% center;
        background-size: 120% auto;
    }.corner-icon {
        display: none !important;
        visibility: hidden;
        opacity: 0;
    }
}


@media (max-width: 1024px) and (min-width: 993px) {
    .has-pattern-our-story:before {
                background-position: 97% center;
        background-size: 131% auto;
    }.corner-icon {
        display: none !important;
        visibility: hidden;
        opacity: 0;
    }
}

@media (max-width: 992px) and (min-width: 768px) {
    .has-pattern-our-story:before {
       background-position: 101% top;
        background-size: 230% auto;
    }
}

@media (max-width: 767px) and (min-width: 576px) {
    .has-pattern-our-story:before {
        background-position: 50% bottom;
        background-size: cover;
    }
}
@media (max-width: 575px) {
    .has-pattern-our-story:before {
        background-position: 55% center;
		
	
        background-size: auto;
        background-position: 56% bottom;
        -webkit-transform: rotate(359deg);
        background: url(https://isconbalajifoods.com/wp-content/uploads/2026/01/Background-image-1920-x-778px-copy-1.png) center top / 344% no-repeat;
		
		
    }
}

@media (max-width: 399px) {
    .has-pattern-our-story:before {
       
		        background-size: auto;
        background-position: 56% bottom;
      
        -webkit-transform: rotate(357deg);
        background: url(https://isconbalajifoods.com/wp-content/uploads/2026/01/Background-image-1920-x-778px-copy-1.png) center top / 344% no-repeat;
		
		
    }
}
*/
/*@media (max-width: 768px) {
               
	
                .corner-icon {
                    width: 160px;
                    height: 160px;
                    bottom: 10px;
                    right: 10px;
                }
            }
			
			@media (max-width: 576px) {
                .corner-icon {
                    width: 150px;
                    height: 150px;
                    bottom: 8px;
                    right: 8px;
                }

                .container.position-relative {
                    padding-bottom: 60px;
                }
            }

.corner-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}
.corner-icon {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    z-index: 2;
    opacity: 0.8;
}


.corner-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

*/

@media only screen and (min-width: 320px) and (max-width: 767px) {
    .video-bg {
        aspect-ratio: 16 / 9;
        margin-top: 22px;
    }
}
/* ===== BASE STYLES FOR ALL CORNER ICONS ===== */
/* Hidden by default on desktop */
.corner-icon-top-right,
.corner-icon-top-right-second,
.corner-icon-bottom-left {
    display: none;
    position: absolute;
    z-index: 2;
    opacity: 0.8;
}

/* ===== CORNER-ICON-TOP-RIGHT STYLES ===== */
.corner-icon-top-right {
    /* Positioning */
    top: 20px;
    right: 20px;
    /* Size */
    width: 75px;
    height: 75px;
}

.corner-icon-top-right img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== CORNER-ICON-TOP-RIGHT-SECOND STYLES ===== */
.corner-icon-top-right-second {
    /* Positioning */
    top: 105px; /* 20px + 75px + 10px gap */
    right: 20px;
    /* Size */
    width: 75px;
    height: 75px;
}

.corner-icon-top-right-second img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== CORNER-ICON-BOTTOM-LEFT STYLES ===== */
.corner-icon-bottom-left {
    /* Positioning */
    bottom: 20px;
    left: 20px;
    /* Size */
    width: 75px;
    height: 75px;
}

.corner-icon-bottom-left img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== MOBILE-TABLET VISIBILITY ===== */
/* Show icons only on mobile and tablet devices */
@media (max-width: 991px) {
    .mobile-tablet-only {
        display: block !important;
    }
}

/* ===== TABLET STYLES (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
    /* Corner Icon Top Right - Tablet */
    .corner-icon-top-right {
        width: 75px;
        height: 75px;
        top: 20px;
        right: 20px;
    }
    
    /* Corner Icon Top Right Second - Tablet */
    .corner-icon-top-right-second {
        width: 375px;
        height: 375px;
        top: 132px;
        right: -161px;
        z-index: 0;
        opacity: 0.4;
    }
    
    /* Corner Icon Bottom Left - Tablet */
    .corner-icon-bottom-left {
       width: 134px;
        height: 134px;
        bottom: 7px;
        left: 2px;
    }
	  /* Desktop background - explicitly hidden on tablet */
    .desktop-bg-corner-bottom-right {
        display: none !important;
    }
}

/* ===== MOBILE STYLES (up to 767px) ===== */
@media (max-width: 767px) {
    /* Corner Icon Top Right - Mobile */
    .corner-icon-top-right {
       width: 40px !important;
        height: 40px !important;
        top: 94px;
        right: 16px;
    }
    
    /* Corner Icon Top Right Second - Mobile */
    .corner-icon-top-right-second {
        width: 75px;
        height: 75px;
        top: 100px; /* 15px + 75px + 10px gap */
        right: 15px;
    }
    
    /* Corner Icon Bottom Left - Mobile */
    .corner-icon-bottom-left {
        width: 75px;
        height: 75px;
        bottom: 15px;
        left: 15px;
    }
	 /* Desktop background - explicitly hidden on mobile */
    .desktop-bg-corner-bottom-right {
        display: none !important;
    }
}

/* ===== SMALL MOBILE STYLES (up to 480px) ===== */
@media (max-width: 480px) {
    /* Corner Icon Top Right - Small Mobile */
    .corner-icon-top-right {
                        width: 40px !important;
        height: 40px !important;
        top: 94px;
        right: 19px;
    }
    
    .corner-icon-top-right img {
                width: 100% !important;
        max-width: 75px !important;
    }
    
    /* Corner Icon Top Right Second - Small Mobile */
    .corner-icon-top-right-second {
       width: 221px !important;
        height: 161px !important;
        top: 180px;
        right: -70px;
        z-index: 0;
    }
    
    .corner-icon-top-right-second img {
        width: 100% !important;
       /* max-width: 75px !important;*/
    }
    
    /* Corner Icon Bottom Left - Small Mobile */
    .corner-icon-bottom-left {
       width: 126px !important;
        height: 126px !important;
        bottom: 7px;
        left: -1px;
		z-index:0;
    }
    
    .corner-icon-bottom-left img {
        width: 100% !important;
       /* max-width: 75px !important;*/
    }
	 /* Desktop background - explicitly hidden on small mobile */
    .desktop-bg-corner-bottom-right {
        display: none !important;
    }
}

/* ===== DESKTOP STYLES (992px and above) ===== */
@media (min-width: 992px) {
    .mobile-tablet-only {
        display: none !important;
    }
	 /* Desktop background - explicitly hidden on small mobile */
    .desktop-bg-corner-bottom-right {
       
    }
}

/* ===== DESKTOP BACKGROUND BOTTOM RIGHT CORNER IMAGE ===== */
.desktop-bg-corner-bottom-right {
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 150px;
    height: 150px;
    z-index: 1; /* Lower z-index to be behind content if needed */
    opacity: 0.6; /* More transparent to work as background */
    pointer-events: none; /* Prevents interfering with clicks */
}

.desktop-bg-corner-bottom-right img {
    width: 100%;
    height: auto;
    display: block;
}

 /* Desktop background - hidden on small mobile */
    .desktop-bg-corner-bottom-right {
      
    }
}

/* ===== DESKTOP STYLES (992px and above) ===== */
@media (min-width: 992px) {
    /* Hide mobile/tablet icons on desktop */
    .mobile-tablet-only {
        display: none !important;
    }
    
    /* Show desktop background corner on desktop */
    .desktop-bg-corner-bottom-right {
        display: block;
    }
}

/* ===== LARGE DESKTOP STYLES (1200px and above) ===== */
@media (min-width: 1200px) {
    .desktop-bg-corner-bottom-right {
              width: 280px;
        height: 280px;
        bottom: 15px;
        opacity: 1;
        z-index: 0;
        right: -24px;
    }
}






/* ===== SECOND SECTION CORNER ICONS STYLES ===== */
/* All classes prefixed with 'second-' to avoid conflicts with first section */

/* ===== DESKTOP TOP LEFT ICON ===== */
.second-desktop-top-left {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 120px;
    height: 120px;
    z-index: 2;
    opacity: 0.7;
    /* Hidden by default on all devices */
    display: none;
}

.second-desktop-top-left img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== DESKTOP BOTTOM RIGHT ICON ===== */
.second-desktop-bottom-right {
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 150px;
    height: 150px;
    z-index: 1;
    opacity: 0.5;
    pointer-events: none;
    /* Hidden by default on all devices */
    display: none;
}

.second-desktop-bottom-right img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== MOBILE/TABLET BOTTOM RIGHT ICON ===== */
.second-mobile-bottom-right {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 75px;
    height: 75px;
    z-index: 2;
    opacity: 0.8;
    /* Hidden by default on all devices */
    display: none;
}

.second-mobile-bottom-right img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== DESKTOP STYLES (992px and above) ===== */
@media (min-width: 992px) {
    /* Show desktop icons on desktop */
    .second-desktop-top-left {
        display: block !important;
		position: absolute;
        top: 0px;
        left: 0px;
        width: 170px;
        height: 170px;
        z-index: 2;
        opacity: 1;
    }
	
	
	.desktop-bg-corner-bottom-right
	{
		position: absolute;
  
	}
    
    .second-desktop-bottom-right {
        display: block !important;
		position: absolute;
    bottom: 16px;
    right: 30px;
    width: 150px;
    height: 150px;
    z-index: 1;
    opacity: 1;
    pointer-events: none;
    display: none;
    }
    
    /* Hide mobile/tablet icon on desktop */
    .second-mobile-bottom-right {
        display: none !important;
    }
}

/* ===== LARGE DESKTOP STYLES (1200px and above) ===== */
@media (min-width: 1200px) {
    .second-desktop-top-left {
              width: 280px;
        height: 280px;
        top: 0px;
        left: 0px;
        opacity: 1;
        left: -56px;
        z-index: 0;
    }
    
    .second-desktop-bottom-right {
      width: 285px;
        height: 285px;
        top: 497px;
        right: -50px;
        opacity: 1;
        z-index: -1;
    }
}

/* ===== TABLET STYLES (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
    /* Hide desktop icons on tablet */
    .second-desktop-top-left,
    .second-desktop-bottom-right {
        display: none !important;
    }
    
    /* Show mobile/tablet icon on tablet */
    .second-mobile-bottom-right {
      display: block !important;
        width: 65px;
        height: 65px;
        bottom: 25px;
        left: 25px;
    }
}

/* ===== MOBILE STYLES (up to 767px) ===== */
@media (max-width: 767px) {
    /* Hide desktop icons on mobile */
    .second-desktop-top-left,
    .second-desktop-bottom-right {
        display: none !important;
    }
    
    /* Show mobile/tablet icon on mobile */
    .second-mobile-bottom-right {
        display: block !important;
        width: 60px;
        height: 60px;
        bottom: 15px;
        right: 15px;
    }
}

/* ===== SMALL MOBILE STYLES (up to 480px) ===== */
@media (max-width: 480px) {
    .second-mobile-bottom-right {
                      width: 40px !important;
        height: 40px !important;
        top: 520px;
        left: 22px;
    }
    
    .second-mobile-bottom-right img {
        width: 100% !important;
        
    }
}








/* ===== MOBILE/TABLET BOTTOM RIGHT ICON 1 ===== */
.second-mobile-bottom-right-one {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 75px;
    height: 75px;
    z-index: 2;
    opacity: 0.8;
    /* Hidden by default on all devices */
    display: none;
}

.second-mobile-bottom-right-one img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== MOBILE/TABLET BOTTOM RIGHT ICON 2 ===== */
.second-mobile-bottom-right-two {
    position: absolute;
    bottom: 105px; /* 20px + 75px + 10px gap */
    right: 20px;
    width: 75px;
    height: 75px;
    z-index: 2;
    opacity: 0.8;
    /* Hidden by default on all devices */
    display: none;
}

.second-mobile-bottom-right-two img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== DESKTOP STYLES (992px and above) ===== */
@media (min-width: 992px) {
    /* Show desktop top left icon on desktop */
    .second-desktop-top-left {
        display: block !important;
    }
    
    /* Hide both mobile bottom right icons on desktop */
    .second-mobile-bottom-right-one,
    .second-mobile-bottom-right-two {
        display: none !important;
    }
}
/* ===== TABLET STYLES (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
    /* Hide desktop top left icon on tablet */
    
    
    /* Show both mobile bottom right icons on tablet */
    .second-mobile-bottom-right-one,
    .second-mobile-bottom-right-two {
        display: block !important;
    }
    
    /* Tablet-specific sizing */
    .second-mobile-bottom-right-one {
        width: 70px;
        height: 70px;
        bottom: 25px;
        right: 25px;
    }
    
    .second-mobile-bottom-right-two {
      width: 203px;
        height: 203px;
        top: 597px;
        z-index: -1;
        right: -9px;
    }
}
/* ===== MOBILE STYLES (up to 767px) ===== */
@media (max-width: 767px) {
    /* Hide desktop top left icon on mobile */
   
    
    /* Show both mobile bottom right icons on mobile */
    .second-mobile-bottom-right-one,
    .second-mobile-bottom-right-two {
        display: block !important;
    }
    
    /* Mobile-specific sizing */
    .second-mobile-bottom-right-one {
        width: 65px;
        height: 65px;
        bottom: 15px;
        right: 15px;
    }
    
    .second-mobile-bottom-right-two {
        width: 65px;
        height: 65px;
        bottom: 90px; /* 15px + 65px + 10px gap */
        right: 15px;
    }
}

/* ===== SMALL MOBILE STYLES (up to 480px) ===== */
@media (max-width: 480px) {
    .second-mobile-bottom-right-one {
      width: 232px !important;
        height: 233px !important;
        bottom: -29px;
        right: -23px;
        opacity: 1;
    }
    
    .second-mobile-bottom-right-two {
       width: 195px !important;
        height: 174px !important;
        top: 164px;
        right: 10px;
        z-index: 1;
    }
    
    .second-mobile-bottom-right-one img,
    .second-mobile-bottom-right-two img {
        width: 100% !important;
       
    }
}











/* ===== DESKTOP TOP LEFT ICON (Desktop only) ===== */
.third-desktop-top-left {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 150px;
    height: 150px;
    z-index: 2;
    opacity: 0.7;
    pointer-events: none; /* Prevents interfering with clicks */
    /* Hidden by default on all devices */
    display: none;
}

.third-desktop-top-left img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== MOBILE/TABLET BOTTOM LEFT ICON ===== */
.third-mobile-bottom-left {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 80px;
    height: 80px;
    z-index: 2;
    opacity: 0.8;
    pointer-events: none;
    /* Hidden by default on all devices */
    display: none;
}

.third-mobile-bottom-left img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== MOBILE/TABLET BOTTOM RIGHT ICON ===== */
.third-mobile-bottom-right {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 80px;
    height: 80px;
    z-index: 2;
    opacity: 0.8;
    pointer-events: none;
    /* Hidden by default on all devices */
    display: none;
}

.third-mobile-bottom-right img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== DESKTOP STYLES (992px and above) ===== */
@media (min-width: 992px) {
    /* Show desktop top left icon on desktop */
    .third-desktop-top-left {
        display: block !important;
		position: absolute;
    top: -135px;
    left: 0px;
    width: 150px;
    height: 150px;
    z-index: 2;
    opacity: 1;
    pointer-events: none;
    display: none;
}
    }
    
    /* Hide both mobile bottom icons on desktop */
    .third-mobile-bottom-left,
    .third-mobile-bottom-right {
        display: none !important;
    }
}

/* ===== LARGE DESKTOP STYLES (1200px and above) ===== */
@media (min-width: 1200px) {
    .third-desktop-top-left {
        width: 166px;
        height: 180px;
        top: -110px;
        left: -24px;
        opacity: 1;
    }
}

/* ===== EXTRA LARGE DESKTOP STYLES (1600px and above) ===== */
@media (min-width: 1600px) {
    .third-desktop-top-left {
              width: 157px;
        height: 157px;
        top: 0px;
        left: 0px;
        opacity: 1;
    }
}

/* ===== TABLET STYLES (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
    /* Hide desktop top left icon on tablet */
    .third-desktop-top-left {
        display: none !important;
    }
    
    /* Show both mobile bottom icons on tablet */
    .third-mobile-bottom-left,
    .third-mobile-bottom-right {
        display: block !important;
    }
    
    /* Tablet-specific sizing for bottom icons */
    .third-mobile-bottom-left {
               width: 115px;
        height: 115px;
        bottom: 0px;
        left: 0px;
    }
    
    .third-mobile-bottom-right {
        width: 90px;
        height: 90px;
        bottom: 25px;
        right: 25px;
        opacity: 0.7;
    }
}

/* ===== MOBILE STYLES (up to 767px) ===== */
@media (max-width: 767px) {
    /* Hide desktop top left icon on mobile */
    .third-desktop-top-left {
        display: none !important;
    }
    
    /* Show both mobile bottom icons on mobile */
    .third-mobile-bottom-left,
    .third-mobile-bottom-right {
        display: block !important;
    }
    
    /* Mobile-specific sizing for bottom icons */
    .third-mobile-bottom-left {
        width: 70px;
        height: 70px;
        bottom: 15px;
        left: 15px;
    }
    
    .third-mobile-bottom-right {
        width: 70px;
        height: 70px;
        bottom: 15px;
        right: 15px;
    }
}

/* ===== SMALL MOBILE STYLES (up to 480px) ===== */
@media (max-width: 480px) {
    .third-mobile-bottom-left {
                width: 170px !important;
        height: 170px !important;
        bottom: -4px;
        left: 0px;
        opacity: 1;
    }
    
    .third-mobile-bottom-right {
                             width: 40px !important;
        /* height: 41px !important; */
        bottom: 1px;
        right: 16px;
        opacity: 1;
    }
    }
    
    .third-mobile-bottom-left img,
    .third-mobile-bottom-right img {
        width: 100% !important;
      
    }
}






/* ===== FOURTH SECTION CORNER ICONS STYLES ===== */
/* All classes prefixed with 'fourth-' to avoid conflicts with previous sections */

/* ===== MOBILE/TABLET TOP RIGHT ICON (Mobile/Tablet only) ===== */
.fourth-mobile-top-right {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 80px;
    height: 80px;
    z-index: 2;
    opacity: 0.8;
    pointer-events: none; /* Prevents interfering with clicks */
    /* Hidden by default on all devices */
    display: none;
}

.fourth-mobile-top-right img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== DESKTOP TOP RIGHT ICON (Desktop only) ===== */
.fourth-desktop-top-right {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 150px;
    height: 150px;
    z-index: 2;
    opacity: 0.7;
    pointer-events: none;
    /* Hidden by default on all devices */
    display: none;
}

.fourth-desktop-top-right img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== DESKTOP BOTTOM LEFT ICON (Desktop only) ===== */
.fourth-desktop-bottom-left {
    position: absolute;
    bottom: 30px;
    left: 30px;
    width: 150px;
    height: 150px;
    z-index: 1;
    opacity: 0.5;
    pointer-events: none;
    /* Hidden by default on all devices */
    display: none;
}

.fourth-desktop-bottom-left img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== DESKTOP STYLES (992px and above) ===== */
@media (min-width: 992px) {
    /* Show both desktop icons on desktop */
    .fourth-desktop-top-right
	{
		 display: block !important;
		display: block !important;
        position: absolute;
        top: 0px;
        right: 1px;
        width: 194px;
        height: 194px;
        z-index: 2;
        opacity: 0.7;
        pointer-events: none;
	}
    .fourth-desktop-bottom-left {
        display: block !important;
		display: block !important;
        position: absolute;
        bottom: -12px;
        left: 0px;
        width: 196px;
        height: 196px;
        z-index: 1;
        opacity: 0.5;
        pointer-events: none;
    }
    
    /* Hide mobile/tablet top right icon on desktop */
    .fourth-mobile-top-right {
        display: none !important;
    }
}

/* ===== LARGE DESKTOP STYLES (1200px and above) ===== */
@media (min-width: 1200px) {
    .fourth-desktop-top-right {
      width: 230px;
        height: 230px;
        top: 0px;
        right: 0px;
        opacity: 1;
    }
    
    .fourth-desktop-bottom-left {
      width: 196px;
        height: 196px;
        bottom: -14px;
        left: 0px;
        opacity: 1;
    }
}

/* ===== EXTRA LARGE DESKTOP STYLES (1600px and above) ===== */
@media (min-width: 1600px) {
    .fourth-desktop-top-right {
                width: 300px;
        height: 300px;
        top: 0px;
        right: 0px;
        opacity: 0.5;
    }
    
    .fourth-desktop-bottom-left {
       width: 300px;
        height: 300px;
        bottom: -25px;
        left: 0px;
        opacity: 0.3;
    }
}

/* ===== TABLET STYLES (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
    /* Hide both desktop icons on tablet */
    .fourth-desktop-top-right,
    .fourth-desktop-bottom-left {
        display: none !important;
    }
    
    /* Show mobile/tablet top right icon on tablet */
    .fourth-mobile-top-right {
        display: block !important;
    }
    
    /* Tablet-specific sizing for mobile icon */
    .fourth-mobile-top-right {
               width: 182px;
        height: 76px;
        top: -68px;
        left: 584px;
        position: relative;
        opacity: 0.7;
    }
}

/* ===== MOBILE STYLES (up to 767px) ===== */
@media (max-width: 767px) {
    /* Hide both desktop icons on mobile */
    .fourth-desktop-top-right,
    .fourth-desktop-bottom-left {
        display: none !important;
    }
    
    /* Show mobile/tablet top right icon on mobile */
    .fourth-mobile-top-right {
        display: block !important;
    }
    
    /* Mobile-specific sizing for mobile icon */
    .fourth-mobile-top-right {
        width: 70px;
        height: 70px;
        top: 15px;
        right: 15px;
    }
}

/* ===== SMALL MOBILE STYLES (up to 480px) ===== */
@media (max-width: 480px) {
    .fourth-mobile-top-right {
               width: 155px !important;
        height: 155px !important;
        top: 0px;
        right: 1px;
        opacity: 0.5;
		display:none !important;
    }
    
    .fourth-mobile-top-right img {
        width: 100% !important;
        max-width: 60px !important;
    }
}









/* ===== FIFTH SECTION CORNER ICONS STYLES ===== */
/* All classes prefixed with 'fifth-' to avoid conflicts with previous sections */

/* ===== DESKTOP BOTTOM CENTER ICON (Desktop only - Background Style) ===== */
.fifth-desktop-bottom-center {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%); /* This centers the element horizontally */
    width: 250px;
    height: 250px;
    z-index: 1; /* Lower z-index for background effect */
    opacity: 0.3; /* More transparent for background effect */
    pointer-events: none; /* Prevents interfering with clicks */
    /* Hidden by default on all devices */
    display: none;
}

.fifth-desktop-bottom-center img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== MOBILE/TABLET BOTTOM RIGHT ICON (Mobile/Tablet only) ===== */
.fifth-mobile-bottom-right {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 80px;
    height: 80px;
    z-index: 2;
    opacity: 0.8;
    pointer-events: none;
    /* Hidden by default on all devices */
    display: none;
}

.fifth-mobile-bottom-right img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== DESKTOP STYLES (992px and above) ===== */
@media (min-width: 992px) {
    /* Show desktop bottom center icon on desktop */
    .fifth-desktop-bottom-center {
        
		        display: block !important;
        position: absolute;
        top: 189px;
        left: 59%;
        transform: translateX(-50%);
        width: 353px;
        height: 353px;
        z-index: -1;
        opacity: 1;
        pointer-events: none;
    }
    
    /* Hide mobile bottom right icon on desktop */
    .fifth-mobile-bottom-right {
        display: none !important;
    }
}

/* ===== LARGE DESKTOP STYLES (1200px and above) ===== */
@media (min-width: 1200px) {
    .fifth-desktop-bottom-center {
                width: 439px;
        height: 334px;
        bottom: 40px;
        opacity: 1;
    }
}

/* ===== EXTRA LARGE DESKTOP STYLES (1600px and above) ===== */
@media (min-width: 1600px) {
    .fifth-desktop-bottom-center {
        width: 493px;
        height: 440px;
        bottom: 14px;
        z-index: -1;
        opacity: 1;
        margin-left: -45px;
    }
	.desktop-bg-corner-bottom-right
	{
		       width: 329px;
        height: 280px;
        bottom: 64px;
        right: 0px;
        opacity: 1;
        right: 0;
        z-index: 0;
	}
	.second-desktop-top-left
	{
		             width: 311px;
        height: 280px;
        top: 0px;
        left: 0px;
        opacity: 1;
        left: -56px;
        z-index: 0;
	}
	
	
}

/* ===== TABLET STYLES (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
    /* Hide desktop bottom center icon on tablet */
    .fifth-desktop-bottom-center {
        display: none !important;
    }
    
    /* Show mobile bottom right icon on tablet */
    .fifth-mobile-bottom-right {
        display: block !important;
    }
    
    /* Tablet-specific sizing for mobile icon */
    .fifth-mobile-bottom-right {
               width: 172px;
        height: 172px;
        bottom: 129px;
        right: 0px;
        opacity: 0.7;
    }
}

/* ===== MOBILE STYLES (up to 767px) ===== */
@media (max-width: 767px) {
    /* Hide desktop bottom center icon on mobile */
    .fifth-desktop-bottom-center {
        display: none !important;
    }
    
    /* Show mobile bottom right icon on mobile */
    .fifth-mobile-bottom-right {
        display: block !important;
    }
    
    /* Mobile-specific sizing for mobile icon */
    .fifth-mobile-bottom-right {
        width: 70px;
        height: 70px;
        bottom: 15px;
        right: 15px;
    }
}

/* ===== SMALL MOBILE STYLES (up to 480px) ===== */
@media (max-width: 480px) {
    .fifth-mobile-bottom-right {
              width: 216px !important;
        height: 260px !important;
        top: 0px;
        right: 0px;
        z-index: -1;
    }
    
    .fifth-mobile-bottom-right img {
        width: 100% !important;
      
    }
}

/* ===== DESKTOP TOP RIGHT ICON - SIXTH SECTION ===== */
.desktop-top-right-icon-sixth {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 150px;
    height: 150px;
    opacity: 0.7;
    z-index: 2;
    pointer-events: none;
    display: none; /* Hidden by default */
}

.desktop-top-right-icon-sixth img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== DESKTOP BOTTOM LEFT ICON - SIXTH SECTION ===== */
.desktop-bottom-left-icon-sixth {
    position: absolute;
    bottom: 30px;
    left: 30px;
    width: 180px;
    height: 180px;
    opacity: 0.4;
    z-index: 1;
    pointer-events: none;
    display: none; /* Hidden by default */
}

.desktop-bottom-left-icon-sixth img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== MOBILE/TABLET BOTTOM LEFT ICON - SIXTH SECTION ===== */
.mobile-bottom-left-icon-sixth {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 80px;
    height: 80px;
    opacity: 0.8;
    z-index: 2;
    pointer-events: none;
    display: none; /* Hidden by default */
}

.mobile-bottom-left-icon-sixth img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== DESKTOP STYLES (992px and above) ===== */
@media (min-width: 992px) {
    /* Show desktop icons on desktop */
    .desktop-top-right-icon-sixth
	{
		display: block !important;
        position: absolute;
        top: -85px;
        right: 0px;
        width: 150px;
        height: 150px;
        opacity: 0.7;
        z-index: 2;
        pointer-events: none;
		
	}
    .desktop-bottom-left-icon-sixth {
		
      display: block !important;
        position: absolute;
        bottom: 78px;
        left: 0px;
        width: 150px;
        height: 150px;
        opacity: 0.7;
        z-index: 2;
        pointer-events: none;
    }
    
    /* Hide mobile icon on desktop */
    .mobile-bottom-left-icon-sixth {
        display: none !important;
    }
}

/* ===== LARGE DESKTOP STYLES (1200px and above) ===== */
@media (min-width: 1200px) {
    .desktop-top-right-icon-sixth {
               width: 180px;
        height: 180px;
        top: 0px;
        right: 0px;
        z-index: 0;
        opacity: 1;
    }
    
    .desktop-bottom-left-icon-sixth {
               width: 190px;
        height: 220px;
        bottom: 40px;
        left: 0px;
        opacity: 1;
    }
}

/* ===== EXTRA LARGE DESKTOP STYLES (1600px and above) ===== */
@media (min-width: 1600px) {
    .desktop-top-right-icon-sixth {
               width: 220px;
        height: 220px;
        top: -192px;
        right: -3px;
        opacity: 0.8;
    }
    
    .desktop-bottom-left-icon-sixth {
      width: 191px;
        height: 219px;
        bottom: 11px;
        left: 2px;
        opacity: 1;
    }
}

/* ===== TABLET STYLES (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
    /* Hide desktop icons on tablet */
    .desktop-top-right-icon-sixth,
    .desktop-bottom-left-icon-sixth {
        display: none !important;
    }
    
    /* Show mobile icon on tablet */
    .mobile-bottom-left-icon-sixth {
       display: block !important;
        width: 130px;
        height: 130px;
        bottom: 25px;
        left: 0px;
        opacity: 0.9;
    }
}

/* ===== MOBILE STYLES (up to 767px) ===== */
@media (max-width: 767px) {
    /* Hide desktop icons on mobile */
    .desktop-top-right-icon-sixth,
    .desktop-bottom-left-icon-sixth {
        display: none !important;
    }
    
    /* Show mobile icon on mobile */
    .mobile-bottom-left-icon-sixth {
        display: block !important;
        width: 70px;
        height: 70px;
        bottom: 15px;
        left: 15px;
    }
}

/* ===== SMALL MOBILE STYLES (up to 480px) ===== */
@media (max-width: 480px) {
    .mobile-bottom-left-icon-sixth {
               width: 100px !important;
        height: 100px !important;
        bottom: 10px;
        left: 0px;
    }
}

/* ===== DESKTOP BOTTOM RIGHT BACKGROUND ICON - SEVENTH SECTION ===== */
.desktop-bottom-right-bg-seventh {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 250px;
    height: 250px;
    opacity: 0.2; /* Very transparent for background effect */
    z-index: 1; /* Lower z-index to appear behind content */
    pointer-events: none;
    display: none; /* Hidden by default on all devices */
}

.desktop-bottom-right-bg-seventh img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== DESKTOP STYLES (992px and above) ===== */
@media (min-width: 992px) {
    .desktop-bottom-right-bg-seventh {
        display: block !important;
		position: absolute;
    bottom: 110px;
    right: 0px;
    width: 196px;
    height: 250px;
    /* opacity: 0.2; */
    z-index: 1;
    pointer-events: none;
    display: none;
    }
}

/* ===== LARGE DESKTOP STYLES (1200px and above) ===== */
@media (min-width: 1200px) {
    .desktop-bottom-right-bg-seventh {
      width: 240px;
        height: 186px;
        bottom: 150px;
        z-index: 1;
        right: 0px;
        opacity: 1;
    }
}

/* ===== EXTRA LARGE DESKTOP STYLES (1600px and above) ===== */
@media (min-width: 1600px) {
    .desktop-bottom-right-bg-seventh {
            width: 284px;
        height: 284px;
        bottom: 90px;
        right: -68px;
        opacity: 1;
    }
}

/* ===== TABLET STYLES (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
    .desktop-bottom-right-bg-seventh {
        display: none !important;
    }
}

/* ===== MOBILE STYLES (up to 767px) ===== */
@media (max-width: 767px) {
    .desktop-bottom-right-bg-seventh {
        display: none !important;
    }
}



/* ===== DESKTOP TOP CENTER BACKGROUND IMAGE - EIGHTH SECTION ===== */
.desktop-top-center-bg-eighth {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%); /* This centers the element horizontally */
    width: 280px;
    height: 280px;
    opacity: 0.15; /* Very transparent for background effect */
    z-index: 1; /* Lower z-index to appear behind content */
    pointer-events: none; /* Prevents interfering with clicks */
    display: none; /* Hidden by default on all devices */
}

.desktop-top-center-bg-eighth img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== DESKTOP STYLES (992px and above) ===== */
@media (min-width: 992px) {
    /* Show desktop top center background on desktop only */
    .desktop-top-center-bg-eighth {
        display: block !important;
		    position: absolute;
    top: -105px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 280px;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    display: none;
    }
}

/* ===== LARGE DESKTOP STYLES (1200px and above) ===== */
@media (min-width: 1200px) {
    .desktop-top-center-bg-eighth {
                     width: 321px;
        height: 376px;
        top: -158px;
        opacity: 1;
    }
    }
}

/* ===== EXTRA LARGE DESKTOP STYLES (1600px and above) ===== */
@media (min-width: 1600px) {
    .desktop-top-center-bg-eighth {
        width: 380px;
        height: 380px;
        top: 40px;
        opacity: 0.1;
    }
}

/* ===== TABLET STYLES (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
    /* Ensure background is hidden on tablet */
    .desktop-top-center-bg-eighth {
        display: none !important;
    }
}

/* ===== MOBILE STYLES (up to 767px) ===== */
@media (max-width: 767px) {
    /* Ensure background is hidden on mobile */
    .desktop-top-center-bg-eighth {
        display: none !important;
    }
}

/* ===== SMALL MOBILE STYLES (up to 480px) ===== */
@media (max-width: 480px) {
    /* Ensure background is hidden on small mobile */
    .desktop-top-center-bg-eighth {
        display: none !important;
    }
}