body {
  margin: 0; /* Remove default margins */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

.container-infini {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
 @media (max-width: 1800px) {
  .landwelcome, .contactus{
    padding-top: 8%;
  }
  .global_container {
  width:75%;
  margin: 0 auto;
  }
}
 @media (min-width: 1800px) {
  .landwelcome, .contactus{
    padding-top: 8%;
  }
  .global_container {
  width:65%;
  margin: 0 auto;
  }
}
@media (min-width: 800px) {
  .landwelcome, .contactus{
    padding-top: 12%;
  }
  .global_container {
  width:90%;
  margin: 0 auto;
  }
}
@media (max-width: 550px) {
  .landwelcome, .contactus{
    padding-top: 28%;
  }
}
.landing-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999; 
   background-color: #03053c;
}

  .desc-long {
    display: none;
  }

  @media (min-width: 1400px) {
    .desc-short {
      display: none;
    }

    .desc-long {
      display: inline;
    }
  }

.burger-slider {
  overflow: hidden;
  background-color: white;
  width: 89vw;
  height: 200px;
  position: relative;
}

.burger-slider::after,
.burger-slider::before {

  position: absolute;
  width: 50px;
  height: 100%;
  content: "";
  background: linear-gradient(to right, rgba(246, 242, 239, 1) 0%, rgba(246, 242, 239, 0) 100%);
}

.burger-slider::before {
  left: 0;
  top: 0;
  z-index: 2;
}

.burger-slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider-wrapper {
  height: 100%;
  width: calc(300px*18);
  display: flex;
  animation: slide 35s linear infinite;
}
.slider-wrapper:hover{
animation-play-state: paused;
}

.slide:has(:hover)>.img-container>.burger-info {
  opacity: 1;
}
.navigation_bar {
  margin: 0 auto;align-items: center;justify-content: center; width: 75%;
}
.top_nav_alignment {
  display: flex;width:100%;align-items: center; justify-content: space-between;
}

.img-container {
  width: 80%;
  height: 80%;
  overflow: hidden;
  position: relative;
}

.burger-image {
  object-fit: cover;
  width: 300px;
}

.burger-info {
  opacity: 0;
  position: absolute;
  top: 0;
  background-color: rgba(1, 9, 37, 0.63);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  transition: all 500ms ease;
}

.burger-title {
  font-weight: 500;
  text-align: center;
}

.burger-description {
  font-size: 12px;
  text-align: center;
}

.add-to-cart {
  width: 70%;
  height: 40px;
  border: none;
  background: #f24825;
  color: #f6f2ef;
  font-weight: 700;
  text-transform: uppercase;
  transition: transform 500ms ease;
  cursor: pointer;


}
.add-to-cart:hover {
  transform: scale(1.1)
}
@keyframes slide {
  0% {
      transform: translateX(0)
  }

  100% {
      transform: translateX(calc(-300px*9))
  }
}
.body {
  font-family: "Arial";
  line-height: 1.5;
  max-width: 32rem;
  margin: 3rem 1rem;
  text-align: left;
  padding: 0 1rem;
  background-color: var(--background);
  color: var(--text);
}

/* Form styles */
.form-group {
  margin-bottom: 0.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
  }
}

input,
textarea,
select {
  width: 100%;
  padding: 0.5rem;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
}
textarea {
min-height: 50px; 
}
.hint-text {
  color: var(--text-secondary);
  font-size: 0.75rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.form-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.form-description {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #4A90E2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25);
}

.error {
  color: #dc2626;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: none;
}

.error.visible {
  display: block;
}



button:hover {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

button:active {
  transform: translateY(0);
}

.Right-Cards-container{
  padding-top: 2%;
}
/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1rem;
  background-color: white;
  color: #4A90E2;
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}


/* Success message */
.success-message {
  display: none;
  background-color: var(--success);
  color: white;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  animation: slideIn 0.3s ease;
}

.success-message.visible {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@keyframes slideIn {
  from {
      opacity: 0;
      transform: translateY(-0.5rem);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}
.sr-only {
visibility: visible !important; /* Make it visible */
position: static !important; /* Override absolute positioning */
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}

.send-button {
margin-top: 15px;
height: 20px;
width: 100%;
overflow: hidden;
transition: all .2s ease-in-out;
}
.btn {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  box-shadow: none;
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: 0;
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: none;
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: none;
}
.alt-send-button {
  background-color: #CC5500;
  width: 100%;
  color: white;
  padding: .5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: .8rem;
}

.alt-send-button:hover {
  background-color: #ce9369;
  font-size: .8rem;
}

.send-text {
display: block;
margin-top: 10px;
font: 700 12px 'Lato', sans-serif;
letter-spacing: 2px;
}

.alt-send-button:hover {

}



/* Layout: */

.col-main {
flex: 1;  
}  

.col-complementary {
flex: 1;
text-align: left;  
}

/* Responsive: */

@media only screen and (min-width: 640px) {
.layout {
display: flex;
}
}

/* etc */


.colcontainer {
width: 100%;
margin-right: auto;
margin-left: auto;
}

.col {
padding: 1em;
margin: 0 2px 2px 0;

}
.colcontainer-sub{
font-family: "Arial";
padding-top:10%;
font-size: 15px;
font-weight: 400;
}
.colcontainer-head{
font-family: "Arial";
font-size: 32px;
font-weight: 800;
}
.colcontainer-title{
font-family: "Arial";
font-size: 22px;
font-weight: 800; 
}

#wrapper {
width: 100vw;
height: 100vh;
}
#sizeContainer {
background-color: #e1ecef;
width: 100%;


}
#hexa {
/*transform: scale(2);*/
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.5);
}

#imagesGrid {
filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
animation: slideAnimation 300s linear /*infinite*/;
}

@keyframes slideAnimation {
0% {
transform: translate(0, -50%);
}
100% {
transform: translate(0, 0);
}
}
#imagesGrid image:hover {
cursor: pointer;
filter: grayscale(100%);
}
#imagesGrid image:active {

transform: scale(1.5);
opacity:   0.8;


}

.page-wrapper {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap; /* optional */
}
.left-nav {
  position: relative;
  display: block;
  width: 230px;
}

.left-nav ul {
  width: 260px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.left-nav ul li a {
  display: flex; /* Align items horizontally */
  align-items: center; /* Vertically align text and icon */
  justify-content: space-between; /* Push the icon to the far right */
  background: #ebebeb;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  transition: 0.2s linear;
  line-height: 1.5;
}

.left-nav ul li a:hover {
  background: #f8f8f8;
  color: #515151;
}

.left-nav ul li a .fa {
  display: inline-block; /* Ensure proper alignment */
  font-size: 16px;
  color: #fff;
  vertical-align: middle; /* Keep the icon vertically aligned */
}

.left-nav ul li ul {
  display: none; /* Hide submenus by default */
  list-style: none;
  padding: 0;
  margin: 0;
  background: #ebebeb;
}

.left-nav ul li ul li a {
  padding: 8px 12px;
  background: #f9f9f9;
  color: #333;
  border-left: 4px solid transparent;
}

.left-nav ul li ul li a:hover {
  background: #ebebeb;
  color: rgb(139, 15, 15);
  font-weight: 600;
  border-left: 4px solid #3498db;
}
.offers-menu div{
  width: 100%; 
  padding: 10px;
  padding-right: 50%;
}
.offers-menu {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: .875rem;
  line-height: 1.25rem;
  padding-right: 5rem;
}
.btn {

border-radius: 3px;

color: #9e2315;


font-family: sans-serif;
font-weight: 800;
font-size: .85em;
text-transform: uppercase;
text-align: center;
text-decoration: none;

position: relative;
}

.contact-info {
  display: inline-block;
  width: 100%;
  text-align: center;
      margin-bottom: 10px;
}
.contact-info-icon {
margin-bottom: 15px;
}
.contact-info-item {
  background: #0A266C;;
  padding: 30px 0px;
}
.contact-page-sec .contact-page-form h2 {
  color: #0A266C;;
  text-transform: capitalize;
  font-size: 22px;
  font-weight: 700;
}
.contact-page-form .col-md-6.col-sm-6.col-xs-12 {
  padding-left: 0;
}  
.contact-page-form.contact-form input {
  margin-bottom: 5px;
}  
.contact-page-form.contact-form textarea {
  height: 110px;
}
.contact-page-form.contact-form input[type="submit"] {
  background: #071c34;
  width: 150px;
  border-color: #071c34;
}
.contact-info-icon i {
  font-size: 48px;
  color: #fff;
}
.contact-info-text p{margin-bottom:0px;}
.contact-info-text h2 {
  color: #fff;
  font-size: 22px;
  text-transform: capitalize;
  font-weight: 600;
  margin-bottom: 10px;
}
.contact-info-text span {
  color: #fff;
  font-weight: 300;
  font-size: 1rem;
  display: inline-block;
  width: 100%;
}
.aboutus_section .aboutus-text{
  line-height: 22px;
  font-weight: 300;
  color: #070470;
  font-size: 1rem;
}
.section-bg{
    padding-bottom: 3%;
}
.contactus{
    display: flex;
  justify-content: center; /* Align horizontally */
  align-items: center; /* Align vertically */
    width: 100%;
    height: 200px;
    background-color: #fff;
}
.contactus .current-route{
    font-weight:700;
  color: #fff;
  font-size: 2rem;
text-align: center;
padding: 1% 1%;
}


.sec-title-style1 {
    position: relative;
    display: block;
    margin-top: -9px;
    padding-bottom: 0px;
}
.sec-title-style1.max-width{
    position: relative;
    display: block;
    max-width: 770px;
    margin: -9px auto 0;   
}
.sec-title-style1.pabottom50 {
    padding-bottom: 42px;
}
.sec-title-style1 .title {
    position: relative;
    display: block;
    color: #131313;
    font-size: 36px;
    line-height: 46px;
    font-weight: 700;
    text-transform: uppercase;
}
.sec-title-style1 .title.clr-white{
    color: #ffffff;
}
.sec-title-style1 .decor {
    position: relative;
    display: block;
    width: 70px;
    height: 5px;
    margin: 19px 0 0;
}
.sec-title-style1 .decor:before{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 5px;
    height: 5px;
    background: #FFA500;
    border-radius: 50%;
    content: "";
}
.sec-title-style1 .decor:after{
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 5px;
    height: 5px;
    background: #FFA500;
    border-radius: 50%;
    content: "";
}
.sec-title-style1 .decor span {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 1px;
    background: #FFA500;
    margin: 2px 0;
}


.sec-title-style1 .text{
    position: relative;
    display: block;
    margin: 7px 0 0;
}
.sec-title-style1 .text p{
    position: relative;
    display: inline-block;
    padding: 0 15px;
    color: #131313;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}
.sec-title-style1 .text.clr-yellow p{
    color: #FFA500;
}
.sec-title-style1 .text .decor-left{
    position: relative;
    top: -2px;
    display: inline-block;
    width: 70px;
    height: 5px;
    background: transparent;
}
.sec-title-style1 .text .decor-left span {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 1px;
    background: #FFA500;
    content: "";
    margin: 2px 0;
}
.sec-title-style1 .text .decor-left:before{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 5px;
    height: 5px;
    background: #FFA500;
    border-radius: 50%;
    content: "";
}
.sec-title-style1 .text .decor-left:after{
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 5px;
    height: 5px;
    background: #FFA500;
    border-radius: 50%;
    content: "";
}

.sec-title-style1 .text .decor-right{
    position: relative;
    top: -2px;
    display: inline-block;
    width: 70px;
    height: 5px;
    background: transparent;
}
.sec-title-style1 .text .decor-right span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 1px;
    background: #FFA500;
    content: "";
    margin: 2px 0;
}
.sec-title-style1 .text .decor-right:before{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 5px;
    height: 5px;
    background: #FFA500;
    border-radius: 50%;
    content: "";
}
.sec-title-style1 .text .decor-right:after{
    position: absolute;
    top: 0;
    left: 10px;
    bottom: 0;
    width: 5px;
    height: 5px;
    background: #FFA500;
    border-radius: 50%;
    content: "";
}




.green {
background-color: #0d0e0d;
}
.content-container {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 2px;
  padding-left: 10px;
  max-width: 1000px;
  margin-top: 20px;
  margin-left: 260px; /* Matches the width of .left-nav plus spacing */
display: block;
}

.gallary-container {
  width: 100%;
  display: grid;
  grid-auto-flow: dense;
  grid-template:
    "1fr 1fr 1fr 1fr 1fr" 33.33vh
    "1fr 1fr 1fr 1fr 1fr" 33.33vh
    "1fr 1fr 1fr 1fr 1fr" 33.33vh;
}

.gallary-container .box {
  position: relative;
  background: #ccc;
}
.gallary-container .box.a {
  grid-row: span 2;
}
.gallary-container .box.b,
.gallary-container .box.f,
.gallary-container .box.h,
.gallary-container .box.j {
  grid-column: span 2;
}
.gallary-container .box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 991px) {
  .gallary-container {
    grid-template:
      "1fr 1fr 1fr" 250px
      "1fr 1fr 1fr" 250px
      "1fr 1fr 1fr" 250px
      "1fr 1fr 1fr" 250px
      "1fr 1fr 1fr" 250px;
  }
}
@media (max-width: 768px) {
  .gallary-container {
    grid-template:
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px
      "1fr 1fr" 200px;
  }
}
.gallary-container .box.h {
  grid-column: span 1;
}

.aboutus-title{

  font-family: sans-serif;

text-transform: uppercase;
text-align: center;
text-decoration: none;
padding: 30px;
color: black;
}

.about-subheader{
  font-weight: 500;
font-size: 1.1em;
padding-bottom: 32px;
}
.no-underline {
text-decoration: none;
}
.p_name{
color: rgb(68, 67, 73);
font-weight: 500;
padding-top: 10px;
}


.p_description{
color: rgb(39, 39, 39);
}
#photos {
  /* Prevent vertical gaps */
  line-height: 0;
   
  -webkit-column-count: 4;
  -webkit-column-gap:   0px;
  -moz-column-count:    4;
  -moz-column-gap:      0px;
  column-count:         4;
  column-gap:           0px;  
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}
#photos img:hover{
  opacity: .7;
}


.about-service-section{
	position:relative;
	padding:8px 0px;
}

/* General card styles */
.welcomepg .card {
    background: #f8f9fa;
    border: 1px solid #fff;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 5%;
}

.welcomepg .card:hover {
   
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.welcomepg .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 10px;
}
.welcomepg  .card-body .card-title{
    margin-top: 20px;
}
.welcomepg .card-body .card-text{
color: rgba(102, 102, 102, 1);
font-family: 'Poppins-Regular', Arial, sans-serif !important;
line-height: 1.5;
font-size: 14px;
}
.container .content-column .inner-column{
	position:relative;
	padding-right:10px;
}

.container .content-column .text{
	position:relative;
	color:#777777;
	font-size:15px;
	line-height:2em;
	margin-bottom:10px;
}


.container .image-column{
	position:relative;
}


.container .image-column .inner-column:after{
	position:absolute;
	content:'';
	right:0px;
	top:0px;
	bottom:100px;
	z-index:-1;
	
}

.container .image-column .inner-column .image{
	position:relative;
}

.container .image-column .inner-column .image:before{
	position:absolute;
	content:'';
	left:-50px;
	bottom:-50px;
	width:299px;
	height:299px;
	background:url(img/pattern-2.png) no-repeat;
}

.container .image-column .inner-column .image img{
	position:relative;
	width:100%;
	display:block;
}

.container .image-column .inner-column .image .overlay-box{
	position:absolute;
	left:40px;
	bottom:48px;
}

.container .image-column .inner-column .image .overlay-box .year-box{
	position:relative;
	color:#fff;
	font-size:24px;
	font-weight:700;
	line-height:1.4em;
	padding-left:125px;
}

