/* common starts */
:root {
    --main-green: #56AD3F;
    --green-1: #56AD3F;
    --green-2: #455A64;
    --light-green: #EBF2EA;
    --white: #ffffff;
    --grey: #656161;
    --grey-2: #E6E6E6;
    --grey-3: #D9D9D9;
    --black-1: #202122;
    --black-2: #494949;
    --black-3: #030F1B;
    --black-4: #37474F;
    --blue-1: #132843;
  }
  @font-face { 
      font-family: inter-regular; 
      src: url('../font/static/Inter-Regular.ttf'); 
  }
  @font-face { 
      font-family: Gotham; 
      src: url('../font/Gotham-Font/GothamBold.ttf'); 
  }
  *, html {
      scroll-behavior: smooth !important;
  }
  body{
      
      margin: 0;
      color: var(--black-1);
     
  }
  body *{
      font-family: inter-regular;
  }
  
  
  
  .green-btn{    
      padding: 10px;
      border-radius: 5px;
      color: var(--white);
      border: none;
      background-color: var(--main-green);
      font-size: 16px;
      font-weight: 700;
      line-height: 19px;
      text-align: center;
      cursor: pointer;
      transition:0.3s;
  }
  .green-btn:hover {
      color: var(--white);
      text-decoration:none;
      background:var( --black-1);
  }
  
  /*** About **/
  
  
  /* Story starts */
  #about-story-wrapper{
      margin: 70px auto;
      color: var(--grey);
  }
  
  .story-title{
      font-size: 21px;
      font-weight: 700;
      line-height: 42px;
      text-align: justify;
      margin-bottom: 20px;
  }
  .story-desc{
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;
      text-align: justify;
      padding-right: 70px;
  }
  
  /* card starts */
  #card-wrapper{
      color: var(--white);
      display: flex;
      z-index: 2;
      position: relative;
      /* bottom: -120px;
      margin-top: -120px; */
  }
  .card-item{
      background-image: url(../images/card-bg.png);
      background-color: var(--green-2);
      flex: 1;
      padding: 30px 40px;
      border-radius: 25px;
      background-position: bottom;
      background-repeat: no-repeat;
      min-height: 286px;
  }
  div.card-title{
      font-family: Arial;
      font-size: 24px;
      font-weight: 700;
      line-height: 28px;
      margin-bottom: 20px;
  }
  .card-desc{
      font-size: 16px;
      font-weight: 400;
      line-height: 27px;
  }
  
  /* Prioir Starts */
  #prior-wrapper{
      background-color: var(--light-green);
      position: relative;
      top: -170px;
      padding: 300px 0;
  }
  .prioir-desc-wrapper{
      text-align: center;
      color: var(--black-4);
  }
  .prior-desc-title{
      font-family: Gotham; 
      font-size: 48px;
      font-weight: 700;
      line-height: 46px;
      margin-bottom: 20px;
  }
  .prior-desc-detail{
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
  }
  .prioir-item{
      margin-top: 140px;
      display: flex;
  }
  .prioir-item > img{
      margin-right: 150px;
      width: 250px;
      height: 250px;
  }
  .prior-item-title{
      color: var(--blue-1);
      font-family: Gotham;
      font-size: 30px;
      font-weight: 700;
      line-height: 29px;
  }
  .prior-item-detail{
      color: var(--black-4);
      font-size: 18px;
      font-weight: 400;
      line-height: 27px;
      margin-top: 30px;
  }
  
/* Certification Section Styles */
#cert-wrapper {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 40px 20px;
    position: relative;
    background-color: var(--white);
    background-image: url(../images/cert-bg.png);
    background-repeat: no-repeat;
    background-position-x: left;
    margin-bottom: 60px;
    overflow: hidden;
  }
  
  .cert-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 46px;
    text-align: center;
    font-family: Gotham;
    margin-bottom: 40px;
    color: var(--black-1);
  }
  
  .cert-carousel {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 -10px;
  }
  
  .cert-carousel::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--main-green), transparent);
    border-radius: 3px;
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
  }
  
  /* Hide the indicator when hovering over the carousel */
  .cert-carousel:hover::after {
    opacity: 0;
  }
  
  .cert-list-container {
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
  }
  
  .cert-list {
    display: flex;
    gap: 30px;
    padding: 10px;
    will-change: transform;
  }
  
  .cert-item {
    min-width: 140px;
    flex-shrink: 0;
    text-align: center;
    transition: transform 0.3s ease;
  }
  
  .cert-card {
    position: relative;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .cert-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
  
  .cert-card img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    padding: 15px;
    transition: transform 0.3s ease;
  }
  
  .cert-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(86, 173, 63, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .cert-overlay span {
    color: white;
    font-weight: 600;
    padding: 5px 15px;
    border: 2px solid white;
    border-radius: 20px;
  }
  
  .cert-card:hover .cert-overlay {
    opacity: 1;
  }
  
  .cert-card:hover img {
    transform: scale(1.05);
  }
  
  .cert-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--grey);
    margin-top: 10px;
    min-height: 60px;
    overflow: hidden;
  }
  
  .cert-scroll-indicator {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  
  .cert-scroll-track {
    width: 60%;
    height: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
    position: relative;
  }
  
  .cert-scroll-thumb {
    position: absolute;
    height: 100%;
    width: 20%;
    background-color: var(--main-green);
    border-radius: 2px;
    left: 0;
    transition: left 0.3s ease, width 0.3s ease;
  }
  
/* Modal styles - improved centering and height for desktop */
#certModal .modal-dialog,
#imageModal .modal-dialog {
  position: fixed !important;
  top: 50% !important; /* Center vertically */
  left: 50% !important; /* Center horizontally */
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: 90% !important;
  max-width: 90% !important;
  max-height: 90vh;
}

#certModal .modal-content,
#imageModal .modal-content {
  background-color: transparent;
  border: none;
  width: 100%;
  height: auto;
}

#certModal .modal-body,
#imageModal .modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  height: auto;
}

#certModalImage,
#modalImage {
  max-height: 80vh; /* Increased from 70vh for larger display */
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

