.portfolio-item{

	/*width:100%;*/

}

.portfolio-item .item{

	/*width:303px;*/

	float:left;

	margin-bottom:10px;

}

.mslfooter{

		  

	}

	@media only screen and (min-device-width: 250px) and (max-device-width: 1028px) 

	             {

     .mslfooter{

		  height: 1200px;

	}

    }

    

    

    .separator h5 {

  --s: 3px;   /* the thickness */

  --c: #EB9017;  /* the color */

  --w: 100px; /* the width */

  --g: 10px;  /* the gap */

  border: 1px solid;

  border-image: 

     linear-gradient(

       #0000      calc(50% - var(--s)/2),

       var(--c) 0 calc(50% + var(--s)/2),

       #0000    0) 

    0 1/0 var(--w)/0 calc(var(--w) + var(--g));

}



.separator h5 {

  color:#EB9017;

  font-size: 1rem;

  margin: 20px auto;

  width: fit-content;

}

@media only screen and (min-device-width: 250px) and (max-device-width: 1028px) 

	             {

.iq-portfolio-03 .iq-portfolio-content {

    position: absolute;

    top: 50%;

    right: 100%;

    display: inline-block;

    width: 100%;

    background: rgba(2, 216, 113, 0.8);

    padding: 30px;

    transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

    transform: translate(0%, -50%);

    -webkit-transform: translate(0%, -50%);

    -moz-transform: translate(0%, -50%);

    -o-transform: translate(0%, -50%);

    -ms-transform: translate(0%, -50%);

    background: #e651009e;

    padding: 186px;

}

               }

   .roundedbotton {

    border-radius: 0.75rem !important;

}



.iq-product8 { position: relative;  text-align: center; float: left; margin-bottom: 0; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; }

.iq-product8:hover { z-index: 9; -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1); border-radius: 22px; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }

.iq-feature8 img { width: 133px; }



.iq-qulity { position: relative;  text-align: center; float: left; margin-bottom: 0; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; }

.iq-qulity:hover { z-index: 9;  -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }



.scrolling-text {

  display: inline-block;

  transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);

  will-change: transform;

  backface-visibility: hidden;

}



.scrolling-text .scrolling-text-content {

  color: #fff;

  background: #191919;

  font-size: 80px;

  white-space: nowrap;

  transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);

  line-height: 1em;

  margin: 50px 0;

}



.containerss {

  position: relative;

  width: 100%;

  overflow: hidden;

}

.scroll-slider {

  position: relative;

  overflow: hidden;

  display: block;

  margin: 0;

  padding: 0;

  height: 100vh;

}



.scroll-wrapper {

  position: relative !important;

  display: flex !important;

  flex-wrap: nowrap !important;

  height: 100% !important;

  box-sizing: border-box !important;

  -webkit-touch-callout: none !important;

  -webkit-user-select: none !important;

  -moz-user-select: none !important;

  -ms-user-select: none !important;

  user-select: none;

  touch-action: pan-y;

  -webkit-tap-highlight-color: transparent;

}



.scroll-slide {

  flex: 1 0 75vw;

  max-width: 70vw;

  height: 100%;

}



.items {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100%;

}

.item-containers {

  position: relative;

}

.item-title {

  font-size: 4vw;

  font-weight: bold;

  line-height: 1;

}

@media (min-width: 40em) {

  .item-body {

    position: absolute;

    left: 100%;

    top: 50%;

    width: 50%;

    transform: translate(-25%, -50%);

  }

}



.tag {

  margin-right: 0.5rem;

}

.tag > a {

  display: block;

  padding: 0.25rem 0.5rem;

  font-size: 0.75rem;

  text-transform: uppercase;

  background: rgba(255, 255, 255, 0.25);

  color: #FFF;

}



.pr-2,

.px-2 {

  padding-right: 17rem !important;

}



.pl-2,

.px-2 {

  padding-left: 17rem !important;

}



	@media only screen and (min-device-width: 250px) and (max-device-width: 1028px) 

	             {

     .pr-2,

.px-2 {

  padding-right: 0.5rem !important;

}



.pl-2,

.px-2 {

  padding-left: 0.5rem !important;

}

    }

    

    /* Centered text */

.centered {

  position: absolute;

  top: 50%;

  line-height: normal;

  text-align: center;

  left: 50%;

  font-size: 33px;

  transform: translate(-50%, -50%);

}

@media only screen and (min-device-width: 250px) and (max-device-width: 1028px) 

	             {

    .centered {

  position: absolute;

  top: 50%;

  left: 35%;

  

  text-align: center;

  font-size: 19px;

    transform: translate(-31%, -56%);

}

    }