.container .image-column .inner-column .image .overlay-box .year-box .number{
	position:absolute;
	left:0px;
	top:0px;
	width:110px;
	height:110px;
	color:#282E58;
	font-size:68px;
	font-weight:700;
	line-height:35px;
	text-align:center;
	background-color:#ffffff;
	border:1px solid #000000;
  z-index: 10;
}
.container .image-column .inner-column .image .overlay-box .year-box .over{
	position:absolute;
	left:0px;
	top:0px;
	width:20px;
	height:10px;
	color:#282E58;
	font-size:14px;
	font-weight:700;
	line-height:25px;
	text-align:right;
  padding-left: 10px;
	background-color:#ffffff;
  z-index: 10;
}
.container .btn-style-three:before {
    position: absolute;
    content: '';
    left: 10px;
    top: 10px;
    z-index: -1;
    right: -10px;
    bottom: -10px;
    background: url(https://i.ibb.co/DKn55Qz/pattern-1.jpg) repeat;
}
.container .btn-style-three {
  
  position: relative;
  line-height: 24px;
  color: #252525;
  font-size: 15px;
  font-weight: 700;
  background: none;
  display: inline-block;
  padding: 11px 40px;
  background-color: #ffffff;
  text-transform: capitalize;
  border: 2px solid #282E58;
  font-family: 'Arimo', sans-serif;

}

.container .btn-style-three:hover {
    color: #ffffff;
    background: #282E58;
}
.about-service-section .btn-style-three:hover {
  color: #ffffff;
  background: #282E58;
}
.container-fluid .card-info .btn-style-three:before {
  position: absolute;
  content: '';
  left: 10px;
  top: 10px;
  z-index: -1;
  right: -10px;
  bottom: -10px;
  background: url(https://i.ibb.co/DKn55Qz/pattern-1.jpg) repeat;
}
.container-fluid .card-info .btn-style-three {

position: relative;
line-height: 24px;
color: #252525;
font-size: 13px;
font-weight: 500;
background: none;
display: inline-block;
padding: 6px 30px;
margin: 0 auto;
background-color: #ffffff;
text-transform: capitalize;
border: 1px solid #282E58;
font-family: 'Arimo', sans-serif;

}

.container-fluid .card-info .btn-style-three:hover {
  color: #ffffff;
  background: #282E58;
}
.container-fluid .card-info .btn-style-three:hover {
color: #ffffff;
background: #282E58;
}


.home .btn-style-three:before {
  position: absolute;
  content: '';
  left: 10px;
  top: 10px;
  z-index: -1;
  right: -10px;
  bottom: -10px;
  background: url(https://i.ibb.co/DKn55Qz/pattern-1.jpg) repeat;
}
.home .btn-style-three {

position: relative;
line-height: 24px;
color: #252525;
font-size: 13px;
font-weight: 500;
background: none;
display: inline-block;
padding: 6px 30px;
margin: 0 auto;
background-color: #03053c;
text-transform: capitalize;
border: 1px solid #fff;
color: #fff;
font-family: 'Arimo', sans-serif;

}

.home .btn-style-three:hover {
  color: #ffffff;
  background: #282E58;
  text-decoration: none;
}
.home .btn-style-three:hover {
color: #ffffff;
background: #282E58;
}


.contactus .btn-style-three {
  width:96%;
  position: relative;
  line-height: 24px;
  color: #252525;
  font-size: 15px;
  font-weight: 700;
  background: none;
  display: inline-block;
  padding: 11px 40px;
  background-color: #ffffff;
  text-transform: capitalize;
  border: 2px solid #282E58;
  font-family: 'Arimo', sans-serif;

}
.contactus .btn-style-three:hover {
    color: #ffffff;
    background: #282E58;
}
.about-service-section .btn-style-three:before {
  position: absolute;
  content: '';
  left: 10px;
  top: 10px;
  z-index: -1;
  right: -10px;
  bottom: -10px;
  background: url(https://i.ibb.co/DKn55Qz/pattern-1.jpg) repeat;
}
.about-service-section .btn-style-three {
  position: relative;
  line-height: 24px;
  color: #252525;
  font-size: 15px;
  font-weight: 700;
  background: none;
  display: inline-block;
  padding: 11px 40px;
  background-color: #ffffff;
  text-transform: capitalize;
  border: 2px solid #282E58;
  font-family: 'Arimo', sans-serif;
}
.value-2-1  .btn-style-three {
  position: relative;
  line-height: 24px;
  color: #252525;
  font-size: 15px;
  font-weight: 700;
  background: none;
  display: inline-block;
  padding: 11px 30px;
  background-color: #ffffff;
  text-transform: capitalize;
  border: 2px solid #282E58;
  font-family: 'Arimo', sans-serif;
}

.value-2-1  .btn-style-three:hover {
  color: #ffffff;
  background: #282E58;
}
.sec-title2{
	color:#fff;
}

.sec-title .title {
    position: relative;
    color: #282E58;
    font-size: 18px;
    font-weight: 700;
    padding-right: 50px;
    margin-bottom: 15px;
    display: inline-block;
    text-transform: capitalize;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}
.table-resp {
border-collapse: collapse;
margin-left: 1em;
width: 100%;
}
.table-resp th, .table-resp td {
  border: 1px solid black !important; /* Ensure this is not overridden */
  padding: 8px;
  text-align: center;
}
.table-resp td:first-child {
  text-align: left; /* Optional: Align first column to the left */
}

@media (min-width: 768px) {
.table-resp {
margin-top: 3em;
position: relative; 

}
thead {
  text-align: left;
  background-color: #333;
  color: white;
}
}

@media (max-width: 767px) /* xs */ {
thead {
display: none;
}
.table-resp {
display: block;
margin-top: 1em;
}
td {
display: block;
}
td:first-child {
font-weight: 700;
margin-top: .75em;
margin-bottom: 0;
}
td:nth-child(2) {
margin-top: 0;
}
}

/* Uninteresting stuff below here */
.main-body{
background: rgba(55, 61, 59, 0.2);
/* background-color: #0fb8ad;s */

}

#closeButton{
position: absolute;
/* background-color:red;  */
width: 30px;
 height: 30px;
 padding:5px;
 border:0;
cursor: pointer;
right:0%;
top:5%;
}

.slider{
position: relative;
top: 0;
left: 0;

/* display: none; */
width: 360px;
height: 330px;
/*  text-align: center; */
z-index:0;
}
.slider>img{
width:100%;
border:12px solid white;
}

.circles{
width:10px;
height:10px;
background-color:white;
border-radius:50%;
display:inline-block;
margin:0 5px 0 5px;
cursor: pointer;
background-color:grey;
}
.circles-container{
position:relative;
left:19%;
bottom:15%;
overflow:none;
display:inline-block;

}

.highlight{
background-color:white;
}

@media only screen and  (max-height:570px){
.circles-container{
    bottom:25%;
}
}

@media only screen and (max-width: 1000px ){
.circles-container{
    left:30%;
}
}




@media (max-width: 768px) {
  .item {
    flex: 1 1 calc(50% - 16px); /* 2 items per row on tablets */
  }
}

@media (max-width: 480px) {
  .item {
    flex: 1 1 100%; /* 1 item per row on smaller screens */
  }
}

.container-gallary {
position:absolute;
top: 0; 
left: 0;
height:200px;
width:100%;
place-items:center;
display:grid;
background-color:#ffffff00;
z-index: 100;
}



.container-pic {
display: flex;
justify-content: center;
align-items: center;
margin: 10vmin;
overflow: hidden;
transform: skew(5deg);
}
.card__head {
  color: white;
  background: rgba(3, 8, 80, 0.75);
  padding: 0.5em;
  transform: rotate(-90deg);
  transform-origin: 0% 0%;
  transition: all 0.5s ease-in-out;
  min-width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1em;
  white-space: nowrap;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s ease-in-out;
  /*filter: grayscale(100%);*/
}



.fixed-top {
  top: -40px;
  transform: translateY(40px);
  transition: transform .3s;
}

.loose {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: 20px auto;
width: 350px;
height: 250px;
background: rgb(247, 243, 243);
color: #000;
border-radius: 0px;
transition: 1s box-shadow;
}

.loose:hover {
box-shadow: 0 5px 35px 0px rgba(8, 8, 8, 0.1);
background:#fff;
cursor: pointer;
}

.loose:hover::before, .loose:hover::after {
display: block;
content: '';
position: absolute;

background: #FDA8CF;
border-radius: 0px;
z-index: -1;
animation: 1s clockwise infinite;
}

.loose:hover:after {
background: #F3CE5E;
animation: 2s counterclockwise infinite;
}

@keyframes clockwise {
0% {
top: -5px;
left: 0;
}
12% {
top: -2px;
left: 2px;
}
25% {
top: 0;
left: 5px;    
}
37% {
top: 2px;
left: 2px;
}
50% {
top: 5px;
left: 0;    
}
62% {
top: 2px;
left: -2px;
}
75% {
top: 0;
left: -5px;
}
87% {
top: -2px;
left: -2px;
}
100% {
top: -5px;
left: 0;    
}
}

@keyframes counterclockwise {
0% {
top: -5px;
right: 0;
}
12% {
top: -2px;
right: 2px;
}
25% {
top: 0;
right: 5px;    
}
37% {
top: 2px;
right: 2px;
}
50% {
top: 5px;
right: 0;    
}
62% {
top: 2px;
right: -2px;
}
75% {
top: 0;
right: -5px;
}
87% {
top: -2px;
right: -2px;
}
100% {
top: -5px;
right: 0;    
}
}

.inline-container {
display: inline-flex; /* Align children (SVG and text) inline */
align-items: center; /* Vertically align items */
gap: 0; /* Add space between the SVG and text */
justify-content: flex-end;
color: #fff;
background-color: #282E58;
height: 100px;
}

.icon {
width: 24px;
height: 24px; /* Set the size of the SVG */
vertical-align: middle; /* Ensure vertical alignment */
}

.text {
font-size: 13px; /* Adjust font size as needed */
padding-right: 12px;
}




.oldschool {
--_bdc--checked: GrayText;
--_bdw: .0625em;
--_bg--checked: #fff;
--_bg--checked-hover: linear-gradient(180deg, #bfdaf8, #e4eefa);
--_bg: linear-gradient(180deg, #FFF, #EEE);
--_bga--checked: #111;

}

#content_img {
padding: 5px;
padding: 0.5rem;
display: flex;
}

#left,
#right {

border: 1px solid #fff;
padding: 0.5rem;

width: 100%;
height: 100%;
}
.showcase p {
    margin: 20px 0;
}
.x-img{
height: 16px;
width: 16px;
padding-bottom: 0px;
}
.instagram {
  --icon-color: #fff;
}
.log-details {
margin-left: auto;
}
.contact-details{
margin-left: auto;
align-items: center; /* Center the form vertically */
}
  
nav ul{
  list-style-type: none;
 
justify-content: flex-end;
}
nav ul li{
  display:inline-block;
  line-height: 40px;
  padding-top: 0px;
  margin: 0 15px;
}
.dropdown li {
  line-height: 20px;
}
nav ul li a{
  color:white;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
}
.checkbtn{
  font: size 30px;
  font-weight: 900;
  color:white;
 cursor: pointer;
display:none;
  position: fixed;
  right: 10px; 
  top: 50%; 
  transform: translateY(-50%); 
 
}
#check{
  display:none;

}

@media (max-width: 952px) {
  nav ul li a{
  font-size: 15px;

}
}

@media (max-width: 858px) {
/* Menu button styling */
.checkbtn {
display: inline-block;
justify-content: flex-end;
z-index: 2000;
cursor: pointer;
}

/* Initial state of the menu */
nav ul {
position: fixed;
width: 100%;
background: #2c3e50;
top: 50px;
left: -100%;
justify-content: flex-start;
text-align: center;
transition: left 0.3s ease;
z-index: 1000;
}

nav ul li {
display: block;
}
.top-screen{
display:none;
}
.aboutus_img{
display:none;
}
.value-2-2{
display:none;
}
nav ul li a {
font-size: 12px;
}

/* Menu toggles into view when checkbox is checked */
#check:checked ~ .flex ul {
  left: 0;
}


.content-header{
display: flex;
justify-content: center;
align-items: center;

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

}
.whyus_content{
margin-left: 28px;
}
.whyus_image{
display:none;
}

}
.produts-container {
  margin: 0 auto;
  width: 100%;
  position: relative; /* Use relative positioning for better layout control */
}

.imageOne {
  background-color: rgb(247, 247, 247);
  background-image: url('/img/ewss.jpg');
  background-repeat: no-repeat;
  background-size: cover; /* Ensures the image covers the entire area without distortion */
  background-position: center;
  color: rgb(255, 255, 255);
  height: 200px;
  image-rendering: crisp-edges; /* Prevents smoothing or pixelation */
  image-rendering: -webkit-optimize-contrast; /* Enhances contrast for clarity */
}
.banner-content {
bottom: 22%;
left: 1%;
width: 33%;
height: 45%;
text-align: left;
top: 50%;
}
.banner-content {
bottom: 22%;
position: absolute;
right: 0;
padding-top: 8px;
padding-left: 8px;
width: 20%;
text-align: left;
background-color:#33333fc9;
}

.banner-head {
  padding-top: 5%;
font: 700 32px/6px 'Lato', sans-serif;
color: #fff;
}

.banner-head span {
display: block;
font: 300 14px/18px 'Lato', sans-serif;
color: #fff;
margin-top: 5px;
letter-spacing: 1px;
}


.rslides li {
position: absolute;
left: 0;
top: 0;
width: 100%;
opacity: 0; /* Start hidden */
z-index: 1;
transition: opacity 0.8s ease-in-out; /* Smooth fade transition */
}

.rslides li:first-child {
position: relative;
opacity: 1; /* Ensure the first slide is visible */
z-index: 2;
}
/* Main content area */
.main-content {
  display: flex;
  flex-direction: column; /* Stack content vertically */
  flex: 1; /* Take up remaining horizontal space */
  padding: 10px;
  overflow-y: auto; /* Allow scrolling if needed */
}

/* All-products grid */
.all-products {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Space between items */
  flex: 1; /* Allow grid to grow */
  padding: 10px;
  background-color: #f4f4f4;
  width: 100%;
}

@media (min-width: 768px) {
  .all-products .item {
  flex: 1 1 calc(35% - 20px);
  max-width: calc(34% - 20px);
  height:auto;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
}
}
@media (min-width: 1400px) {
  .all-products .item {
  flex: 1 1 calc(25% - 10px);
  max-width: calc(25% - 10px);
  height:auto;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
}
}
@media (max-width: 768px) {
  .item {
    flex: 1 1 calc(50% - 20px); /* 2 items per row on tablets */
    background: rgb(168, 146, 22);
  }
}

@media (max-width: 480px) {
  .item {
    flex: 1 1 100%; /* 1 item per row on smaller screens */
  }
}
/* Pagination controls container */

#pagination-controls {
  display: flex; /* Use flexbox for proper layout */
  justify-content: center; /* Center align the buttons and page indicator */
  align-items: center; /* Vertically align the content */
  margin-top: 20px; /* Space above */
  width: 100%; /* Full width to align properly */
  position: relative; /* Ensure it stays in its container */
  z-index: 1; /* Keeps it above other elements if necessary */
}

/* Pagination Buttons */
.prenext-btn {
  border: 1px solid #087f5b;
  height: 48px;
  width: 48px;
  border-radius: 50%; /* Circular buttons */
  background-color: #fff; /* White background */
  color: #087f5b; /* Green text color */
  display: flex; /* Center the text inside */
  justify-content: center;
  align-items: center;
  font-size: 14px; /* Button text size */
  font-weight: bold;
  cursor: pointer;
  position: static; /* Ensure they follow the flow of the parent */
  margin: 0 10px; /* Space between buttons and page indicator */
  transition: all 0.2s ease-in-out; /* Smooth hover effect */
}

.prenext-btn:hover {
  background-color: #087f5b; /* Green background on hover */
  color: #fff; /* White text on hover */
}

/* Page Indicator */
#page-indicator {
  color: #087f5b;
  font-size: 16px;
  font-weight: bold;
}



.sticky-icon  {
	z-index:1002;
	position:fixed;
	top:35%;
	right:0%;
	width:220px;
	display:flex;
	flex-direction:column;}  
.sticky-icon a  {
	transform:translate(160px,0px);
	border-radius:0px 0px 0px 0px;
	text-align:left;
	margin:0px;
	text-decoration:none;
	text-transform:uppercase;
	padding:8px;
	font-size:15px;
	font-family:'Oswald', sans-serif;
	transition:all 0.8s;}
.sticky-icon a:hover  {
	color:#FFF;
	transform:translate(0px,0px);}	
.sticky-icon a:hover i  {
	transform:rotate(360deg);}