/* Ensure the close button is visible and properly positioned */
#certModal .btn-close,
#imageModal .btn-close {
  background-color: white;
  opacity: 0.8;
  padding: 0.5rem;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1056;
  position: absolute;
  top: 10px;
  right: 10px;
}

#certModal .btn-close:hover,
#imageModal .btn-close:hover {
  opacity: 1;
}

/* Desktop-specific modal improvements */
@media screen and (min-width: 769px) {
  #certModal .modal-dialog,
  #imageModal .modal-dialog {
    max-width: 80% !important; /* Slightly narrower on desktop for better aesthetics */
  }
  
  #certModalImage,
  #modalImage {
    max-height: 85vh; /* Allow more height on desktop */
  }
}

/* Mobile-specific modal adjustments */
@media screen and (max-width: 768px) {
  #certModal .modal-dialog,
  #imageModal .modal-dialog {
    top: 50% !important; /* Center on mobile too */
    left: 50% !important;
    width: 95% !important;
    max-width: 95% !important;
  }
  
  #certModalImage,
  #modalImage {
    max-height: 75vh;
  }
  
  #certModal .btn-close,
  #imageModal .btn-close {
    top: 5px;
    right: 5px;
    padding: 0.4rem;
  }
}
  
  /* Override any Bootstrap modal inline styles */
  .modal {
    padding: 0 !important;
  }
}
    
  /* Responsive styles */
  @media screen and (max-width: 768px) {
    #cert-wrapper {
      padding: 30px 10px;
    }
    
    .cert-title {
      font-size: 32px;
      margin-bottom: 30px;
    }
    
    .cert-nav {
      width: 35px;
      height: 35px;
    }
    
    .cert-item {
        min-width: calc(50% - 15px);
    }
    
    .cert-card img {
      height: 100px;
    }
    
    .cert-name {
      font-size: 12px;
      height: auto;
    }
    
    .cert-scroll-track {
      width: 80%;
    }
      /* Enable native touch scrolling on mobile */
  .cert-list-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px; /* Add padding for scrollbar */
  }
  .cert-list {
    transform: none !important; /* Disable JS transform on mobile */
    flex-wrap: nowrap;
  }
  
  .cert-item {
    scroll-snap-align: start;
  }
  
  /* Hide scroll indicator on mobile since we're using native scrolling */
  .cert-scroll-indicator {
    display: none;
  }
  
  /* Hide the animation indicator on mobile */
  .cert-carousel::after {
    display: none;
  }
  }
  
  @media screen and (max-width: 480px) {
    .cert-carousel {
      margin: 0;
    }
    
    .cert-item {
      min-width: 100px;
    }
    
    .cert-card img {
      height: 80px;
      padding: 10px;
    }
    
    .cert-nav {
      width: 30px;
      height: 30px;
      font-size: 12px;
    }
  }
  
  
  /* resp start */
  #resp-wrapper{    
      background-color: var(--white);
      background-image: url(../images/csrImage.jpeg);
      box-sizing: border-box;
      border-radius: 20px;
      color: var(--white);
      text-align: center;
      padding: 50px 0;
      margin-top: 70px;
      margin-bottom: 80px;
      width:755px;
  }
  .resp-title{
      font-family: Gotham;
      font-size: 48px;
      font-weight: 700;
      line-height: 46px;
  }
  .resp-desc{
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;
      width: 560px;
      margin: 40px auto;
  }
  .resp-button {
      background-color: var(--main-green);
      color: var(--white);
      border-radius: 5px;
      font-size: 16px;
      font-weight: 700;
      line-height: 19px;
      text-align: center;
      padding: 15px 60px;
      border: none;
      cursor: pointer;
      transition:0.3s;
  }
  .resp-button:hover {background-color: var(--black-1);color:var(--white);text-decoration:none}
  /** **/
  
  /** Contact **/
  
  /** end **/
  
  /** Slider **/
  
  /* click slide start */
  .maillink {color:var(--white);text-decoration:underline;}
  .maillink:hover {color:var(--main-green)}
  
  #click-slider-wrapper{
      color: var(--white);
  }
  .click-slide-item{
      height: 230px;
      box-sizing: border-box;
      margin-bottom: 6px;
      background-size: cover;
      background-repeat: no-repeat;
      z-index: 1;
      cursor: pointer;
      position: relative;
      overflow:hidden;
      transition: ease 1s height;
  }
  .click-slide-title{
      opacity: 1;
      font-family: Gotham;
      font-size: 40px;
      font-weight: 700;
      line-height: 48px;
      text-align: center;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      transition: ease 1s opacity;
  }
  .click-slide-content{
      opacity: 0;
      transition: ease 1s opacity;
  }
  .click-slide-sub-title{
      font-size: 18px;
      font-weight: 700;
      line-height: 27px;
      text-align: center;
      margin-bottom: 40px;
      position:relative;
  }
  .click-slide-desc{
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;
      /*text-align: center;*/
      max-width: 1000px;
      margin: 0 auto;
  }
  .click-slide-item.active{
      height: 550px;
      z-index: 2;
  }
  .active .click-slide-title{
      opacity: 0;
  }
  .active .click-slide-content{
      opacity: 1;
      position: relative;
      top: 50%;
      transform: translateY( calc( -50% - 50px ) );
  }
  .csr-sli-zer.active {
      background-image:url("../images/csr/cs-1.jpeg")!important;
  }
  .csr-sli-bus.active {
      background-image:url("../images/csr/cs-3.jpg")!important;
  }
  .csr-sli-ant.active {
      background-image:url("../images/csr/cs-2.jpg")!important;
  }
  .csr-sli-law.active {
    background-image:url("../images/csr/cs-5.jpg")!important;
}
  .click-slide-desc ul {
      padding-left: 20px;
      margin: 10px 0;
      list-style:disc;
      text-align: left;
  }

  .click-slide-desc ul li {
    margin: 10px 0;
    text-align: left;
    display: list-item; /* Ensure it displays as a list item */
    line-height: 1.5;
    padding-left: 20px;

}

.click-slide-desc ul.policy-list {
    padding-left: 20px !important;
    margin: 10px 0 !important;
    list-style: disc !important;
    text-align: left !important;
}