.jcbl-li{

  font-size: 5px;

}



.jcbl-row  {  

    margin-left: 5%;

    margin-right: 5%;

}

@media only screen and (min-device-width: 250px) and (max-device-width: 1028px) 

	             {

    .jcbl-row  {

    margin-left: 0%;

    margin-right: 0%;

}

    }

    

    .infra-row  {  

background: #fff;

    margin-left: 14%;

    margin-right: 14%;

}

@media only screen and (min-device-width: 250px) and (max-device-width: 1028px) 

	             {

    .infra-row  {  

background: #fff;

    margin-left: 0%;

    margin-right: 0%;

}

    }

    

    







.Carousel {

      margin-right: 32px;

    margin-left: 32px;

  --carousel-gap: 1rem;

  border-radius: 1rem;

  display: flex;

  gap: var(--carousel-gap);

  overflow-y: hidden;

  overflow-x: auto;

  position: relative;

  scroll-behavior: auto;

  scroll-snap-type: x mandatory;

  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;

  height: 50vw;

  outline: none !important;

  min-height: 20rem;

  max-height: 30rem;

}

.Carousel::-webkit-scrollbar {

  display: none;

}

.Carousel .Card {

  aspect-ratio: var(--card-ratio);

  flex: 1 0 auto;

  min-height: 100%;

  scroll-snap-align: start;

}

.Carousel .Card__media {

  aspect-ratio: auto;

}

.Carousel > div:empty {

  position: relative;

}

.Carousel > div:empty:first-child {

  inset-inline-start: 10%;

  margin-inline-end: calc(-1 * var(--carousel-gap));

}

.Carousel > div:empty:last-child {

  inset-inline-end: 10%;

  margin-inline-start: calc(-1 * var(--carousel-gap));

}



.Carousel--single .Card {

  --card-ratio: auto;

  flex: 1 0 100%;

}



@media (prefers-reduced-motion: reduce) {

  .Carousel {

    scroll-behavior: auto;

  }

}

@supports not (aspect-ratio: 1/1) {

  .Carousel .Card__media {

    padding-block-end: 0 !important;

  }

  .Carousel .Card__image {

    position: relative !important;

  }

}

.Dots {

  align-items: center;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

}



.Dot {

  border-radius: 100%;

  display: block;

  height: 1.5rem;

  width: 1.5rem;

  position: relative;

}

.Dot::after {

  background: currentColor;

  border-radius: 100%;

  content: "";

  display: block;

  height: 0.375rem;

  width: 0.375rem;

  left: 50%;

  position: absolute;

  top: 50%;

  transform: translateX(-50%) translateY(-50%);

}



/*.Dot--active {

  color: hsl(var(--theme-pink)) !important;

}*/



.Pagination {

  align-items: center;

  display: flex;

  justify-content: center;

 margin: 1rem 4.5rem;

}

.Pagination .Arrow {

  flex: 0 0 auto;

}

.Pagination .Arrow:first-of-type {

  margin-inline-end: auto;

  order: -1;

}

.Pagination .Arrow:last-of-type {

  margin-inline-start: auto;

  order: 1;

}



.Arrow {

  align-items: center;

  appearance: none;

  background: transparent;

  border: none;

  border-radius: 0.125rem;

  cursor: pointer;

  color: hsl(var(--theme-blue));

  display: flex;

  height: 3rem;

  justify-content: center;

  opacity: 1;

  padding: 0.5rem;

  transition: opacity 150ms, color 150ms;

  width: 3rem;

}

.Arrow:hover {

  color: hsl(var(--theme-red));

}

.Arrow:focus {

  color: hsl(var(--theme-pink));

  outline: none;

}

.Arrow:focus svg {

  box-shadow: 0 0 0 0.125rem hsla(var(--theme-white), 1), 0 0 0 0.25rem currentColor;

}

.Arrow:focus:not(:focus-visible) {

  color: hsl(var(--theme-red));

}

.Arrow:focus:not(:focus-visible) svg {

  box-shadow: none;

}

.Arrow[disabled] {

  color: hsl(var(--theme-dark));

  opacity: 0.4;

  pointer-events: none;

}

.Arrow svg {

  border-radius: 100%;

  fill: currentColor;

  height: 100%;

  width: 100%;

  transition: box-shadow 150ms;

}

[dir=rtl] .Arrow svg {

  transform: scaleX(-1);

}