.Facebook  {
	background-color:#2C80D3;
	color:#FFF;}
	
.Youtube  {
	background-color:#2C80D3;
	color:#FFF;}
	
.Twitter  {
	background-color:#2C80D3;
	color:#FFF;}
  .Twitter .x-twitter {
  padding-left: 18px;}
	.sticky-icon .linkin {
    background-color:#2C80D3;
    color:#FFF;

  }
  .span-linkin{padding-left: 18px;}
  .sticky-icon .linkin svg {
    background-color:#fff;
    stroke: #2C80D3;
    border-radius:50%;
    height:30px;
    width:30px;
    padding-left: 8px;
    padding-top: 8px;
  transition:all 0.5s;}
  .Twitter svg {
    background-color:#fff;
    stroke: #2C80D3;
    border-radius:50%;
    height:30px;
    width:30px;
    padding-left: 8px;
    padding-top: 8px;
  transition:all 0.5s;}
.Instagram  {
	background-color:#2C80D3;
	color:#FFF;}
	
.Google  {
	background-color:#2C80D3;
	color:#FFF;}						
.sticky-icon a i {
	background-color:#FFF;
	height:30px;
	width:30px;
	color:#000;
	text-align:center;
	line-height:30px;
	border-radius:50%;
	margin-right:20px;
	transition:all 0.5s;}
.sticky-icon a i.fa-facebook-f  {
	background-color:#FFF;
	color:#2C80D3;}
	
.sticky-icon a i.fa-google-plus-g  {
	background-color:#FFF;
	color:#d34836;}
	
.sticky-icon a i.fa-instagram  {
	background-color:#FFF;
	color:#FD1D1D;}
	
.sticky-icon a i.fa-youtube  {
	background-color:#FFF;
	color:#fa0910;}
	
.sticky-icon a i.fa-twitter  {
	background-color:#FFF;
	color:#53c5ff;}
.fas fa-shopping-cart  {
	background-color:#FFF;}	
#myBtn {
	height:50px;
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  text-align:center;
  padding:10px;
  text-align:center;
	line-height:40px;
  border: none;
  outline: none;
  background-color: #1e88e5;
  color: white;
  cursor: pointer;
  border-radius: 50%;
}
.fa-arrow-circle-up  {
	font-size:30px;}

#myBtn:hover {
  background-color: #555;
}			
.my-menu{
  padding-left: 5%;

}
.my-menu ul li a {
  position: relative;
  text-decoration: none;
  color: #222;

}
.inline-contain {
  display: flex; /* Places all child elements in a row */
  align-items: center; /* Vertically centers the items */
  justify-content: flex-start; /* Aligns the items to the right */
  padding-left: 2%;
  width: 100%; /* Ensures it takes the full width of the container */

}
.fa-envelope-open-text{
  margin-right: 10px;
}
.inline-contain .location-details,
.inline-contain .phone-details, 
.inline-contain .email-details,
.inline-contain .time-details {
  display: flex; /* Ensures the icon and text are aligned horizontally */
  align-items: center; /* Vertically centers the items within each section */
  margin-right: 20px; /* Adds spacing between the sections */
}

.inline-contain .icon {
  margin-right: 8px; /* Adds some space between the icon and text */
}


  .aboutsub{
  font-size: 22px;
  line-height: 22px;
  color: #222;
  font-weight: 600;
  margin: 0 auto;
  text-align: justify;
  font-family: "Arial";
  }
 



.product-img {
  display: block;
  width: 100%;
  min-height: 12rem;
  transition: var(--mainTransition);
}
.hr_audit-service-1 {
  position: relative;
  background: rgba(193, 196, 193, 0.007);
  top: 200px;
  height:320px;
  width: 430px;
  z-index: 100;
  left: 150px;
}


.audit_not-gold-icon {
  background: rgb(175, 162, 48);
   margin: auto;
   padding-top: 10px;
   margin-top: 10%;
   height: 75px;
   width: 75px;
  
 }
 .audit_not-gold-icon_comp {
  background: rgb(175, 162, 48);
   margin: auto;
   height: 53px;
   width: 53px;
  
 }
.training-card {
  border: 2px solid rgb(66, 66, 5);
  background-color: #fff;
  color: #333;
  padding: 20px;
  margin: 10px;
}
.slider-frame {
  overflow: hidden;
  height: 390px;
      width: 400px;
      margin-left: 120px;
      margin-top: 2px;
}

@-webkit-keyframes animations {
  0% { background-image: url(../img/ewss.jpg);}
  25% {background-image: url(../img/ew.jpg);}
  50% {background-image: url(../img/ews2.png);}
  75% {background-image: url(../img/ews.png);}
  100% {background-image: url(../img/ews1.png);}
  
}
.background-img {
  background-image: url('/img/graphic4.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
}
.index-service-1 {
  position: relative;
  background: rgba(193, 196, 193, 0.007);
  top: 170px;
  height:320px;
  width: 430px;
  z-index: 100;
  left: 150px;
}
.slide-img {
  height: 400px;
  width: 100%;
  opacity: 100;
  margin-top: 0px;
  margin-left: -20px;
  position: relative;
  z-index: 1;
  background-image: url(../img/ewss.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: 5s;
  -webkit-animation-name: animations;
  -webkit-animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-direction: alternate-reverse;
  -webkit-animation-timing-function: ease-in-out;
}  


.slide-images {
  height: 400px;
  width: 120px;
  margin: 0 0 0 -50px;
  position: relative;
   
  -webkit-animation-name: slide_animation;
  -webkit-animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: alternate;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-direction: alternate-reverse;
  -webkit-animation-timing-function: ease-in-out;
}
.image-container {
  height: 400px;
  width: 400px;
  margin-left: 30px;
  position: relative;
  float: left;
}

.slider {
  height: 250px;
  margin: auto;
  position: relative;
  width: 90%;
  display: grid;
  place-items: center;
}
.create-acc {
  margin-top: 2%;
  margin-bottom: 5%;
  margin-left: 45%;
}
.header-service {
  color: rgb(16, 51, 146);
  font-size: 1.875rem;
}
.header-space-all {
  font-family: "Arial";
 font-weight: 900;
  font-size: 40px;
  margin-top: 20px;
  margin-bottom: 0px;
  line-height: 1.1;
  color: #fff;
}
.create-box {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.header-about {
  color: rgb(39, 39, 39);
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 16px;
  line-height: 1.1;
}
.social-details{
  padding-right: 5%;
  margin-left: auto;
 
}

.search-input{
  display: flex;
  justify-content: flex-end;
}

.showcase-text {
  color: rgb(248, 242, 242);

}

.header-subtitle {
  color: rgb(12, 12, 12);
  font-size: 16px;
  margin-bottom: 28px;
 
}
.content-subheader {
color: #282E58;
  font-family: "Arial";
  font-size: 18px;
  font-weight: 600;
  line-height: 19px;
}
.container-about{
  width: 100%;
  margin: 0 auto;
}
.image-column .image-column {
  width: 50%;
}
.image-column .content-column {
  width: 46%;
}
.value-2-1 .content-subheader {
  color: #282E58;
    font-family: "Arial";
    font-size: 21px;
    font-weight: 600;
    line-height: 19px;
    padding-bottom: 20px;
  }
.bgd-black .content-subheader {
  color: #fff;
    font-family: "Arial";
    font-size: 21px;
    font-weight: 600;
  }
.devider{

  padding-bottom: 4%;
  border-bottom: 4px solid #fff;
  width: 46%;
}

.l-head {
  font-family: "Arial";
    font-size: 65px;
    white-space: nowrap;
    font-weight: 700;
    line-height: 1.1em;
    text-transform: capitalize;
    color: #fff;
    margin-bottom: 0;
    margin-top: 20px;
}
.imgs {
  float: left;
  width:  130px;
  height: 80px;
  background-size: cover;
}
.imgs-whyus {
  float: left;
  width:  40px;
  height: 40px;
  background-size: cover;
}

.imgs-news_center {
  float: left;
  width:  150px;
  height: 105px;
  background-size: cover;
}
.RedImage {
  filter:
    brightness(1000%) grayscale(100%) /* To change the image color to the white */
    opacity(0.1) /* To apply the color all over the image */
    drop-shadow(0 0 0 rgb(2, 6, 219)) /* To apply my costum color */
    drop-shadow(0 0 0 rgb(2, 6, 219)) /* To apply my costum color more stronger */
    drop-shadow(0 0 0 rgb(2, 6, 219))
    drop-shadow(0 0 0 rgb(2, 6, 219))
    drop-shadow(0 0 0 rgb(2, 6, 219));
}

.social-details .facebook{margin-bottom: 8px;margin-right: 8px;}
.social-details .linkin{margin-bottom: 8px; gap: 8px;}
.social-details .instagram{padding-right: 8px;}
.social-details .twitter{padding-bottom: 6px;padding-right: 10px;}


svg:hover path { 
stroke: #fa0910;
}

svg:hover { 
stroke: #fa0910;
}

svg:hover path { 
  fill: #fa0910;
}
.svg-hover:hover {
  fill: #fa0910; /* Changes fill to green on hover */
  stroke: #fa0910; /* Changes stroke to green on hover */
  cursor: pointer; /* Makes the cursor a pointer when hovering */
}


  .twitter {
    display: inline-block;
  
    background-color: transparent;
    transition: color 0.3s ease;
  }

  .twitter:hover {
    color: #00ff00; /* Green */
  }

.imgs-news_center :hover img {
  transform: scale(1.1);
  /*object-position: bottom;*/
}
.value-2-2:hover img {
  transform: scale(1.07);
  /*object-position: bottom;*/
}
.imgs:hover{
  transform: scale(1.1);
  /*object-position: bottom;*/
}
.img-left {
  float: left;
  width:  100%;
  height: 360px;
  background-size: cover;
}
.wrapper-section {
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  font-family: sans-serif;
  margin: 0;
  padding: 1em 50px;
  margin-top: 30px;
  min-height: 65vh;
  position: relative;
  background-image: url('img/ews.jpg');
  background-size: cover;
  background-position: center;
}

.wrapper-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(22, 22, 22, 0.582); /* Blue overlay with 40% transparency */
  z-index: 1; /* Ensure the overlay is above the background but below the text */
}

.wrapper-section > * {
  position: relative;
  z-index: 2; /* Ensure the text stays above the overlay */
}

.content-header{
  font-family: "Arial";
  font-size: 30px;
  font-weight: 900;
  
 
}

.cards-section {
  --space: 10px;
  width: 100%;
  margin: .5rem auto;
  display: flex;
  flex-wrap: wrap; /* Allow wrapping of cards */
  gap: var(--space);

  justify-content: flex-start; /* Align cards to the left */
}
.shank_img_card{
  padding: 15px;
}
.pro-desc {
  margin-top: 15px;
  margin-bottom: 15px;
}
#menu ul {
 background: #fff;
 width: 200px;
 padding: 0;
 list-style-type: none;
 text-align: left;
}
.menu-contacts ul {
  background: #fff;
 margin-top: 5%;
  padding: 0;
  list-style-type: none;
  text-align: left;
 }
#menu li {
 width: auto;
 height: 25px;
 line-height: 22px;
 padding: 0 1em;
/* border: 1px solid #333;*/
}
#menu li a {
 text-decoration: none;
 color: #0a0a0a;
 font-weight: 500;
 display: block;
}
#menu li:hover {
  width: auto;
  height: 25px;
  line-height: 25px;
  border-bottom: none;
  padding: 0 1em;
  background-color: #03053c;
 }
 #menu li a:hover {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  display: block;
 }


h1, h5 {
 padding: 0.5rem;
}

.center {
 text-align: center;
}

/*Flexbox Cards*/
.clouts {
 display: flex;
 flex-flow: row wrap;
}

.clouts .card-item {
 display: flex;
 width: 100%;
 padding: 0.5em;
}

/* ===== == = === 37.5em (600px) === = == ===== */
@media all and (min-width: 37.5em) {
 .clouts .card-item {
     width: calc(100% / 12 * 6 );
 }
}
/* ===== == = === 56.25em (900px) === = == ===== */
@media all and (min-width: 56.25em) {
 .clouts .card-item {
     width: calc(100% / 12 * 6 );
 }
}

.clouts .card-body {
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 width: 100%;
 padding: 0;
 background-color: #F8FFF8;
 border-radius: 3px;
 box-shadow: 0 0 5px rgba(0,0,0,0.5);
}



.clouts .card-img {
 width: 100%;
 border-radius: 3px 3px 0 0;
}

.clouts .card-img:hover {
 opacity: 0.8;
}

.clouts .card-title {
 padding: 1em 1em 0;
}


.cards-section .card {
  flex: 0 0 auto; /* Prevent cards from shrinking or growing */
  width: 14rem; /* Default width for larger screens */
  cursor: pointer;
  padding: var(--space);
  border-radius: 0.25rem;
  background-color: var(--sdcolor);
  transition: transform 0.3s ease-in-out;
  box-sizing: border-box; /* Ensure padding and borders don't affect card width */
}

.cards-section .card:hover {
  transform: translateY(-0.5rem);
}

.cards-section .card-img {
  width: 100%;
  height: 15rem;
  overflow: hidden;
  position: relative;
  border-radius: 0.25rem;
}

.cards-section .card-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.cards-section .card-img figcaption {
  background-color: var(--ttcolor);
  color: var(--sdcolor);
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  width: 100%;
  position: absolute;
  bottom: 0;
}
figure .card-img{
  width: 80px;
}

/* Media Query for Medium Screens (Tablets between 480px and 768px) */
@media (max-width: 768px) and (min-width: 480px) {
	.cards-section  .card {
    width: calc(50% - var(--space)); /* 2 cards per row */
  }
}

/* Media Query for Extra Small Screens (Mobile Devices below 480px) */
@media (max-width: 480px) {
	.cards-section .card {
    width: calc(100% - var(--space)); /* 1 card per row */
  }
}
.cards-section .production{
  padding-top: 10px;
  color: rgb(17, 16, 16);
  font-size: 15px;
  font-weight: 800;
}

.content-text {
  color: rgb(17, 16, 16);
  font-family: "Arial";
  font-size: 15px;
  font-weight: 500;
}
/* slides */
.product-img {
  display: block;
  width: 100%;
  min-height: 12rem;
  transition: var(--mainTransition);
}
.logo-image {
  display: flex;
  width: 30%;
  justify-content: center;
  align-items: center; /* Aligns the image vertically */
}
.logo-img {
  width: auto; 
  height: auto;
  max-width: 100%; 
  max-height: 80px; 
  object-fit: contain;

 
  padding-top: -50px;
  
  z-index: 10; /* Ensures it stays on top */
}


.main-content .carousel .carousel-cell img{
  object-fit: contain;
    }

.slider {
  height: 250px;
  margin: auto;
  position: relative;
  width: 90%;
  display: grid;
  place-items: center;
}
.slide-track {
  display: flex;
  width: calc(250px * 18);
  animation: scroll 40s linear infinite;
}
.email-details{
  padding-left: 30px;
}
@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(calc(-250px * 9));
  }
}



/* end slides */
.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100;
  }
  .carousel-item {
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
  }
  #carousel-1:checked ~ .control-1,
  #carousel-2:checked ~ .control-2,
  #carousel-3:checked ~ .control-3 {
    display: block;
  }
  .carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
  }
  #carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
  #carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
  #carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
    color: #2b6cb0;  /*Set to match the Tailwind colour you want the active one to be */
  }
  .today {
    
display: flex;
flex-direction: row;
}
.today:before, .today:after{
content: "";
flex: 1 1;
border-bottom: 2px solid rgb(82, 81, 78);
margin: auto;
}
.today:before {
margin-right: 10px
}
.today:after {
margin-left: 10px
}

#main {
display: grid;
grid-template-columns: 6rem auto;
/* Or grid-template-columns: config('width.24') auto; */
}

@media (min-width: 1200px) { 
/* Or @media (min-width: config('screens.xl')) { */

#main { grid-template-columns: 12rem auto; }
/* Or #main { grid-template-columns: config('width.48') auto; } */
}

a {
text-decoration: none;
/* Or @apply .no-underline; */
}

/* Just a new padding size */
.pt-16 {
padding-top: 4rem;
}

/*
* Just some customized new utilities needed for the submenus
* Add this before
*/
.top-full { top: 100%; }
.left-full { left: 100%; }

/*
* This hacks is just needed in Codepen because the previous rules are prioritary to xl:pin-none.
* In your own config this should not be needed.
*/

@media (min-width: 1200px) {
.xl\:pin-none { left: auto; }

.vission-and-mission {
  padding-bottom: 48px;
}
}

/* 
* Active "group-hover" for the "display" module in your
* tailwind.js config file like this:
* 
* display: ['responsive', 'group-hover']
*
* More info on https://tailwindcss.com/docs/state-variants/#group-hover
*/
.group:hover .group-hover\:block {
display: block;
}
.mission-img {
  justify-content: end;
      height: 220px;
      width: 260px;
      
}
@media (max-width:768px) {
  .first-flex {
    order:2;
  }
  .second-flex {
    order:1;
  }
}
@media (max-width:500px) {/* usually its 468px */
  .logo-img{
    width: 70%; 
    height: 53px;
    max-width: 421px; 
    max-height: 63px; 
    image-rendering: auto; 
  }
  .logo-image{
    display: flex;
    justify-content: center;
  }
  .phone-details{
    padding-left: 100px;
  }
  .email-details{
    padding-left: 50px;
  }
  .log-details{
    display: none;
    visibility: hidden;
  }
  .social-details{
    padding-left: 80px;
  }
  .imgs {
    float: left;
    width:  140px;
    height: 100px;
    background-size: cover;
  }

.naccs .offers-menu div.non-active {

  padding-left: 90px;
}
.value-2-1{
  text-align: center;
}

.content-text{
  text-align: center;
}

  .whyus_image{
    display: none;
    visibility: hidden;
  }


}
@media (min-width:468px) {
 

  .recruitment {
    background-color:#030316f0;
  }

  /* .first-flex {
    order:2;
  }
  .second-flex {
    order:1;
  } */

  .text-in-center {
    text-align: center;
    justify-content: center;
  }
  .employee-home {
    /* border-top-color: solid 0.3em gold; */
    border-top: solid 0.5em rgb(189, 162, 8);
    border-bottom: solid 0.5em rgb(10, 53, 6);
    position: relative;
    top: 130px;
    height: 200px;
    width: 350px;
    padding: 20px 15px;
    margin-left: 10px;
    z-index: 100;
    justify-self: flex-end;
  }
  .indexis {
    font-size: 18px;
  }
  .indexis-1 {
    bottom: -300px;
  }
  .customer_img {
    padding-bottom: 0px;
    
  }
  .customer_words-said {
    background: rgb(95, 3, 11);
    
    height:210px;
    width: 100%;
    padding: 10px;
    position: relative;
  }

}
.showcase-send {
  padding-left: 60%;
}
@media (max-width:468px) {
.employee-home-2-first {
  justify-content: center;
  }
  .logo-top {
    
    justify-content: center;
  }
  .text-in-center {
    text-align: center;
    justify-content: center;
  }
  .employee-home {
    /* border-top-color: solid 0.3em gold; */
    border-top: solid 0.5em rgb(189, 162, 8);
    border-bottom: solid 0.5em rgb(10, 53, 6);
    position: relative;
    top: 130px;
    height: 200px;
    width: 350px;
    padding: 20px 15px;
    margin-left: 10px;
    z-index: 100;
    justify-self: flex-end;
  }
  .customer_words-said {
    background: rgb(168, 146, 22);
    margin-top: -50px;
    height:280px;
    width: 310px;
    padding: 10px;
    margin-left: 70px;
    position: relative;
  }
 
  .employee-home-2 {
  /* color: #fff; */
  padding: 16px;
  text-align: center;
  }
 
  .mission-paragraph {
  padding: 16px;
  text-align: center;
  }
  .mission-head {
  /* text-align: center; */
  padding-top: 16px;
  }
    .employee-home-1 {
      position: relative;
     justify-self: center;
      height: 150px;
      width: 150px;
      z-index: 100;
    }
    .goals-img {
      justify-content: center;
      height: 200px;
      width: 220px;
      z-index: 100;
    }
    .showcase {
     
      background-color: rgb(153, 138, 6);
      color: #fff;
      position: relative;
      padding-bottom: 120px;
    }
    .showcase-send {
      padding-left: 60%;
    }
  }

@media (max-width:968px) {
.container-1{
display: flex;
margin-bottom: 20px;
}
.whoarewe-deco {
  background: repeating-linear-gradient(-45deg, 
  rgb(62, 63, 62), rgb(105, 107, 104) 5px, rgb(247, 247, 250) 5px, rgb(248, 248, 252) 10px);
  position: relative;
  opacity: 30;
  top: 320px;
  left: 180px;
  height: 200px;
  width: 210px;
}
.sliders-home {
  width: 100%; height: 601px; padding-top:6%; overflow: hidden; padding-left:5%;
}
ul.nacc li {
  opacity: 0;
  /* transform: translateX(50px); */
  position: absolute;
  height: auto;
  list-style: none;
  /* transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1); */
}
ul.nacc {
  position: relative;
  list-style: none;
  margin: 0;
  height: auto;
  /* margin-top: -80px; */
  padding: 0;
  /* transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1); */
}

.box-1 {
flex: 2;
}
}


 .container-1 div{
 padding: 6px;
 
}  
.offers-menu{
  width: 300px;
}



.bg {
    background: #721e09;
}


.naccs .offers-menu div.active span.light {
  /* background-color: rgb(158, 9, 9); */
  /* left: 0; */
  /* height: 100%; */
  font-weight: 900;
  width: 3px;
  top: 0;
  border-radius: 0;
}
.service-container{
width: 1000px;
}

.naccs .offers-menu span.light {
  
  padding-left: 10px;
}

.naccs .offers-menu div.active {
  color: #f9f9fc;
  background: #282E58;
  border: 1px rgb(2, 8, 59) solid;
  /*padding-left: 70px;*/
}
.naccs .offers-menu div {
  color: #282E58;
  cursor: pointer;
  width: 80%;
  background-color: #cdcdf5;
  /* position: relative; */
  font-weight: 700;
  /* transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1); */
}

.naccs .offers-menu div.active .head {
  font-size: 22px;
  color: #fff;
  
}
.services-section {
  padding-bottom: 10px;
}
.service-img {
  height: 190px;
  width: 300px;
}
.consulting-container {
  max-width: 1100px;
  margin: 0 auto;
  overflow: visible;
  padding: 0 40px;
}

.employee-training {
  max-width: 1000px;
  margin: 0 auto;
  overflow: visible;
  padding: 0 40px;
  background: rgb(153, 138, 6);
}

