.About-us{
    height: 100vh;
}
.About-title{
    margin-top:200px;
    margin-left: 20px;
    height: 30vh;
    line-height: 1;
    
}
.About-title h1{
    font-size: 4.2rem;
    font-family: Comic Sans MS;
    color: #252324;
}
.About-title span{
    font-size: 4.2rem;
    font-family: Segoe Print;

}
.inf-of-us{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 60px;
  
}
.logo-of-club img{
    width: 300px;
}
.description-of-us {
    width: 50%;
    font-size: 1.7rem;
    font-family: MV Boli;
    font-weight: 600;
    margin-top: 20px;
    
}
.description-of-us p{
    margin-top: 30px;
    color: #252324;
    opacity: 1;
     transition: opacity 0.9s ease;
}
.word {
    opacity: 0.3;
    transform: translateY(6px);
    transition: opacity 0.15s linear, transform 0.15s linear;
}

.word.visible {
    opacity: 1;
    transform: translateY(0);
}
.qustion {
     width: 400px;
     height: 30px;
     display: flex;
     justify-content: left;
     margin: 120px 0 0 30px;
     align-items: center;
     gap: 12px;
     font-family:Lucida Sans Typewriter ;

     
}
.img-ask img{
    width: 50px;
}
.ask h4{
    font-size: 1.4rem;
    align-items: center;
    height: 100%;
    background-color: rgb(240, 240, 240);
     padding: 5px 12px;
    border-radius: 20px ;
}
.ask{

    padding: 0 12px;
    border-radius: 20px ;
    
}

.about-hcmc__item{
    display: flex;
    background-color: #f3f3f39d ;
    height: 90vh;
    border-radius: 20px;
    margin: 30px 10px;
}
.about-hcmc__card  {
    width: 100%;
    height: 100%;
    padding: 10px;
}
.about-hcmc__img{
    width: 550px;
   box-shadow: 0 0 30px rgb(60, 55, 62);
    height: 450px;
    margin-top: 30px;

}
.about-hcmc__description{
    font-size: 1.6rem;
    margin-top: 60px;
    font-family:Segoe UI Symbol;
    margin-left: 10px;
    color: rgb(60, 55, 62);
    font-weight: 700;
}
.about-hcmc__item1 {
    border-radius: 20px;
    margin: 30px 4px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.about-hcmc__img1{
    width: 90%;
    height: 300px;
    display: flex;
    justify-content: center;
    margin: auto;
}
.about-hcmc__description1{
    font-size: 1.7rem;
    font-family:Segoe UI Symbol;
    color: rgb(60, 55, 62);
    font-weight: 700;
    line-height: 1.5;
    margin-left: 20%;
}
mark{
    margin-top: 90px;

}
@media (max-width: 992px) {

  .About-us {
    height: auto;
    padding-bottom: 60px;
  }

  .About-title {
    margin-top: 120px;
    height: auto;
    text-align: center;
  }

  .About-title h1,
  .About-title span {
    font-size: 2.8rem;
  }

  .inf-of-us {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .logo-of-club img {
    width: 200px;
  }

  .description-of-us {
    width: 90%;
    font-size: 1.2rem;
  }

  .qustion {
    width: auto;
    margin: 60px auto;
    justify-content: center;
  }

  .about-hcmc__item {
    flex-direction: column;
    height: auto;
    padding: 20px;
  }

  .about-hcmc__img {
    width: 100%;
    height: auto;
  }

  .about-hcmc__description {
    font-size: 1.2rem;
    margin-top: 30px;
  }

  .about-hcmc__description1 {
    font-size: 1.2rem;
    margin-left: 0;
    text-align: center;
  }
  .links{
    text-align: center;
  }

}
/* Container l-kbir */
.about-hcmc__item1 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Kay-9sem l-page 3la joj */
    gap: 50px;
    align-items: center;
    padding: 80px 10%;
    background: #ffffff;
    overflow: hidden;
}

/* Jihat l-logo o l-kharita */
.about-hcmc__image {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-hcmc__img1 {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
}

/* Hover Effect 3la l-kharita */
.about-hcmc__img1:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

/* Jihat l-ktiba */
.about-hcmc__content1 {
    padding-left: 20px;
}

/* Heading dial About Our Club */
.about-section-title {
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #1a1a1a;
    margin-bottom: 20px;
    line-height: 1;
}

/* L-paragraph l-modern */
.about-hcmc__description1 {
    font-family: 'Inter', sans-serif; /* t-9der t-khdem b-Roboto */
    font-size: 1.15rem;
    color: #444;
    line-height: 1.8;
    text-align: justify;
}

/* L-mizat (Points) */
.about-hcmc__description1 br {
    display: block;
    content: "";
    margin-top: 15px;
}

/* Dik l-jomla l-akhira dial Vision */
.mark {
    margin-top: 30px;
    display: inline-block;
    padding: 10px 20px;
    background: #9ccd62; /* Lawn l-7mer dial l-club */
    color: white;
    font-weight: bold;
    border-radius: 4px;
    transform: skewX(-10deg); /* Style dial Racing/Speed */
}

.mark mark {
    background: transparent;
    color: white;
}

/* Animation dyal l-dkhoula */
@keyframes slideIn {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

.about-hcmc__content1 {
    animation: slideIn 0.8s ease-out;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .about-hcmc__item1 {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 40px 5%;
    }
}
/* Container l-kbir b-vibe dial sbaq */
/* --- Base Style (Desktop) --- */
.about-hcmc__item {
    display: flex;
    flex-wrap: wrap; /* Katkhalli l-mobile ihbet l-te7t */
    gap: 30px;
    padding: 60px;
    
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin: 20px auto;
    color: #000000;
   width: 100%;
    min-height: 100vh; /* 7eyedna 100vh bach may-t-cut-ach l-content */
}

.about-hcmc__image {
    flex: 1;
    min-width: 320px; /* Bach may-sgharch bzaf */
    perspective:900px;
}
.about-hcmc__image img {
    width: 100%;
}

.about-hcmc__card {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    transform: rotateY(-5deg);
    transition: all 0.6s ease;
    box-shadow: -20px 20px 40px rgba(0,0,0,0.5);
}

.about-hcmc__content {
    flex: 1.5;
    min-width: 320px;
    background: rgba(255, 255, 255, 0.02);
    padding: 40px;
    border-radius: 20px;
    border-right: 4px solid #9ccd62;
}

/* --- Media Queries (M-gaddine) --- */

@media screen and (max-width: 992px) {
    .about-hcmc__item {
        padding: 40px 20px;
        gap: 20px;
    }
    .about-hcmc__content {
        padding: 25px;
    }
}

@media screen and (max-width: 768px) {
    .about-hcmc__item {
        flex-direction: column; /* Vertical stack */
        padding: 20px;
        height: auto !important; /* Force auto height */
    }

    .about-hcmc__image, 
    .about-hcmc__content {
        width: 100%;
        min-width: 100%;
        flex: none;
    }

    .about-hcmc__card {
        transform: none !important; /* 7iyed 3D f mobile */
        margin-bottom: 20px;
    }

    .about-hcmc__description {
        font-size: 0.95rem; /* Sgher chwia bach i-jme3 l-ktiba */
        text-align: left; /* T9der t-derha center ila bghiti */
    }

    /* Fix l-image f mobile bach ma-t-khrejch kbir bzaf */
    .about-hcmc__img {
        max-height: 300px; 
        width: 100%;
        object-fit: cover;
    }
}