:root {
  --test-color: #d4a024 ; /*009CDE*/
}

a {
  -webkit-transition: .3s all;
  -o-transition: .3s all;
  transition: .3s all;
  color: grey; }
  a:hover {
    text-decoration: none;
  border-bottom: 1px solid white; }

.parent-nav-link-padding, .site-navbar .navbar-nav > li > a {
  padding: 15px 20px !important; }

  

.site-navbar {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0px;
  margin-bottom: 0px;
  background: none;
  position: absolute;
  top: 40px;
  width: 98%;
  z-index: 200;
  background: #fff; }
  .site-navbar .navbar-brand {
    position: absolute;
    right: 0;
    z-index: 3;
top: 0;
margin-top: 0.3%;
border: none !important; }
    .site-navbar .navbar-brand:hover {
      color: black; }
  .site-navbar.bg-light {
    background: transparent !important; }
    @media (max-width: 991.98px) {
      .site-navbar.bg-light {
        background: #fff !important;
        top: 0; }
        .site-navbar.bg-light .navbar-brand {
          display: inline-block;
        
          padding: 2px 10px !important;
          } }
  .site-navbar .navbar-nav > li > a {
    color: #fff !important;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .1em;
    position: relative;
    text-transform: uppercase;
    letter-spacing: .2em; }
    @media (max-width: 991.98px) {
      .site-navbar .navbar-nav > li > a {
        color: #fff !important; } }
  .site-navbar .navbar-nav.active > a {
    color: #fff !important; }
  .site-navbar.scrolled {
    background: #000;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.09);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.09);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%); }
    .site-navbar.scrolled.bg-light {
      background: rgb(0, 0, 0) !important; }
    .site-navbar.scrolled .navbar-brand {
      display: inline-block;
  
      padding: 2px 10px !important; }
    .site-navbar.scrolled.awake, .site-navbar.scrolled.sleep {
      -webkit-transition: .3s all ease;
      -o-transition: .3s all ease;
      transition: .3s all ease; }
    .site-navbar.scrolled.awake {
      -webkit-transform: translateY(0%);
      -ms-transform: translateY(0%);
      transform: translateY(0%);
      background: #000 !important; }
    .site-navbar.scrolled.sleep {
      -webkit-transform: translateY(-90%);
      -ms-transform: translateY(-90%);
      transform: translateY(-90%);
      background: rgba(0, 0, 0, 0.671) !important; }
    .site-navbar.scrolled .navbar-brand {
      color: #fff; }
    .site-navbar.scrolled .dropdown > a:before {
      color: var(--test-color); }
    .site-navbar.scrolled .navbar-nav > li > a {
      color: #fff !important; font-size: 11px !important;}
      .site-navbar.scrolled .navbar-nav > li > a:hover {
        font-size: 11.5px !important;
        color: #fff !important;
    border-bottom: 1px solid #fff;
    }
      .site-navbar.scrolled .navbar-nav > li > a.active {
        color: var(--test-color) !important;  font-weight: bold !important; border: none; font-size: 12px !important;}
    .site-navbar.scrolled .navbar-nav > li.active > a {
      color: #fff !important;  font-weight: bold !important; font-size: 12px !important;}

.site-hero {
  background-color: #ccc;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden; 
}
  .site-hero, .site-hero .row {
    height: 100vh;
     }
  .site-hero:before {
    content: "";
    position: absolute;
    width: 101%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); }
  .site-hero h1 {
    font-weight: 200;
    margin-bottom: 20px;
    display: block; }
    .site-hero h1 strong {
      font-weight: 800; }
    @media (min-width: 768px) {
      .site-hero h1 {
        font-size: 70px; } }
  .site-hero h1, .site-hero .lead {
    font-weight: 200;
    color: #fff; }
  .site-hero .lead {
    line-height: 2; }
  .site-hero .site-subheading {
    max-width: 640px;
    margin: 0 80px;
    color: rgba(255, 255, 255, 0.5); }

.site-section {
  padding: 2em 0; }

.section-heading {
  margin-bottom: 30px;
  position: relative;
  z-index: 10; }
  .section-heading h2 {
    position: relative;
    font-weight: 200;
    padding-top: 20px;
    font-size: 30px; }
    .section-heading h2 strong {
      font-weight: 800; }
    .section-heading h2:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 2px;
      width: 50px;
      background: black;
      z-index: -1; }
  .section-heading.text-center h2:before {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }

.lead {
  font-weight: 200;
  line-height: 1.5; }

.site-service-item .icon {
  display: block;
  margin-bottom: 50px;
  background: #edf0f2;
  background: black;
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
  margin: 0 auto 30px auto; }
  .site-service-item .icon span {
    font-size: 40px;
    color: #080b0e;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%; }

.site-service-item h3 {
  font-size: 20px;
  font-weight: 200; }

.site-link {
  position: relative; }
  .site-link i {
    position: relative;
    top: 2px;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease; }
  .site-link:hover i {
    position: relative;
    margin-left: 20px; }

.site-list {
  padding: 0;
  margin: 0; }
  .site-list li {
    margin: 0 0 10px 0;
    padding: 0;
    position: relative;
    list-style: none; }
    .site-list li:before {
      font-family: 'icomoon';
      position: absolute;
      top: .1em;
      left: 0; }
    .site-list li.site-check {
      padding-left: 30px; }
      .site-list li.site-check:before {
        color: black;
        font-size: 16px;
        content: "\ebd3"; }





 
  
        .top1 {
          width: 100%;
          height: 40px;
          background: black;
        }
        
        .top1 .left1 {
          float: left;
        }
        
        .top1 .left1 ul {
          padding-top: 8px;
        }
        
        .top1 .left1 ul li {
          list-style-type: none;
          float: left;
          margin-right: 14px;
          color: white;
        }
        
        .top1 .left1 ul li i {
          color: white;
        }
        
        .top1 .right1 {
          float: right;
          margin-right: 8%;
        }
        
        .top1 .right1 ul {
          padding-top: 8px;
        }
        
        .top1 .right1 ul li {
          list-style-type: none;
          float: left;
          margin-left: 5px;
        }
        
        
        .top1 .right1 ul li a {
          color: white;
          width: 24px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          border-radius: 50%;
          display: block;
          transition: all 0.4s ease;
        }
        
        .top1 .right1 ul li a:hover {
          background: black;
          color: #fff;
        }
  
  

    
    /* Container around content */
    .container {
      padding: 10px 40px;
      position: relative;
      background-color: inherit;
      width: 50%;
    }
    
 
    /* Place the container to the left */
    .left {
      left: -25.3%;
    }
    
    /* Place the container to the right */
    .right {
      left: 25.3%;
    }
    
    /* Add arrows to the left container (pointing right) */
    .left::before {
      content: " ";
      height: 0;
      position: absolute;
      top: 22px;
      width: 0;
      z-index: 1;
      right: 30px;
      border: medium solid black;
      border-width: 10px 0 10px 10px;
      border-color: transparent transparent transparent black;
    }
    
    /* Add arrows to the right container (pointing left) */
    .right::before {
      content: " ";
      height: 0;
      position: absolute;
      top: 22px;
      width: 0;
      z-index: 1;
      left: 30px;
      border: medium solid black;
      border-width: 10px 10px 10px 0;
      border-color: transparent black transparent transparent;
    }
    
    /* Fix the circle for containers on the right side */
    .right::after {
      left: -15px;
    }
    
    /* The actual content */
    .content {

      padding: 2px 3px;
      background-color: transparent;
      border: 1px solid black;
      position: relative;
      border-radius: 6px;
      text-align-last: center
    }

    .text{
      padding: 20px;
    }
      
    .time_img{
      width: 99.5%;
      align-content: center;
      padding: 3px 2px;
      margin-bottom: 20px;
    }
    
    /* Media queries - Responsive timeline on screens less than 600px wide */
    @media screen and (max-width: 600px) {
      /* Place the timelime to the left */
      .timeline::after {
    
      left: 18%;
      }
      
      /* Full-width containers */
      .container {
      width: 180%;
      padding-left: 70px;
      padding-right: 25px;
      }
      
      /* Make sure that all arrows are pointing leftwards */
      .container::before {
      left: 60px;
      border: medium solid black;
      border-width: 10px 10px 10px 0;
      border-color: transparent black transparent transparent;
      }
    
      /* Make sure all circles are at the same spot */
      .left::after, .right::after {
      left: 15px;
      }
      .left {
          left: 8.3%;
          }
      /* Make all right containers behave like the left ones */
      .right {
      left: 8%;
      }
    }







    



    .iv
    {
      display: block;
      position: relative;
      -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    
    
    
    
    
    
  
    .loader_container
    {
      display: inline-block;
      width: 9%;
      padding-bottom: 4%;
      margin: 0% 8%;
    }
    .loader
    {
      width: 100%;
    
      margin: 0 auto;
      background: transparent;
    }
    .loader_content
    {
    margin-top: 3%;
      font-size: 100% !important;
      font-weight: 500;
      color: #fff;
      white-space: nowrap;
      }
    .loader_title
    {
      font-size: 100%;
      font-weight: 700;
      color: #fff;
      text-transform: uppercase;
      line-height: 3.5;
    }

    


    
/*********************************
5.2 Milestones
*********************************/


.milestone
{
	width: 16%;
  float: left;
  margin: 0% 4%;
padding: 1% 0;
  background-color: rgb(0, 0, 0);
border : 1px solid var(--test-color);
  border-radius: 5px;
}
.milestone_counter
{
	font-size: 36px;
	font-weight: 800;
	color: #fff;
	margin-top: 6px;
}
.milestone_text
{
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	margin-top: -1px;
}

.mile_img{
  width: 80%;
  align-content: center;
}




.skill_title{
color: #fff;
font-size: 20px;
margin-bottom: 20px;
}


svg{
	margin-top: -25px;
}

.skill-bar
{
  position: relative;
	width: 100%;
	height: 5px;
	border: 1px solid rgba(0, 0, 0, 0);	
	box-shadow: 0 0 15px rgb(153, 153, 153);
}

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

.ftco-animate {
  opacity: 0;
  visibility: hidden; }
  
  .d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important; }
    
    .mt-md-3,
  .my-md-3 {
    margin-top: 1rem !important; }

    .pl-3,
.px-3 {
  padding-left: 1rem !important; }

  .pt-3,
.py-3 {
  padding-top: 1rem !important; }

  
  
  .filters {
    margin-left: 10%;
    border: none;
  outline: none;
  padding: 12px 16px;
  cursor: pointer;
  color :  #666;
  font-size: 110%;
  background-color: black;}
    .filters ul {
      padding: 0;
      margin: 0 0 30px 0; }
      .filters ul li {
        display: inline-block;
        cursor: pointer;
        padding: 20px;
        -webkit-transition: .3s all ease;
        -o-transition: .3s all ease;
        transition: .3s all ease; }
        .filters ul li:hover {
          font-size: 115% !important;
        color: white !important;
    border-bottom: 1px solid white; }
        .filters ul li.active{
          color: var(--test-color) !important;  font-weight: bold !important; border: none; font-size: 170% !important;
        }


/*--------- Start Portfolio Area -------------*/
.portfolio-area .primary-btn {
  color: #fff;
  background-color: #57d131;
  margin-left: auto;
  margin-right: auto; }

.portfolio-area .filters {
  text-align: center; }

.portfolio-area .filters ul {
  padding: 0; }

.portfolio-area .filters ul li {
  list-style: none;
  display: inline-block;
  padding: 18px 15px;
  cursor: pointer;
  position: relative;
  text-transform: uppercase;
  color: #000;
  font-size: 12px;
  font-weight: 500; }
  @media (max-width: 736px) {
    .portfolio-area .filters ul li {
      padding: 6px 6px; } }

.portfolio-area .filters ul li:after {
  content: "";
  display: block;
  width: calc(0% - 60px);
  position: absolute;
  height: 2px;
  background: #333;
  -webkit-transition: width 350ms ease-out;
  -o-transition: width 350ms ease-out;
  transition: width 350ms ease-out; }

.portfolio-area .filters ul li:hover:after {
  width: calc(100% - 60px);
  -webkit-transition: width 350ms ease-out;
  -o-transition: width 350ms ease-out;
  transition: width 350ms ease-out; }

.portfolio-area .filters ul li.active {
  color: #57d131; }

.portfolio-area .filters-content {
  margin-top: 50px; }

.portfolio-area .filters-content .show {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 350ms;
  -o-transition: all 350ms;
  transition: all 350ms; }

.portfolio-area .filters-content .hide {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 350ms;
  -o-transition: all 350ms;
  transition: all 350ms; }

.portfolio-area .filters-content .item {
  text-align: center;
  cursor: pointer;
  margin-bottom: 30px; }

.portfolio-area .filters-content .item img {
  border-radius: 10px; }

.portfolio-area .filters-content .p-inner {
  padding: 20px 0px;
  text-align: center; }

.portfolio-area .filters-content .item .p-inner .cat {
  font-size: 13px; }

.portfolio-area .filters-content .item img {
  width: 100%; }

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transition: .5s ease;
  -o-transition: .5s ease;
  transition: .5s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.middle {
  -webkit-transition: .5s ease;
  -o-transition: .5s ease;
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center; }

.single-portfolio:hover .middle {
 
  opacity: 1; }


.single-portfolio {
  
  border-radius: 5px; 
margin-bottom: 10px;}
  .single-portfolio:hover .thumb .overlay-bg {
    opacity: .85; 
  }

.thumb .overlay-bg {
  opacity: 0;
  border-radius: 5px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  @media screen and (prefers-reduced-motion: reduce) {
    .thumb .overlay-bg {
      -webkit-transition: none;
      -o-transition: none;
      transition: none; } }



      @keyframes shadow-pulse
      {
        0% {
          box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
        }
        100% {
          box-shadow: 0 0 0 35px rgba(0, 0, 0, 0);
        }
      }
      
      @keyframes shadow-pulse-big
      {
        0% {
          box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1);
        }
        100% {
          box-shadow: 0 0 0 70px rgba(0, 0, 0, 0);
        }
      }
      
      .pulsing_button
      {
        position: fixed;
        z-index: 20;
        bottom: 7%;
        right: 3.5%;
        width: 50px;
        height: 50px;
        color:white;
        text-align: center;
        background:black;
        border-radius: 50%;
        
        animation: shadow-pulse 2s infinite ;
      }
      @keyframes shadow-pulse {
        0% {
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(212, 160, 36, 0.4);
        }
      
        70% {
          transform: scale(1);
          box-shadow: 0 0 0 15px rgba(212, 160, 36, 0);
        }
      
        100% {
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(121, 160, 36, 0);
        }
      }
       /* contact form css */


       #contact-section{
        background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.9)),url(res/contact.jpg);
        background-size: cover;
        background-position: center;
        height: 100%;
        width: 100% ;
        padding-bottom: 2%;
      }
  
      #contact-section .container h2{
        text-align: center;
         text-decoration: underline;
          text-underline-position: under;
          color: rgb(238, 235, 235);
          letter-spacing: 2px;
          
      }
  
      
  
      #contact-section .container p{
        text-align: center; 
        width: 70%; 
        margin-left: auto;
         margin-right: auto; 
         padding-bottom: 3%;
         color: #fff;
         letter-spacing:3px;
      }

        .contact-form{
          display: grid;
          grid-template-columns: auto auto;
           }
        
        .form-info{
          font-size: 16px;
          font-style: italic;
          color: white;
          letter-spacing: 2px;
        }
        input{
          padding: 10px;
          margin:10px;
          width: 70%;
          background-color:transparent;
          color: white;
          border: none;
          border-bottom: 1px solid;
          outline:none;
        }
  
        input::placeholder{
          color: rgba(136, 133, 133, 0.5);
        }
      
         textarea{
        padding: 10px;
        margin: 10px;     
        width: 70%;
        background-color:transparent;
        color: white;
        border: none;
        border-bottom: 1px solid;
        outline:none;
       }
       textarea::placeholder{
         color: rgba(136, 133, 133, 0.5);
       }
       
        
      
        .submit{
        width: 40%;
        background: none;
        padding: 4px;
        outline: none;
         /* border: 1px solid #fff;
        color: #fff; */
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 2px;
        height: 33px;
        text-align: center;
        cursor: pointer;
        letter-spacing: 2px;
        margin-left: 3%;
        border:2px solid rgb(190, 190, 190);
        color: rgb(190, 190, 190);
       }
  
       .submit:hover{
             border: 1px solid var(--test-color);
        color: var(--test-color);
        cursor: pointer;
       }
  
          /* media queries */
      @media (max-width: 768px){
  
   #contact-section .contact-form{
          display: block;
          width: 100%;
          text-align: center;
        }
        #contact-section .submit{
  
          width: 60%;
        }
  
    }



    
    @import url(https://fonts.googleapis.com/css?family=Raleway);
    @import url(http://weloveiconfonts.com/api/?family=entypo);
    [class*="entypo-"]:before {
      font-family: 'entypo', sans-serif;
    }
    
    [class*="entypo-"] {
      width: 1em;
      height: 1em;
    }
    
    a,
    span {
      text-decoration: none;
      color: #fff;
    }
    
    .tit1:hover {
      color: #fff;
    }
    
    .tit1 {
      font-family: 'Raleway', sans-serif;
      letter-spacing: 1.5px;
      color: #999;
      font-weight: 100;
      font-size: 2.4em;
      margin: 0;
      border-bottom: 1px solid #777;
      padding-bottom: 0.2em;
    }
    
    .tit2 {
      font-family: 'Raleway', sans-serif;
      letter-spacing: 1.5px;
      color: #fff;
      font-weight: 100;
      font-size: 1.0em;
      margin-top: 15px;
    }
    
    #content-time {
      margin-top: 50px;
      margin-left : 140px;
      text-align: center;
      cursor : pointer;
    }
    
    .timeline {
      border-left: 0.25em solid var(--test-color);
      background: transparent;
      margin: 2em auto;
      line-height: 1.4em;
      padding: 1em;
      padding-left: 3em;
      list-style: none;
      text-align: left;
      margin-left: 10em;
      margin-right: 3em;
      border-radius: 0.5em;
      width: 60em;
    }
    
    .event {
      min-width: 20em;
      width: 100%;
      vertical-align: middle;
      box-sizing: border-box;
      position: relative;
    }
    
    .timeline .event:before,
    .timeline .event:after {
      position: absolute;
      display: block;
      top: 1em;
    }
    
    .timeline .event:before {
      left: -15em;
      color: rgba(255, 255, 255);
      content: attr(data-date);
      text-align: right;
      font-weight: 100;
      font-size: 1em;
      min-width: 9em;
    }
    
    .timeline .event:after {
      box-shadow: 0 0 0 0.2em var(--test-color);
      left: -3.5em;
      background: var(--test-color);
      border-radius: 50%;
      height: 0.75em;
      width: 0.75em;
      content: "";
    }
    
    .timeline .event .member-location,
    .timeline .event .member-parameters {
      display: none;
    }
    
    .timeline .event:last-of-type .member-location,
    .timeline .event:last-of-type .member-parameters {
      display: block;
    }
    
    .member-infos {
      padding: 10px;
      text-align: left;
      position: relative;
    }
    
    .member-infos > h1 {
      font-weight: bold;
      font-size: 1.4em;
    }
    
    .member-location a:before {
      margin-right: 5px;
    }
    
    .member-location {
      text-indent: 2px;
    }
    
    .tagcloud--item {
      color: var(--test-color);
    }
    


    
.container-car {
  position: relative;
  width: 320px;
  margin: 100px auto 0 auto;
  perspective: 1000px;
}

.carousel {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; 
  animation: rotate360 60s infinite forwards linear;
}
.carousel__face { 
  position: absolute;
  width: 300px;
  height: 187px;
  top: 20px;
  left: 10px;
  right: 10px;
  background-size: cover;
  box-shadow:inset 0 0 0 2000px rgba(0,0,0,0.5);
  display: flex;
  cursor: pointer;
}

span {
  margin: auto;
  font-size: 2rem;
}


.carousel__face:nth-child(1) {
  background-image: url("res/game.png");
  transform: rotateY(  0deg) translateZ(430px); }
.carousel__face:nth-child(2) { 
  background-image: url("res/post.png");
    transform: rotateY( 72deg) translateZ(430px); }
.carousel__face:nth-child(3) {
  background-image: url("res/optic.png"); 
  transform: rotateY( 144deg) translateZ(430px); }
.carousel__face:nth-child(4) {
  background-image: url("res/sa7ti.png");
  transform: rotateY(216deg) translateZ(430px); }
.carousel__face:nth-child(5) { 
  background-image: url("res/certif.png");
 transform: rotateY(288deg) translateZ(430px); }

 .modal-content{
padding: 20px;
width: 1200px;
margin-left: -350px;
background-color: rgba(255,255,255,0.1);
 }




@keyframes rotate360 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}


.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3,
.carousel-showmanymoveone .cloneditem-4,
.carousel-showmanymoveone .cloneditem-5 {
  display: none;
}
@media all and (min-width: 768px) {
  .carousel-showmanymoveone .carousel-inner > .active.left,
  .carousel-showmanymoveone .carousel-inner > .prev {
    left: -50%;
  }
  .carousel-showmanymoveone .carousel-inner > .active.right,
  .carousel-showmanymoveone .carousel-inner > .next {
    left: 50%;
  }
  .carousel-showmanymoveone .carousel-inner > .left,
  .carousel-showmanymoveone .carousel-inner > .prev.right,
  .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-1 {
    display: block;
  }
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev.right,
  .carousel-showmanymoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}
@media all and (min-width: 992px) {
  .carousel-showmanymoveone .carousel-inner > .active.left,
  .carousel-showmanymoveone .carousel-inner > .prev {
    left: -16.666%;
  }
  .carousel-showmanymoveone .carousel-inner > .active.right,
  .carousel-showmanymoveone .carousel-inner > .next {
    left: 16.666%;
  }
  .carousel-showmanymoveone .carousel-inner > .left,
  .carousel-showmanymoveone .carousel-inner > .prev.right,
  .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-2,
  .carousel-showmanymoveone .carousel-inner .cloneditem-3,
  .carousel-showmanymoveone .carousel-inner .cloneditem-4,
  .carousel-showmanymoveone .carousel-inner .cloneditem-5,
  .carousel-showmanymoveone .carousel-inner .cloneditem-6  {
    display: block;
  }
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(16.666%, 0, 0);
    transform: translate3d(16.666%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-16.666%, 0, 0);
    transform: translate3d(-16.666%, 0, 0);
    left: 0;
  }
}

/* Company Slider */
.company-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 20px 0;
}

.company-slider-inner {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}

.company-slider-item {
  flex: 0 0 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
}

.company-slider-item img {
  max-height: 70px;
  width: auto;
  object-fit: contain;
}

/* Style for the course container */
.course-container {
  display: flex;
  flex-wrap: wrap; /* Allow cards to wrap to the next row */
  gap: 20px; /* Add space between cards */
  justify-content: flex-start; /* Distribute cards evenly */
}

.course-card {
  background-color: #151921; /* --gray-850 */
  border-radius: 0.75rem; /* --border-radius */
  overflow: hidden;
  border: 1px solid #222836; /* --gray-750 */
  transition: all 0.3s ease; /* --transition-normal */
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 calc(33.333% - 20px); /* Each card takes 1/3 of the row minus the gap */
  max-width: calc(33.333% - 20px); /* Ensure cards don't exceed 1/3 of the row */
  box-sizing: border-box; /* Include padding and border in width calculation */
  text-decoration: none; /* Remove underline from links */
}

.course-card:hover {
 
  border: 1px solid #222836; /* --gray-750 */
  color: #ffffff;

}


.thumbnail-container {
  position: relative;
  height: auto;
  overflow: hidden;
}

.thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}