.perfomance_management {
  max-width: 1200px;
  height: 600px;
  margin: 0 auto;
  overflow: visible;
  padding: 0 80px;
  background: rgb(153, 138, 6);

}
.payroll_management {
  max-width: 340px;
  height: 360px;
  margin: 20px 70px;
  padding-bottom: 48px;
  background: rgb(153, 138, 6);

}
.pay_pro-main {
  max-width: 1000px;
  height: 700px;
  margin: 35px 250px;
  padding-top: 90px;
  padding-left: 115px;
}
.pay_pro {
  max-width: 270px;
  height: 400px;
  margin: 35px -250px;
  background:rgb(153, 138, 6);
  padding-top: 90px;
  padding-left: 25px;
}
.circle-pay {
  position: relative;
  background: rgb(189, 162, 8);
  top: -200px;
  height:170px;
  width: 170px;
  z-index: 100;
  left: 690px;
}
.payroll_img-deco {
  width: 300px;
}
.payroll_img-decoration {
  border: 4px solid #fff;
  position: relative;
  width: 250px;
  height: 220px;
}
.payroll_title {
  
  margin-left: 150px;
  margin-top: -390px;
  width: 320px;
  height: 300px;
}
.payroll_title-1 {
  
  margin-left: 220px;
  margin-top: -400px;
  width: 390px;
  height: 80px;
}
.payroll_title-2 {
  
  margin-left: 450px;
  margin-top: -300px;
  width: 320px;
  height: 300px;
}
.payroll_img-width {

  background-repeat: no-repeat;
  
  padding-left: 15px;
  width: 350px;
  height: 350px;
  
}
.bgd-black{
  width: 100%;
  margin: 0 auto;
  
  padding-bottom: 10px;
  text-align: left;
 
}
.promotions-container {
  max-width: 1000px;
  overflow: visible;
  background: #fff;
}
.promotions {
  max-width: 380px;
  height: 400px;
  margin-left: 80px;
  overflow: visible;
  padding-top: 20%;
  /* padding: 90px 40px; */
  background: rgb(153, 138, 6);

}
.terminations {
  max-width: 1100px;
  height: 550px;
  background-position: center center;
  padding-left: 5%;
  background: rgb(153, 138, 6);

}
.promotion-title {
  padding: 25% 8px;
}
.employee-training-1 {
  max-width: 800px;
  margin: 0 auto;
  margin-top: -120px;
  overflow: visible;
  padding-left: 140px;
  padding-right: 50px;
  
  background: rgb(153, 138, 6);
}

.hr_audit_analysis {
  max-width: 900px;
  margin: 0 auto;
  margin-top: 120px;
  overflow: visible;
  background: rgb(18, 77, 3);
}
.performance_reviews {
  max-width: 900px;
  margin: 0 auto;
  margin-top: 120px;
  overflow: visible;
  background: rgb(18, 77, 3);
}
.perfomance_overlay {
  position: relative;
  margin-left: -160px;
  background: rgb(189, 162, 8);
  color: #fff;
}
.perfermance_transfer {
  max-width: 850px;
  height: 350;
  margin: 0 auto;
  margin-top: 120px;
  overflow: visible;
  background: rgb(18, 77, 3);
}
.remunation {
  margin-bottom: -40px;
}
.remunation-in {
  margin-bottom: -180px;
}
.gold {
  border: 2px solid rgb(153, 138, 6);
  color: #fff;

  }
  .consulting-header {
    color:  #f1c50e;
  }
.not-gold {
    border: 2px solid rgb(230, 236, 236);
    background: #f5f2f1;
    }
    .gold-icon {
      background: rgb(153, 138, 6);
      margin: auto;
      margin-top: 20%;
      height: 88px;
      width: 88px;
     padding-top: 12px;
    }
    .database {
      color: rgb(206, 206, 17);
    }
    .database-img {
      margin-top: 20%;
    }
    .datab {
      padding-top: 8px;
    }
    .recruitment-pic {
      border: 2px solid rgb(66, 66, 5);
    }
    .border-line {
      border-bottom:  3px solid rgb(199, 199, 10);
      width: 25%;
      margin-top: 4%;
      margin-bottom: 4%;
    }
    .border-perfomance {
      border-bottom:  3px solid rgb(175, 162, 48);
      width: 40%;
      margin-top: 4%;
      margin-bottom: 7%;
    }
.not-gold-icon {
      background: #f0f3f2;
      margin: auto;
      margin-top: 20%;
      height: 88px;
      width: 88px;
     
    }

    .audit_not-gold-icon {
     background: rgb(175, 162, 48);
      margin: auto;
      padding-top: 10px;
      margin-top: 10%;
      height: 65px;
      width: 65px;
     
    }
    .audit_analysis {
      background: rgb(229, 233, 232);

       margin: auto;
       padding-top: 8px;
       height: 45px;
       width: 45px;
      color: rgb(7, 104, 4);
     }
     .roll {
      background: rgb(10, 110, 7);
      border:  2px solid rgb(153, 138, 6);;
       margin: auto;
       padding-top: 8px;
       height: 45px;
       width: 45px;
      color: rgb(242, 247, 242);
     }
    .audit_not-gold-icon_comp {
      background: rgb(175, 162, 48);
       margin: auto;
       height: 53px;
       width: 53px;
      
     }
    .audit_not-gold {
      background: rgb(175, 162, 48);
       margin: auto;
       padding-top: 12px;
       margin-top: 10%;
       height: 65px;
       width: 65px;
      
     }
 
.consulting-container-1 {
 
  max-width: 1200px;
  margin: 0 auto;
  overflow: visible;
  padding: 0 40px;
}
.consulting-container-bg {
  background-color: rgb(115, 118, 128);
}
.consultant-card {
  background-color: #fff;
  color: #333;
  border-radius: 0px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  margin: 10px;
}

.consulting-card {
  position: relative;
  top: 40px;
  height: 250px;
  z-index: 100;
}

ul.nacc {
  position: relative;
  list-style: none;
  margin: 0;
  height: 270px;
  margin-top:0;
  padding: 0;
}
ul.nacc li {
  opacity: 0;
  position: absolute;
  height: 220px;
  list-style: none;
}

ul.nacc li.active {
  transition-delay: 0.3s;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}

ul.nacc li p {
  margin-bottom: 0px;
}

.rounded-img {
  justify-content: center;
  height: 200px;
  width: 220px;
  z-index: 100;
}
@media (max-width: 468px) {
  .how-can-we-help {
    margin-top: -410px;
    position: relative;
  }

.employees {
  margin-top: 100px;
}

.border-services {
  border-bottom: 3px solid rgb(115, 122, 16);
  width: 70px;
  margin-bottom: 18px;
  margin-left: 130px;
}
.service-container{
  width: 400px;
  margin-left: 15px;
  }
.offers-content {
  margin-left: 60px;
  width: 100%;
  margin-bottom: 8px;
}
ul.nacc {
  position: relative;
  list-style: none;
  margin: 0;
  height: 440px;
  margin-top:0;
  width: 100%;
  
  /* transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1); */
}
.value-2-1 {
  /* border-left: 4px solid rgb(153, 138, 6); */
  width: 300px;
padding-left: 0px;
}
.offers-menu div {
  width: 350px;
  margin-left: 0px;
  /* padding-left: 40px; */
  /* margin-bottom: 10px; */
  color: #b3b5c2;
  cursor: pointer;
  border-right:3px rgb(5, 5, 51) solid;
  
  font-weight: 700;
  /* transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1); */
}
    .value-title {
        
        /* border-left: 2px solid rgb(153, 138, 6); */
        font-size: 15px;
        font-weight: 900;
        line-height: 20px;
        margin-bottom: 9px;
        text-transform: unset;
        text-align: center;
        }
        .value-content {
            text-align: center;
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        margin-bottom: 7px;
        }
    ul.nacc li {
        opacity: 0;
      
        /* transform: translateX(50px); */
        position: absolute;
        height:400px;
        list-style: none;
        /* transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1); */
      } 
    ul.nacc {
        position: relative;
        list-style: none;
        margin: 0;
        height: 440px;
        margin-top:0;
        
        padding: 0;
        /* transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1); */
      }
    .value-2-1 {
    width: 100%;
    }
    .value-2-2 {
    
    cursor: pointer;
    
    }
}
.clud {
  padding-top: 200px;
}
.value-content {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 9px;
  }
  @media (min-width: 700px) { 
.nav-second-grid{
      grid-template-columns: 1fr;
    }
  }

@media (min-width: 700px) { 
.value-1 {
text-align: center;
display: flex;
justify-content: space-around;
}
.border-services {
  border-bottom: 3px solid #282E58;
  width: 90px;
}
.values {
width: 30%;
padding: 7px;
}
.offers-content {
    
    width: 100%;
    height: 198px;
    margin-bottom: 8px;
}

.value-title {
font-size: 21px;
font-weight: 900;
line-height: 20px;
padding-bottom: 11px;
text-transform: unset;

}
.value-content {
font-size: 14px;
font-weight: 400;
line-height: 20px;
padding-top: 20px;
margin-bottom: 9px;

}
.value-content-head {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  padding-top: 19px;
  }
}
@media (min-width: 368px) { 
.value-1 {
margin-top: 20px;
text-align: center;
justify-content: space-around;
justify-content: center;
}
.values {
width: 98%;
}

.value-title {
font-size: 19px;
font-weight: 700;
line-height: 20px;
margin-bottom: 9px;
text-transform: unset;
}
.value-content {
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin-bottom: 9px;
}
}
.overlay__image {
  height: 100%;
  background: rgba(0 0 0 / 38%);
  opacity: 0;
  transition: opacity 0.55s;
}


.sec-title{
position:relative;
z-index: 1;
margin-bottom:10px;
}

.sec-title .title{
position: relative;
display: block;
font-size: 18px;
line-height: 24px;
color: #282E58;
font-weight: 500;
margin-bottom: 15px;
}

.sec-title h2{
position: relative;
display: block;
font-size:40px;
line-height: 1.1em;
color: #222222;
font-weight: 600;
padding-bottom:8px;
}

.products-page-subheader{
  font: "Arial";
  line-height: 1.0;
  color: #222222;
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  padding-bottom: 1px;
  padding-top: 3px;
}
.products-heads {
  display: flex;
      justify-content: space-between;
      align-items: center;
      vertical-align: middle;
      background: #ecedf1;
      padding-top: 12px;
}

.carousel-nav .flickity-prev-next-button .flickity-button-icon {
position: absolute;
left: 20%;
top: 20%;
width: 20%;
height: 60%;
}

.products-pull-right ul {
  display: flex;
  list-style: none;
  gap: 15px; /* Adds space between items */
  margin: 0;
  padding: 0;
}

.products-pull-right li {
  white-space: nowrap; /* Prevents wrapping */
  padding-right: 15px;
  position: relative;
}

/* Make links blue */
.products-pull-right a {
  text-decoration: none; /* Remove underline */
  color: blue; /* Blue text */
  font-weight: 300;
}

/* Short vertical border on first item */
.products-pull-right li:first-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  height: 10px; /* Short border */
  width: 1px;
  background-color: #ccc;
  transform: translateY(-50%);
}

/* Optional: Change link color on hover */
.products-pull-right a:hover {
  color: darkblue; /* Darker blue on hover */
  font-weight: 300;
}

.products-page-headers a{
  line-height: 1.6em;
  color: #212529;
  font-weight: 400;
  font-size: 15px;
  padding-left: 7px;
  padding-right: 7px;
}

.real-products{
  font: "Arial";
  line-height: 1.4;
  color: #03053c;
  font-weight: 800;
  font-size: 18px;
  text-align: left;
  padding-bottom: 5px;
  padding-top: 0;
}
#menu {
  border: 1px solid black; /* Adds a black border */
  padding: 10px; /* Adds spacing inside the border */
  width: fit-content; /* Adjusts the width to content */
}

.sec-title .text{
position: relative;
font-size: 16px;
line-height: 26px;
color: #848484;
font-weight: 400;
margin-top: 15px;
}

.sec-title.light h2{
color: #ffffff;
}

.sec-title.text-center h2:before{
left:50%;
margin-left: -25px;
}

.list-style-one{
position:relative;
}

.list-style-one li{
position:relative;
font-size:16px;
line-height:26px;
color: #222222;
font-weight:400;
padding-left:35px;
margin-bottom: 12px;
}

.list-style-one li:before {
content: "\f058";
position: absolute;
left: 0;
top: 0px;
display: block;
font-size: 18px;
padding: 0px;
color: #282E58;
font-weight: 600;
-moz-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1.6;
font-family: "Font Awesome 5 Free";
}

.list-style-one li a:hover{
color: #44bce2;
}

.btn-style-one{
position: relative;
display: inline-block;
font-size: 17px;
line-height: 30px;
color: #202020;
padding: 10px 30px;
font-weight: 600;

overflow: hidden;
letter-spacing: 0.02em;
background-color: #fff;
}

.btn-style-one:hover{
background-color: #001e57;
color: #ffffff;
}
.aboutus-section{
position: relative;
padding: 20px 0 5px;
}

.aboutus-section .sec-title{
margin-bottom: 5px;
}

.aboutus-section .content-column{
position: relative;
margin-bottom: 50px;
}

.aboutus-section .content-column .inner-column{
position: relative;
padding-left: 0px;
}

.aboutus-section .text{
margin-bottom: 40px;
font-size: 16px;
line-height: 26px;
color: #848484;
font-weight: 400;
margin: 0 auto;
text-align: justify;

}

.aboutus-section .list-style-one{
margin-bottom: 45px;
}

.aboutus-section .btn-box{
position: relative;
}

.aboutus-section .btn-box a{
padding: 15px 50px;
}

.aboutus-section .image-column{
position: relative;
}

.aboutus-section .image-column .text-layer{
position: absolute;
right: -110px;
top: 50%;
font-size: 325px;
line-height: 1em;
color: #ffffff;
margin-top: -175px;
font-weight: 500;
}

.aboutus-section .image-column .inner-column{
position: relative;
padding-left: 120px;
padding-bottom: 125px;
}