.click-slide-desc ul.policy-list li {
    display: list-item !important;
    text-align: left !important;
    margin-bottom: 8px !important;
}

  /** **/
  
  /** CSR **/
  
  #page-desc-wrapper .page-title{
      margin: 30px auto 0;
  }
  
  /* csr details starts */
  #csr-detail-wrapper{
      margin: 60px auto;
      box-sizing: border-box;
  }
  .csr-desc-1{
      margin-bottom: 80px;
  }
  .csr-title-1 h2{
      font-family: Gotham;
      font-size: 25px;
      font-weight: 700;
      line-height: 24px;
      margin-bottom: 30px;
      color: var(--black-1);
  }
  .csr-content-1 p{
      font-size: 21px;
      font-weight: 400;
      line-height: 42px;
      text-align: justify;
      color: var(--grey);
  }
  .csr-desc-2{
      margin-bottom: 70px;
  }
  .csr-title-2 h1{
      font-family: Gotham;
      font-size: 40px;
      font-weight: 700;
      line-height: 48px;
      text-align: center;
      margin-bottom: 50px;
      color: var(--black-1);
  }
  .csr-content-wrapper{
      display: flex;
  }
  .csr-content p{
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;
      text-align: justify;
      color: var(--grey);
  }
  
  .csr-desc-3,.career-open-detail{
      text-align: center;
      border: 1px solid black;
      border-left: none;
      border-right: none;
      padding: 20px 0;
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;
      color: var(--grey);
      width:100%;
  }
  .csr-desc-3 a{
      color: var(--main-green);
  }
  .csr-desc-3 a:hover{
      color: var(--main-green);
      text-decoration:none
  }
  .contact-title h1 {
      font-family: Gotham;
  font-weight: 700;
  padding-bottom:25px;
  }
  .contact-title.center {
      text-align:center;
  }
  .career-open-detail {
      text-align: justify;
      padding: 10px;
      overflow: hidden;
      margin-top:70px;
  }
  .career-open-detail .open-btn.green-btn {
      text-align: right;
      float: right;
  }
  .mym-open-title {
      font-size:24px;
      color: var(--grey);
      font-weight:700;
  }
  /* chart starts */
  #chart-wrapper{
      margin-top: 100px;
  }
  .chart-title{
      font-family: Gotham;
      font-size: 40px;
      font-weight: 700;
      line-height: 48px;
      text-align: center;
      color: var(--black-1);
  }
  .car-slide {
      height: 160px;
  }
  .car-comm.active {
      background-image: url(../images/career/ca-1.jpg) !important;
  }
  .car-coll.active {
      background-image: url(../images/career/ca-2.jpg) !important;
  }
  .car-commit.active {
      background-image: url(../images/career/ca-3.jpg) !important;
  }
  .car-consi.active {
      background-image: url(../images/career/ca-4.jpg) !important;
  }
  .car-care.active {
      background-image: url(../images/career/ca-5.jpg) !important;
  }
  .cons-slide.active {
      
  }
  .car-slide .click-slide-sub-title {
      font-family:Gotham;
      font-size:40px;
      font-weight:600;
      position:relative;
  }
  .cons-slide p {
      margin-bottom:10px;
  }
  .car-slide ul {
      list-style-type:none;
  }
  .click-slide-sub-title:after {
      position: absolute;
      content: '';
      width: 100px;
      bottom: -22px;
      height: 2px;
      background: #fff;
      left: 47%;
  }
  
    .click-slide-sub-title:after {
      position: absolute;
      content: '';
      width: 100px;
      bottom: -22px;
      height: 2px;
      background: #fff;
      left: 47%;
  }
  
  @media screen and (max-width: 768px) {
	 .click-slide-sub-title:after {
      position: absolute;
      content: '';
      width: 100px;
      bottom: -22px;
      height: 2px;
	  background: #fff;
      left: 39%; }
  }

  /* CSR Policy Buttons */
.csr-policy-buttons {
    margin-top: 20px;
    text-align: center;
}

.csr-policy-buttons .green-btn {
    margin: 5px;
    display: inline-block;
    text-decoration: none;
    font-size: 12px;
    padding: 8px 12px;
    line-height: 1.2;
}

/* Mobile specific styles for CSR buttons */
@media screen and (max-width: 768px) {
    .csr-policy-buttons {
        margin-top: 15px;
        text-align: center;
    }
    
    .csr-policy-buttons .green-btn {
        display: block;
        width: 90%;
        margin: 8px auto;
        font-size: 11px;
        padding: 10px 8px;
        text-align: center;
        box-sizing: border-box;
    }
    
    /* Adjust the click slide content height for mobile */
    .click-slide-item.active {
        height: auto;
        min-height: 550px;
    }
    
    .click-slide-desc {
        font-size: 11px;
        max-width: 100%;
        padding: 8px;
        line-height: 1.4;
    }
    
    .active .click-slide-content {
        position: relative;
        top: 20px;
        transform: none;
        padding: 10px;
    }
}

