/*universal class*/
 * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
/*body element*/
    body {
      margin:0;
      background-color: #f4f4f4;
      color: #111;
    }
/*navigation bar*/
    nav {
      background: white;
      padding: 10px 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      
    }
    .logged-in{
      color: black;
      padding:8px 12px;
      display:flex;
      gap:15px;
      background-color:#eee;
      border-radius: 5px;
      align-items: center;
    }
    .menu{
      display:flex;
      gap:15px;
     
    }
    .menu a{
        text-decoration: none;
        color: black;
        padding:5px 8px;
    }
    a:hover{
        background-color:#eee;
        border-radius: 5px;
    }
    nav .auth-buttons button {
      margin-left: 10px;
      padding: 5px 10px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .sign-up {
      background-color: orange;
      color: white;
      border-radius: 5px;
    }
    .menu-toggle{
        display: none;
        font-size: 24px;
        cursor:pointer;
    }
    .nav-logo{
      width: 75px;
      height: 75px;
    }
    .nav-logo img{
      width:50px;
      height:auto;
    }
    @media(max-width:768px) {
        .menu{
            display:none;
            flex-direction: column;
            position: absolute;
            top: 60px;
            left:0;
            width:100%;
            background-color: white;
            padding: 10px 0;
        }
        .menu a{
            display:block;
            text-align: center;
            padding: 10px;


        }
        .menu-toggle{
            display:block;

        }

    }
/*top banner*/
    .banner {
      background-color: #11152b;
      color: white;
      text-align: center;
      padding: 20px;
    }

   
    /*.category-boxes */
    .cta div {
      background-color: white;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      width: 100px;
      height:70px;
      text-align: center;
      font-size: 10px;
      color:rgb(39, 14, 114);
      
    }
   
    .cta a{
      text-decoration: none;
    }
/*section card*/
    .section-card {
      background: white;
      margin: 20px auto;
      padding: 5px;
      max-width: 90%;
      text-align: center;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
      
    }
/*category Box*/
    .cat-box{
        display: flex;
        flex-direction: row;
        gap:20px;
        padding: 20px;
        flex-wrap: wrap;
        justify-content:center;
        
    }
/*scroll container*/
    .scroll-container {
        position: relative;
        max-width: 800px;
        margin: auto;
    }
    .scroll-box {
        display: flex;
        gap: 10px;
        padding: 10px;
        overflow-x: auto; /* Enable horizontal scroll */
        white-space: normal;
        border-radius: 10px;
        scroll-behavior: smooth;

        /* Hide scrollbar */
        scrollbar-width: none;  /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer/Edge */
    }
 /* Hide scrollbar for WebKit browsers */
 .scroll-box::-webkit-scrollbar {
    display: none;
}

 .scroll-box .card {
    min-width: 300px;
    padding: 10px;
    background: rgb(255, 255, 255);
    border-radius: 5px;
    
}
.card:hover {
  transform: translateY(-5px);
}
.card img {
  width: 100%;
  height: 30%;
  object-fit: cover;
}
.scroll-box .card video {
    
    width:100%;
    height:auto;
    object-fit: cover;
  }
.card-content {
font-size: 18px;

  padding: 10px;
  text-align: right;
  white-space: normal;
   word-wrap:break-word;
  overflow-wrap: break-word;
}
.card-title {
    text-align: center;
  padding:5px;
  color: #ffb300;
  word-wrap:break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.card-body p{
  font-size: 15px;;
  color:red;
  margin: 10px;
  direction: rtl;
  text-align: right;
  word-wrap:break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.card ul li{
  direction: rtl;
  text-align: right;
  color:#0056b3;
  font-size:15px;
  margin-right:15px;
  
}

.card-button {
  display: inline-block;
  padding: 8px 8px;
  background-color: #11152b;
  color: #fff;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  font-size: 10px;
  transition: background-color 0.2s ease;
  margin: 3px;
  bottom:0;
}

.card-button:hover {
  background-color: #0056b3;
}
.card-footer {
  padding: 5px;
  padding-top:5px;
  text-align: right;
  font-size: 0.9em;
  color: #777;
  border-top: 1px solid #ddd;
}

 /* Scroll buttons (only visible on desktop) */
 .scroll-btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(248, 211, 2, 0.6);
    color: rgb(0, 0, 0);
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    
}

.scroll-btn:hover {
    background: rgba(243, 208, 12, 0.8);
}

.left-btn {
    left: -30px;
}

.right-btn {
    right: -30px;
}

/* Show buttons only on desktop */
@media (min-width: 600px) {
    .scroll-btn {
        display: block;
    }

    .scroll-box {
        overflow-x: hidden; /* Hide scroll and use buttons */
    }
    
}
 /* testimonial video card */
 .scroll-box .v-card {
    min-width: 200px;
    padding:10px;
    background: white;
    border-radius: 5px;
    
  }
  
  .v-card-content {
    padding: 5px;
  }
  .v-card h2 {
    font-size: 12px;
    color: #333;
  }
  .v-card p {
    font-size: 12px;
    margin-top: 10px;
  }
   /*category boxes*/
    .cta {
      background-color: orange;
      color: white;
      text-align: center;
      padding: 15px;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .container-team-training {
      position: relative;
      width: 100%;
      height: 500px;
      background-image: url('images/team-training.webp');
      background-size: cover;
      background-position: center;
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding: 20px;
      border-radius: 0px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      text-align: center;
    }
    
    .cta button {
      padding: 10px 20px;
      background-color: #11152b;
      color: white;
      border: none;
      border-radius: 5px;
    }
    /*form style*/
    .form-container {
      position:relative;
      background: #fff;
      padding: 40px 30px;
      border-radius: 20px;
      width: 50%;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
      text-align: center;
      transition: 0.3s ease;
      margin: auto;
      top:30px;
      
    }
    @media(max-width:768px){
      .form-container {
        width: 90%;
        
        
      }
    }
    .form-container:hover {
      transform: scale(1.02);
    }
    
    .form-container h2 {
      margin-bottom: 25px;
      color: #333;
      font-size: 26px;
    }
    
    form {
      display: flex;
      flex-direction: column;
    }
    
    .input-group {
      display: flex;
      gap: 10px;
    }
    
    .input-group input {
      flex: 1;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="tel"] {
      padding: 12px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 10px;
      outline: none;
      transition: 0.3s;
    }
    
    input:focus {
      border-color: #ff6a88;
    }
    input[type="radio"]{
      display:inline-block;
      color:orange;
    }
    
    button {
      padding: 12px;
      background: orange;
      border: none;
      color: #fff;
      border-radius: 10px;
      font-weight: bold;
      margin-top: 15px;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    
    button:hover {
      background: black;
    }
    .eye-icon {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      width: 20px;
      height: 20px;
    }
    .password-container {
      position: relative;
    }
    input[type="password"], input[type="text"], input[type="email"], input[type="tel"], input[type="date"] {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      margin-bottom: 10px;
    }
    #success-message {
      color: green;
      font-weight: bold;
      display: none;
    }
    /* alerts*/
    .alert {
      padding: 15px;
      margin: 20px 0;
      border: 1px solid transparent;
      border-radius: 4px;
      font-family: sans-serif;
    }
    .alert-success {
      color: #155724;
      background-color: #d4edda;
      border-color: #c3e6cb;
    }
    .alert-danger {
      color: #721c24;
      background-color: #f8d7da;
      border-color: #f5c6cb;
    }
    /* close button */
    .close-btn {
      float: right;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      color: inherit;
    }
    /*footer style*/
    footer {
      background-color: #11152b;
      height: 50px;
      color:white;
      text-align: center;
      padding: 20px;
    }