.aboutus-section .image-column .inner-column:before{
position: absolute;
left: -75px;
top: 65px;
height: 520px;
width: 520px;
background-image:url(https://i.ibb.co/fxJ1jtC/about-circle-1.png);
content: "";
}

.aboutus-section .image-column .image-1{
position: relative;
}

.aboutus-section .image-column .image-2{
position: absolute;
left: 0;
bottom: 0;
}

.aboutus-section .image-column .image-2 img,
.aboutus-section .image-column .image-1 img{
box-shadow: 0 30px 50px rgba(8,13,62,.15);
}

.aboutus-section .image-column .video-link{
position: absolute;
left: 70px;
top: 170px;
}

.aboutus-section .image-column .video-link .link{
position: relative;
display: block;
font-size: 22px;
color: #191e34;
font-weight: 400;
text-align: center;
height: 100px;
width: 100px;
line-height: 100px;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 30px 50px rgba(8,13,62,.15);
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}

.aboutus-section .image-column .video-link .link:hover{
background-color: #191e34;
color: #fff;}


.overlay__image:hover {
  opacity: 1;
}
.overlay__image > *{
  transform: translateY(20px);
  transition: transform 0.55s;
}
.overlay__image:hover > *{
  transform: translateY(0);
}
@media (min-width: 468px) { 
.value-2 {
display: flex;
}
.team-deco {
  background: rgb(10, 110, 7);
   position: relative;
   top: 0px;
   height: 330px;
   
}
.team-container {
  bottom: 170px;
  position: relative;
}
.whoarewe {
  padding-bottom: 210px;
}
.intro{
  padding-top: 380px;
}
.value-2-1 {
  /* border-left: 4px solid rgb(153, 138, 6); */
  width: 64%;
margin-left: 40px;
}
.value-2-1 .content-text {
margin-bottom: 10px;
}
.card-whoare {
  position: absolute;
  border-top: 4px solid #282E58;
  border-left: 4px solid #282E58;
  margin-left: 40px;
}

.title-white {
  color: #fff;
}
.line-services{
  width: 15%;
}
.service-devider {
  border-bottom: 3px solid rgba(1, 79, 188, 1);
  margin: 15% 20% 3% 0%;
}
.service_paragraph{
  font-size: 1.1rem;
  line-height: 150%;
  color: #000000;
}
.services-name{
  font-size: 2.1rem;
  line-height: 150%;
  color: #000000;
}
.title-bg-small {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 15px;
    color: #fff;
    background: #101010;
    display: inline-block;
    padding: 3px 18px;
    text-transform: uppercase;
}
.primary-bg {
  background: #e80000;
}
.card-our-support {
  position: absolute;
  border-top: 4px solid rgb(153, 138, 6);
  border-left: 4px solid rgb(153, 138, 6);
  /* margin-left: 40px; */
  background-color: transparent;
}
.whoarewe-deco {
  background: repeating-linear-gradient(-45deg, 
  rgb(62, 63, 62), rgb(105, 107, 104) 5px, rgb(247, 247, 250) 5px, rgb(248, 248, 252) 10px);
  
  position: relative;
  top: 240px;
  left: 180px;
  height: 200px;
  width: 210px;
}
.value-2-2 {
width: 300px;
margin-top: 0;
cursor: pointer;

}


.value-title {
font-size: 19px;
font-weight: 700;
line-height: 20px;
margin-bottom: 9px;
text-transform: unset;
}
.value-content {
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin-bottom: 9px;
}

}

@keyframes slideInFromLeft {
0% {
transform: translateX(-100%)
}
100% {
transform: translateX(0)
}
}

@keyframes slideInFromRight {
0% {
transform: translateX(100%)
}
100% {
transform: translateX(0)
}
}

@keyframes slideInFromTop {
0% {
transform: translateY(-100%)
}
100% {
transform: translateX(0)
}
}

@keyframes slideInFromBottom {
0% {
transform: translateY(100%)
}
100% {
transform: translateX(0)
}
}

.who-we-are {
animation: slideInFromBottom 1s ease-in;
}

.landing-text {
animation: slideInFromLeft 1s ease-in;
}

.landing-img {
animation: slideInFromRight 1s ease-in;
}

.candidate_reg-text {
  animation: slideInFromRight 1s ease-in;
  }
  
  .candidate_reg-img {
  animation: slideInFromLeft 1s ease-in;
  }

.fade-in {
  opacity: 0;
  transition: opacity 250ms ease-in;
}
.fade-in.appear {
  opacity: 1;
}

.fade {
  opacity: 0;
}
img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  
  /* Global values */
  image-rendering: inherit;
  image-rendering: initial;
  image-rendering: revert;
  image-rendering: unset;
}
.imgs {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  
  /* Global values */
  image-rendering: inherit;
  image-rendering: initial;
  image-rendering: revert;
  image-rendering: unset;
}

.background-image {
  background-image: url('/img/sc.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
}
.hero-image {
  background-image: url('/img/hero.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
}
.termination-img {
  position: absolute;
 
  background: rgb(196, 190, 109);
  height: 70px;
  width: 300px;
  margin-top: 8%;
  margin-right: 15px;
  
}
.deco {
  margin-top: 410px;
  margin-right: 0px;
  height: 90px;
  width: 420px;
  position: absolute;
  background: rgb(196, 190, 109);
}
.payroll_deco {
  margin-top: 80px;
  margin-left: 30px;
  height: 470px;
  width: 340px;
  position: absolute;
  background: rgb(196, 190, 109);
}
.payroll_decoration {
  margin-top: 150px;
  margin-left: 170px;
  height: 280px;
  width: 270px;
  position: absolute;
  /* background: rgb(7, 122, 13); */
  background-image: linear-gradient(45deg, #5e5f071e 25%, #727008 25%, #727008 50%, #5e5f071e 50%, #5e5f071e 75%, #727008 75%, #727008 100%);
background-size: 56.57px 56.57px;
}
.payroll-services {
  position: relative;
  background: rgb(10, 53, 6);
  top: 310px;
  height:210px;
  width: 410px;
  z-index: 100;
  left: -365px;
}
.fuck {
  margin-left: -25px;
}
.fucked {
  margin-left: -55px;
}
.payroll-services_workforce {
  position: relative;
  background: rgb(11, 83, 4);
  top: -150px;
  height:210px;
  width: 410px;
  z-index: 100;
  left: -355px;
}
.contact-base {
  background: rgb(65, 66, 65);
}
.contact-deco {
  background-color: rgb(190, 22, 10);
  width: 630px;
  height:560px;
  margin-bottom: -400px;
}
.contact_overlay {
  top: -100px;
  position: relative;
  overflow: hidden;
}
.workforce-card {
  border: 2px solid rgb(66, 66, 5);
 
  color: #333;
  padding: 20px;
  margin: 10px;
}
.terminate {
  margin-top: 5%;
  border: 2px #fff solid;
  height: 300px;
  width: 420px;
  position: absolute;
}
.decoring {
  margin-top: 200px;
  margin-right: 305px;
  height: 258px;
  width: 90px;
  position: absolute;
  background: rgba(59, 56, 4, 0.26);
}
.termination_image {
  margin-top: 10%;
  height: 320px;
  width: 300px;
  margin-left: -40px;
}

.employee-training-image {
  background-image: url('/images/training-emp.jpg');
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  height: 700px;
  width: 840px;
}
.perfomance_management-image {
  background-image: url('/images/performance2.jpg');
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  height: 700px;
  width: 840px;
}
.payroll_management-image {
  background-image: url('/images/payroll.jpg');
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  height: 420px;
  width: 340px;
  
  margin-top: -200px;
}
.payroll_workforce-image {
 
 
  height: 420px;
  width: 340px;
  margin-left: -120px;
}
.search{
  padding-bottom: 15px; 
}
.team-1 {
  height: 320px;
  width: 340px;
}
/* .back-img {
  
} */
.payroll_deco-services {
  background: rgb(182, 149, 5);
  height: 480px;
  width: 280px;
  margin-left: 120px;
}
.workforce_management {
  background: rgb(226, 221, 125);
  padding: 70px 70px;
}
.workforce {
  height: 60px;
  width: 550px;
  margin-left: 150px;
  
}
.workforce_list {
 margin-top: 30px;
  margin-left: 150px;
  height: 190px;
  width: 390px;
  
}
.payroll_management-service {
  position: relative;
  background: rgb(10, 53, 6);
  top: 40px;
  height:300px;
  width: 570px;
  z-index: 100;
  left: 550px;
}
.flex_box {
  width: 1100px;
 
}
@media (min-width: 1200px) {
 
.customers_say {
  background: rgb(10, 53, 6);
  top: 40px;
  height:390px;
  width: 210px;
  z-index: 100;
  padding-right: 130px;
}


.customer_words {
  background: rgb(186, 235, 182);
  margin-top: -160px;
  height:220px;
  width: 620px;
  z-index: 100;
}
.customer_words-said {
  background: rgb(168, 146, 22);
  margin-top: -50px;
  height:280px;
  width: 310px;
  padding: 10px;
  margin-left: 70px;
  position: relative;
}
.cus-index-img{
  width: 100%; height: 60%; padding-top:6%; padding-left:0;
}
.customer_img {
  background: rgb(10, 53, 6);
  margin-top: -430px;
  height:360px;
  width: 420px;
  z-index: 100;
  margin-left: 200px;
}
.our-supporting {
  background: rgb(158, 173, 157);
  margin-top: 40px;
  padding-top: 50px;
  height:310px;
  width: 620px;
  z-index: 100;
  margin-left: 0px;
  
}
.our_support-base {
  overflow: hidden;
  height: 700px;
  /* background-color: black; */
}
.our-support {
  background: rgb(138, 34, 2);
  margin-top: 80px;
  height:410px;
  width: 250px;
  z-index: 100;
  margin-left: 50px;
}
.our-support-img {
  background: rgb(110, 116, 110);
  margin-top: -440px;
  height:360px;
  width: 420px;
  z-index: 100;
  margin-left: 70px;
}
.support-img {
  
  /* margin-bottom: -60px; */
  height:360px;
  width: 420px;
  z-index: 100;
  
}
.our-support-stribes {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgb(60, 61, 60) 10px,
    rgb(60, 61, 60) 20px
);
  height:370px;
  width: 410px;
  z-index: 100;
  margin-left: 160px;
}
}
.perfomance_overlay-image {
  height: 450px;
  width: 420px;
}
/* .pay_process {
 width: 90px;
  
} */

/* .pay_proces {
  margin-left: -120px;
  margin-top: 15px;
}
.pay_proces1 {
  margin-left: -120px;
  margin-top: 15px;
}
.pay_process {
  margin-left: -90px;
  margin-top: 15px;
}
.pay_process1 {
  margin-left: 110px;
  margin-top: 15px;
} */
.middle_payroll {
  width: 400px;
}
.hr_audit-image {
  background-image: url('/images/audit.jpg');
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  height: 670px;
  width: 750px;
}

.employee-training-image-1 {
  position: relative;
  background-image: url('/images/training-emp1.jpg');
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  height: 970px;
  width: 950px;
  bottom: 50px;
  border: 2px solid rgb(189, 162, 8);
}
.text_color {
  color: rgb(136, 116, 5);
}
.candidate-image {
  background-image: url('/images/candidate3.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
}
.image_opacity {
  height: 400px;
}
.recruitment-image {
  background-image: url('/images/recruit.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
}

.googlemap-image {
  background-image: url('/images/googlemap.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
}

.background-image-top {
  background-image: url('/images/marble.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 70px;
  /* margin-top: 100px; */
}

.background-image_team {
  background-image: url('/images/employee2.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
  margin-top: 100px;
}


.background-image_team-about {
  background-image: url('/images/technical.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
  margin-top: 0px;
}
.image_team {
  background-image: url('/images/logo.png');
  background-repeat: no-repeat;

}


.loose {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 20px auto;
  width: 250px;
  height: 250px;
  background: rgb(187, 190, 187);
  border-radius: 75px;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: lighter;
  letter-spacing: 2px;
  transition: 1s box-shadow;
}

.loose:hover {
  box-shadow: 0 5px 35px 0px rgba(0,0,0,.1);
}

.loose:hover::before, .loose:hover::after {
  display: block;
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  background: #0a4603;
  border-radius: 75px;
  z-index: -1;
  animation: 1s clockwise infinite;
}

.loose:hover:after {
  background: #5ef377;
  animation: 2s counterclockwise infinite;
}

@keyframes clockwise {
  0% {
    top: -5px;
    left: 0;
  }
  12% {
    top: -2px;
    left: 2px;
  }
  25% {
    top: 0;
    left: 5px;    
  }
  37% {
    top: 2px;
    left: 2px;
  }
  50% {
    top: 5px;
    left: 0;    
  }
  62% {
    top: 2px;
    left: -2px;
  }
  75% {
    top: 0;
    left: -5px;
  }
  87% {
    top: -2px;
    left: -2px;
  }
  100% {
    top: -5px;
    left: 0;    
  }
}

@keyframes counterclockwise {
  0% {
    top: -5px;
    right: 0;
  }
  12% {
    top: -2px;
    right: 2px;
  }
  25% {
    top: 0;
    right: 5px;    
  }
  37% {
    top: 2px;
    right: 2px;
  }
  50% {
    top: 5px;
    right: 0;    
  }
  62% {
    top: 2px;
    right: -2px;
  }
  75% {
    top: 0;
    right: -5px;
  }
  87% {
    top: -2px;
    right: -2px;
  }
  100% {
    top: -5px;
    right: 0;    
  }
}

.component{
  font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
  width: 750px;
  margin:0 auto;
  padding: 3rem;
}

.component blockquote.quote {
    position: relative; 
    text-align: center;
    padding: 1rem 1.2rem;
    width: 80%;  /* create space for the quotes */
    color: #f1f7f6;
    margin: 1rem auto 2rem;
}
.component blockquote.EN {
    background:
    linear-gradient(to right, #039be5 4px, transparent 4px) 0 100%,
    linear-gradient(to left, #039be5 4px, transparent 4px) 100% 0,
    linear-gradient(to bottom, #039be5 4px, transparent 4px) 100% 0,
    linear-gradient(to top, #039be5 4px, transparent 4px) 0 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.component blockquote.DE {
    background:
    linear-gradient(to right, #039be5 4px, transparent 4px) 0% 0%,
    linear-gradient(to bottom, #039be5 4px, transparent 4px) 0% 0%,
    linear-gradient(to left, #039be5 4px, transparent 4px) 100% 100%,
    linear-gradient(to top, #039be5 4px, transparent 4px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}
    

/* -- create the quotation marks -- */
.component blockquote.quote:before,
.component blockquote.quote:after{
    font-family: FontAwesome;
    position: absolute;
    color: #039be5;
    font-size: 34px;
}

.component blockquote.EN:before{
    content: "\f10d";
    top: -12px;
    margin-right: -20px;
    right: 100%;
}
.component blockquote.EN:after{
    content: "\f10e";
    margin-left: -20px;
    left: 100%;  
    top: auto;
    bottom: -20px;
}
.component blockquote.DE:before{
    content: "\f10e";
    margin-right: -20px;
    bottom: -20px;
    right: 100%;
}
.component blockquote.DE:after{
    content: "\f10d";
    margin-left: -20px;
    left: 100%;  
    top: -20px;
    bottom: auto;
}

.zitat1 {
  position: relative;
  font-family: 'Verdana', serif;
  font-size: 2.4em;
  line-height: 1.5em;
}
.zitat1 cite {
  font-family: 'Verdana', sans-serif;
  font-size: 0.6em;
  font-weight: 700;
  color: #bdbec0;
  float: right;
}
.zitat1 cite:before {
  content: '\2015'' ';
}
.zitat1:after {
  content: '\201d';
  position: absolute;
  top: 0.28em;
  right: 0px;
  font-size: 6em;
  font-style: italic;
  color: #bdbec0;
  z-index: -1;
}
.sidekick {
  position: relative;
  padding-left: 1em;
  border-left: 0.2em solid #039be5;
  font-family: 'Roboto', serif;
  font-size: 2.4em;
  line-height: 1.5em;
  font-weight: 100;
}
.sidekick:before, .sidekick:after {
  font-family: Calibri;
    color: #039be5;
    font-size: 34px;
}
.sidekick:before {content: '\201e'}
.sidekick:after {content: '\201c';}
.sidekick cite {font-size: 50%; text-align:center; top:50%}
.sidekick cite:before {content: ' \2015 '}




/* Bento Grid */
.grid-item {
  background-color: #ffffff;
 
  /* 8px */
  
  
  text-align: center;
  display: grid;

}

/* Estilo del contenedor del carrusel */
.carousel-container {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
 
}

/* Contenido del carrusel */
.carousel-content {
  width: 100%;
  display: flex;
  animation: scroll 10s linear infinite;
}

/* Cada elemento del carrusel */
.grid-item .carousel-content .carousel-item {
  max-width: 200px;
  height: 150px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-item .carousel-content .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Animación para el scroll automático */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.section {
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  place-items: center;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  opacity: 1;
  overflow: hidden;
}


.right_conatct_social_icon{
  background: #282E58;
}
.contact_us{
 background-color: transparent;
 padding: 0px 0px;
}

.contact_inner{

 position: relative;
 box-shadow: 20px 22px 44px #cccc;
 border-radius: 25px;
}
.contact_inner-home{
 
  position: relative;
 }
.contact_field{
 padding: 30px 400px 50px 10px;
}
.right_conatct_social_icon{
 height: 100%;
}

.contact_field h3{
color: #000;
 font-size: 40px;
 letter-spacing: 0px;
 font-weight: 600;
 margin-bottom: 10px
}
.contact_field p{
 color: #000;
 font-size: 16px;
 line-height: 22px;
 font-weight: 400;
 letter-spacing: 0px;
 margin-bottom: 35px;
}
.contact_field .form-control{
 border-radius: 0px;
 border: none;
 border-bottom: 1px solid #ccc;
}
.contact_field .form-control:focus{
 box-shadow: none;
 outline: none;
 border-bottom: 2px solid #1325e8;
}
.contact_field .form-control::placeholder{
 font-size: 16px;
 line-height: 22px;
 letter-spacing: 0px;
}
.get_a-quote{
  margin-top: 30px;
  font-size: 16px;
 line-height: 22px;
 font-weight: 600;
border-top: 1px solid rgb(190, 187, 187);
}
.contact_info_sec {
 position: relative;
 background-color: #2d2d2d;
 color: #fff;
 right: 0%;
 top: 0%;
 height: 335px;
 width: 340px;
 padding: 30px;
 border-radius: 25px 0 0 25px;
}
.contact_info_sec h4{
 letter-spacing: 0px;
 font-size: 1rem;
 padding-bottom: 15px;
}
.welcome .main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f4f8;
}

.welcome .contact-form-section {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  max-width: 400px;
  width: 100%;
}

.welcome .form-group {
  margin-bottom: 1rem;
}

.welcome .form-group label {
  display: block;
  margin-bottom: .5rem;
}

.welcome .form-group input[type="text"],
.welcome .form-group input[type="email"],
.welcome .form-group textarea {
  width: 100%;
  padding: .5rem;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.welcome .main button {
  background-color: #007bff;
  color: white;
  padding: .5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.welcome .main button:hover {
  background-color: #0056b3;
}

@media (max-width: 600px) {
  .welcome .contact-form-section {
      margin: 1rem;
  }
}

.info_single{
 margin: 30px 0px;
}
.info_single i{
 margin-right: 15px;
}
.info_single span{
 font-size: 14px;
 letter-spacing: 0px;
}

.contact_field .contact_form_submit {
 background: #03053c;
 
 color: #fff;
 padding: 10px 30px;
 width: 100%;
 margin-top: 25px;
 border-radius: 35px;
 cursor: pointer;
 font-size: 14px;
 text-align: center;
 letter-spacing: 2px;
}
.contact_field .contact_form_submit:hover {
 color: rgb(12, 12, 12);
 background: #f5f5dc ;
 border: #070707;
}
.contact_field .submit_btn {
 padding-top: 25px;
}
.socil_item_inner li{
 list-style: none;
}
.socil_item_inner li a{
 color: #fff;
 margin: 0px 15px;
 font-size: 14px;
}
.socil_item_inner{
 padding-bottom: 10px;
}

.map_sec{
 padding: 50px 0px;
}
.map_inner h4, .map_inner p{
 color: #000;
 text-align: center
}
.map_inner p{
 font-size: 16px;
 line-height: 22px;
}
.map_bind{
margin-top: 50px;
height: 400px;
 border-radius: 30px;
 overflow: hidden;
}


.single-input-field textarea {
  background: #f9f9f9 none repeat scroll 0 0;
  border: 1px solid #f9f9f9;
  width: 100%;
  height: 120px;
  padding: 12px 16px;
  border-radius: 4px;
}
.single-input-fieldsbtn input[type="submit"] {
  background: #fda40b none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  font-weight: 600;
  padding: 10px 0;
  text-transform: capitalize;
  width: 150px;
  margin-top: 20px;
  font-size: 16px;
}
.single-input-fieldsbtn input[type="submit"]:hover{background:#071c34;transition: all 0.4s ease-in-out 0s;border-color:#071c34}
.single-input-field  h4 {
  color: #464646;
  text-transform: capitalize;
  font-size: 14px;
}
.contact-page-form {
  display: inline-block;
  width: 100%;
  margin-top: 30px;
}

.contact-page-map {
  margin-top: 36px;
}
.contact-page-form form {
    padding: 20px 15px 0;
}


.testimonials {
 
  position: relative;
  padding-top: 20px;
}
.testimonials:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 30%;

}
.img-responsive {
  width: 100% !important;
  height: 250px !important;
}  

.item-details {
  width: 100% !important;
  height: 150px !important;  
}


   
.contact .social-links {
  padding-bottom: 20px;
}
.contact .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #fff;
  color: #03053c;
  line-height: 0;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
  border: 1px solid #03053c;
}
.contact .info {
  color: #5a656e;
}
.align-items-center {
  align-items: center !important;
}

.d-flex {
  display: flex !important
;
}
.contact .info i {
  font-size: 1.7rem;
  color: #070470;
  line-height: 0;
  margin-right: 15px;
}

.bi-geo-alt::before {
  content: "\f3e8";
}

.contact .info p {
  margin-top: .9rem;
  margin-bottom: .7rem;
  color: #070470;
  font-weight: 300;
  font-size: .9rem;
}
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 15px;
  position: relative;
  color: #345676;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: #03053c;
  bottom: 0;
  left: 0;
}
#customers-testimonials .item-details {
  background-color: #fff;
  color: #fff;
  padding: 20px 10px;
  text-align: left;
}
#customers-testimonials .item-details h5 {
  margin: 0 0 15px;
  font-size: 20px;
  font-weight: 700;
  color: #070470;
}
#customers-testimonials .item-details h5 span {
  color: red;
  float: right;
  padding-right: 20px;
}
#customers-testimonials .item-details p {
  font-size: 14px;
  font-weight: 300;
  color: #070470;
}
#customers-testimonials .item {
  text-align: center;
  margin-bottom: 20px;
}

.owl-carousel .owl-nav [class*=owl-] {
  transition: all 0.3s ease;
}

.owl-carousel .owl-nav [class*=owl-].disabled:hover {
  background-color: #D6D6D6;
}

.owl-carousel {
  position: relative;
}

.owl-carousel .owl-next,
.owl-carousel .owl-prev {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  position: absolute;
  top: 30%;
  font-size: 20px;
  color: #fff;
  border: 1px solid #ddd;
  text-align: center;
}

.owl-carousel .owl-prev {
  left: -70px;
}

.owl-carousel .owl-next {
  right: -70px;
}



.testimonials .welcome-contact-header .header{
    font-size: 24px;
    color: #07063e;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    position: relative;
    padding-bottom: 15px;
    z-index: 100;
    }


.testimonials .welcome-contact-header .header::before {
    content: "";
    position: absolute;
    display: block;
    width: 14%;
    height: 1px;
    background: #fff0f5;
    bottom: 1px;
    left: calc(50% - 60px);
    margin-bottom: 10px;
    left: 43%;
}
.testimonials .welcome-contact-header .header::after {
    content: "";
    position: absolute;
    display: block;
    width: 5%;
    height: 3px;
    background: #03053c;
    bottom: 0;
    left: calc(50% - 20px);
    margin-bottom: 10px;
    left:48%;
}

.main-about-us .welcome-contact-header .header{
  font-size: 24px;
  color: #07063e;
  text-transform: uppercase;
  text-align: left;
  font-weight: 700;
  position: relative;
  padding-bottom: 15px;
  z-index: 100;
  }


.main-about-us .welcome-contact-header .header::before {
  content: "";
  position: absolute;
  display: block;
  width: 20%;
  height: 1px;
  background: #fff0f5;
  bottom: 1px;
  left: calc(50% - 60px);
  margin-bottom: 10px;
  left: 0%;
}
.main-about-us .welcome-contact-header .header::after {
  content: "";
  position: absolute;
  display: block;
  width: 9%;
  height: 3px;
  background: #03053c;
  bottom: 0;
  left: calc(50% - 20px);
  margin-bottom: 10px;
  left:6%;
}


.why-us .welcome-contact-header .header{
    font-size: 24px;
    color: #07063e;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    position: relative;
    padding-bottom: 15px;
    z-index: 100;
    }


.why-us .welcome-contact-header .header::before {
    content: "";
    position: absolute;
    display: block;
    width: 14%;
    height: 1px;
    background: #fff0f5;
    bottom: 1px;
    left: calc(50% - 60px);
    margin-bottom: 10px;
    left: 43%;
}
.why-us .welcome-contact-header .header::after {
    content: "";
    position: absolute;
    display: block;
    width: 5%;
    height: 3px;
    background: #03053c;
    bottom: 0;
    left: calc(50% - 20px);
    margin-bottom: 10px;
    left:47.5%;
}

.section-bg .welcome-contact-header .header{
    font-size: 24px;
    color: #07063e;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    position: relative;
    padding-top: 3%;
    padding-bottom: 15px;
    z-index: 100;
    }


.section-bg .welcome-contact-header .header::before {
    content: "";
    position: absolute;
    display: block;
    width: 14%;
    height: 1px;
    background: #fff0f5;
    bottom: 1px;
    left: calc(50% - 60px);
    margin-bottom: 10px;
    left: 43%;
}
.section-bg .welcome-contact-header .header::after {
    content: "";
    position: absolute;
    display: block;
    width: 5%;
    height: 3px;
    background: #03053c;
    bottom: 0;
    left: calc(50% - 20px);
    margin-bottom: 10px;
    left:47.5%;
}

    
 .sentineldiv {
  padding-top: 1%;
    position: relative; /* Keep normal flow */
}

.sentinel {
    font-size: 30px;
    line-height: 40px;
    padding-left: 20px; /* Moves text away from the left line */
    position: relative; /* Ensure correct positioning */
    display: block;
    color: #070470;
}

.sentinel:before {
    content: "";
    width: 4px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #CC5500;
}
.chat-with{
  padding-top: 3%;
  color: #070470;
  font-weight: 300;
  font-size: 1rem;
}



.ffbox {
    display: flex;
    width: 100%;
    background-color: #fff;
    border: 3px solid #e4e4e9;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 10px;
    flex-wrap: wrap;
}

.ffbox1 {
    flex: 1;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.ffbox1 label {
    display: block;
    margin-bottom: 8px;
}

.ffbox1 input
 {
    width: 100%;
    padding: 8px;
    margin-bottom: 16px;
    box-sizing: border-box;
    border-radius: 1px;
    border: 1px solid #B4B4B4; /* Black border with 2px thickness */
    background-color: #fff;
 
}

.ffbox1 textarea {
    resize: vertical;
    width: 96%;
    padding: 8px;
    margin-bottom: 16px;
    box-sizing: border-box;
    border-radius: 1px;
    border: 1px solid #B4B4B4; /* Black border with 2px thickness */
    background-color: #fff;
}

.ffbox1 {
    margin-bottom: 16px;
}

.ffbox1 label {
    margin-right: 16px;
}

.map-div {
    flex: 1;
    background-color: #eee;
}


.map-div iframe {
    border: 0;
    padding: 10px;
}

.gfg {
    text-align: center;
    color: green;
}

.map-div {
    background-color: rgb(152, 178, 234);
}
.section-container {
  width: 90%;
  margin: 0 auto;
}

.get_a-quote span {display: inline-block;position: relative;font-size: .75rem;font-weight: 600;letter-spacing: .09em;text-transform: uppercase;  background: #5f5f5f; background: -moz-linear-gradient(135deg,  #5f5f5f 0%,#000    100%); background: -webkit-linear-gradient(135deg,  #5f5f5f 0%,#000    100%); background: linear-gradient(135deg,  #5f5f5f 0%,#000    100%); color: #fff;border-radius: 1.5rem;padding-top: .6rem;padding-bottom: .6rem;padding-left: 2.1rem;padding-right: 2.1rem; box-shadow: 0 14px 25px 0px rgba(0,0,0,0.1);}
.get_a-quote:hover span { cursor: pointer;display: inline-block;position: relative;font-size: .75rem;font-weight: 600;letter-spacing: .09em;text-transform: uppercase;  background: #5f5f5f; background: -moz-linear-gradient(135deg,  #5f5f5f 0%,#000    100%); background: -webkit-linear-gradient(135deg,  #5f5f5f 0%,#000    100%); background: linear-gradient(135deg,  #5f5f5f 0%,#000    100%); color: #fff;border-radius: 1.5rem;padding-top: .6rem;padding-bottom: .6rem;padding-left: 2.1rem;padding-right: 2.1rem; box-shadow: 0 14px 25px 0px rgba(0,0,0,0.1);}
@media(min-width:1200px) and (max-width:1366px) {
  .get_a-quote {width: 100%;}
  .product-box {padding: 0 10px;}
}

.get_a-quote {
  display: flex;
  justify-content: flex-start; /* Aligns content to the left */
  align-items: center; /* Keeps it vertically centered */
}


header .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
header .item .cover {
  padding: 25px 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
}
header .item .cover .header-content {
  position: relative;
  padding: 56px;
  overflow: hidden;
}
header .item .cover .header-content .line {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  left: 20;
  top: 0;
  position: absolute;
  border: 9px solid #fff;
  -webkit-clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%);
  clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%);
}
header .item .cover .header-content h2 {
  font-weight: 300;
  padding-left: 40px;
  font-size: 35px;
  color: #fff;
}
header .item .cover .header-content h1 {
  font-size: 56px;
  font-weight: 600;
  margin: 5px 0 20px;
  word-spacing: 3px;
  color: #fff;
}
header .item .cover .header-content h4 {
  font-size: 24px;
  font-weight: 300;
  line-height: 36px;
  color: #fff;
}
header .owl-item.active h1 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-name: fadeInDown;
  animation-delay: 0.3s;
}
header .owl-item.active h2 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-name: fadeInDown;
  animation-delay: 0.3s;
}
header .owl-item.active h4 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-name: fadeInUp;
  animation-delay: 0.3s;
}
header .owl-item.active .line {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-name: fadeInLeft;
  animation-delay: 0.3s;
}
header .owl-nav .owl-prev {
  position: absolute;
  left: 15px;
  top: 43%;
  opacity: 0;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  background: rgba(0, 0, 0, 0.5) !important;
  width: 40px;
  cursor: pointer;
  height: 40px;
  position: absolute;
  display: block;
  z-index: 1000;
  border-radius: 0;
}
header .owl-nav .owl-prev span {
  font-size: 1.6875rem;
  color: #fff;
}
header .owl-nav .owl-prev:focus {
  outline: 0;
}
header .owl-nav .owl-prev:hover {
  background: #000 !important;
}
header .owl-nav .owl-next {
  position: absolute;
  right: 15px;
  top: 43%;
  opacity: 0;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  background: rgba(0, 0, 0, 0.5) !important;
  width: 40px;
  cursor: pointer;
  height: 40px;
  position: absolute;
  display: block;
  z-index: 1000;
  border-radius: 0;
}
header .owl-nav .owl-next span {
  font-size: 1.6875rem;
  color: #fff;
}
header .owl-nav .owl-next:focus {
  outline: 0;
}
header .owl-nav .owl-next:hover {
  background: #000 !important;
}
header:hover .owl-prev {
  left: 0px;
  opacity: 1;
}
header:hover .owl-next {
  right: 0px;
  opacity: 1;
}




.listing-section {
  display: flex;
  flex-wrap: wrap;
  gap: 1%; /* Space between products; does not add extra margin at the container's edges */
  width: 100%;
  max-width: 1200px;
  padding: 0; /* Remove any padding so products start at the container edge */
  
}

.listing-section .product {
  /* Calculate width so that 4 products fit per row with 3 gaps of 1% between them */
  width: calc((100% - 3%) / 4);
  border-radius: 2%;
  /* Removed margin property to prevent extra spacing on container edges */
}

.listing-section .image-box {
  width: 100%;
  overflow: hidden;
  border-radius: 2% 2% 0 0;
  cursor: pointer;
}

.listing-section .images {
  height: 15em;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 2% 2% 0 0;
  transition: all 1s ease;
}

.listing-section .images:hover {
  transform: scale(1.2);
  overflow: hidden;
  border-radius: 2%;
}

.listing-section .text-box {
  width: 100%;
  padding: 1em;
  border-radius: 0 0 2% 2%;
  text-align: center;
}

.listing-section h2, h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 1em;
  text-transform: uppercase;
  margin: 0.2em auto;
}

/* IMAGES */
#image-1 {background-image: url("/img/Products/steel_p.jpg");}

#image-2 {background-image: url("/img/Products/steel-c.jpeg")}

#image-3 {background-image: url("/img/Products/fences.jpg")}

#image-4 {background-image: url("/img/Products/roofing.jpg")}

#image-5 {background-image: url("/img/Products/c&b.jpg")}

#image-6 {background-image: url("/img/Products/fasteners.jpg")}

#image-7 {background-image: url("/img/Products/reinforces.jpg")}

#image-8 {background-image: url("/img/Products/gates.webp")}

#image-9 {background-image: url("/img/Products/posts.jpg")}

#image-10 {background-image: url("/img/Products/tubing.jpg")}

#image-11 {background-image: url("/img/Products/beams.jpg")}

#image-12 {background-image: url("/img/Products/service.jpeg")}



.listing-section .item, .price {
  clear: left;
  width: 100%;
  text-align: center;
}

@media (max-width: 768px) {
  .listing-section .product {
    width: calc(50% - 2%); /* Two products per row on smaller screens */
  }
}

@media (max-width: 480px) {
  .listing-section .product {
    width: calc(100% - 2%); /* One product per row on very small screens */
  }
}


.features-one {
  background: var(--logistiq-white);
  padding: 50px 0 0;
  z-index: 1;
}
.faq-one--faq, .features-one {
  position: relative;
  display: block;
}
.features-one__single {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #03053c;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}
.features-one__single-content h3 {
      font-size: 1.2rem;
      padding-bottom:15px;
  }

  .features-one__single-content p {
    color: rgba(102, 102, 102, 1);
  font-family: 'Poppins-Regular', Arial, sans-serif !important;
  line-height: 1.5;
  font-size: 14px;
  margin: 0 0 35px;
  }
@media only screen and (min-width: 1200px) and (max-width: 1349px) {
  .features-one__single-icon {
      width: 95px;
  }
}

.features-one__single-icon {
  position: relative;
  display: block;
  width: 19%;
  height: 100%;
  background: #03053c;
  padding: 25px 0 26px;
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
  margin-left: 10px;
}
.features-one__single-icon .icon {
  position: relative;
  display: block;
  margin-bottom: 15px;
}
.features-one__single-icon .icon span {
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 60px;
  line-height: 60px;
  transition: all .5s ease;
}



.features-one__single-icon .text-box {
  position: relative;
  display: block;
}
.features-one__single-icon .text-box h2 {
  font-size: 25px;
  line-height: 30px;
  padding-top: 22px;
  padding-right: 10px;
  color: transparent;
  -webkit-text-stroke-width: .5px;
  -webkit-text-stroke-color: #fff;
  font-weight: 600;
  transition: all .3s ease;
}
.features-one__single h1, h2, h3, h4, h5, h6 {
  font-family: var(--logistiq-font);
  margin: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1349px) {
  .features-one__single-content {
      padding: 32px 20px;
  }
}

.features-one__single-content {
  position: relative;
  display: block;
  padding: 32px 30px;
  flex: 1 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1349px) {
  .features-one__single-content h2 {
      font-size: 15px;
      line-height: 30px;
  }
}

.features-one__single-content h2 {
  
  font-weight: 600;
  margin-bottom: 15px;
  text-transform: capitalize;
}
.features-one__single-content h2 a {
  color: var(--logistiq-black);
}
.features-one__single a, a:focus, a:hover, a:visited {
  text-decoration: none !important;
}
.features-one__single a {
  color: var(--logistiq-base);
  transition: all .5s ease;
}
.icon-quote:before {
  content: "\e873";
}
.icon-professional-services:before {
  content: "\e8b8";
}


.ag-format-container {
  width: 1040px;
  margin: 0 auto;
}

.ag-carousel-block {
  padding: 15px 0 100px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ag-carousel_title-box {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;

  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;

  padding: 0 0 30px;
}
.ag-carousel_title {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;

  line-height: .91;

  font-weight: 600;
  font-size: 20px;
}

.ag-carousel-arrow_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;

  -webkit-box-flex: 1;
  -ms-flex: 1 0 40%;
  flex: 1 0 40%;
}
.ag-carousel-arrow {
  display: inline-block;
  height: 52px;
  width: 52px;
  border: 1px solid #041C2C;
  background-color: #041C2C;

  cursor: pointer;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;

  -webkit-transition: all .2s ease-out 0s;
  -moz-transition: all .2s ease-out 0s;
  -o-transition: all .2s ease-out 0s;
  transition: all .2s ease-out 0s;

  position: relative;
}
.js-ag-carousel-arrow_prev {
  margin: 0 13px 0 0;
}
.js-ag-carousel-arrow_prev:before,
.js-ag-carousel-arrow_next:before {
  content: "";
  height: 15px;
  width: 10px;
  margin: -7px auto 0;

  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}
.js-ag-carousel-arrow_prev:before {
  background: url(https://raw.githack.com/SochavaAG/example-mycode/master/pens/carousel-slick-zoom/images/svg/arrow-left.svg) no-repeat scroll 0 0;
}
.js-ag-carousel-arrow_next:before {
  background: url(https://raw.githack.com/SochavaAG/example-mycode/master/pens/carousel-slick-zoom/images/svg/arrow-right.svg) no-repeat scroll 0 0;
}
.ag-carousel-arrow:hover {
  border: 1px solid #5E8FE1;
  background-color: transparent;
}
.ag-carousel-arrow_box .ag-carousel-arrow:hover {
  border: 1px solid #A3AAB0;
}
.ag-carousel-arrow_box .js-ag-carousel-arrow_prev:hover:before {
  background: url(https://raw.githack.com/SochavaAG/example-mycode/master/pens/carousel-slick-zoom/images/svg/arrow-left-b.svg) no-repeat scroll 0 0;
}
.ag-carousel-arrow_box .js-ag-carousel-arrow_next:hover:before {
  background: url(https://raw.githack.com/SochavaAG/example-mycode/master/pens/carousel-slick-zoom/images/svg/arrow-right-b.svg) no-repeat scroll 0 0;
}

.ag-carousel_box .slick-track {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
.ag-carousel_box {
  /*margin: 0 0 0 -40%;*/
}
.ag-carousel_item {
  padding: 0 8px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ag-carousel_figure {
  display: table;
  width: 185px;
  margin: 0 auto;

  -webkit-transition: width .3s ease;
  -moz-transition: width .3s ease;
  -o-transition: width .3s ease;
  transition: width .3s ease;
}
.slick-current .ag-carousel_figure {
  width: 275px;

  -webkit-transition: width .3s ease;
  -moz-transition: width .3s ease;
  -o-transition: width .3s ease;
  transition: width .3s ease;
}
.ag-carousel_figcaption {
  line-height: 1.26;
  margin: 15px 0 0;

  visibility: hidden;

  font-size: 14px;
  color: #041C2C;
}
.slick-current .ag-carousel_figcaption {
  visibility: visible;
}


@media only screen and (max-width: 767px) {
  .ag-format-container {
    width: 96%;
  }

  .ag-carousel_title-box {
    display: block;
    padding: 0 0 25px;
  }

  .ag-carousel_title {
    margin: 0 0 20px;

    font-size: 30px;
  }

  .ag-carousel-arrow_box {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
  }
  .ag-carousel-arrow {
    height: 33px;
    width: 33px;
  }
  .ag-carousel-arrow_prev {
    margin: 0 5px 0 0;
  }
  .ag-carousel-arrow_prev:before,
  .ag-carousel-arrow_next:before {
    height: 12px;
    width: 8px;
    margin: -5px 0 0 13px;
  }

  .ag-carousel_box {
    margin: 0;
  }

  .ag-carousel_figure {
    width: 70%;
  }
  .slick-current .ag-carousel_figure {
    width: 100%;
  }
}

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

}

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

}

@media (min-width: 768px) and (max-width: 979px) {
  .ag-format-container {
    width: 750px;
  }

}

@media (min-width: 980px) and (max-width: 1161px) {
  .ag-format-container {
    width: 960px;
  }

}





.containeres {
  display: flex;
  margin:auto;
  
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.panel {
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 60vh;
  border-radius: 50px;
  background-color: transparent;
  color: #fff;
  text-shadow: 0px 2px 4px #000;
  cursor: pointer;
  flex: 0.5;
  margin: 10px;
  position: relative;
  transition: flex 0.7s ease-in;
}

.panel h3{
  font-size: 24px;
  position: absolute;
  bottom: 22%;
  left: 20px;
  margin: 0;
  opacity: 0;
}
.panel .leading-normal{
  font-size: 14px;
  position: absolute;
  bottom: 20%;
  left: 20px;
  margin: 0;
  opacity: 0;
}

.panel.active {
  background-size: 100% auto;
  flex: 5;
}

.panel.active h3, p{
  opacity: 1;
  transition: opacity 1s ease-in 1s;
}
.panel.active p {
  opacity: 1;
  transition: opacity 1s ease-in 1s;
}

@media (max-width: 480px) {
  .containeres {
    width: 100vw;
  }

  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
}


.site-heading h2 {
  display: block;
  font-weight: 500;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.site-heading h2 span {
  color: #2B547E;
}

.site-heading h4 {
  display: inline-block;
  padding-bottom: 20px;
  position: relative;
  text-transform: capitalize;
  z-index: 1;
}

.site-heading h4::before {
  background: #2B547E none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -25px;
  position: absolute;
  width: 50px;
}

.site-heading {
  margin-bottom: 10px;
  overflow: hidden;
  margin-top: -5px;
  color: #222;
}
  /* Facts Section
  --------------------------------*/
  #facts {
    

    background-size: cover;
    padding: 10px 0 0 0;
    position: relative;
  }
  
  #facts::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #e6e5ebe6;
    z-index: 9;
  }
  
  #facts .container {
    position: relative;
    z-index: 10;
  }
  
  #facts .counters p {
    padding: 0;
    margin: 0 0 4px 0;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    color: #222;
  }
  
  #facts .counters span {
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    font-size: 48px;
    display: block;
    color: #222;
  }
  
  #facts .facts-img {
    text-align: center;
    padding-top: 30px;
  }
  
.straight-line{
  width: 35px; height: 2px; background-color: #03053c;
  margin-bottom: 15px;

}
.aboutustitles {
  font-size: 14px;
  letter-spacing: 0;
  line-height: 18px;
  padding: 0 0 11px;
  position: relative;
  text-transform: uppercase;
  color: #222;
}

.about-contexting{
  margin-top: 10px;
  font-family: 'Fugaz One', cursive;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.1;
  max-inline-size: 15ch;
  color: #222;
 }
.feature-box{
  width:100%;
}

 /* Portfolio Section
  --------------------------------*/
  #portfolio {
    padding: 60px 0;
  }
  
  #portfolio #portfolio-flters {
    padding: 0;
    margin: 5px 0 35px 0;
    list-style: none;
    text-align: center;
  }
  
  #portfolio #portfolio-flters li {
    cursor: pointer;
    margin: 15px 15px 15px 0;
    display: inline-block;
    padding: 10px 20px;
    font-size: 12px;
    line-height: 20px;
    color: #666666;
    border-radius: 4px;
    text-transform: uppercase;
    background: #fff;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
  }
  
  #portfolio #portfolio-flters li:hover,
  #portfolio #portfolio-flters li.filter-active {
    background: #18d26e;
    color: #fff;
  }
  
  #portfolio #portfolio-flters li:last-child {
    margin-right: 0;
  }
  
  #portfolio .portfolio-wrap {
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
    transition: 0.3s;
  }
  
  #portfolio .portfolio-wrap:hover {
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
  }
  
  #portfolio .portfolio-item {
    position: relative;
    height: 360px;
    overflow: hidden;
  }
  
  #portfolio .portfolio-item figure {
    background: #000;
    overflow: hidden;
    height: 240px;
    position: relative;
    border-radius: 4px 4px 0 0;
    margin: 0;
  }
  
  #portfolio .portfolio-item figure:hover img {
    opacity: 0.4;
    transition: 0.3s;
  }
  
  #portfolio .portfolio-item figure .link-preview,
  #portfolio .portfolio-item figure .link-details {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    line-height: 1;
    text-align: center;
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s linear;
  }
  
  #portfolio .portfolio-item figure .link-preview i,
  #portfolio .portfolio-item figure .link-details i {
    font-size: 22px;
    color: #333;
    line-height: 0;
  }
  
  #portfolio .portfolio-item figure .link-preview:hover,
  #portfolio .portfolio-item figure .link-details:hover {
    background: #18d26e;
  }
  
  #portfolio .portfolio-item figure .link-preview:hover i,
  #portfolio .portfolio-item figure .link-details:hover i {
    color: #fff;
  }
  
  #portfolio .portfolio-item figure .link-preview {
    left: calc(50% - 38px);
    top: calc(50% - 18px);
  }
  
  #portfolio .portfolio-item figure .link-details {
    right: calc(50% - 38px);
    top: calc(50% - 18px);
  }
  
  #portfolio .portfolio-item figure:hover .link-preview {
    opacity: 1;
    left: calc(50% - 44px);
  }
  
  #portfolio .portfolio-item figure:hover .link-details {
    opacity: 1;
    right: calc(50% - 44px);
  }
  
  #portfolio .portfolio-item .portfolio-info {
    background: #fff;
    text-align: center;
    padding: 30px;
    height: 90px;
    border-radius: 0 0 3px 3px;
  }
  
  #portfolio .portfolio-item .portfolio-info h4 {
    font-size: 18px;
    line-height: 1px;
    font-weight: 700;
    margin-bottom: 18px;
    padding-bottom: 0;
  }
  
  #portfolio .portfolio-item .portfolio-info h4 a {
    color: #333;
  }
  
  #portfolio .portfolio-item .portfolio-info h4 a:hover {
    color: #18d26e;
  }
  
  #portfolio .portfolio-item .portfolio-info p {
    padding: 0;
    margin: 0;
    color: #b8b8b8;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
  }
  
  /*--------------------------------------------------------------
  # Portfolio Details
  --------------------------------------------------------------*/
  .portfolio-details {
    padding-top: 40px;
  }
  
  .portfolio-details .portfolio-details-slider img {
    width: 100%;
  }
  
  .portfolio-details .portfolio-details-slider .swiper-pagination {
    margin-top: 20px;
    position: relative;
  }
  
  .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 1;
    border: 1px solid #18d26e;
  }
  
  .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #18d26e;
  }
  
  .portfolio-details .portfolio-info {
    padding: 30px;
    box-shadow: 0px 0 30px rgba(51, 51, 51, 0.08);
  }
  
  .portfolio-details .portfolio-info h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
  }
  
  .portfolio-details .portfolio-info ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
  }
  
  .portfolio-details .portfolio-info ul li+li {
    margin-top: 10px;
  }
  
  .portfolio-details .portfolio-description {
    padding-top: 30px;
  }
  
  .portfolio-details .portfolio-description h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  
  .portfolio-details .portfolio-description p {
    padding: 0;
  }
  
   /*--------------------------------------------------------------
  # Back to top button
  --------------------------------------------------------------*/
  .back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background: #041C2C;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    transition: all 0.4s;
  }
  
  .back-to-top i {
    font-size: 28px;
    color: #fff;
    line-height: 0;
  }
  
  .back-to-top:hover {
    background: #2ce782;
    color: #fff;
  }
  
  .back-to-top.active {
    visibility: visible;
    opacity: 1;
  }
  
  