@media screen and (max-width: 480px) {
    .csr-policy-buttons .green-btn {
        font-size: 10px;
        padding: 8px 6px;
        margin: 6px auto;
    }
    
    .click-slide-item.active {
        min-height: 600px;
    }
}

  .mym-sec-detail {
      padding-top: 50px;
  }
  .role-loca {
      font-weight:600;
      font-size:16px;
      margin-bottom:15px;
  }
  .role-loca select{
      padding:10px;
      border:1px solid #8a898975;
      border-radius:5px;
      min-width:220px;
  }
  .mym-opening-list {
      margin: 50px 0;
  }
  .mym-opening-list h3 {
      font-size:30px;
      font-weight:700;
      width: 100%;
      line-height: 45px;
      padding-left:5px;
      padding-top:25px;
  }
  .mym-opening-list .col-md-5{
      padding-left:5px; 
  }
  .mym-opening-list p{
      color:var(--grey);
      font-size:18px;
      line-height:27px;
      text-align:justify;
  }
  .mym-job-detail ul{list-style:none;}
  .mym-job-detail ul li {
      font-weight:700;
      font-size:21px;
      line-height:32px;
  }
  .mym-job-detail ul li span {margin-left:5px;}
  .mym-opening-list .green-btn {
      width: 175px;
      height: 50px;
      float: right;
  }
  .mym-opening-list .row{
      border-bottom: 1px solid #00000040;
  }
  .mym-opening-list .row:last-child {border:none}
  .bg-lig-green {
      background:var( --light-green);
  }
  .mym-enquiry-form {
      width:812px;
      padding:120px 0;
      margin:0 auto;
  }
  .mym-enquiry-form h2 {
      text-align:center;
      font-family:Gotham;
      font-weight:700;
      font-size:48px;
      margin-bottom:55px;
  }
  .mym-enquiry-form label {
      display:block;
      font-size:16px;
      line-height:19px;
      font-weight:600;
      margin-bottom: 14px;
  }
  .mym-enquiry-form input,.mym-enquiry-form select,.mym-enquiry-form textarea {
      background:#fff;
      padding:10px;
      width:100%;
      border: 1px solid rgba(138, 137, 137, 0.2);
      border-radius: 6px;
      margin-bottom:32px;
      
  }
  .mym-enquiry-form textarea {
      resize:none;
      min-height:170px;
  }
  .enq-form .green-btn {
      width:200px;
      height:50px;
  }
  .mym-contact-address h3{
      font-family:Gotham;
      font-size:40px;
      line-height: 38px;
      font-weight: 700;
      margin:170px 0 45px;
  }
  .mym-contact-address ul {
      list-style:none;
      padding:0;
      margin:0;
  }
  .mym-contact-address ul li,.mym-contact-address ul li a {
      color: #656161;
      font-size:16px;
  }
  .cont-map {margin-top:80px}
  /** **/
  .navbar-toggler.collapsed .my-1.mx-2.close {display:none;}
  
  /* insta icon*/

