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

html {
    scroll-behavior: smooth;
  }
  
  body {
      font-family: 'Montserrat', sans-serif;
  }
  
  
  *{
      padding: 0;
      margin: 0;
      /* box-sizing: content-box; */
      box-sizing: border-box;
  }
  
  
  
  .justify{
      text-align: justify;
  }
  .center{
      text-align: center;
  }
  .left{
      text-align: left;
  }
  .right{
      text-align: right;
  }
  
  
  /* Header */
  
  header.menu-site {
      position: absolute;
      z-index: 9999;
      width: 100%;
      padding: 40px 10px;
      box-sizing: border-box;
  }
  
  .menu-wrraper {
      max-width: 1600px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  ul.menu-items {
      list-style: none;
      width: fit-content;
  }
  
  li.menu-item {
      display: inline-block;
      padding: 5px 10px;
      text-align: center;
  }
  
  a.menu-item-link {
      padding: 5px 10px;
      font-family: 'Montserrat';
      text-decoration: none;
      color: #fff;
      font-size: 24px;
  }
  
  /* ul.menu-items.menu-left {
      width: calc(45% - 40px);
      margin-left: 40px;
  } */
  
  .logo-site {
      /* width: 15%; */
      margin: 0px 40px;
  }
  
  
  
  
      
  
  ul.menu-items {
      position: relative;
  }
  ul.menu-items:after {
      content: "";
      width: 100%;
      height: 1px;
      background: white;
      position: absolute;
      bottom: -55px;
      left: -40px;
      opacity: 0;
      transition: all .5s;
  }
  ul.menu-items.menu-left::after {
      width: 100%;
  }
  
  /*ul.menu-items.active:after,*/
  ul.menu-items:hover:after {
      opacity: 1;
      left: 0;
  }
  li.menu-item {
      position: relative;
  }
  li.menu-item:after {
      content: "";
      width: 0px;
      height: 50px;
      background: white;
      position: absolute;
      bottom: -60px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      pointer-events: none;
      transition: all .5s;
  }
  /*li.menu-item.active:after,*/
  li.menu-item:hover:after {
      background: white;
      bottom: -55px;
      width: 1px;
      opacity: 1;
      display: block;
  }
  
  
  
  
  
  
  
  
  
  
  /* ==> section Slider */
  
  /*
  section-slider
  bg-slider
  content-slider
  sld-logo
  sld-title
  */
  
  .section-slider{
      position: relative;
      width: 100%;
      height: 800px;
      background: url(../images/bg-slide.png) no-repeat center top;
      background-size: cover;
      background-color: #171b9ade;
      background-blend-mode: hard-light;
      z-index: 9;
  }
  .bg-slider{
      width: 100%;
      height: 900px;
      object-fit: cover;
  }
  .content-slider{
      position: absolute;
      top: 57%;
      left: 51%;
      transform: translate(-50%,-50%);
      width: 100%;
      text-align: center;
      /* margin-top: 130px; */
  }
  h2.sld-title {
      font-family: 'Montserrat';
      color: #fff;
      font-size: 4rem;
      text-transform: uppercase;
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%,-50%);
      font-weight: 500;
  }
  img.sld-logo {
      width: 30vw;
      filter: brightness(0.8);
  }
  h2.sld-title {
      font-family: 'Montserrat';
      color: #fff;
      font-size: 4rem;
      text-transform: uppercase;
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%,-50%);
      font-weight: 500;
      width: 100%;
  }
  
  
  @media screen and (max-width: 1300px) {
      img.sld-logo {
          width: 500px;
      }    
      h2.sld-title {
          font-size: 38px;
      }    
      .logo-site {
          width: fit-content;
          margin: 0 20px;
      }    
      ul.menu-items.menu-right,
      ul.menu-items.menu-left {
          width: fit-content;
      }
  }
  
  @media screen and (min-width: 1025px) {
      .v-mobile{
          display: none;
      }
  }
  @media screen and (max-width: 1024px) {
  
      .v-deskop{
          display: none;
      }
  
      h2.sld-title {
          position: relative;
          transform: none;
          font-size: 7vw;
          left: unset;
          margin-top: 20px;
      }
  
      img.sld-logo {
          width: 40%;
      }
  
      ul.menu-items.menu-mobile {
          text-align: center;
          margin-top: 30px;
      }
  
      .menu-wrraper.v-mobile {
          justify-content: center;
          flex-direction: column;
      }
  
      ul.menu-items.menu-left {
          display: none;
      }
  
      ul.menu-items.menu-right {
          display: none;
      }
  
      .menu-wrraper {
          justify-content: center;
      }
  
  
      section.section-slider {
          height: 950px;
          background: url(../images/bgslidemobile.png);
          background-size: cover;
      }
  
      li.menu-item {
          min-width: 100px;
          margin: 10px 0;
      }
      .content-slider {
          margin-top: unset;
          top: unset;
          transform: translateX(-50%);
          bottom: 5%;
      }
  }
  
  @media screen and (max-width: 800px) {
  
      img.sld-logo {
          width: 50%;
      }
  
  
  
  }
  
  @media screen and (max-width: 600px) {
  
      img.sld-logo {
          width: 65%;
      }
  
      li.menu-item {
          display: block;
          width: 100%;
          background: #182a95b0;
          margin: 2px 0;
      }
  
      .logo-site {
          width: 80px;
      }
  
      .logo-site img {
          width: 100%;
      }
  
      header.menu-site {
          padding: 20px 0px;
      }
  
      ul.menu-items.menu-mobile {
          margin-top: 5px;
          width: 100%;
      }
  
      img.sld-logo {
          width: 70%;
      }
  
      h2.sld-title {
          font-size: 9vw;
      }
  
  }
  
  @media screen and (max-width: 500px) {
      img.sld-logo {
          width: 90%;
      }
  }
  
  @media screen and (max-width: 400px) {
  section.section-slider {
      height: 850px;
  }
  
  }
  @media screen and (max-width: 340px) {
  section.section-slider {
      height: 800px;
  }
  
  }
  
  /* ==> end section Slider */
  
  /* Section 1 */
  
  .section-row{
      max-width: 1500px;
      padding: 20px;
      margin: auto;
      width: calc(100% - 18vw);
  }
  
  
  .section-1 {
      padding: 40px;
      padding-bottom: 60px;
      position: relative;
  }
  
  .section-title {
      padding: 30px 10px;
      padding-bottom: 60px;
  }
  
  .section-1:after {
      content: "";
      width: 700px;
      height: 400px;
      background: url(../images/infobg2.png) right bottom no-repeat;
      background-size: contain;
      position: absolute;
      right: 0;
      bottom: 0;
  }
  
  
  .text-section2 b {
      font-weight: 900;
  }
  
  
  
  
  .head-section{
      font-size: 6rem;
      text-align: center;
      font-weight: 900;
      color: #171B9A;
  }
  
  .section-content {
      font-size: 18px;
      line-height: 30px;
      font-weight: 500;
      padding: 10px;
  }
  
  
  
  
  
  
  
  
  .section-1 .section-row {
      position: relative;
  }
  
  .section-1 .section-row:before {
      content: "";
      width: 115%;
      height: 115%;
      background: url(../images/circle12.png) no-repeat center;
      background-size: contain;
      position: absolute;
      top: calc( -70% + -5px);
      left: calc( -10% + -10px);
  }
  
  /* .section-1:before {
      content: "";
      width: 10%;
      height: 100%;
      background: url(https://aroc-dev.dev-business.work/en/images/circe3.png) no-repeat center;
      background-size: contain;
      position: absolute;
      bottom: -120px;
      left: 0%;
  } */
  
  
  
  
  
  
  
  
  
  
  /* Section 2 stands */
  
  .stand-element {
      width: 28%;
      text-align: center;
      padding: 20px 5px;
  }
  .text-section2 {
      max-width: 1100px;
      margin: auto;
      padding: 10px;
  }
  .stand-text h3 {
      font-size: 30px;
      line-height: 40px;
      font-weight: 900;
      color: #171B9A;
      margin: 15px 0;
  }
  
  .section-2 {
      background: #F9F1ED;
      padding: 40px;
  }
  
  .stands-section{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      margin: 25px 5px;
  }
  
  /* Cols */
  
  .col8{
      width: 55%;
  }
  
  
  
  
  @media screen and (max-width: 1400px) {
      .section-1:after {
          width: 45vw;
          height: 35vw;
      }
  
  
      ul.menu-items.menu-left::after {
          width: 100%;
      }
  }
  
  
  @media screen and (max-width: 1024px) {
      .section-1:after {
          width: 60vw;
          height: 35vw;
      }
  .col8 {
      width: 100%;
  }
  
  .section-1 .section-row {
      max-width: 80%;
      margin-bottom: 25vw;
  }
  
  h2.head-section {
      text-align: start;
  }
  
  .section-title {
      padding-bottom: 20px;
  }
  
  }
  
  
  /* Media  */
  
  
  
  @media screen and (max-width: 1024px) {
  
      .stand-element {
          width: 100%;
      }
  
      .stands-section {
          flex-direction: column;
          align-items: center;
      }
  
  }
  
  
  
  
  @media screen and (max-width: 800px) {
  
      .section-row {
          padding: 0px;
      }
  
  
      h2.head-section {
          font-size: 3rem;
      }
  
      section.section-wrapper.section-1 {
          padding: 15px;
      }
  
      .section-1 .section-row {
          max-width: 90%;
          padding: 10px;
      }
  
      .section-title {
          padding: 15px 5px;
          padding-bottom: 15px;
      }
  
  
      section.section-wrapper.section-2 {
          padding: 15px;
      }
  }
  
/* animation slider */
.color-effect{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: linear-gradient(-45deg, #702913, #ff3e03, #259e0c, #23a6d5, #23d5ab);
    animation: backgroundAnimate 5s ease infinite;
    opacity: 0.2;
    z-index: -1;
}
@keyframes backgroundAnimate {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}