.aboutus_section {
  padding: 20px 0;
}
.aboutus-titles {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 32px;
  margin: 0 0 39px;
  padding: 0 0 11px;
  position: relative;
  text-transform: uppercase;
  color: #000;
}
.aboutus-titles::after {
  background: #2B547E none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 54px;
}




.feature .feature-box .iconset {
  background: #fff none repeat scroll 0 0;
  float: left;
  position: relative;
  width: 18%;
}
.feature .feature-box .iconset::after {
  background: #2B547E none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 43%;
  position: absolute;
  top: 100%;
  width: 1px;
}

.feature .feature-box .feature-content h4 {
  color: #0f0f0f;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 22px;
  margin: 0 0 5px;
}


.feature .feature-box .feature-content {
  float: left;
  padding-left: 28px;
  width: 100%;
  line-height: 22px;
  font-weight: 300;
  color: #070470;
  font-size: 1rem;
}
.feature .feature-box .feature-content h4 {
  color: #070470;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 5px;
}

.iconset .icon {
  color : #2B547E;
  padding:0px;
  font-size:40px;
  border: 1px solid #2B547E;
  border-radius: 100px;
  color: #2B547E;
  font-size: 28px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  width: 70px;
} 
.factory-div{
  padding-bottom: 40px;margin-top: 15px;
            background-repeat: no-repeat; 
            background-size: cover;
}   

  /*--------------------------------------------------------------
  # Footer
  --------------------------------------------------------------*/
  #footer {
    background: #000;
    padding: 0 0 30px 0;
    color: #eee;
    font-size: 14px;
  }
  
  #footer .footer-top {
    background: #03053c;
    padding: 60px 0 30px 0;
  }
  
  #footer .footer-top .footer-info {
    margin-bottom: 30px;
  }
  
  #footer .footer-top .footer-info h3 {
    font-size: 28px;
    margin: 0 0 20px 0;
    padding: 2px 0 2px 10px;
    line-height: 1;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    border-left: 4px solid #fff;
  }
  
  #footer .footer-top .footer-info p {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0;
    font-family: "Montserrat", sans-serif;
    color: #eee;
  }
  
  #footer .footer-top .social-links a {
    display: inline-block;
    background: #333;
    color: #eee;
    line-height: 1;
    margin-right: 4px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  #footer .footer-top .social-links a i {
    line-height: 0;
    font-size: 16px;
  }
  
  #footer .footer-top .social-links a:hover {
    background: #18d26e;
    color: #fff;
  }
  
  #footer .footer-top h4 {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 12px;
  }
  
  #footer .footer-top h4::before,
  #footer .footer-top h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
  }
  
  #footer .footer-top h4::before {
    right: 0;
    background: #555;
  }
  
  #footer .footer-top h4::after {
    background: #fff;
    width: 60px;
  }
  
  #footer .footer-top .footer-links {
    margin-bottom: 30px;
  }
  
  #footer .footer-top .footer-links ul {
  
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  #footer .footer-top .footer-links ul i {
    padding-right: 8px;
    color: #ddd;
  }
  
  #footer .footer-top .footer-links ul li {
    border-bottom: 1px solid #333;
    padding: 10px 0;
  }
  
  #footer .footer-top .footer-links ul li:first-child {
    padding-top: 12px;
  }
  
  #footer .footer-top .footer-links ul a {
    color: #eee;
  }
  
  #footer .footer-top .footer-links ul a:hover {
    color: #18d26e;
  }
  
  #footer .footer-top .footer-contact {
    margin-bottom: 30px;
  }
  
  #footer .footer-top .footer-contact p {
    line-height: 26px;
  }
  
  #footer .footer-top .footer-newsletter {
    margin-bottom: 30px;
  }
  
  #footer .footer-top .footer-newsletter input[type=email] {
    border: 0;
    padding: 6px 8px;
    width: 65%;
  }
  
  #footer .footer-top .footer-newsletter input[type=submit] {
    background: #18d26e;
    border: 0;
    width: 35%;
    padding: 6px 0;
    text-align: center;
    color: #fff;
    transition: 0.3s;
    cursor: pointer;
  }
  
  #footer .footer-top .footer-newsletter input[type=submit]:hover {
    background: #13a456;
  }
  
  #footer .copyright {
    text-align: center;
    padding-top: 30px;
  }
  
  #footer .credits {
    text-align: center;
    font-size: 13px;
    color: #ddd;
  }

   
  .btn-effect {
    display: inline-block;
    background: linear-gradient(90deg, #f3722e 0%, #ff9900 100%);
    z-index: 1;
    overflow: hidden;
    width: 160px;
    padding: 15px 35px;
    color: #fff;
    border-radius: 35px;
    border: none;
    font-size: 15px;
    outline: none;
    font-weight: 400;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: relative;
    text-decoration: none;
  }
  .btn-effect::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(#ff9900),
      to(#f3722e)
    );
    background: linear-gradient(90deg, #ff9900 0%, #f3722e 100%);
    -webkit-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    z-index: -1;
  }
  .btn-effect:hover {
    color: #000;
    text-decoration: none;
  }
  .btn-effect:hover::after {
    opacity: 0.45;
    -webkit-transform: translateY(5px) rotate(-45deg);
    transform: translateY(5px) rotate(-45deg);
  }
  .MainContainer {
    height: auto;
    width: auto;
    display: flex;
    justify-content: left;
    align-items: left;
}

.MenuContainer {
  width: 100%;

  height: auto;
 
  color: #04091e;
  overflow: auto;
}
.products-welcome-page .MenuContainer .OptionContainer .OptionHead a{
  color: #fff;
}
.MenuContainer {
    width: 100%;
    display: block;
    height: auto;
   
    color: #04091e;
    overflow: auto;
}
.MenuContainer .OptionContainer .OptionHead a{
  color: #030126;
}
.OptionHead svg {
  transition: transform 0.25s ease-out;
  fill: #04091e;
}
.OptionHead {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    /*border-bottom: 1px solid #ffffff;*/
 
}
.OptionHead .title{

  /*border-bottom: 1px solid #ffffff;*/
  font-weight: 700;
font-size: 17px;
}


.OptionBody {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.15s ease-out;
}

.OptionContainer.open>.OptionBody {
    max-height: 1000px;
    transition: max-height 0.25s ease-in;
    overflow: auto;
}

.OptionContainer.open>.OptionHead svg {
    transform: rotate(180deg);
    transition: transform 0.15s ease-in;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}


.right-cards .card {
  background-color: #fff !important;
 
  max-width: 300px;
  width: 100%;
  position: relative;
  border-radius: 15px;
  padding: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.right-cards .card_image{
  height:145px;
  width:185px;
  object-fit: contain; 
}
.right-cards .card_image {
  max-width: 100%;
  border-radius: 15px;
}

.right-cards .card-title {
  padding-top: 10px;
  padding-bottom:10px;
 
  font-weight: 500;
  font-size: 1.1rem;
  text-align:left;
  margin: 0 auto;
}

.rights-cards .card-title {
  padding-top: 10px;
  padding-bottom:10px;
 color: #030126;
  font-weight: 600;
  font-size: 0.9rem;
  text-align:left;
  margin: 0 auto;
}

.right-cards .card_body .content {
  font-size: 1rem;
  line-height: 23px;
  color: #070470;
  font-weight: 300;
  margin: 0 auto;
    padding-bottom: 6%;
    padding-top: 4%;
}

.rights-cards .content {
  font-size: .9rem;
  line-height: 20px;
  color: #070470;
  font-weight: 300;
  margin: 0 auto;
    padding-bottom: 6%;
    padding-top: 1%;
}

 .main-about-us .info i {
    font-size: 32px;
    color: #1E3A8A;
    line-height: 0;
  }
  .main-about-us .icon-box .icon:hover {
    background: #1E3A8A;
    cursor: pointer;
  }
  .main-about-us .info .icon:hover i {
    color: #fff;
    cursor: pointer;
  }
  .main-about-us .icon-box {
    margin-top: 14px;
}

.main-about-us .icon-box .icon {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 2px solid #1E3A8A;
    border-radius: 50px;
    transition: 0.5s;
}
.main-about-us .icon-box .title {
    margin-left: 85px;
    font-weight: 700;
    margin-bottom: 4px;
    font-size: 18px;
}
.main-about-us .icon-box .title a {
    color: #070470;;
    font-size: 20px;
    font-weight: 600;
}
.main-about-us .icon-box .description {
    margin-left: 85px;
    line-height: 22px;
    font-weight: 300;
    color: #070470;
    font-size: 1rem;
}
.main-about-us .row {
    --bs-gutter-x: 0rem;
}
.main-about-us .vertical-divider{
  padding-right: 3%;
}
.main-about-us .about-header{
  padding-bottom: 1.5%;
  text-transform: uppercase;
text-align: left;
  font-weight: 700;
font-size: 2.1em;
}
.main-about-us .texting{
  padding-bottom: 1%;
  font-size: 1rem;
  line-height: 24px;
  font-weight: 300;
  color: #070470;
  margin: 0 auto;
  text-align: justify;
  
  }

.gallery-container .gallery {
  position: absolute;
  top: 40%;
  right: 10%;
  z-index: 1000; /* Puts it above everything */
  margin-left: auto; /* Pushes to the right */
  width: fit-content; /* Prevents it from stretching */
}

.gallery-container::after {
  content: "";
  display: block;
  clear: both;
  position: relative;
margin-top: 20px; /* Adjust if needed */
}


.gallery-container .rounded-container {
  width: 95%;
  margin: 0 auto;
  border-radius: 4%;
  overflow: hidden;
}

.gallery-container .item {
  border-radius: 4%;
  overflow: hidden;
}

.gallery-container .item img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  border-radius: 4%;
}
.why-us{
  content: "";
 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #e6e5ebe6;
  z-index: -1;

}
.main-about-us {
  width: 100%;
  height: 480px;
  position: relative;
  display: block;
  margin-top: 1rem;
  z-index: 0; /* Creates a stacking context */
}

/* Pseudo-element for the background image */
.main-about-us::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('{{ asset("/img/aa.jpg") }}');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -2;
}

/* Pseudo-element for the tint overlay */
.main-about-us::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #e6e5ebe6; /* 60% opaque black overlay */
  z-index: -1;
}

  
  .landwelcome .gallery-container {
      position: relative;
      background:  linear-gradient(to bottom, #CC5500 0%, #FC9704 100%);
border-radius: 30px; height: 300px; --bs-gutter-x: 0rem;
  }
  
  
    /* Ensure the section takes the full viewport */
    section.container-fluid {
      width: 100%;
      height: 450px; /* Full viewport height */
      display: flex;
      align-items: stretch;
    }
  
    /* Flex row to distribute columns evenly */
    .row-flex {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      height: 100%;
    }
  
    /* Columns should stretch to fill height */
    .col-flex-item {
      display: flex;
      flex-flow: column;
      justify-content: center; /* Centers content vertically */
      align-items: left; /* Centers content horizontally */
      flex: 1;
      padding-left: 0px;
    }
    .steel-roots {
      position: absolute;
      left: 20px; /* Adjust left spacing as needed */
      top: 160px;  /* Adjust vertical position */
      color: #fff;
      font-weight: 600;
      font-size: 40px;
      letter-spacing  : .16em;
    }
  
.products-welcome-page .container {
  display: flex;
  gap: 20px;
  max-width: 95%;
  margin: auto;
}

.left-card {
  flex: 1; /* Takes up 30% */
  max-width: 25%;
  background: #b3b5bb; /* Dark blue */
  color: white;
  padding: 20px;
  margin-left: 10px;
  text-align: center;
  border-radius: 10px;
}

.products-welcome-page .right-cards {
  flex: 2; /* Takes up 70% */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.products-welcome-page .rights-cards {
  flex: 2; /* Takes up 70% */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.products-welcome-page .right-cards a{
 
  font-size: 20px;
  font-weight: 600;
  color: #070470;
}
/* Responsive for smaller screens */
@media (max-width: 768px) {
 .products-welcome-page .container {
      flex-direction: column;
  }
 .products-welcome-page .left-card {
      max-width: 100%;
  }
 .products-welcome-page .right-cards {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
 .products-welcome-page .right-cards {
      grid-template-columns: repeat(1, 1fr);
  }
}


.welcome-page .titles {
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  line-height: 55px;
  padding-bottom: 5%;
  padding-top: 5%;
  letter-spacing: 2px; /* Spacing for elegance */
  text-transform: uppercase;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}
.welcome-page .headers {
  font-size: 30px;
  text-align: left;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 40px;
  color: #070470;
  padding-bottom: 5%;
  letter-spacing: 2px; /* Spacing for elegance */
  text-transform: uppercase;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

.welcome-page .headers {
  padding-bottom: 15px;
}

.banner .imageOne {
  position: relative;
  width: 100%; /* Adjust as needed */
  height: 200px; /* Fixed height */
  overflow: hidden; /* Ensures no extra space */
}

.banner .imageOne img {
  width: 100%; /* Make the image stretch */
  height: 100%; /* Force it to fill the container */
  object-fit: cover; /* Prevents distortion */
  display: block;
}

.banner .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Transparent blue overlay */
}
.banner .banner-head {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers text */
  color: white; /* Adjust text color */
  font-size: 24px;
  text-align: center;
  font-weight: bold;
}
.banner .banner-head a{

  color: white; /* Adjust text color */

}
.Right-Cards-container .card {
  border: 1px solid #fff;
  margin: 0;
}
.Right-Cards-container .card:hover {
  border: 1px solid #ccc;
  margin: 0;
}
.Right-Cards-container .row>* {
  padding-right: 2px;
}
.Right-Cards-container .card-body {

  padding: 4px;
}
.Right-Cards-container .card-title {
  padding-top: 0px;
  padding-bottom: 10px;
  color: #030126;
  font-weight: 700;
  font-size: 1.1rem;
  text-align: left;
  margin: 0 auto;
}
.Right-Cards-container .content {
  font-size: .9rem;
  line-height: 23px;
  color: #070470;
  font-weight: 400;
  margin: 0 auto;
  padding-bottom: 6%;
  padding-top: 1%;
}
@media (max-width: 550px) {
  .hide-under-550 {
    display: none !important;
  }
}

.table-specification .btn-effect {
  display: inline-block;
  background: linear-gradient(90deg, #f3722e 0%, #ff9900 100%);
  z-index: 1;
  overflow: hidden;
  width: 45%;
  padding: 5px 15px;
  color: #fff;
  border-radius: 35px;
  border: none;
  font-size: 15px;
  outline: none;
  font-weight: 400;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  position: relative;
  text-decoration: none;
}
.table-specification table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}

.table-specification table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}

.table-specification table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}

.table-specification table th,
.table-specification table td {
  color: #333;
padding: .625em;
text-align: left;
vertical-align: middle; /* Ensures content is vertically centered */
}

.table-specification table th {
  text-align: left;
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
width: 25%; /* Ensure each column has an equal width */
}
@media screen and (max-width: 600px) {
.table-specification table {
  border: 0;
}

.table-specification table caption {
  font-size: 1.3em;
}

.table-specification table thead {
  border: none;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.table-specification table tr {
  border-bottom: 3px solid #ddd;
  display: block;
  margin-bottom: .625em;
}

.table-specification table td {
  border-bottom: 1px solid #ddd;
  display: block;
  font-size: .8em;
  text-align: right;
}

.table-specification table td::before {
  /*
  * aria-label has no advantage, it won't be read inside a table
  content: attr(aria-label);
  */
  content: attr(data-label);
  float: left;
  font-weight: bold;
  text-transform: uppercase;
}

.table-specification table td:last-child {
  border-bottom: 0;
}
}




.landing-wrapper .multi_color_border{
  width: 100%;
  height: 7px;
  background: #CC5500;
}

.landing-wrapper .top_nav{
  margin-top: 0px;
  width: 100%;
  height: 85px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.landing-wrapper .top_nav .left{
  display: flex;
  align-items: center;
}

.landing-wrapper .top_nav .left .logo p{
  font-size: 24px;
  font-weight: bold;
  color: #494949;
  font-family: "Mountains of Christmas", cursive;
  margin-right: 25px;
}

.landing-wrapper .top_nav .left .logo p span{
  color: #37a000;
  font-family: "Mountains of Christmas", cursive;
}

.landing-wrapper .top_nav .left .search_bar input[type="text"]{
  border: 1px solid #666666;
  padding: 5px 10px; 
  outline: none;
  
}

.landing-wrapper .top_nav .left .search_bar input[type="text"]:focus{
  width: 250px;
}

.landing-wrapper .top_nav .right ul{
  display: flex;
}

.landing-wrapper .top_nav .right ul li{
  margin: 0 4px;
}

.landing-wrapper .top_nav .right ul li{
  background:  #03053c;
  margin-right: 0;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 3px;
}


.landing-wrapper .top_nav .right ul li:last-child a{
   color: #fff;
}




.landing-wrapper .banner img{
  width: 100%;
  height: 400px;
}



.logo {
    width: 300px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
}

.logo img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 15px;
    object-fit: contain;
}

.search_bar {
    display: flex;
    justify-content: center; /* Centers the input */
    width: 100%; /* Ensures it takes full width of the parent */
}



.landing-main {
    background: #0A266C;
  }


.search-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 30px;
  border-radius: 120px;
  border: 1px solid #fff;
 
}
.search-icon, .go-icon {
  position: absolute;
  top: 0;
  height: 35px;
  width: 76px;
  line-height: 2px;
  text-align: center;
}
.search-icon {
    z-index: 2;
  left: 0;
  color: #fff;
  pointer-events: none;
  font-size: 1.22em;
  will-change: transform;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform-origin: center center;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -o-transform-origin: center center;
 
}

.go-icon {
  right: 0;
  
  pointer-events: none;
  font-size: 1.38em;
  will-change: opacity;
  cursor: default;
  opacity: 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

/* Example Only Styles */
.child {
  position: relative;
  margin-top:20px;
  margin-bottom:20px;
  height: auto;
  padding: 15px;
  color: white; /* Adjust text color for visibility */

}
.child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:  #fff; /* Adjust opacity and color here */
  z-index: 1;
}
.child * {
  position: relative;
  z-index: 2;
  font-weight: 300;
  color: #070470;
}
.child:nth-child(1) {

  background-size: cover;
  background-position: center;

}

.child:nth-child(2) {

  background-size: cover;
  background-position: center;
 
}

.child:nth-child(3) {

  background-size: cover;
  background-position: center;

}

.child:nth-child(4) {

  background-size: cover;
  background-position: center;

}
.why-us .parent .child .img-border {
  background: #fff;width: 60px; height: 60px;  border-radius: 50%; padding: 4px;
  border: 2px solid #070470;
}
.why-us .parent .child img {
  filter: brightness(0) saturate(100%) invert(9%) sepia(92%) saturate(2112%) hue-rotate(243deg) brightness(87%) contrast(104%);
}
.go-in {
  font-size: 14px;
    top: 6px;
    padding-left: 20px;
    color: #fff;
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
  transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.search-border {
  display: block;
  width: 100%;
  width: 300px;
  height: 30px;
}
.border {
  fill: none;
  stroke: #222;
  stroke-width: 0;
  stroke-miterlimit: 10;
}

#search {
  font-family: 'Montserrat Alternates', sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 120px;
  border: transparent;
  background: transparent;
  padding: 0 8px 0 10px;
  color: #fff;
  font-size: 1.0em;
  font-weight: 400;
  letter-spacing: -0.015em;
  outline: none;
}


.right ul {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between items */
    list-style: none;
    padding: 0;
    margin: 0;
}

.right ul li {
    display: flex;
    align-items: center; /* Aligns text and image vertically */
}

.whatsapp {
    background-color: transparent; /* Change background */
    padding: 5px; /* Add some padding around the image */
 
    display: flex; /* Ensures proper alignment */
    align-items: center;
}
.whatsapp img {
    width: 24px; /* Adjust image size */
    height: 24px;
}


.chevron-icon {
    width: 10px;  /* Adjust size */
    height: auto; /* Maintain aspect ratio */
    margin-left: 1px; /* Space between text and icon */
    vertical-align: middle; /* Align with text */
   margin-bottom:5px;
}


@media(min-width:768px){
  .no-x-pad-xs{
  padding:0 15px;
}
  .dropdown-menu{
      -webkit-transition: -webkit-transform 0.3s;
      transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      transition: transform 0.3s, -webkit-transform 0.3s;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
      display:block;
    visibility: hidden;
    z-index:-1;
    margin: 0;
  }
  .dropdown-menu.show{
      visibility: visible;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
  }
}
.nav-item{
  padding: 15px 15px 0 15px;
}
.navbar-light .nav-item .nav-link{
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  color: #aaa;
  padding: 0 5px 10px 5px;
  border-bottom:3px solid transparent;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}
.navbar-light .nav-item:hover .nav-link {
    border-color: black;
}
/* Reset list styles */
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Dropdown container */
.menu-left .munus{
    position: relative;
    display: inline-block;
   margin-right: 20px;
}

ul li.has-dropdown {
  text-align: left;
   justify-content: space-between;
}
/* Chevron icon */
.chevron-icon {
    margin-left: 3px;
    transition: transform 0.3s ease; /* Smooth rotation transition */
}

/* Hide the dropdown by default */
.dropdown {
    visibility: hidden;
    position: absolute;
    left: 0;
   
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Show the dropdown when hovering over the parent */
.has-dropdown:hover .dropdown  {
  visibility: visible; /* Make it visible */
  display: block;
  width: 190px;
  height: auto;
  pointer-events: auto;
  transform: translateY(0); /* Slide to its final position */
}

ul li.has-dropdown .dropdown li a {
  color: #222; /* Default text color */
  text-decoration: none;
  padding: 5px;
  text-align: left;
  display: block;
}
/* Rotate the chevron when the dropdown is active */
.has-dropdown:hover .chevron-icon {
    transform: rotate(180deg);
}



/* Hover effect for dropdown items */
.dropdown a:hover {
    color: #007bff; /* Blue on hover */
}

/* Right chevron for submenu */
.right-chevron {
    margin-left: 1px;
    vertical-align: middle;
    transition: transform 0.3s ease;
}


/* Hide dropdown by default */
.dropdown, .submenu {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 100%;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    z-index: 1;
}

/* Submenu positioning */
.submenu {
    visibility: hidden;
    left: 100%;
    top: 0;
}
.cart-icon {
  position: relative;
  display: inline-block;
}

.cart-icon img {
  width: 28px; /* adjust size as needed */
  height: auto;
}

.cart-count {
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}
/* Show dropdown on hover */
.has-dropdown:hover > .dropdown {
    display: block;
}

/* Show submenu on hover */
.has-submenu:hover > .submenu {
    visibility: visible; /* Make it visible */
  display: block;
  width: 216px;
  height: auto;
  pointer-events: auto;
  transform: translateY(0); /* Slide to its final position */
}

/* Rotate main chevron when dropdown is active */
.has-dropdown:hover > a > .chevron-icon {
    transform: rotate(180deg);
}

/* Rotate right chevron when submenu is active */
.has-submenu:hover > a > .right-chevron {
    transform: rotate(180deg);
}


/* Apply flexbox to make submenu links align properly */
.submenu-links{
    justify-content: space-between;display: flex;align-items: center;
}

/* Right-align chevron */
.right-chevron {
    margin-left: auto; /* Pushes chevron to the right */
}

/* Submenu positioning - Aligns submenu to the right of its parent */
.has-submenu {
    position: relative;
}

/* Display submenu to the right instead of below */
.has-submenu > .submenu {
    left: 100%; /* Move submenu to the right */
    top: 0; /* Align it at the top */
}
/* Hover effect */
.dropdown a:hover, .submenu a:hover {
    background: #f5f5f5;
}


.bottom_nav {
    position: relative;
    padding: 10px 0 10px;
    text-align: right; /* Aligns content (button) to the right */
}

.getquotes .button {
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    font-weight:800;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 30px;
    float: right;
    position: relative;
    display: inline-block; /* Change to inline-block to respect text alignment */
    height: 30px;
    width: 120px;
    border: 1px solid #fff;
    background: #CC5500;
}

.getquotes .button span,
.getquotes .button i {
    display: inline-block;
    z-index: 100;
}

.getquotes  .button i {
    font-style: normal;
}

    .bottom_nav ul li a{
     color: white;
    }
    .getquotes {
    display: flex;
    align-items: center;
  
}

.getting-quote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  
    border-radius: 10px;
    position: relative;
    z-index: 1;
}


.bottom_nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
   
}

/* Left and right menu list styles */
.menu-left,
.menu-right {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Space between list items */


/* Remove right margin for last item */
.menu-left li:last-child,
.menu-right li:last-child {
    margin-right: 0;
}

/* Navigation links */
.bottom_nav li a {
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    color: #fff;
    text-decoration: none;
}

/* Align vertically inside Get Quote */
.get_quotes {
    display: flex;
    align-items: center;
}



@media (max-width: 980px) {
  .hide-under-768 {
    display: none !important;
  }
}

@media (max-width: 468px) {
   .why-us .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  margin: 0 auto;
  margin-bottom: 5%;
  }
  .contact .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  margin: 0 auto;
  }
.Right-Cards-container .col-sm-12 {
  flex: 0 0 auto;
  width: 100%;
  margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .Right-Cards-container  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
    margin: 0 auto;
  }
}
@media (min-width: 768px) {
  .Right-Cards-container  .col-md-6 {
    flex: 0 0 auto;
    width: 33.333333%;
    margin: 0 auto;
  }
  .why-us .col-lg-3 {
    flex: 0 0 auto;
    width: 23%;
  margin: 0 auto;
 
  gap: 2%;
  }
}

