.comingsoon-ui {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 17px 0;
  min-height: 140px;
  font-family: 'Raleway', sans-serif;
  background: #dacfbba3; /* matches your current tone */
}

  .rightheadingabout{
    position: absolute;
    top: -16%;
    left: 13%;
    
  }

/* Decorative vectors */
.csbg {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  opacity: 1;
  object-fit: cover;
}
.csbg-1 {
  top: -28px;
  left: -362px;
  width: 601px;
}
.csbg-2 {
  top: -56px;
  left: 797px;
  width: 573px;
}

.cs-contentwrap {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 36px;
}

.commingsoonsec {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cs-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-right {
  display: flex;
  gap: 18px;
}

.cs-badge img {
   background-color: transparent; 
  mix-blend-mode: multiply; 
  filter: brightness(0) invert(1);
  height: 42px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.07));
  transition: transform 0.14s cubic-bezier(.4,0,.2,1);
}
.commingsoons{
  height: 100px;
  width: 100%;
  position: relative;
}


.cs-coming {
  color: #8d8d8d;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.cs-title {
  color: #393939;
  font-size: 1.46rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ==========================
   ABOUT US SECTION
========================== */

.aboutus-bio {
  font-size: 12px;      
  line-height: 1.5;       
  color: #555;              
  margin-top: 0.8rem;       
  margin-bottom: 0;          
  text-align: center;       
  padding: 0 10px;         
  font-weight: 400;         
}
.aboutus-fanoz {
  position: relative;
  background: url(./../img/bgforabout.png) snow;
  margin: 0 auto;
  font-family: 'Raleway', sans-serif;
}
@media screen and (min-width: 768px) and (max-width: 1366px) {
    .commingsoons {
        height: 130px;
        width: 100%;
        right: 30%;
        position: relative;
    }
    #aboutus{
      padding: 0 20px;
    }
    .commingsoonsec{
      padding: 0 50px;
    }
}
.popimg {
  object-fit: fill;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: center;
  width: 93%;
  background: url("../img/app-detailsimgs/Frame1.svg");
  max-width: 4000px;
}

.aboutus-fanoz h1,
.outgammers h1 {
  color: #434343;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
}

.outgammers h1 {
  font-size: 32px;
}

.aboutus-fanoz h2,
.outgammers h3 {
  color: #727272;
  font-size: 28px;
  font-weight: 500;
  line-height: 32px;
  text-align: center;
}

.aboutus-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
}

