@media (max-width: 768px) {
    body{
    margin: 0px;
    overflow-x:hidden ;
    }

    .legalist{
        flex-direction: column;
        height: auto;
        padding: 10px;
    }
    .legalistone{
        width: 95%;
        padding: 5px;
    }
    .connect {
    flex-direction: column;
    padding: 20px;
    text-align: left;
    }
    .about{
        flex-direction: column;
        padding: 20px;
    }
    .footerrtwoo {
justify-content: space-between;
    }
    .clientsoneoneon {
    gap: 20px;
    }

    .business{
        text-align: center;
        flex-direction: column;
        padding: 20px;
    }
    .straight {
    flex-direction: column;
    padding: 20px;
    text-align: center;
    }
    .forover{
        padding: 20px;
    }
    .clientss {
        flex-direction: column;
        padding: 20px;
    }
    .tak{
        text-align: center;
        padding: 20px;
    }
    .newyorkone .consultt{
      
        justify-content: left;
    }
    .carousel-card {
    flex: 0 0 100%;
    }
    .carousel-card img {
    
    height: 100%;
    }
    .aijoin {
    flex-direction: column;
    }
    .aijoinone{
        width: 90%;
        height: auto;
    }
    .aijointwo{
        width: 100%;
    }
     .aijointhree{
        width: 100%;
    }
     .aijoinfour{
        width: 100%;
    }
    .ouroffice{
        padding: 20px;
    }
    .newyork{
        flex-direction: column;
        padding: 5px;
    }
    .newyorkone {
    width: 90%;
    }
    .why{
        padding: 20px;
        width: 90%;
    }
    .connectone {
    width: 100%;
}
.connecttwo{
    width: 100%;
}
.form-container {
    padding: 20px;
}
.footerr {
    padding: 20px;
}
.footerr .fool {
        flex-direction: column;
    }

    .copyright {
    flex-direction: column;
    }
    .copyrighttwo {
    flex-direction: column;
    }
    .aiat {
        font-size: 2.0rem;
    }
    .forover .businesstwoour {
        font-size: 25px;
    }
    .forover{
        text-align: center;
    }
    .free{
        flex-direction: column;
    }
    .legalisttwo {
    width: 100%;
    height: 100%;
}
.aboutone {
    width: 100%;
}
.abouttwo {
    width: 100%;
}
.aboutthree {
    width: 100%;
}
.businessone {
    width: 100%;
}
.businesstwo {
    width: 100%;
}
.lstraight {
    width: 100%;
}
.rstraight {
    width: 100%;
}
.forever{
    margin: 20px;
}

.clientssone {
width: 100%;
}
.clientsstwo {
    text-align: center;
    width: 100%;
}
.consultt {
justify-content: center;
}
.ai-four {
    padding: 20px;
}
.carousel-wrapper {
    padding: 0px;
}
.form-container {
    width: 90%;
}
.form-row {
    flex-direction: column;
}
.aiat {
    width: 100%;
}
.aijoinone {
    padding: 20px;
}
.freeone{
    width: auto;
    text-align: center;
}
.freetwo {
    text-align: center;
width: auto;
}
.five{
    text-align: center;
}
.about{
    text-align: center;
}
 .legalisttwo {
    margin: 0px;
    height: 250px; /* Adjust height as needed */
  }

  .legalisttwo .services {
    display: none; /* Hide all inner text */
  }

  .legalisttwo.active {
    height: 350px; /* Maintain height when active on mobile */
  }

  .legalisttwo.active::before {
    filter: blur(0); /* Keep image clear */
  }
  .logo-slider {
    width: 100%;
    margin: 0px;
  }
 .logo img{
    width: 150px;
 }
.ai-four img {
    height: 250px;
}
.fade-right {
    right: 0px;
}
.fade-left {
    left: 0px;
}
.carousel-track-container .fade-left{
    width: 0px;
}
.carousel-track-container .fade-right{
    width: 0px;
}

.take {
    text-align: center;
}
.we{
    text-align: center;
    font-size: 2.5rem;
}
.innovative{
    text-align: center;
}
.footerone{
    text-align: center;
}

.subscribe-container {
    flex-direction: column;
}
}

@media only screen and (min-width: 820px) and (max-width: 1180px) {
body{
    overflow-x: hidden;
}
.services {
    
    font-size: 10px;
    padding: 5px;
}
.forover{
    padding: 30px;
}
.clientss {
padding: 50px;
}
.aijoinone {
padding: 5px;
}
.aijoinoneat 
{
font-size: 1.5rem;
}
.ouroffice {
    padding: 30px;
}
.connect{
    padding:20px;
}
.form-container {
    padding: 30px 10px;
}
.connectone {
    width: 55%;
}
.connecttwo {
    width: 55%;
}
input[type="email"] {
    width: 95%;
}
}


/* about page */