@media (max-width: 768px) {
  .col-md-8 {
      flex: 0 0 auto;
      margin: 0 auto;
      width: 66.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  margin: 0 auto;
  }
  .main-about-us .container {
    height: auto;
  }

    .col-md-4 {
      flex: 0 0 auto;
      width: 33.33333333%;
    margin: 0 auto;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 23%;
  margin: 0 auto;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
    margin: 0 auto;
    margin-bottom: 5%;
    gap: 2%;
  }
 
}
.why-us{
  content: "";
 height: auto;
 padding-bottom: 3%;
  background-color: #e6e5ebe6;
  z-index: -1;
}
.main-about-us {
  width: 100%;
  height: auto;
  position: relative;
  display: block;
  margin-top: 1rem;
  z-index: 0; /* Creates a stacking context */
}


#GradientxComment {
  float           : left;
  width           : 80%;
  color           : #fff;
  font-weight     : 600;
  font-size       : 1.9em;
  letter-spacing  : .16em;
  position: relative;
  border-radius   : 0px 0 0 0px;
  padding         : 15px 15px 15px 1px;
  box-sizing      : border-box;
  border-left : 1px solid transparent;
  border-right: 1px solid transparent;
  background-image :  
    linear-gradient(90deg, 
              #822882 20%,
              #ff9f1c 75%,
              transparent), 
    linear-gradient(90deg, 
              #822882 20%,
              #ff9f1c 75%, 
              transparent),
    linear-gradient(90deg, 
              #0A266C,
              #0A266C,
              transparent);

  background-size : 
   100% 3px, /* top border */
   100% 3px, /* bottom border */
   100% 100%; /* body w x h */

  background-position : 0 0,
                        100% 100%,
                        top left; /* background control */
  /* required*/  
  background-repeat   : no-repeat; 
  } 
  
  
  .gallery-container {
  width: 100%;
  margin: auto;
  border-radius: 30px;
  height: 300px;
  position: relative;
  overflow: hidden;
  background: #1d1d1d;
  display: grid;
  grid-template-columns: 1fr auto; /* Left text + right images */
  align-items: center;
  padding: 0px;
}


.g_container {
 padding-right: 5%;
 margin-bottom: 10%;
  position: relative;
  width: 400px;
  height: 200px;
  display: grid;
  place-items: center;
}


.trusted {
  text-align: left;
  padding-left: 4%;
}
.steel-roots {
  position: absolute;
  left: 0px; /* Adjust left spacing as needed */
  top: 65%;  /* Adjust vertical position */
  color: #fff;
  padding-left: 3%;
  text-align: left;
  font-weight: 500;
  font-size: 20px;
  letter-spacing  : .16em;
}


.outer-slider {
  width: 420px;
  height: 230px;
  border-radius: 100px;
  border: 1px solid transparent;
  position: relative;
  margin-right: 70px;
  margin-top: 20px;
}


#slider>img {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
  border-radius: 10px;

}

.active {
  display: block !important;
}

.controls {
  width: 100%;
  position: relative;
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: space-between;
  align-items: center;
}

.controls>.fa-chevron-right {
  background-color: transparent;
  padding: 5px 5px 5px 10px;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

.controls>.fa-chevron-left {
  background-color: transparent;
  padding: 5px 10px 5px 5px;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

 @media (min-width: 1400px) {
        .form-wrapper {
            padding-top: 8%;
        }
      }