.aboutus-card {
       background: linear-gradient(120deg, #FCEFD1 100%, #FFFCF5 100%);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    height: auto;
    max-width: 352px;
    flex: 1 1 260px;
    padding: 16px 0;
    text-align: center;
    display: flex
;
    flex-direction: column;
    align-items: center;
}
.aboutus-card.card-blue {
  background: linear-gradient(115deg, #DDF0FF 100%, #FBFDFF 100%);
}

.aboutus-avatar {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: #333 url('../img/app-detailsimgs/Cameron.png') center/cover no-repeat;
  margin-bottom: 16px;
  border: 3px solid #fff;
}
.aboutus-avatar.alt {
  background: #333 url('../img/app-detailsimgs/reema.png') center/cover no-repeat;
}

.aboutus-role {
  padding-top: 10px;
  font-size: 16px;
  line-height: 24px;
  color: #727272;
  font-weight: 400;
}
.aboutus-name {
  font-size: 24px;
  color: #434343;
  font-weight: 500;
  line-height: 32px;
}
.aboutus-social{

  padding: 8px 0;
}

.aboutus-story {
  background: linear-gradient(90deg, #E8F8E4 100%, #F8FFF6 100%);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  font-weight: 500;
  min-width: 250px;
  flex: 2 1 340px;
  position: relative;
  padding: 20px 20px;
  font-size: 16px;
  color: #434343;
  display: flex;
  align-items: center;
  line-height: 24px;
}
.quote-image {
  position: absolute;
  width: 80px;
  height: 72px;
}
.top-left { top: 10px; left: 15px; }
.bottom-right { bottom: 10px; right: 15px; }
.aboutus-story blockquote { margin: 0; }
blockquote span {
  font-size: 1.07rem;
  color: #222;
}
.aboutus-story b {
  color: #215d2c;
  font-weight: 600;
}

/* ==========================
   MEDIA QUERIES
========================== */

/* Large desktop ≥1400px */
@media (min-width: 1000px) {
    .brainheading {
        font-size: 1.7rem;
        display: flex
;
        justify-content: left;
        padding: 0 0 0 13%;
        margin: 0 0 2% 0;
    }
    .rightheadingabout {
  position: absolute;
        top: -14%;
        left: 18%;
        font-size: 1.7rem;
        display: flex
;   
justify-content: center;
        padding: 0px 0 0 17%;
        margin: 0px 0;
    }


  .aboutus-fanoz {
    max-width: 1400px;
    padding: 60px 40px;
  }
  .aboutus-fanoz h1 { font-size: 2.4rem; }
  .cs-contentwrap { max-width: 1400px; padding: 0 60px; }
  .cs-title { font-size: 1.7rem; }
}
.carousel-caption-text {
  display: flex;
  justify-content: center;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #ffffff;
  font-size: 48px;
  line-height: 64px;
  position: relative;
  bottom: -60%; /* default desktop/laptop position */
}

/* Tablet landscape & small laptops (601px–1024px) */
@media (max-width: 1024px) {
  .carousel-caption-text {
    font-size: 36px;
    line-height: 48px;
    bottom: -40%; /* move text up */
    padding: 0 20px; /* add side padding */
  }
}

/* Mobile devices (≤600px) */
@media (max-width: 600px) {


  .imgheadingng{
flex-direction: column;
        font-size: 28px;
        line-height: 36px;
        bottom: -233px;
        padding: 0px 9px;

  }
 
}

/* Extra small devices (≤400px) */
@media (max-width: 400px) {

    .imgheadingng{
   flex-direction: column;
           font-size: 20px;
        line-height: 28px;
        bottom: -272px;
        padding:2px 0px 0 33px;

  }
}
/* Tablet landscape & small laptops: 601px~1024px */
@media (min-width: 601px) and (max-width: 1024px) {
    .aboutus-container {
        display: grid
;
        padding: 30px 15px;
        row-gap: 80px;
        grid-template-columns: repeat(2, 1fr);
    }
  .aboutus-card { width: 100%; max-width: 100%; }
  .cs-contentwrap { flex-direction: row; gap: 24px; }
  .cs-right { gap: 24px; }
.rightheadingabout {
    position: absolute;
    top: -15%;
    left: 8%;
}
.aboutus-fanoz {
    padding: 17px 0;
}
}

/* Tablet portrait ≤900px */
@media (max-width: 900px) {
  .aboutus-story { font-size: 1rem; }
}

/* Large mobiles ≤768px */
@media (max-width: 768px) {
  .aboutus-fanoz h1 { font-size: 1.8rem; }
  .aboutus-avatar { width: 90px; height: 90px; }
}

/* Mobiles ≤600px */

/* Mobiles ≤600px */
@media (max-width: 600px) {
  /* Hide vectors */
  .csbg { display: none; }

  /* Coming Soon stack */
  .commingsoonsec {
    flex-direction: row;
    align-items: center;
  }
  .cs-left { text-align: center; }
  .cs-badge img { height: 48px; }

  /* About Us cards stack */
  .aboutus-container {
    flex-direction: column;
    gap: 55px;
  }
  .aboutus-card,
  .aboutus-story {
    max-width: 100%;
    padding: 46px 16px;
    height: auto;
    box-shadow: 0 1px 4px rgba(0,0,0,0.09);
  }
  .aboutus-story blockquote{
    padding: 50px 0;
  }
  .aboutus-fanoz h2, .outgammers h3 {
    color: #727272;
    font-size: 28px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
}
  .headingabout{
         padding: 20px 0 0 0;
         
    color: #727272;
    font-size: 28px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
  }


  .aboutus-avatar { width: 150px; height: 150px; }
    
    .rightheadingabout {
          position: absolute;
        top: -48px;
        display: block;
        left: 0px;
        width: 100%;
}
     
    
  .cs-title { font-size: 1.03rem; line-height: 1.22; }
}


/* Extra small phones ≤400px */
@media (max-width: 400px) {
  .aboutus-fanoz { padding: 30px 10px; }
  .aboutus-story { font-size: 0.95rem; padding: 14px; }
}