.insta-icon.small {
  --insta-icon-size: 51.8px;
}
.insta-icon {
  --insta-icon-size: 128px;
}
.insta-icon.large {
  --insta-icon-size: 256px;
}
.insta-icon {
  position: relative;
  top: 4px;
  left: 4px;
  width: var(--insta-icon-size);
  height: var(--insta-icon-size);
  border-radius: 50%;
  background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf)
}
  
  /* discuss-something */
  #sec-home-discuss{
      background-color: var(--light-green);
      padding: 40px 60px;
      box-sizing: border-box;
      margin-top: 70px;
      border-radius: 10px;
  }
  .sec-discuss-content{
      float: left;
  }
  .sec-discuss-title{
      font-family: Gotham,sans-serif;
      font-size: 48px;
      font-weight: 700;
      line-height: 55px;
      text-align: left;
      margin-bottom: 20px;
      color: var(--black-1);
  }
  .sec-discuss-form-title{
      font-size: 16px;
      font-weight: 400;
      line-height: 19px;
      color: var(--black-1);
  }
  .sec-discuss-form-wrapper{
      margin-top: 14px;
  }
  #discuss-select{
      height: 40px;
      width: 250px;
      padding: 10;
      border-radius: 5px;
      color: var(--black-2);
      font-size: 14px;
      font-weight: 700;
      line-height: 17px;
      text-align: left;
      margin-right: 16px;
      border: none;
      cursor: pointer;
  }
  #discuss-select *{
      padding: 10;
      border-radius: 5px;
      border: none;
      font-size: 14px;
      font-weight: 700;
      line-height: 17px;
  }
  .sec-discuss-form-wrapper input{
      height: 40px;
      width: 250px;
      padding: 10px 20px;
      border-radius: 5px;
      color: var(--black-2);
      margin-right: 16px;
      border: none;
      font-size: 16px;
      font-weight: 400;
      line-height: 19px;
  }
  #discuss-button{
      height: 40px;
      width: 250px;
      padding: 10;
      border-radius: 5px;
      color: var(--white);
      border: none;
      background-color: var(--main-green);
      font-size: 16px;
      font-weight: 700;
      line-height: 19px;
      text-align: center;
      cursor: pointer;
      transition: all 0.15s ease-in-out 0s;
      -webkit-transition: all 0.15s ease-in-out 0s;
  }
  #discuss-button:hover{background-color: var( --black-1);}
  .discuss-img{
      float: right;
  }
  
  /** **/
  
  
  /* Footer */
  nav.bg-light {
      background-color: #ffffff!important;
  }
  footer{
      background-color: var(--white-3);
      color: var(--black);
      padding:50px;
      position: relative;
  }
  
  #sub-footer-1{
      display: flex;
  }
  .footer-addres > div{
	  width: 65%;
	  font-family :inter;
	  padding: 1px;
      margin: 10px 0;
      font-weight: 400;
      line-height: 20px;
	  text-align:justify;
	  font-size: 14px;
	  text-justify: distribute;
      text-align-last: left;
  }
  .footer-link, .footer-about, .footer-follow{
	  padding:1px;
      
      display: block;
  }
  .foooter-list-title{
      color: var(--green-1);
      font-size: 22px;
      font-weight: 600;
      line-height: 21px;
  }
  
  .foooter-list-item:hover,.footer-right a:hover{
      color: var(--black);
      text-decoration:none;
      padding-left:10px;
  }
  .ins-icon:hover {
      padding-left:40px;
  }
  .foooter-list-item{
      font-size: 14px;
      font-weight: 400;
      line-height: 17px;
      color: var(--black);
      text-decoration: none;
      display: block;
      margin: 10px 0;
      transition: all 0.3s ease-in-out 0s;
      -webkit-transition: all 0.3s ease-in-out 0s;
  }
  #sub-footer-2{
      margin-top: 60px;
      flex-direction: inherit !important;
  }
  .footer-copy span{
      font-family: inter;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #acaaaa;
  }
  .footer-right a{
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color:#ffffff;
      margin-left:35px;
  }
  .text-before-icon{
      background-repeat: no-repeat;
      padding-left: 30px;
      line-height: 20px;
  }
  .fb-icon{
      background-image: url('../images/fb.png');
      display:block;
  }
  .twit-icon{
      background-image: url('../images/twit.png');
      display:block;
  }
  .ins-icon{
      background-image: url('../images/insta.png');
      display:block;
  }
  .linkedin-icon{
      background-image: url('../images/Linkedin.png');
      display:block;
  }
  
  /** **/
  
  
  
  /* header starts */
  header{
      position: static;
      width: 100%;
      height: 20px;
      top: 0;
      z-index: 10;
  }
  .top-header{
      background-color: var(--main-green);
      min-height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: var(--white);
  }
  .top-header *{
      font-weight: 700;
      font-size: 10px;
      line-height: 16px;
  }
  .head-phone{
      float: left;
      background-image: url('../images/call-head.png');
      height: 15px;
      margin-top: 2px;
  }
  .head-lang{
      float: right;
      background-color: var(--white);
      color: var(--main-green);
      border-radius: 3px;
      padding: 2px;
  }
  .head-lang > span{
      padding: 1px 12px;    
      border-radius: 3px;
      cursor: pointer;
  }
  .head-lang > span.active{
      padding: 2px 12px;
      background-color: var(--main-green);
      color: var(--white);
  }
  .mym-menu{
      background-color: var(--white);
      min-height: 80px;
      box-sizing: border-box;
      padding:10px;
	  z-index: 1000;
  }
  
  .nav-link.active-menu,.nav-link:hover{
      background-color: var(--main-green);
      color: var(--white) !important;
     border-radius: 5px;
      transition:0.3s;
  }
  a.nav-link {
      color:#656161;
      font-size:16px;
      margin:0 2px;
  }
  .nav-link:last-child{margin-right:2;}
  .navbar.navbar-expand-lg  {padding-left:0;padding-right:0}
  
  .darkHeader {
     box-shadow: 0px 3px 5px -2px rgb(122 120 120);
  }
  
  /** **/
  
  
  /* Banner starts */
  #banner-scroll-wrapper{
      /* height: 100vh;
      overflow: hidden;
      height: 100%;
      position: fixed;
      width: 100%;
      top: 120px; */
      margin-top: 120px;
      z-index: 2;
  }
  .banner-wraper{
      height: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      color: var(--white);
      /* position: relative;     */
      position: sticky;
      top:120px;
      /*background-image: linear-gradient(89.88deg, rgba(0, 0, 0, 0.6) 3.39%, rgba(0, 0, 0, 0) 79.56%), url(../images/banner-1.png);*/
  }
  /*#banner-2{
      background-image: linear-gradient(89.88deg, rgba(0, 0, 0, 0.6) 3.39%, rgba(0, 0, 0, 0) 79.56%), url(../images/banner-2.png);
  }
  #banner-3{
      background-image: linear-gradient(89.88deg, rgba(0, 0, 0, 0.6) 3.39%, rgba(0, 0, 0, 0) 79.56%), url(../images/banner-3.png);
  }*/
  #banner-4{
      background-color: white;
      height: auto;
      position: relative;
      padding-bottom: 200px;
  }
  #banner-scroll-wrapper video {
      width:100%;
      
  }
  .banner-content{
      display: none;
      max-width: 500px;
      position: absolute;
      top: 48%;
      transform: translateY(-50%);
      left: 5%;
  }
  .banner-title{
      font-family: Gotham;
      font-size: 68px;
      font-weight: 700;
      line-height: 78px;
      margin-bottom: 30px;
  }
  .banner-desc{
      font-size: 30px;
      font-weight: 400;
      line-height: 40px;
  }
  .banner-desc > span{
      font-style: italic;
      cursor: pointer;
  }
  .banner-skip{
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      position: absolute;
      left: calc( 50% - 50px );
      bottom: 160px;
      cursor: pointer;
      z-index:1;
  }
  .banner-count{
      position: absolute;
      right: 20px;
      top: 50%;
      z-index:1;
      list-style-type: none;
  }
  .banner-count > li{
      width: 15px;
      height: 15px;
      background-color: var(--grey-3);
      margin: 10px;
      border-radius: 10px;
      cursor: pointer;
  }
  .banner-count > li.active{
      background-color: var(--main-green);
  }
  
  /* home-about */
  .about-info{
      padding: 80px;
      margin-top: 50px;
  }
  
  .sec-title{
      font-family: Gotham;
      color: var(--black-1);
      font-size: 48px;
      font-weight: 700;
      margin-bottom: 30px;
  }
  .sec-desc{
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;
      text-align: justify;
      color: var(--grey);
  }
  .sec-more a{
      font-size: 16px;
      font-weight: 700;
      line-height: 32px;
      text-align: left;
      padding-top: 10px;
      color: var(--main-green);
      cursor: pointer;
  }
  .sec-more a:hover {
       color: var(--main-green);
       text-decoration:none;
  }
  
  
  /* home-statics */
  .mym-our-company{
      background-color: var(--light-green);
      padding: 80px 0;
  }
  
  .sec-statics-num{
      font-family: Gotham;
      font-size: 50px;
      font-weight: 700;
      line-height: 48px;
      text-align: center;
      color: var(--main-green);
      padding-bottom: 20px;
  }
  .sec-statics-name{
      font-family: Arial;
      font-size: 14px;
      font-weight: 700;
      line-height: 16px;
      text-align: center;
      color: var(--grey);
  }
  
  
  
  /** **/
  
  
  #page-desc-wrapper{
      background-image: url(../images/page-desc.png);
      background-color: var(--blue-1);
      background-repeat: no-repeat;
      background-position: right;
      padding: 34px;
      color: var(--white);
      margin-top:120px;
  }
  .breadcrumb-sec .breadcrumb{
      color: var(--grey-3);
      font-size: 10px;
      background-color: transparent;
  }
  .breadcrumb-item  a{
      color: var(--grey);
      text-decoration: none;
      font-size: 12px;
      font-weight: 500;
      line-height: 18px;
      background-color: var(--white);
      border-radius: 10px;
      padding: 3px 10px;
      margin: 0 5px;
  }
  .breadcrumb-item.active a{
      color: var(--white);
      background-color: var(--main-green);
      font-weight: 700;
  }
  .page-title{
      font-family: Gotham;
      font-size: 51px;
      font-weight: 700;
      line-height: 68px;
      margin-top: 40px;
  }
  .page-desc{
      font-family: Gotham;
      font-size: 20px;
      font-weight: 700;
      line-height: 40px;
      margin-top: 10px;
      display:none;
  }
  .mym-page-sub-title {
      padding:100px 0 24px;
      font-family:Gotham;
      font-size:40px;
      font-weight:700;
      line-height:38px;
  }
  .mym-tech-serv h3 {
      font-family: 'Gotham';
      font-weight: 700;
      font-size: 32px;
      line-height: 44px;
      margin-bottom:25px;
  }
  .mym-tech-serv span {
      font-family: 'Gotham';
      font-weight: 700;
      font-size: 18px;
      line-height: 23px;
      margin-bottom: 7px;
      display: block;
  }
  .mym-tech-serv p {
      font-weight: 400;
      font-size: 16px;
      line-height: 28px;
      text-align: justify;
      color: #656161;
  }
  .mym-enq-btn {
      font-weight: 700;
      font-size: 16px;
      line-height: 19px;
      float:right;
      transition:0.3s;
      color:var(--main-green);
  }
  .mym-enq-btn:hover {
      color:var( --black-1);
  }
  .mym-tech-serv {
      padding-bottom:60px;
  }
  
  .modal-dialog .modal-body{
      padding: 0;
  }
  .mym-job-app-name {
      width: 30%;
      display: inline-block;
      vertical-align: top;
      background: #fdd;
      padding: 30px;
      background:#132843;
  }
  .mym-job-app-name h4 {
      color:var(--main-green);
      font-weight: 400;
      font-size: 30px;
      line-height: 45px;
  }
  .mym-job-app-name ul{
      list-style:none;
      padding:0;
      margin:0;
  }
  .mym-job-app-name ul li {
      font-weight: 700;
      font-size: 21px;
      line-height: 32px;
      color:#fff;
  }
  .mym-job-app-form {
      width: 66%;
      display: inline-block;
      padding: 30px;
      background: #F5F5F5;
  }
  .mym-job-app-form label {
      display: block;
      font-size: 16px;
      line-height: 19px;
      font-weight: 600;
      margin-bottom: 14px;
  }
  .mym-job-app-form input, .mym-job-app-form select, .mym-job-app-form textarea {
      background: #fff;
      padding: 10px;
      width: 100%;
      border: 1px solid rgba(138, 137, 137, 0.2);
      border-radius: 6px;
      margin-bottom: 32px;
  }
  .mym-job-app-form textarea {
      resize: none;
      min-height: 110px;
  }
  .modal-body {
      display:flex;
      background:#f5f5f5;
  }
  .footer-right {
      display: none;
  }
  #banner-1:before,#banner-2:before,#banner-3:before {
      background-image: url(../images/bg-op.png);
      height: 100%;
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      right: 0;
      background-repeat: no-repeat;
      background-size: cover;
  }
  .csr-img-desc {
      position: relative;
      max-width: 923px;
      margin: 0 auto;
  }
  .image-hover-cnt {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      text-align: center;
      width: 100%;
  }
  
  .balan-hel {
      position: absolute;
      text-align: center;
      top: 130px;
      right: 180px;
	  transform: rotate(-35deg);
	  height: 70px;
  }
  .balan-hel-des {
      opacity: 1; 
      width: 177px;
      left: 140px;
	  top:26px;
      position: relative;
      background: #289a4a;
      transform: rotate(35deg);
  } 
  
  @media screen and (max-width: 780px) {
  .balan-hel .balan-hel-des {
    opacity: 1;
  }
}
	  
  .gen-equ-cnt {
      position: absolute;
      text-align: center;
      top: 286px;
      right: 155px;
      height: 78px;
  }
  .gen-equ{
      opacity: 1; 
      width: 190px;
      left: 174px;
	  top:-19px;
      position: relative;
      background: #ef4229
  }
  .mym-car-env {
      position: absolute;
      text-align: center;
      top: 421px;
      right: 255px;
      height: 90px;
      transform: rotate(47deg);
	  width: 110px;
  }
  .env-cnt {
      opacity: 1; 
      width: 215px;
      left: 126px;
      position: relative;
      background: #fcbd01;
      transform: rotate(-47deg);
      top: -97px;
	  bottom: 47px;
  }
  .mym-car-envinom {
      position: absolute;
      text-align: center;
      top: 480px;
      right: 384px;
      height: 74px;
      transform: rotate(90deg);
  }
  .env-cnt-li {
      opacity: 1; 
      width: 150px;
      top: -9px;
      left: 115px;
      position: relative;
      background: #f66c23;
      transform: rotate(-90deg);
	
  }
  .mym-car-reduc {
      position: relative;
      text-align: center;
      top: 372px;
      left: 205px;
      height: 66px;
      transform: rotate(-27deg);
	  width: 126px;
	  padding-right: 125px;
  }
  .reduc-cnt-li {
      opacity: 1; 
      width: 152px;
      left: -168px;
      position: relative;
      background: #ca8d24;
      transform: rotate(27deg);
      top: 33px;
	  height: 110px;
  }
  .mym-car-rawmat {
      position: absolute;
      text-align: center;
      top: 297px;
      left: 186px;
      height: 61px;
      transform: rotate(-7deg);
	  width: 124px;
  }
  .raw-cnt-li {
      opacity: 1; 
      width: 188px;
      left: -195px;
      position: relative;
      background: #47773d;
	  top: -51px;
	  transform: rotate(7deg);
  }
  .balan-hel:display .balan-hel-des,.gen-equ-cnt:display .gen-equ,.mym-car-env:display .env-cnt,
  .mym-car-envinom:display .env-cnt-li,.mym-car-reduc:display .reduc-cnt-li,.mym-car-rawmat:display .raw-cnt-li{opacity:1;transition:0.5s}
  .img-hov-li h4 {font-size:16px;color:#fff;font-weight:700;padding:5px;}
  .img-hov-li p {font-size:14px;padding:0 5px 10px;color:#fff}
  
  .dis-pro-btn {display:none}
  .pro-fig-desc {min-height: 85px}
  .mym-tech-ser {min-height:530px;}
  
  
   a[href="blog.html"] {
      display:none;
  }
  .mym-prod-select {
      padding:65px 0;
  }
  .mym-prod-select label {
      display:block;
      font-weight:600;
      margin-bottom:15px;
  }
  .mym-prod-select .btn{
      float:left;
      background:#d6d5d5;
      min-width:50%;
      height:40px;
      color:#132843;
      border-color:#8A8989;
      
  }
  .homelife-btn {
      border-top-left-radius:0;
      border-bottom-left-radius:0;
      margin-left:-5px;
      border-left:none;
      
  }
  .btn.active-btn {
      background:#132843;
      color:#fff;
      border-radius: 6px !important;
      position: relative;
  }
  .mym-prod-select select{
      border: 1px solid #8A8989;
      border-radius: 6px;
      min-width:100%;
      height:40px;
      padding:5px;
  }
  button.filter-bnt.green-btn {
      margin-top: 38px;
      min-width: 200px;
  }
  .pro-fig-desc h3{
      font-weight: 700;
      font-size: 18px;
      line-height: 25px;
      padding: 23px 23px 10px;
  }
  .pro-fig-desc p {
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
      color: #656161;
      padding:0 0 23px 23px;
  }
  .mym-pro-tham-img {
      position:relative;
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.06);
  border-radius: 5px;
  }
  .inter-txt {
      position: absolute;
      right: 15px;
      top: 15px;
      background: var(--main-green);
      border-radius: 8px;
      display: block;
      color: #fff;
      padding: 2px 10px;
      box-sizing: border-box;
      font-size: 12px;
  }
  .ext-text {
      background:#EE6637;
  }
  
  
  #btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}

  #myCarousel .list-inline {
      white-space:nowrap;
      overflow-x:auto;
  }
  
  #myCarousel .carousel-indicators {
      position: absolute;
      left: initial;
      width: initial;
      margin-left: initial;
      bottom: 180px;
      z-index: 1;
  }
  
  #myCarousel .carousel-indicators > li {
      width: initial;
      height: initial;
      text-indent: initial;
      border:2px solid transparent;
  }
  /*#myCarousel .carousel-indicators > li.active {border:2px solid #3d9368;}*/
  
  #myCarousel .carousel-indicators > li.active img {
      opacity: 0.7;
  }
  #myCarousel .carousel-control-prev {
      left: 75%;
  }
  #myCarousel .carousel-control-next,#myCarousel .carousel-control-prev {
      top:80%;
      font-size: 12px;
  }
  #myCarousel .carousel-control-next-icon, #myCarousel .carousel-control-prev-icon {
      width: 15px;
      height: 15px;
  }
  .sli-act-pro-desc {
      position:absolute;
      bottom:0;
      width:100%;
      background:rgba(0, 0, 0, 0.6);
      color:#fff;
      padding:25px ;
  }
  .sli-act-pro-desc h4 {
      font-family:Gotham;
      font-size:36px;
  }
  .mym-pro-details-cnt {
      padding-top:90px;
  }
  .mym-prod-enq-dig {
      background: #fff;
      border-radius: 10px;
      padding: 10px;
  }
  .mym-prod-enq-dig span {
      background:var(--main-green);
      color:#fff;
      border-radius:10px;
      display:inline-block;
      font-size: 12px;
      padding: 3px 10px;
  }
  .mym-prod-enq-dig h6 {
      font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  }
  .pro-dig-left h4 {
      font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 37px;
  color:#fff;
  border-bottom:1px solid #fff;
  padding-bottom: 25px;
      margin-bottom: 32px;
  
  }
  .pageloader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../images/loader.gif') 50% 50% no-repeat rgb(249, 249, 249);
    opacity: .8;
  }
  .mym-pro-tham-img figure {
      min-height: 192px;
  }
  .slide-in-left {
      animation-name: moveInleft;
      animation-duration: 2s;
  }
  .slide-in-right {
      animation-name: moveInRight;
      animation-duration: 2s;
  }
  @keyframes moveInleft {
      0% {
          opacity: 0;
          transform: translateX(-100px);
      }
  
      80% {
          transform: translateX(10px);
      }
      100% {
          opacity: 1;
          transform: translate(0);
      }
  }
  
  @keyframes moveInRight {
      0% {
          opacity: 0;
          transform: translateX(100px);
      }
  
      80% {
          transform: translateX(-10px);
      }
      
      100% {
          opacity: 1;
          transform: translate(0);
      }
  
  }
  
  /** **/
  
  @media screen and (max-width: 1200px) {
      body{font-size:14px;}
      .page-title {font-size: 34px;line-height: 42px;}
      #page-desc-wrapper .page-title {margin: 0px auto 0;font-family: Gotham}
      #page-desc-wrapper {padding: 20px;background-position: initial;}
      .page-desc {font-size:16px;font-weight:normal;line-height:24px;}
      #banner-4{ margin-bottom: -130px; }
    .mym-enquiry-form {width:87%;padding: 50px 0;}
    .mym-enquiry-form h2 {font-size: 32px;margin-bottom: 25px;}
    .mym-enquiry-form label {font-size:14px;}
    .green-btn {font-size:14px;}
    .mym-contact-address h3 {font-size: 24px;line-height: 32px;}
    .mym-contact-address ul li{font-size:14px;}
  
    .foooter-list-item {margin-bottom:7px;}
    .footer-addr p {font-size:15px;text-align: justify; font-family: inter }
    footer {margin-top: 20px;padding: 25px;}
    .footer-right a {margin-left: 0;display:flex;margin-bottom:7px;}
    .sec-title {font-size: 36px;margin-bottom: 10px;}
    .sec-desc {font-size: 13px;line-height: 26px;}
    .sec-statics-num {font-size: 32px;line-height: 36px;padding-bottom: 10px;}
    .sec-statics-wrapper {padding:15px 0;}
    .mym-our-company {padding: 20px 0;}
    .sec-discuss-title {font-size: 32px;line-height: 40px;}
    #sec-home-discuss {padding: 30px 30px;}
    #discuss-text {margin:20px 0}
    #discuss-button,.resp-button {font-size:14px;}
    .discuss-img {float:none;margin-top:15px;display:none;}
    .banner-desc {font-size: 13px;line-height: 20px;}
    .banner-skip {display:none;}
    .banner-title {font-size: 34px;line-height: 40px;margin-bottom:10px}
    .banner-count {right: 0;top: 84%;left: 0;text-align: center;padding:0}
    .banner-count li {display:inline-block;}
    .about-info {padding: 20px;margin-top: 0;}
    .nav-link {padding:6px !important}
    #resp-wrapper {padding: 25px 0;margin: 0px 0 25px; max-width: 100%;}
    .resp-title,.cert-title {font-size: 32px;line-height: 38px;}
    .resp-desc {font-size: 14px;line-height: 26px;margin: 20px auto;width:100%}
    .cert-item {width: 50%;float: left;margin-bottom:20px}
    .cert-list {display: block;}
    #cert-wrapper {overflow:hidden;padding:20px;}
    .story-desc {font-size: 14px;line-height: 26px;padding-right:0;}
    .card-item {padding:30px;margin-bottom:20px;}
    #prior-wrapper {padding: 200px 0;}
    .prior-desc-title {font-size: 36px;line-height: 40px;}
    .prioir-item {margin-top: 50px;padding:10px;}
    .prior-item-title {font-size: 24px;margin-top:15px;}
    .prior-item-detail {font-size: 16px;margin-top: 10px;}
    .prioir-item .col-md-4 {text-align:center;}
    .breadcrumb-item a {margin: 0 0px;}
    .breadcrumb-sec .breadcrumb {padding:7px 0;}
    .role-loca select{margin-bottom:15px;}
    .mym-opening-list p {font-size: 16px;}
    .mym-opening-list h3 {font-size: 26px;}
    .mym-opening-list{margin:0}
    .mym-job-detail ul {padding:0}
    .mym-job-detail ul li {font-size: 16px;line-height: 22px;}
    .mym-opening-list .green-btn {height: 35px;float: none;margin-bottom: 25px;}
    .mym-page-sub-title {padding: 50px 0;font-size: 28px;line-height: 32px;}
    .mym-tech-serv h3 {font-size: 24px;line-height: 30px;margin: 15px 0;}
    .mym-tech-serv span {font-size:18px;}
    .mym-tech-serv p {font-size: 14px;line-height: 26px;}
    .mym-enq-btn {float:none;margin-top: 25px;display: inline-block;}
    .mym-tech-serv {border-bottom: 1px dotted #8c8787;padding-bottom:25px;margin-bottom:25px;}
    .mym-tech-serv .col-md-3 {text-align: center;}
    #csr-detail-wrapper {padding: 0 35px;}
    .csr-content-1 p {font-size: 16px;line-height: 28px;}
    .csr-title-2 h1 {font-size: 32px;line-height: 38px;}
    .csr-desc-1 {margin-bottom: 30px;}
    .click-slide-title {font-size: 32px;line-height: 36px;}
    .chart-title {font-size: 26px;line-height: 34px;}
    #chart-wrapper {margin-top: 50px;}
    .image-hover-cnt {display:none;}
    .mym-prod-select .btn-secondary {margin-bottom:20px;}
    .modal-body {display:block;}
    .mym-job-app-name,.mym-job-app-form {width: 100%;}
    .sli-act-pro-desc h4 {font-size: 16px;}
    .sli-act-pro-desc p {font-size:12px;}
    .pr-next-pro,.pr-next-pro {display:none;}
    #myCarousel .carousel-indicators {bottom: 17px;}
    .mym-menu {padding-top: 14px;}
    a.nav-link {padding: 10px 10px !important;}
	
    .navbar-light .navbar-toggler {border-color: transparent;}
    #banner-1:before, #banner-2:before, #banner-3:before {background-color: #333;z-index: -1;}
    #banner-scroll-wrapper video {max-width:100%;}
    .navbar-light .navbar-toggler {border-color:transparent !important}
    .navbar-nav {margin-top:25px;}
    .scrolled.slide-left {animation: none !important;}
    .js-scroll {opacity: 1;transition: none !important:}
    .scroll-container {height: fit-content !important;}
    #myCarousel {margin-top:120px;}
    .mym-contact-address {overflow: scroll;}
    .click-slide-desc {font-size: 12px;max-width: 100%;padding: 10px;}
    .banner-wraper {top: 10px}
    #banner-1:before, #banner-2:before, #banner-3:before {display:none;}
    
  }
  @media (min-width: 1222px){
      #banner-3:before{
          /*height: 715px*/
      }
  }
  
  @media (min-width: 992px){
  div.modal-lg, .modal-xl {
      max-width: 80%;
  }
  }
  @media (max-width: 1330px){ 
  .mym-job-app-name ul li {
      font-size: 16px;
  }
  }
  
  .scroll-container {
    height: auto;
    
  }
  
  @media screen and (max-width: 650px) {
    .scroll-container,
    .scroll-container:nth-of-type(even) {
      flex-direction: column;
      align-content: inherit;
    }
  
    .scroll-element {
      height: fit-content;
    }
  
    .scroll-element,
    .scroll-caption {
      width: 100%;
    }
  }
  /**Styling scrollable elements*/
  
  .js-scroll {
    opacity: 0;
    transition: opacity 500ms;
  }
  
  .js-scroll.scrolled {
    opacity: 1;
  }
  
  .scrolled.fade-in {
    animation: fade-in 1s ease-in-out both;
  }
  
  .scrolled.fade-in-bottom {
    animation: fade-in-bottom 1s ease-in-out both;
  }
  
  .scrolled.slide-left {
    animation: slide-in-left 1s ease-in-out both;
  }
  
  .scrolled.slide-right {
    animation: slide-in-right 1s ease-in-out both;
  }
  
  
  @keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-100px);
      transform: translateX(-100px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(100px);
      transform: translateX(100px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes fade-in-bottom {
    0% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }