/**
* Theme Name: Qamico Child
* Description: This is a child theme of Qamico, generated by Merlin WP.
* Author: <a href="https://wpopal.com/">Opalthemes</a>
* Template: gamico
* Version: 1.0.3
*/

.gamico-icon-epic:before {
    content: "\e001"; /* This should be the actual character code for your icon */
}

.gamico-icon-gog:before {
    content: "\e001"; /* This should be the actual character code for your icon */
}

.creanaux {
    background-color: white;
    height: 0px;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.creanaux div {
    width: 60px;
    height: 10px;
    background-color: #0C0D0E;
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.Block_Factory{
    position: absolute;
    bottom: 10%;            /* Position at the bottom of the parent */
    left: 50%;            /* Center horizontally */
    width: 45%;           /* Set width to 70% of the parent */
    transform: translateX(-50%); /* Adjust horizontal position to truly center based on its own width */
    object-fit: scale-down;       /* Preserve the aspect ratio while fitting in the div */
    z-index: 3;
    box-shadow: none !important;
}

.event__date,.event__content{
    color: white;
    font-family: "Roboto", "Unbounded", "sans-serif";
}

.event__date{
  font-size: 16px;
  font-weight: 300 !important;
}

.event__content{
  font-size: 16px;
  font-weight: 600;
}

.event__icon {
    display: flex;
    align-items: center; /* vertically aligns images */
    justify-content: center;
    gap: 5px; /* optional spacing between images */
    margin-bottom: 20px;
}

.event__icon img {
    height: 60px;
}

#my-timeline .next, #my-timeline .prev{
  margin-right: -80px;
  margin-top: 40px;
}

#my-timeline .next .material-icons{
  animation: bounceLeftRight 2s infinite;
}

#my-timeline .prev .material-icons{
  animation: bounceRightLeft 2s infinite;
}

@keyframes bounceUpDown {
  0%, 100% {
    transform: translate(-50%, -60%); /* Monte légèrement */
  }
  50% {
    transform: translate(-50%, -40%); /* Descend légèrement */
  }
}

@keyframes bounceLeftRight {
  0%, 100% {
    transform: translate(-60%, -50%); /* Slightly left */
  }
  50% {
    transform: translate(-40%, -50%); /* Slightly right */
  }
}

@keyframes bounceRightLeft {
  0%, 100% {
    transform: translate(-40%, -50%); /* Slightly right */
  }
  50% {
    transform: translate(-60%, -50%); /* Slightly left */
  }
}

#custom-newsletter-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    border-radius: 10px;
    padding: 10px 20px;
    max-width: 600px;
    width: 100%;
  }

  .form-fields {
    display: flex;
    flex-grow: 1;
    align-items: center;
    gap: 10px;
  }

  .email-input {
    flex-grow: 1;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 10px;
  }

  .button-submit {
    background: none;
    border: none;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .arrow-icon {
    font-size: 16px;
  }

  /* Optional: Adjust form responsiveness */
  @media (max-width: 600px) {
    #custom-newsletter-form {
      flex-direction: column;
      align-items: stretch;
    }

    .form-fields {
      flex-direction: column;
      gap: 5px;
    }
  }

  .ribbon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 75px;
    height: 75px;
    background-color: var(--primary);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 5;
    overflow: hidden; /* recommended to prevent overflow */
}

.ribbon-logo {
    position: absolute;
    width: 35px; /* adjust size as needed */
    height: auto;
    bottom: 5px; /* adjust as needed */
    right: 5px;  /* adjust as needed */
    z-index: 2;  /* ensures the logo stays on top */
}

#contacts a:hover{
    color: white;
}

/* Nav menu for mobile */
.gamico-mobile-nav .mobile-nav-tabs ul .mobile-categories-title {
    display: none;
}

.mobile-nav-active .gamico-mobile-nav{
  background-color: var(--primary);
  margin-left: 0px;
}

.gamico-mobile-nav{
  opacity: 0;
  width: 100% !important;
  margin-left: -20px;
}

.mobile-navigation ul > li.menu-item > a, .mobile-navigation-categories ul > li.menu-item > a{
  color: white !important;
  font-size: 16px;
}

.gamico-mobile-nav .mobile-nav-tabs ul li.active{
  display: none;
}

.mobile-navigation .dropdown-toggle, .mobile-navigation-categories .dropdown-toggle{
  color: white !important;
}

.site-title a{
  color: white !important;
}

.gamico-icon-times{
  color: white !important;
}

/* Bounce */
@keyframes bounce {
    0%, 100% {
      transform: translate(-50%, -60%); /* Monte */
    }
    50% {
      transform: translate(-50%, -40%); /* Descend */
    }
  }

#pitchForm input, textarea{
  background-color: transparent;
  border: solid 1px white;
  color: white;
  font-family: roboto;
}

@media (min-width: 1024px) {
  .roadmap.roadmap--orientation-auto.roadmap--initialized .roadmap__events .roadmap__events__event:after {
      width: 2px;
  }

  .roadmap.roadmap--orientation-auto{
    width: 100% !important;
  }

  .roadmap.roadmap--orientation-auto .roadmap__events:after{
    height: 2px !important;
  }

  .roadmap.roadmap--orientation-auto .roadmap__events__event:nth-child(odd):before{
    top: -6px !important;
  }

  .roadmap.roadmap--orientation-auto .roadmap__events__event:before{
    width: 15px;
    height: 15px;
    border-radius: 50px;
  }

  .roadmap.roadmap--orientation-auto .roadmap__events__event:nth-child(even):before{
    bottom: -9px;
  }
}