html, body {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
   
}
/* hide whenever the viewport is in portrait (height > width) */
@media (orientation: portrait) {
    .landscape-only {
      display: none !important;
    }
  }
  
  /* restore on landscape (width ≥ height) */
  @media (orientation: landscape) {
    .landscape-only {
      display: flex; /* or whatever your md:flex would be */
    }
  }
  /* landscape: hide portrait-only, show landscape-only */
@media (orientation: landscape) {
    .portrait-only { display: none !important; }
    .landscape-only { display: flex !important; }
  }
  
  /* portrait: hide landscape-only, show portrait-only */
  @media (orientation: portrait) {
    .landscape-only { display: none !important; }
    .portrait-only { display: flex !important; }
  }

/* Background Video Container */
.video-container {
    position: relative; /* Ensures the video stays fixed in place */
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Hides the overflowing video */
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-container video {
    position: absolute;
    width: auto;
    height: auto;
    width: 100%;
    height: 100%;
    object-fit: fill;

   
}


/* Box Outline Animation for Buttons */
/* Base Button Styling */
.language-selection {
    position: fixed;
    bottom: 10%; /* Adjusts button position within the video */
    display: flex;
    gap: 20px;
   

}
.c-btn {
    text-align: center;
    font-weight: bold;
    min-width: 160px;
    padding: 10px 0px;
    position: relative;
    background-color: transparent;
    color: BLACK;
    border: none;
    transition: all 0.3s ease-in-out;
}


/* Bottom Border - Always Visible */
.c-btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #B76E79;
}

/* Hover Effects - Create the Box (Only for Large Screens) */
.c-btn::before,
.c-btn span::before,
.c-btn span::after {
    content: "";
    position: absolute;
    background-color: #B76E79 ;
    transition: transform 0.4s ease-in-out;
}

/* Left Vertical Line */
.c-btn::before {
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
}

/* Right Vertical Line */
.c-btn span::before {
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom;
}

/* Top Horizontal Line */
.c-btn span::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transform-origin: right;
}

/* On Hover - Animate the Box (Only for Large Screens) */
@media (min-width: 769px) { /* Keep animation for large screens */
    .c-btn:hover::before {
        transform: scaleY(1);
        transition-delay: 0s;
    }

    .c-btn:hover span::before {
        transform: scaleY(1);
        transition-delay: 0.2s;
    }

    .c-btn:hover span::after {
        transform: scaleX(1);
        transition-delay: 0.4s;
    }
}

.l-btn {
    text-align: center;
    font-weight: bold;
    min-width: 160px;
    padding: 0px 0px;
    margin-bottom: 20px;
    position: relative;
    background-color: transparent;
    color: #B76E79;
    border: none;
    transition: all 0.3s ease-in-out;
}

:where([class^="ri-"])::before { content: "\f3c2"; }
      
      body {
          font-family: 'Poppins', sans-serif;
          background: linear-gradient(to bottom, #1e293b, white);
          min-height: 100vh;
      }
      
      .neural-network {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 0;
          opacity: 0;
      }
      
      .language-btn.active {
          background: linear-gradient(135deg, #B76E79, #a9c191);
          color: white;
      }
      
      .language-btn {
          position: relative;
          overflow: hidden;
      }
      
      .language-btn::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          transform: scale(0);
          opacity: 0;
          transition: transform 0.4s, opacity 0.4s;
      }
      
      .language-btn:active::after {
          transform: scale(2);
          opacity: 0;
          transition: 0s;
      }
      
      .shake {
          animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
      }
      
      @keyframes shake {
          10%, 90% { transform: translate3d(-1px, 0, 0); }
          20%, 80% { transform: translate3d(1px, 0, 0); }
          30%, 50%, 70% { transform: translate3d(-2px, 0, 0); }
          40%, 60% { transform: translate3d(2px, 0, 0); }
      }
      
      .floating {
          animation: floating 3s ease-in-out infinite;
      }
      
      @keyframes floating {
          0% { transform: translateY(0px); }
          50% { transform: translateY(-8px); }
          100% { transform: translateY(0px); }
      }
      
      .pulse {
          animation: pulse 2s infinite;
      }
      
      @keyframes pulse {
          0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
          70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
          100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
      }
      
      /* Keep your existing LTR caret on the right */
      .typing-effect {
        overflow: hidden;
        white-space: nowrap;
        margin: 0 auto;
        border-right: .15em solid #6366f1;      /* LTR caret */
        animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
      }
      /* Override for Arabic / RTL */
      .content-ar .typing-effect {
        border-right: none;                      /* remove right‐side caret */
        border-left:  .15em solid #6366f1;       /* add left‐side caret */
        direction: rtl;                          /* ensure RTL context */
      
      }
      
      @keyframes typing {
          from { width: 0 }
          to { width: 100% }
      }
      
      @keyframes blink-caret {
          from, to { border-color: transparent }
          50% { border-color: #6366f1; }
      }
      
      .social-icon {
          transition: all 0.3s ease;
      }
      
      .social-icon:hover {
          transform: scale(1.1);
          background: linear-gradient(135deg, #6366f1, #a855f7);
          color: white;
      }
      
      .card-scroll::-webkit-scrollbar {
          display: none;
      }
      
      .cursor-logo {
          animation: float 3s ease-in-out infinite, point 2s ease-in-out infinite;
      }
      
      @keyframes float {
          0% { transform: translateY(0px) rotate(0deg); }
          50% { transform: translateY(-10px) rotate(5deg); }
          100% { transform: translateY(0px) rotate(0deg); }
      }
      
      @keyframes point {
          0% { transform: translate(0, 0); }
          50% { transform: translate(5px, 5px); }
          100% { transform: translate(0, 0); }
      }
      
      .gradient-line {
          height: 2px;
          background: linear-gradient(to right, transparent, #B76E79, #a9c191, transparent);
      }