.card-content {
  padding: 20px 15px 10px 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.course-info {
  font-size: 11px;
  font-weight: 600;
  color: var(--test-color); /* --upper-primary */
  display: block;
  margin-bottom: 5px;
  text-align: left; /* Add this line */
}


.lesson-title {
  font-size: 25px;
  margin-bottom: 25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}



.progress-bar {
  height: 1px;
  background-color: #222836; /* --gray-750 */
  border-radius: 9999px;
  overflow: hidden;
  margin-top: auto;
}

.progress-indicator {
  height: 100%;
  background-color: var(--test-color); /* --upper-primary */
  border-radius: 9999px;
  transition: width 0.6s ease;
}

/* Hide additional courses by default */
.hidden-course {
  display: none;
}

/* Style for the "Show More" button */
/* Style for the "Show More" button */
.read {
  text-align: center;
  position: relative;
  cursor: pointer; /* Change cursor to pointer */
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 4px;
  display: inline-flex;
  align-items: center;

  gap: 10px; /* Space between text and icon */
}

.read:before,
.read:after {
  content: '';
  position: relative;
  display: inline-block;
  width: 60px;
  height: 1px;
  background: #ffffff;
}

.read:before {
  margin-right: 10px;
}

.read:after {
  margin-left: 10px;
}

.read i {
  font-size: 12px;
  transition: transform 0.3s ease; /* Smooth transition for icon rotation */
}

.read span {
  font-size: 12px;
}