@media (max-width: 768px) {


.awho{
    padding: 20px;
}
.afor .forover
{
    padding: 20px;
}
.afor .clientss 
{
    padding: 20px;
}
.acase {
    padding: 20px;
}
.aintellectual 
{
    padding: 20px;
    flex-direction: column;
}
.aintellectualone {
    width: 100%;
}
.atoday{
    padding: 20px;
    flex-direction: column;
}
.atodayone {
    padding: 20px;
    width: 100%;
}
.atodaytwo{
    margin: 0px;
    width: 100%;
}
.ajoinustodayy {
font-size: 2.5rem;
}


}

@media only screen and (min-width: 820px) and (max-width: 1180px) {

.awho{
    padding: 20px;
}
.aabout{
    padding: 20px;
}
.afor .forover {
    padding: 20px;
}
.afor .clientss {
    padding: 20px;
}
.acase {
    padding: 20px;
}
.aintellectual{
    padding: 20px;

}


.tak {
    padding: 20px;
}
.newyork {
padding: 20px;
}
.atoday {
    padding: 20px;
    width: 100%;
    margin: 0px;
}
.connect {
    gap: 15px;
}
.form-container {
    padding: 40px 10px;
}
.footerr{
    padding: 20px;
}



.aabout {
    padding: 20px;
}
}


/* MOBILE STYLES */
@media (max-width: 767px) {
  .aabout {
    padding: 20px;
    position: relative;
  }

  .aaboutone {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .logo {
    height: 40px;
  }

  .hamburger {
    width: 40px;
    height: 40px;
    background-color: #9d5a32;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    gap: 5px;
    cursor: pointer;
    display: flex;
    z-index: 1001;
  }

  .hamburger span {
    width: 20px;
    height: 2px;
    background-color: white;
    transition: all 0.3s ease;
  }

  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  .aabouttwo {
    display: none;
  }

  .aservices {
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background-color: #132030;
    padding: 0 20px;
    border-radius: 0 0 20px 20px;
    z-index: 999;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease, padding 0.3s ease;
    display: flex;
  }

.aservices.mobile-show {
  padding: 30px 20px;
  max-height: 90vh;
  overflow-y: auto;
}
  .aservices > p,
  .aservices > .apage {
    color: white;
    font-size: 16px;
    margin: 10px 0;
  }

  .aservices .aaboutus {
    color: #f4722b;
  }

  .apage {
    display: flex;
    align-items: start;
    gap: 5px;
    cursor: pointer;
    flex-direction: column;
    position: relative;
  }

  .apage span {
    display: inline-block;
    transition: transform 0.3s ease;
  }

  .rotates {
    transform: rotate(180deg);
  }

  .dropdowns {
    display: none;
    width: 100%;
    margin-top: 10px;
    background-color: #1d2a3a;
    border-radius: 10px;
    padding: 10px 15px;
  }

  .dropdowns.show {
    display: block;
  }

  .dropdown-grids {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px 15px;
  }

  .dropdown-grids p {
    color: #ccc;
    font-size: 14px;
    margin: 0;
  }

  .dropdown-grids p.orange {
    color: #f4722b;
  }
}


@media only screen and (min-width: 820px) and (max-width: 1180px) {
  .aabout {
    padding: 20px;
    position: relative;
  }

  .aaboutone {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .logo {
    height: 40px;
  }

  .hamburger {
    width: 40px;
    height: 40px;
    background-color: #9d5a32;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    gap: 5px;
    cursor: pointer;
    display: flex;
    z-index: 1001;
  }

  .hamburger span {
    width: 20px;
    height: 2px;
    background-color: white;
    transition: all 0.3s ease;
  }

  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  .aabouttwo {
    display: none;
  }

  .aservices {
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background-color: #132030;
    padding: 0 20px;
    border-radius: 0 0 20px 20px;
    z-index: 999;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease, padding 0.3s ease;
    display: flex;
  }

  .aservices.mobile-show {
    padding: 30px 20px;
    max-height: 1000px;
  }

  .aservices > p,
  .aservices > .apage {
    color: white;
    font-size: 16px;
    margin: 10px 0;
  }

  .aservices .aaboutus {
    color: #f4722b;
  }

  .apage {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    flex-direction: column;
    position: relative;
  }

  .apage span {
    display: inline-block;
    transition: transform 0.3s ease;
  }

  .rotates {
    transform: rotate(180deg);
  }

  .dropdowns {
    display: none;
    width: 100%;
    margin-top: 10px;
    background-color: #1d2a3a;
    border-radius: 10px;
    padding: 10px 15px;
  }

  .dropdowns.show {
    display: block;
  }

  .dropdown-grids {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px 15px;
  }

  .dropdown-grids p {
    color: #ccc;
    font-size: 14px;
    margin: 0;
  }

  .dropdown-grids p.orange {
    color: #f4722b;
  }
}