@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
    font-family: "Poppins", serif;
}

h1, h2, h3, h4, h5, h6{
    font-weight: 600 !important;
}

.hero-section{
    background-image: url("../images/food-banner-hero.webp");
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

.color-orange{
    color: #FF330F;
}

.text-blue{
    color: #0050BA;
}

.hero-section h1{
    font-size: 50px;
    line-height: 65px;
}


.same-btn{
   background: linear-gradient(#F0745E, #FF330F);
    display: inline-block;
    padding: 4px 12px 4px 30px;
    border-radius: 50px;
    transition: 0.5s ease-in-out;
}

.same-btn:hover{
  background-color: white;
  color: #FF330F;
  margin-left: 30px;
}



.same-btn img{
    width: 40px;
    border-radius: 50%;
    margin: 0 auto;
    animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
	-moz-animation: bounce 2s infinite;
	-o-animation: bounce 2s infinite;
}


.same-btn img:hover {
  animation-play-state: paused; /* Pause the animation when hovered */
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
}

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translatex(0);}	
	40% {-webkit-transform: translatex(-30px);}
	60% {-webkit-transform: translatex(-15px);}
}
 
@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translatex(0);}
	40% {-moz-transform: translatex(-30px);}
	60% {-moz-transform: translatex(-15px);}
}
 
@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translatex(0);}
	40% {-o-transform: translatex(-30px);}
	60% {-o-transform: translatex(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translatex(0);}
	40% {transform: translatex(-30px);}
	60% {transform: translatex(-15px);}
}


