@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&display=swap');
@import url("../bootstrap/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/*-----------------COMMAN-CSS------------------*/
/* ============== Default Element Style ================ */
body{font-family: 'Montserrat', sans-serif;overflow-x:hidden;}
h1{color:#171717;font-size:50px;font-weight:400;}
@media (max-width:992px){h1{font-size:35px;}}
h1 span{display:block;font-size:26px;margin-top:10px;}
h2{font-family: 'Montserrat', sans-serif;font-size:32px; font-weight:400;color:#333333; margin:0px; padding:0px;text-transform:capitalize;line-height:60px;text-align:center;position:relative;} 
h2::after{content:'';border-bottom:5px solid #07838d;position:absolute;width:100px;height:2px;bottom:0;left:0;right:0;margin:0 auto;border-radius:12px;}
h2.left{text-align:left;position:relative;}
h2.left::after{left:0;margin:0;}
h3{font-family: 'Montserrat', sans-serif;font-size:18px; font-weight:500;margin:0px;padding:0;color:#050505;text-transform:capitalize;text-align:center;margin-bottom:30px;}
p{ font-family: 'Lato', sans-serif;font-size:16px; font-weight:initial; line-height:26px; margin:0px 0px 15px 0px; padding:0px; color:#131313;}
ul{margin:0; padding:0; list-style:none;}
a:hover, a:focus {
    text-decoration: none !important;
    color: #07838d;
}
audio, canvas, iframe, img, svg, video {vertical-align: middle;}
audio, canvas, img, video {height: auto; box-sizing: border-box;}
img { border-style: none;}
.fa{margin-right:10px;}
/*-----------------COMMAN-CLASS------------------*/
.font-style{font-family: 'Montserrat', sans-serif!important;}
.ul-styling li::before { content: "\F285";font-family: bootstrap-icons !important; margin-right: 5px;   position: relative; top: 3px;}
.ul-styling-right li::after { content: "\F285";font-family: bootstrap-icons !important; margin-right: 5px;   position: relative; top: 3px;}
/*---BUTTON---*/
#scrolltop {display: none;position: fixed ;  right: 20px; bottom: 80px;z-index: 998;color: #fff;background: #07838d;transition: all 0.3s ease-out;padding: 10px;cursor: pointer; width: 38px;height: 44px;box-sizing: border-box;border-radius:0px;background-image:none;border: 2px solid transparent;}
#scrolltop  .fa {font-size: 24px;padding: 0px 1px;}
.toTop:hover{color: #07838d;background-color:transparent;border:2px solid #07838d;}
.btn-default{background-color:#07838d;color:#fff;font-weight:700;font-size:15px;padding:14px 50px;border-color:transparent;border-radius:0px;background-image:none;border:1px solid transparent;transition: 0.3s;text-shadow:none;text-transform:capitalize}  /*Blue Button*/
.btn-default:hover{background-color:transparent;color:#134684;border:1px solid #134684;}
a{text-decoration: none; color:black;}
.text-blue{color:#0a359e;}
/* -----------------------HEADER ---------------------------- */
#header {
    background: #07838d;
    padding: 10px;
}
.submenu.restaurant {
    width: 250px;
}
/*old blue color #1e3b8b*/
#navigation{position: sticky;top: 0px;background: white;z-index: 9999;}
#navigation li a{font-family: 'Rubik', sans-serif;text-transform: uppercase;  transition: 0.1s ease-in; font-size: 13px;font-weight: 500;}
#navigation .dropdown-item:focus, .dropdown-item:hover{background-color: unset;}
#navigation .navbar .fa{padding-left: 10px;}
#navigation a:hover{color:#07838d!important;}
#navigation .nav-item .active{color: #07838d!important;background: #fff;}
.swiper{position:static;}
#navigation .nav .nav-item {position: relative;}
#navigation .dropdown-toggle::after {content: "";border-top: unset;border-right:unset;border-bottom: unset;border-left: unset;}
#navigation .contactp a {color: #07838d;font-weight: 600;}
#navigation .contactp i{color: #07838d;}
#navigation .dropdown-menu li{position: relative;}
#navigation .dropdown-menu>li:hover>.submenu{display: block;}
@media(min-width:1200px){
    #navigation li a{padding: 10px 28px;}
    #navigation .nav .nav-item .nav-link.active::after{content: '';border-bottom: 3px solid #07838d;position: absolute;width: 28px;height: 2px;bottom: 0;left: 28px;}
}
@media(max-width:1200px){
    #navigation .nav .nav-item .nav-link.active::after{content: '';border-bottom: 3px solid #07838d;position: absolute;width: 28px;height: 2px;bottom: 0;left: 9px;}
}
@media(max-width:992px){
    #navigation {height:59px;}
    #navigation .submenu{display: none;}
    #navigation .dropdown-menu>li:hover>.submenu{display: none !important;}
    #navigation .dropdown-menu{border: none;}
    #navigation .dropdown-item{text-align: left;color: #777;}
    #navigation .nav .nav-item .nav-link.active::after{border-bottom: unset!important; } 
    #navigation li a{padding: 10px 7px;}
    #navigation .navbar{position:absolute;z-index: 9999;width: 100%;box-shadow: rgb(204, 204, 204) 0px 0px 10px !important;}
}
@media(max-width:376px) {
    #navigation {height:58px;}
}
@media(min-width:991px){
    #navigation .dropdown-menu .submenu{display:none;position: absolute;left: 100%;top: 5px;left: 100%;}
    #navigation .dropdown:hover .dropdown-menu{display: block !important;}
    #navigation .dropdown-menu.show{display: none;}
    #navigation .submenu{background-color: white;border: 1px solid grey;}
    #navigation .dropdown-menu li{position: relative;}
    #navigation .dropdown-menu>li:hover>.submenu{display: block;}
}
/* ----------------------FOOTER ------------------------*/
#footer .fa{ color: #444343;}
#footer a:hover, #footer a.active {
    /* color: #07838d;*/
    color: #047680;
}
#footer-bottom{background-color: #07838d; padding: 15px;}
.list a.active {
    /*color: #07838d;*/
    color: #047680;
}
#footer   p{
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: initial;
    line-height: 26px;
    margin: 0px 0px 15px 0px;
    padding-bottom: 0px;
    color: #131313;
}
#footer a {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: initial;
    line-height: 26px;
    margin: 0px 0px 15px 0px;
    padding-bottom: 5px;
    color: #131313;
}

/*old footer blue #0a58ca*/
/*---------------- BANNER-HOME -------------------*/
.swiper-button-next, .swiper-button-prev {
    color: #fff !important;
    top: unset !important;
    bottom: 100px;
}
.swiper-button-prev{right: 100px!important;left: unset!important;}
.swiper-button-next {right: 60px!important;left: unset!important;}
.swiper-button-next:hover ,.swiper-button-prev:hover{color: #07838d !important;}
.swiper-button-next::after, .swiper-button-prev::after{font-size: 25px!important;font-weight: 900 !important;}
.fa-angle-right:before {margin-right: 0px;position: absolute;margin-left: 18px;right: 13px;top: 14px;}
.banner-caption{position: absolute; background: rgba(255,255,255,0.6);padding-right: 160px;padding-left: 20px;padding-bottom: 20px;padding-top: 20px;margin-top: 220px;border-left: 4px solid #07838d;z-index: 999999;top: 20px;left: 12%; }
@media(max-width:992px){
.swiper-button-next ,.swiper-button-prev{bottom: 120px;}
}
@media(max-width:567px){
.swiper-button-prev::after, .swiper-rtl .swiper-button-next::after,.swiper-button-next::after, .swiper-rtl .swiper-button-prev::after{content:unset!important;}
}
@media(min-width:768px) and (max-width:1200px) {
    .banner-caption{top: -90px !important;padding-right: 77px;}
} 
/*---------------- PRODUCTS -------------------*/
#product .img-cont {background-color: #fff;padding: 11px;}
#product .img-box {margin-top: 40px;}
#product .img-box:hover  .img-cont {background-color: #07838d !important;color: #fff; transition: 0.7s;}
/*------------------- CHAIN ----------------------*/
#chain .imgbox {position: relative;}
#chain img:hover {border: 5px solid #ccc;}
#chain img {border-radius: 50%;position: relative;margin-bottom: 20px;width: 200px;height: 200px;border: 5px solid transparent;transition: 0.2s ease-in;z-index: 1;}
#chain .imgbox::after {content: '';border-bottom: 2px dashed #ccc;position: absolute;width: 77px;height: 2px;bottom: 0;left: -10px;top: 50%;}
#chain .imgbox::before {content: '';border-bottom: 2px dashed #ccc;position: absolute;width: 77px;height: 2px;bottom: 0;right: -10px;top: 50%;}
#chain .imgbox1::after{border-bottom: unset !important;}
#chain .imgbxox2::before{border-bottom: unset !important;}
@media(max-width:992px){
    #chain .imgbox::after{border-bottom: unset !important;}
    #chain .imgbox::before{border-bottom: unset !important;}
}
/*------------------------- CAPABILITIES----------------- */
#capabilities .accordion-header{ background: unset;}
#capabilities .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-right-radius: unset; border-bottom-left-radius:unset;}
#capabilities .accordion-item:first-of-type .accordion-button { border-top-left-radius: unset !important;    border-top-right-radius: unset !important;}
#capabilities .accordion-button{padding: 10px 10px;}
#capabilities .accordion-button:focus{box-shadow: none;}
#capabilities .accordion-button:not(.collapsed){color: white !important; background: #07838d;}
#capabilities .accordion-button::after{content: "\f067";background-image: unset;font-family:FontAwesome;}
#capabilities .accordion-button:not(.collapsed)::after{ background-image: unset;content: "\f068";font-family:FontAwesome; margin-right: 8px;}
#capabilities .accordion-body li {padding: 5px 20px;list-style: none;font-size: 16px;font-weight: 500;color: #383838;line-height: 28px;margin: 0;padding: 0;margin-bottom: 5px;font-family: 'Lato', sans-serif;background: #fff;}
#capabilities .owl-dots{color: #528496; padding-top: 10px;}
@media(min-width:992px){#capabilities .owl-dots{display: none;}.owl-nav{display: none;}}
@media(max-width:991px){#capabilities .owl-nav{display: none;}.owl-dots{display: block;}}
/*@media(max-width:991px){#capabilities{margin-top: 20px;}}*/

/*------------------------- ABOUT US----------------- */
#contact .icon-box{border:3px solid #07838d;border-radius: 50px;padding: 15px 20px;}
#contact .equal-height .column{height:350px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
#contact-form .h-px-50{height: 50px!important;}
/*------------------------- PRODUCTS---------------- */
#products .accordion_toggle {background: #ececee; cursor: pointer; margin:15px 0 0; padding: 10px 10px; vertical-align: middle; font-weight:500; font-size:15px; color:#232323;position:relative;text-align:left;margin-top:0px;border: 1px solid #dddddd;}
#products .accordion_toggle::after {content: "\f067";font-family: FontAwesome;margin-right: 10px;margin-top:7px;position:absolute;right:0px;top:6px;}
#products .accordion_toggle.accordion_toggle_active {position: relative;width: 100%;color:#fff;background:#07838d;}
#products .accordion_toggle.accordion_toggle_active::after {content: "\f068";font-family: FontAwesome;margin-right: 10px;margin-top:7px;}
#products .accordion_toggle  i{font-size:16px; color:#666}
#products .accordion_toggle .fa-minus{display:none;}
#products .accordion_toggle_active .fa-plus{display:none;}
#products .accordion_toggle_active .fa-minus{display:inline-block;}
#products .accordion_content {margin:0 0 0px 0; padding:7px 15px;border:1px solid #dddddd;background:#fff;}
#products .accordion_content li{padding: 5px 20px; list-style:none; font-size:16px; font-weight:500; color:#383838; line-height: 28px; margin: 0;padding:0;margin-bottom:5px;font-family: 'Lato', sans-serif;background:#fff;}
#products .accordion_content li a{color:#383838;transition:0.1s ease-in;}
#products .accordion_content li a:hover{color:#07838d;cursor:pointer;}
#products #application-accordian{width:262.5px;z-index:1;}
#products .accordion_toggle a{color:#232323;}
#products .accordion_toggle_active a{color:#fff !important;}
@media (min-width:992px) and (max-width:1199px) {
  #products   #application-accordian{width:200px;top:100px !important;}
}
.italic-text{
    color: #fff;
    font-family: 'Tinos', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
}

.navbar-brand  {
    max-width: 200px;
}

@media (max-width: 768px) {
    .navbar-brand  {
        max-width: 180px;
    }
}

/* Bigger hero section for mobile */
@media (max-width: 768px) {

    .home-banner .swiper-slide {
        height: 75vh; /* increase height (try 70–90vh as needed) */
        position: relative;
    }

    .home-banner .swiper-slide img {
        height: 100%;
        object-fit: cover; /* fill nicely */
    }

    /* Optional: keep text inside image instead of below */
    .home-banner .banner-caption {
        display: block !important;
        position: absolute;
        left: 15px;
        right: 15px;
        background: rgba(255,255,255,0.7);
        padding: 7px;
        margin-top: 326px;
    }

    /* Hide the separate mobile text block */
    .home-banner .d-md-none {
        display: none !important;
    }
}
@media (max-width: 992px) {
    #chain h2 {
        font-size: 25px;
        line-height: 38px;
    }
}

@media (max-width: 576px) {
    #chain h2 {
        font-size: 22px;
        line-height: 45px;
    }
}
/* Reduce spacing ONLY on About page mobile */
@media (max-width: 768px) {

    .about-page {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

        .about-page .pb-5 {
            padding-bottom: 15px !important;
        }

        .about-page .container {
            padding-left: 15px;
            padding-right: 15px;
        }

        .about-page p {
            margin-bottom: 10px;
            line-height: 24px;
        }

        .about-page h2 {
            margin-bottom: 10px;
        }
}

/* Reduce spacing ONLY for team page on mobile */
@media (max-width: 768px) {

    .team-page {
        padding: 30px 0 !important;
    }

        .team-page .section-heading {
            margin-bottom: 25px;
        }

            .team-page .section-heading h2 {
                margin-bottom: 10px;
                font-size: 24px;
            }

            .team-page .section-heading p {
                font-size: 14px;
                margin-top: 5px;
            }

        .team-page .team-grid {
            gap: 16px;
            padding: 0 12px;
        }

        .team-page .team-card-header {
            padding: 16px 15px;
        }

        .team-page .team-card-body {
            padding: 16px 15px 8px;
        }

        .team-page .team-card-photo,
        .team-page .team-card-photo-placeholder {
            width: 110px;
            height: 110px;
        }

        .team-page .member-name {
            font-size: 16px;
        }

        .team-page .member-title {
            font-size: 11px;
        }

        .team-page p {
            font-size: 14px;
            line-height: 22px;
            margin-bottom: 10px;
        }
}
@media (max-width: 768px) {

    /* Reduce section spacing */
    .ecommerce-page {
        padding: 25px 0 !important;
    }

        /* Reduce gap between sections */
        .ecommerce-page .mt-5 {
            margin-top: 20px !important;
        }
      
}
@media (max-width: 768px) {

    /* Reduce section spacing */
    .retail-page {
        padding: 25px 0 !important;
    }

        /* Reduce gap between sections */
        .retail-page .mt-5 {
            margin-top: 20px !important;
        }
}
@media (max-width: 768px) {

    /* Reduce section spacing */
    .industrial-page {
        padding: 25px 0 !important;
    }

        /* Reduce gap between sections */
        .industrial-page .mt-5 {
            margin-top: 20px !important;
        }
}

@media (max-width: 768px) {

    /* Reduce section spacing */
    .Supermarket-page {
        padding: 25px 0 !important;
    }

        /* Reduce gap between sections */
        .Supermarket-page .mt-5 {
            margin-top: 20px !important;
        }
}

@media (max-width: 768px) {

    /* Reduce main section spacing */
    .capabilities-page {
        padding: 30px 0 !important;
    }

        /* Reduce gap between each capability block */
        .capabilities-page .pb-lg-5 {
            padding-bottom: 20px !important;
        }

        /* Reduce spacing between image slider and text */
        .capabilities-page .pt-4 {
            padding-top: 10px !important;
        }

        /* Reduce top spacing of sidebar */
        .capabilities-page .pt-3 {
            padding-top: 10px !important;
        }
}

@media (max-width: 768px) {

    /* Reduce section spacing */
    .contact-page {
        padding: 25px 0 !important;
    }

        /* Reduce gap below heading */
        .contact-page .pb-5 {
            padding-bottom: 20px !important;
        }

        /* Reduce spacing inside cards (phone/address/email boxes) */
        .contact-page .py-5 {
            padding-top: 30px !important;
            padding-bottom: 25px !important;
        }

        /* Reduce gap between form fields */
        .contact-page .mb-4 {
            margin-bottom: 12px !important;
        }

        /* Reduce spacing before submit button */
        .contact-page .pb-5 {
            padding-bottom: 20px !important;
        }
}

@media (max-width: 768px) {

    #contact .equal-height .column {
        height: auto; /* let content decide height */
        padding: 20px 10px; /* optional: reduce inner spacing */
    }
}

@media (max-width: 768px) {
    .italic-text {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .italic-text {
        font-size: 13px;
    }
}