.Hidden {

  border: 0 !important;

  clip: rect(0 0 0 0) !important;

  clip-path: inset(50%) !important;

  height: 1px !important;

  margin: -1px !important;

  overflow: hidden !important;

  padding: 0 !important;

  position: absolute !important;

  width: 1px !important;

  white-space: nowrap !important;

}





.Card {

  --card-ratio: auto 1/1;

  display: grid;

  grid-template-columns: 1fr;

  grid-template-rows: [media-start] auto [media-end main-start] auto [main-end];

  max-width: 100%;

  position: relative;

}



.Card__media {

  aspect-ratio: var(--card-ratio);

  background: hsla(var(--card-background-color), 0.5);

  border-radius: 1rem;

  grid-column: 1/-1;

  grid-row: media-start/media-end;

  max-width: 100%;

  overflow: hidden;

  position: relative;

  z-index: -1;

}

.Card__media > * {

  border-radius: inherit;

  height: 100%;

  object-fit: cover;

  position: absolute;

  width: 100%;

}



.Card__main {

  align-self: end;

  color: hsl(var(--card-foreground-color));

  grid-column: 1/-1;

  grid-row: main-start/main-end;

  padding: 1.25rem;

}

.Card__main [href]:not(.Card__link) {

  position: relative;

  z-index: 2;

}

.Card__main > * {

  margin: 0;

}



.Card__link {

  color: hsl(var(--card-link-color));

  font-weight: 600;

  text-decoration-line: underline;

  text-decoration-color: hsla(var(--card-link-color), 0.2);

  text-decoration-thickness: 0.125rem;

  text-decoration-skip: ink;

  text-decoration-skip-ink: all;

  text-decoration-offset: 100%;

}

.Card__link::after {

  border: 0.125rem solid hsl(var(--card-focus-color));

  box-shadow: inset 0 0 0 0.125rem hsla(var(--card-inner-focus-color), 1);

  border-radius: 1rem;

  bottom: 0;

  content: "";

  display: block;

  left: 0;

  opacity: 0;

  position: absolute;

  right: 0;

  top: 0;

  transition: border-color 150ms, opacity 150ms;

  z-index: 1;

}

.Card__link:hover, .Card__link:focus {

  text-decoration-color: hsla(var(--card-hover-color), 1);

}

.Card__link:hover::after, .Card__link:focus::after {

  opacity: 1;

}

.Card__link:focus {

  outline: none;

  text-decoration-color: currentColor;

}



.Card__heading {

  line-height: 1.25;

  margin-block-end: 0.5rem;

}



.Card--border .Card__link::after {

  opacity: 1;

}

.Card--border .Card__link:not(:focus):not(:hover)::after {

  border-color: hsla(var(--card-foreground-color), 0.5);

}



.Card--overlay {

  --card-shadow-color: var(--theme-black);

  --card-foreground-color: var(--theme-white);

  --card-background-color: var(--theme-dark);

  --card-link-color: var(--theme-white);

  --card-hover-color: var(--theme-white);

  grid-template-rows: [media-start] 1fr [overlay-start] 1rem [main-start] auto [main-end overlay-end media-end];

}

.Card--overlay::before {

  background: linear-gradient(to top, hsla(var(--card-shadow-color), 0.8) 20%, hsla(var(--card-shadow-color), 0.3) 60%, transparent);

  border-bottom-left-radius: 1rem;

  border-bottom-right-radius: 1rem;

  content: "";

  display: block;

  grid-column: 1/-1;

  grid-row: overlay-start/overlay-end;

  overflow: hidden;

}

.Card--overlay .Card__main p {

  text-shadow: 0 0.0625rem 0.0625rem hsl(var(--card-shadow-color));

}

.Card--overlay .Card__main a {

  color: hsl(var(--card-link-color));

}

.Card--overlay .Card__main a:active, .Card--overlay .Card__main a:visited {

  color: hsl(var(--card-link-color));

}

.Card--overlay .Card__main a:hover, .Card--overlay .Card__main a:focus {

  color: hsl(var(--card-hover-color));

}



.Card--square {

  --card-ratio: auto 1/1;

}



.Card--photo {

  --card-ratio: auto 4/3;

}



.Card--portrait {

  --card-ratio: auto 3/4;

}



.Card--wide {

  --card-ratio: auto 16/9;

}