.form1-section{
    background-image: url(../images/form-1-section.webp);
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.position-card{
    background: linear-gradient(#FF330F, #F0745E);
    display: inline-block;
    padding: 20px;
    border-radius: 5px 0px 15px 0px;
}

input, select, textarea{
    border: 1px solid #fdbbad;
    border-radius: 5px;
    background-color: #FFEBE7;
    color: black;
}

.bg-form form :where(input, select, textarea){
  border: 1px solid #fdbbad;
    border-radius: 5px;
    background-color: #fff;
    color: black;
}

input:focus, input:active, select:focus, select:active , textarea:focus , textarea:active{
    outline: none;
}

.form-img1{
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100px;
}

.form-img2{
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
}

::placeholder{
    color: black;
}

.bg-light-sky{
    background-color: #F3F3F3;
}

.what-we-offer-logo img{
    width: 70px;
    height: 70px;
    object-fit: contain;
}



.position-relative{
    position: relative;
}

.borderend{
    box-shadow: 0px 0px 5px #FF330F;
    padding: 20px;
    border-radius: 0px 20px 0px 20px;
    transition: 0.5s ease-in-out;
}

.borderend:hover{
  transform: scale(1.09);
}
.bg-light-yellow{
    background-color: #FF8B001A;
}

.bg-brouwn{
    background-color: #4A0A0A;
}

.text-color{
    -webkit-text-fill-color: red;
-webkit-text-fill-color: #000000;
-webkit-text-fill-color: #FF330F;
}

.food-text{
    position: absolute;
    bottom: 15px;
    left: 30px;
    color: white;
}


.Companies-logo{
  background:linear-gradient(#F0745E , #FF8300);
  border-radius: 50%;
    padding: 15px;
    width: 180px;
    height: 180px;
}

.Companies-logo img{
    background-color: white;
    border-radius: 50%;
    width: 150px !important;
    height: 150px !important;
}

.text-brown{
    color: #43121D;
    line-height: 45px;
}

.technology-banner{
    background-image: url("../images/technology-banner.webp");
    width: 100%;
    height: 100%;
    background-position: center;
    background-attachment: fixed;
}

/* tabs */
.tabs {
    /* display: flex; */
    cursor: pointer;
    margin-bottom: 20px;
  }

  .tab {
    padding: 0px 33px 0px 0px;
    margin-right: 5px;
    background-color: #f0f0f0;
    border: 1px dashed #FF330F;
    border-radius: 4px;
  }

  .tab:hover {
    background-color: #e0e0e0;
  }

  .tab.active {
    background: linear-gradient(#FF330F, #F0745E);
    color: white;
  }

  .tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
  }

  .tab-content.active {
    display: block;
  }

  /* tabs */

  .border-tabs{
    border: 3px solid #FF330F;
    border-radius: 5px;
  }

  .modal-img{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
  }

  .bg-gradiant{
    background-color: #747c49;
  }

  .bg-gradiant img{
    width: 100%;
    height: 180px;
    object-fit: contain;
  }


  .bg-orange{
    background: linear-gradient(#FF330F, #F0745E);
  }

  .pay-img1{
    position: absolute;
    right: 0;
    z-index: -1;
    top: -15px;
  }

  .pay-img2{
    position: absolute;
    bottom: -35px;
  }


  button:active, button:focus{
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
  }


  .accordion-button:not(.collapsed){
    background-color: transparent;
  }


  .clients-bg{
    background-image: url("../images/our-clients-banner.png");
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
  }

  #clients img{
    width: 100px;
    margin: 0 auto;
    border: 5px solid #FF330F;
    border-radius: 50%;
  }




  .owl-prev, .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #000; /* Customize the color */
    font-size: 24px; /* Customize the size */
    z-index: 10;
    cursor: pointer;
}

.owl-prev {
    left: -30px; /* Adjust left position */
}

.owl-next {
    right: -30px; /* Adjust right position */
}



.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled{
    display: block !important;
}

.form-section{
    background-image: url("../images/form-banner.webp");
    width: 100%;
    height: 100%;
    /* background-position: center; */
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
}


.footer-banner{
    background-image: url(../images/footer-banner.png);
    width: 100%;
    height: 100%;
    background-position: center;
}



@media screen and (max-width: 1024px) {
    .banner-img img{
        width: 100%;
    }
  }


  @media screen and (max-width: 520px) {
    .text-res{
        font-size: 40px !important;
        line-height: 46px !important;
    }

    .what-we-offer-logo img{
        width: 100% !important;
    }
    .owl-nav{
      display: none !important;
    }

    .tab-linkss{
      border: none !important;
    }

    .footer-img-cir{
      justify-content: center !important;
    }

    .modal-img {
      display: none;
    }

    .same-btn{
      text-align: center;
    }

    .pay-img1{
      display: none;
    }
  }



  /* 2nd tabs */
  /* .tabs {
    width: 300px;
    margin: 0 auto;
} */

.tab-linkss {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.tab-linkss li {
    padding: 10px 20px;
    cursor: pointer;
    /* border: 1px solid #ccc; */
    margin-right: 5px;
    text-align: center;
    flex-grow: 1;
}

.tab-linkss li.activefood {
    background: linear-gradient(#F0745E, #FF330F);
    border-radius: 50px;
    color: white;
}

.tab-contentt {
    /* border: 1px solid #ccc; */
    padding: 20px;
    margin-top: 10px;
}

.tab-panee {
    display: none;
}

.tab-panee.activefood {
    display: block;
}
/* tabs2 */

.advance-tech{
  background-image: url("../images/advance-tecg.png");
  width: 100%;
  height: 100%;
  background-position: center;
}

/* .insite:hover{
  box-shadow: inset 0px 0px 15px #FF330F;
  padding: 25px;
} */

.insite{
  padding: 25px;
  transition: 0.5s ease-in-out;
  background-color: white;
  border-radius: 6px;
  cursor: pointer;
 /* box-shadow: inset 0px 0px 15px #FF330F; */
  
}

.insite p{
  display: flex;
  justify-content: center;
  align-items: center;
}

.insite-active{
  box-shadow: inset 0px 0px 15px #FF330F;
}


.accordion-item{
  border: none;
}

.accordion-button:not(.collapsed) {
  color: #FF330F;
}

.position{
  position: relative;
}
.position::before{
  content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: #00000054; */
    background-image: linear-gradient(to bottom, #00000000, #000000a6);
}

.Companies-logo img{
  width: 100%;
  height: 180px;
  object-fit: contain;
}
/* tabs 3 */


.bg-form{
  background:linear-gradient(#ffffff94, #ffffff94), url(https://img.freepik.com/free-photo/crispy-tubtim-fish-salad-thai-food-herb_1150-23405.jpg?t=st=1733302992~exp=1733306592~hmac=a4161ac2b1b084d15b1868dd01a2ffffa1c6e9535cdd8076abeaa61271cb8d23&w=360);
  background-position: left;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}


.tab-buttons {
  display: flex;
}
.tab-button {
  padding: 10px 20px;
  cursor: pointer;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  margin-right: 5px;
}
.tab-button.active1 {
  background:linear-gradient(#F0745E, #FF330F);
  color: white;
  border-radius: 50px;
}

.tab-button {
  color: rgb(0, 0, 0);
  border-radius: 50px;
}

.tab-content1 {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  margin-top: 10px;
}
.tab-content1.active1 {
  display: block;
}

.new-box{
  transition: 0.5s ease-in-out;
  background-color: white;
}

.new-box:hover{
  transform: scale(0.96);
  /* flex-direction: row-reverse; */
  box-shadow: 0px 0px 5px #FF330F;
  /* color: white !important; */
}
.circle {
    background-color: #CF0017;
    padding: 10px;
    border-radius: 50%;
    display: block;
    width: 20px;
    height: 20px;
}
.circleredgreen {
    background-color: forestgreen;
    padding: 10px;
    border-radius: 50%;
    display: block;
    width: 20px;
    height: 20px;
}

.circleredgblue {
    background-color: navy;
    padding: 10px;
    border-radius: 50%;
    display: block;
    width: 20px;
    height: 20px;
}
.new-box :where(h5, a){
  color: #FF330F;
}