body{
    overflow-x: hidden;
}

.hero-section{
        background: var(--hero-section-background);
       background-repeat: no-repeat;
       background-size: contain;
       background-position: center;
       height: 850px;
       width: 100%;
   }


   
   .hero-section .continer{
       display: flex;
       justify-content: center;
   }
   .hero-box{
       margin-top: 120px;
       width: 800px;
       padding: 110px 110px 80px;
       background: rgba(235, 246, 255, 0.6);
       backdrop-filter: blur(10px);
       /* Note: backdrop-filter has minimal browser support */
       border-radius: 20px;
   }
   .hero-top-heading{
       color: var(--color-blue);
       font-weight: 600;
       font-size: 18px;
       font-family: var(--Poppins);
   }
   .hero-heading{
       font-family: var(--paytone);
       font-size: 40px;
       line-height: 60px;
       color: var(--color-dark-blue);
       margin-bottom: 40px;
   }
   .tex-bg-color{
        background-color: #b1dbff;
        background-size: contain;
       background-position: center;
       background-repeat:no-repeat ;
       padding: 0px 10px;
       border-radius: 30px;
   }
   .hero-para{
       font-family: var(--Poppins);
       font-size: 16px;
       line-height: 30px;
       letter-spacing: 0.01em;
        color: var(--color-gray);
        width: 95%;
   }
   
   
   
   
   
   /* work=play */
   
   .workplay{
       background: var(--workplay-background);
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
       margin: 00px 0px 100px;
       padding: 80px 0px;
   }
   .endgame{
       display: inline-block;
       font-weight: 600;
       font-size: 20px;
       line-height: 27px;
       text-align: center;
       color: #0089FF;
       background: rgba(153, 208, 255, 0.4);
       border-radius: 22.5px;
       padding: 10px 25px;
       margin-bottom: 0px !important;
   }
   .playtitle{
       font-family: var(--paytone);
       font-size: 70px;
       color: var(--color-dark-blue);
       margin-bottom: 7px;
   }
   .vision-title{
       font-size: 18px;
       line-height: 25px;
       color: var(--color-light-gray);
   }
   
   
   
   
   
   
   
   
   
   /* 3-box-wraper */
   
   
   .box3-wraper{
       margin-top: 50px;
       display: flex;
       justify-content: center;
       position: relative;
   }
   .tri-bg{
       position: absolute;
       z-index: -1;
       width: 100%;
       top: -70px;
   }
   
   .single-box{
       transition: .3s;
       display: flex;
       align-items: center;
       width: 310px;
       height: 210px;
       background: rgba(255, 255, 255, 0.7);
       box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.12);
       border-radius: 12px;
       padding: 43px 40px;
       margin: 12px;
       backdrop-filter: blur(10px);
   }
   .single-box:hover{
       transform: scale(1.05);
   }
   .single-box p{
       font-size: 16px;
       line-height: 30px;
       letter-spacing: 0.01em;
       color: var(--color-light-gray);
   }
   
   
   
   
   .client-logos{
       margin: 150px 0px;
   }
   
   
   
   
   
   
   
   /* city-section */
   
   .city-section{
       position: relative;
       background: linear-gradient(179.95deg, rgba(235, 246, 255, 0.4) 0.04%, rgba(235, 246, 255, 0) 99.96%);
       padding: 100px 0px;
   }
   .city-heading{
       font-family: var(--paytone);
       font-size: 40px;
       color: var(--color-dark-blue);
       margin-bottom: 130px;
   }
   .red-heart{
       padding: 0px 10px;
       animation: heart 1s infinite;
   }
   @keyframes heart{
       0%{
       
           transform: scale(1.2);
       }
       50%{
           transform: scale(.8);
       }
       100%{
           transform: scale(1.2);
       }
   }
   .center-city {
       display: flex;
       justify-content: center;
      position: relative;
      top: -110px;
   }
   .city-img-box{
       position: relative;
   }
   .center-city-box{
       display: flex;
       justify-content:center;
        width: 70%;
   }
   .center-city p{
       font-weight: 600;
       font-size: 18px;
       width: 400px;
       text-align: center;
       letter-spacing: 0.01em;
       color: var(--color-dark-blue);
   }
   .chennai{
       position: relative;
       left: 50px;
   }
   .blue-haft{
       position: absolute;
       top: 200px;
       right: 20px;
       backdrop-filter: blur(10px);
       z-index: -1;
   }
   .pink-haft{
       position: absolute;
       bottom: 0px;
       left: 40%;
       z-index: -1;
   }
   .green-haft{
       position: absolute;
       left: 0px;
       top: 60%;
       z-index: -1;
   }
   
   /* rated-section */
   .badgess{
       width: 350px;
   }
   .rated-section{
       height: 450px;
       background: var(--rated-section-background);
       background-position: center;
       background-size: cover;
       padding: 80px 0px 0px;
   }
   .badge-img{
       width: 120px;
       margin: 0px 25px;
   }
   .rated-title {
       font-family: var(--paytone);
       font-size: 34px;
       color: var(--color-dark-blue);
   }
   .flex-center{
       margin-top: 50px;
       display: flex;
       justify-content: center;
   }
   .color-box {
       height: 250px;
       margin-bottom: 30px;
   }
   .city-section .violet{
       background: #B499FF;
       backdrop-filter: blur(10px);
       border-radius: 20px 120px 20px 20px;
   }
   .city-section .blue{
       background: #99D0FF;
       backdrop-filter: blur(10px);
       border-radius: 20px 20px 120px 20px;
   }
   .city-section .green{
       background: #99FFCE;
       backdrop-filter: blur(10px);
       border-radius: 120px 20px 20px 20px;
   }
   .city-section .yellow{
       background: #FFE299;
       backdrop-filter: blur(10px);
       border-radius: 20px 20px 20px 120px;
   }
   .color-box .number{
       padding-top: 35px;
       font-family: var(--paytone);
       font-size: 60px;
       margin-bottom: 10px;
       color: var(--color-dark-blue);
       text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.12);
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   /* team-section */
   
   
   .team-title{
       font-family: var(--paytone);
       font-size: 46px;
       line-height: 60px;
       color: var(--color-dark-blue);
       margin-bottom: 12px;
       padding-top: 100px;
   }
   .team-subtitle{
      
       font-size: 20px;
       color: var(--color-light-gray); 
   }
   
   
   .team-section {
       position: relative;
       background: linear-gradient(16.17deg, #EBF6FF 10.6%, rgba(235, 246, 255, 0) 115.33%);
   }
   
   .color-lines{
       position: absolute;
       top: 70px;
       z-index: -1;
       width: 100% ;
       left:0px;
   }
   
   .team-img{
       margin-top: 30px;
       z-index: 5 !important;
   }
   
   .dark-blue-box{
       height: 15px;
       width: 100vw;
       background-color: var(--color-dark-blue);
   }
   
   @media only screen and (min-width: 1700px) {
       .hero-section {
           margin-top: 100px;
           height: 920px;
           background-size: contain;
       }
       .workplay{
           margin: 80px 0px 100px;
       }
   
     }
   
   
     @media only screen and (max-width: 1050px) {
   
       .client-logos{
           padding: 0px 40px;
       }
     }
   
   @media only screen and (max-width: 800px) {
   
       .city-img{
         width: 100%;
     }
     .hero-box {
       margin-top: 120px;
       width: 80%;
       padding: 70px;
     }
     .hero-heading {
       font-size: 33px;
     }
       .box3-wraper{
           display: flex;
           flex-direction: column;
       }
       .single-box{
           width: 100%;
       }
   }
   
   
   @media only screen and (max-width: 450px) {
       .hero-section{
           background: var(--hero-section-450-background);
           background-repeat: no-repeat;
           background-size: contain;
           background-position: center;
       }
       .workplay {
           background: var(--workplay-450-background);
           background-size: contain;
           background-repeat: no-repeat;
           background-position: center;
           margin: 0px 0px 100px;
           padding: 80px 0px;
       }
       .hero-box {
           margin-top: 120px;
           width: 82%;
           padding:50px 20px;
       }
       .hero-heading {
           font-size: 28px;
           line-height: 150%;
       }
       .badge-img {
           width: 88px;
           margin: 0px 15px;
       }
       .tri-bg{
           display: none;
       }
       .playtitle {
           font-size: 30px;
       }
       .box3-wraper{
           background: var(--rated-section-450-background);
           background-repeat: no-repeat;
           background-size: contain;
       }
       .color-box .number {
           padding-top: 20px !important;
       }
       .subtitle-box{
           font-size: 14px;
       }
       .client-logos {
           margin: 100px 0px;
       }
       .color-box {
           height: 201px;
       }
       .rated-title {
          font-size: 27px;
          
       }
       .rated-section {
            height: 100% !important;
            padding-bottom: 70px !important;
            background: var(--rated-section-450-background);
            background-position: center;
            background-size: cover;
            padding: 80px 0px 0px;
            background-repeat: no-repeat;
       }
       .single-box {
   
           height: 160px;
       }
       .endgame {
           font-size: 16px;
           padding: 5px 25px;
       }
       .client-logos {
           padding: 0px 0px;
       }
       .workplay {
          margin: 0px 0px 50px;
       }
       .city-heading {
           font-size: 25px;
       }
       .blue-haft,.pink-haft,.green-haft{
           display: none;
       }
       .color-box .number {
           padding-top: 50px;
           font-size: 40px;
       }
       .single-box {
           width: 96%;
       }
       .center-city p {
          font-size: 13px;
           width: 100px;
       }
       .center-city-box {
           display: flex;
           justify-content: center;
           width: 100%;
           position: relative;
           left: -40px;
       }
       .rated-section {
           height: 350px;
       }
       .team-title {
           font-size: 32px;
       }
   }