@supports not (aspect-ratio: 1/1) {

  .Card__media {

    height: 100%;

    padding-block-end: calc(100% * (1 / 1));

  }



  .Card--square .Card__media {

    padding-block-end: calc(100% * (1 / 1));

  }



  .Card--photo .Card__media {

    padding-block-end: calc(100% * (3 / 4));

  }



  .Card--portrait .Card__media {

    padding-block-end: calc(100% * (4 / 3));

  }



  .Card--wide .Card__media {

    padding-block-end: calc(100% * (9 / 16));

  }

}

.Group-Companies{

border-radius: 34px;

    padding: 31px;

    background: white;

    box-shadow: 0px 2px 70px 0px rgb(65 84 111 / 8%);

}

.about-img{

border-radius: 47px;

    padding: 0px;

    background: white;

    box-shadow: -8px 8px 30px 0px rgb(65 84 111 / 17%)

}





/**********************************************************/

div.fixedr {

    position: fixed;

    bottom: 60px;

    margin-left: 10px;

    border: 2px solid #33c738;

    border-radius: 25px;

    height: 50px;

    width: 50px;

    z-index: 999;

    background-color: #00b116;

    cursor: pointer;

    font-size: 20px;

    display: inline-block;

    vertical-align: middle;

}



#navbar {

  background-color: #333;

  position: fixed;

  top: 0;

  width: 100%;

  display: block;

  transition: top 0.3s;

}



#navbar a {

  float: left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 15px;

  text-decoration: none;

  font-size: 17px;

}



#navbar a:hover {

  background-color: #ddd;

  color: black;

}



.fimg{

   margin-top: 90px;

}

@media only screen and (min-device-width: 250px) and (max-device-width: 1028px) 

	             {

  .fimg{

   margin-top: 0px;

}

}

.ptimg{

   margin-top: 70px;

}

@media only screen and (min-device-width: 250px) and (max-device-width: 1028px) 

	             {

  .ptimg{

   margin-top: 0px;

}

}

.minig{

   margin-top: 150px;

}

@media only screen and (min-device-width: 250px) and (max-device-width: 1022px) 

	             {

  .minig{

   margin-top: 0px;

}

}

@media only screen and (min-device-width: 1022px) and (max-device-width: 1028px) 

	             {

  .minig{

   margin-top: 80px;

}

}

.footer-no{

   width: 100%;

}

@media only screen and (min-device-width: 250px) and (max-device-width: 1028px) 

	             {

  .footer-no {

   width: 167px;

}

}

 /****************jcbl limited*****************/

     .jcbl-limitrd-icon {

     width: 24px !important;

     }

	@media only screen and (min-device-width: 250px) and (max-device-width: 750px) 

	             {

     .jcbl-limitrd-icon{

		width: 24px !important;

	}

    } 

    .jcbl-limitrd-icon-sr{

     width: 35px !important;

	}

	@media only screen and (min-device-width: 250px) and (max-device-width: 750px) 

	             {

     .jcbl-limitrd-icon-sr{

		    width: 60px !important;

		

	}

    }

    

    .jcbl-limitrd-icon-srr{

     width: 40px !important;

	}

	@media only screen and (min-device-width: 250px) and (max-device-width: 750px) 

	             {

     .jcbl-limitrd-icon-srr{

		width: 80px !important;

		

	}

    }

    .jcbl-limitrd-iconsrrr{

    width: 24px !important;

    }

	@media only screen and (min-device-width: 250px) and (max-device-width: 750px) 

	             {

     .jcbl-limitrd-iconsrrr{

		width: 50px !important;

		

	}

    }

    .jcbl-limitrd-icon4{

    width: 35px !important;

    }

	@media only screen and (min-device-width: 250px) and (max-device-width: 750px) 

	             {

     .jcbl-limitrd-icon4{

		width: 65px !important;

		

	}

    }

    .jcbl-limitrd-icon5{

    width: 70px !important;

    }

	@media only screen and (min-device-width: 250px) and (max-device-width: 750px) 

	             {

     .jcbl-limitrd-icon5{

		width: 110px !important;

		

	}

    }

    .jcbl-limitrd-text{

    text-align:right;

    }

	@media only screen and (min-device-width: 250px) and (max-device-width: 750px) 

	             {

     .jcbl-limitrd-text{

		 text-align:left;

		

	}

    }

    /*************comm************/

     .group-align{

      text-align: center;

    }

    @media only screen and (min-device-width: 250px) and (max-device-width: 1022px) 

	             {

     .group-align{

      text-align: left;

    }

    } 

     @media only screen and (min-device-width: 1023px) and (max-device-width: 1028px) 

	             {

     .group-align{

      text-align: center;

    }

    } 

    .group-right-center-align{

      text-align: right;

    }

    @media only screen and (min-device-width: 250px) and (max-device-width: 1028px) 

	             {

     .group-right-center-align{

    text-align: left;

     

    }

    } 

    .limited-mt{

        margin-top: 50px;

        margin-bottom: 25px;

    }

    @media only screen and (min-device-width: 250px) and (max-device-width: 1028px) 

	             {

     .limited-mt{

     margin-top: 2px;

      margin-bottom: 25px;

    }

    }

    /*************comm************/

   #image {

   float: left ;

   margin-right:2%;

   }



  #content{

  float:right;

  

  }

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



#image,#content  {

  width:100%;

  margin:0;

  }

 

 

}



.gup-buttom{

   margin-bottom: 0;

}

 @media only screen and (min-device-width: 250px) and (max-device-width: 1028px) 

	             {

    .gup-buttom{

   margin-bottom: -60px;

}

    }

    .gup-buttom-img{

   margin-bottom: 0;

}

 @media only screen and (min-device-width: 250px) and (max-device-width: 1028px) 

	             {

    .gup-buttom-img{

   margin-bottom: -42px;

}

    }

    

.custom-projects .nav-pills {

    gap: 10px;

}



.custom-projects .nav-pills .nav-link {

    background: #f1f1f1;

    color: #333;

    padding: 20px;

    font-weight: 600;

    text-transform: uppercase;

    font-size: 14px;

    transition: all 0.3s ease;

    border: 1px solid #ddd;

}



.custom-projects .nav-pills .nav-link:hover {

    background: #e2e2e2;

    color: #000;

    padding: 20px;

    box-shadow: unset;

}



.custom-projects .nav-pills .nav-link.active {

    background: #F39314;

    color: #fff;

    border-color: #F39314;

    transform: translateY(-1px);

    padding: 20px;

}



.custom-projects .nav-justified .nav-item {

    flex: 1;

    list-style: none;

}



@media (max-width: 575px) {

    .custom-projects .nav-pills .nav-item {

        display: flex;

        align-items: stretch;

    }



    .custom-projects .nav-pills .nav-link {

        height: 60px;

        display: flex;

        justify-content: center;

        align-items: center;

        text-align: center;

        white-space: normal;

        line-height: 1.2;

    }

}

/* Layout */
.companies-tab-section .tab-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Tabs */
.companies-tab-section .tab {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.companies-tab-section .tab button {
    background: none;
    border: none;
    padding: 14px 12px;
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
    outline: none;
}

.companies-tab-section .tab button:hover,
.companies-tab-section .tab button.active {
    color: #f39314;
    text-decoration: underline;
}

/* Content */
.companies-tab-section .tabcontent-wrapper {
    width: 100%;
    padding: 10px 0;
}

.companies-tab-section .tabcontent {
    display: none;
}

.companies-tab-section .tabcontent.active {
    display: block;
}

/* Company Card */
.companies-tab-section .company-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
}

.companies-tab-section .company-info {
    flex: 1;
    min-width: 220px;
    text-align: left;
}

.companies-tab-section .company-info p {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: #000;
}

.companies-tab-section .company-website a {
    font-size: 0.9rem;
    color: #777;
    text-decoration: none;
}

.companies-tab-section .company-website a:hover {
    color: #f39314;
}

/* Logo */
.companies-tab-section .company-card img {
    max-width: 70px;
    height: auto;
    transition: transform 0.3s ease;
}

.companies-tab-section .company-card img:hover {
    transform: scale(1.05);
}

/* Desktop */
@media (min-width: 992px) {
    .companies-tab-section .tab-wrapper {
        flex-wrap: nowrap;
    }

    .companies-tab-section .tab {
        width: 25%;
        margin-top: 100px;
    }

    .companies-tab-section .tabcontent-wrapper {
        width: 75%;
        padding-left: 30px;
        display: flex;
        justify-content: center;
    }
    div#trading_and_retail {
        margin-top: 100px;
    }
    div#international_business {
        margin-top: 75px;
    }
    div#other {
        margin-top: 60px;
    }
}

/* Center right side content */
.companies-tab-section .tabcontent-wrapper {
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: center;   /* horizontal center */
}

/* Inner container for proper width */
.companies-tab-section .tabcontent {
    width: 100%;
    max-width: 700px;  /* control content width */
}

@media (min-width: 992px) {
  .center-section {
    text-align: center;
  }

  .custom-list-style ul {
    text-align: left;
    display: inline-block;
    color: #000;
  }
}

@media (max-width: 991.98px) {
    .custom-list-style ul {
        margin-left: 20px;
    }
}