@media screen and (max-width: 2560px) {

  .navigator-flex {
    height: 70vh ;
    top: 80px; 
  }
  .navigator-flex .inner {
    width: 100%;
    height:65vh ;
  }
  .trapezoid2 {
    height: 100% ;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 84%, 0 90%) ;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .trapezoid3 {
    height: 100% ;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 84%) ;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
}

@media screen and (max-width: 1920px) {

  .navigator-flex {
    height: 75vh ;
    top: 80px; 
  }
  .navigator-flex .inner {
    width: 100%;
    height:70vh ;
  }
  .trapezoid2 {
    height: 100% ;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 78%, 0 86%) ;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .trapezoid3 {
    height: 100% ;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 78%) ;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
}

@media screen and (max-width: 1440px) {

  .navigator-flex {
    height: 80vh ;
    top: 80px; 
  }
  .navigator-flex .inner {
    width: 100%;
    height:75vh ;
  }
  .trapezoid2 {
    height: 100%;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 79%, 0 87%) ;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .trapezoid3 {
    height: 100%;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 87%, 0 79%) ;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
}
@media screen and (max-width: 1274px) {
  .navigator-flex {
    height: 75vh;
    top: 80px; 
  }
  .navigator-flex .inner {
    width: 100%;
    height:70vh;
  }

  .trapezoid2 {
    height: 100%;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 83%, 0 88%) ;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .trapezoid3 {
    height: 100%;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 83%) ;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
}


@media screen and (max-width: 1024px) {
  .navigator-flex {
    height: 75vh ;
    top: 80px;
  }
  .navigator-flex .inner {
    width: 100%;
    height:100% ;
  }

  .trapezoid-right .content img{
    width: 120px;
    margin-left: 5px;
  }

  .trapezoid-left .content img{
    width: 120px;
    margin-right: 5px;
  }

  .trapezoid2 {
    height: 100%;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 79%, 0 87%) ;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .trapezoid3 {
    height: 100%;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0 83%) ;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
}

@media screen and (max-width: 990px) {
  .navigator-flex {
    height: 65vh;
    top: 80px;
  }
  .navigator-flex .inner {
    width: 100%;
    height:60vh;
  }

  .trapezoid-right .content img{
    width: 120px;
    margin-left: 5px;
  }

  .trapezoid-left .content img{
    width: 120px;
    margin-right: 5px;
  }
}

@media screen and (max-width: 898px) {
  .navigator-flex {
    height: 55vh ;
    top: 80px;
  }
  .navigator-flex .inner {
    width: 100%;
    height:50vh ;
  }
  .trapezoid2 {
    height: 96%;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 83%, 0 91%) ;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .trapezoid3 {
    height: 96%;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 91%, 0 83%) ;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
}


@media screen and (max-width: 820px) {


  .navigator-flex {
    height: 60vh ;
    top: 5px ;
  }
  .navigator-flex .inner {
    width: 100% ;
    height:55vh ;
  }
  .last-card .inner .grid-container2 .grid-column2 img{
    width: 60px;
  }
  .last-card .inner .grid-container2{
    padding-bottom: 10px;
  }
  .last-card{
    height: auto ;
  }
  .last-card .inner {
    height:auto ;
    padding-bottom: 30px;
  }
  .trapezoid2 {
    height: 100%;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 82%, 0 89%) ;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .trapezoid3 {
    height: 100%;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 89%, 0 82%) ;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
}
@media screen and (max-width: 800px) {

  .hide-show{
    display: block !important;
  }
  .show-hide{
    display: none  !important;
  }
  .navigator-flex {
    height: 70vh ;
    top: 80px;
  }
  .navigator-flex .inner {
    height:65vh ;
  }
  .navigator-flex .inner .grid-column{
    min-width: 340px;
  }

  .last-card{
    height: auto ;
  }
  .last-card .inner {
    height:auto ;
    padding-bottom: 30px;
  }

  .trapezoid2 {
    height: 65% ;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 78%, 0 93%) ;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .trapezoid3 {
    height: 65%;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 93%, 0 78%)  ;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
}



@media screen and (max-width: 768px) {
  .socio-btn {
    display: flex;
    justify-content: center ; 
  }
  .grid-column-6{
    min-width: 250px;
  }
  .navigator-flex {
    height: 80vh ;
    top: 20px;
  }
  .navigator-flex .inner {
    width: 100%;
    height:75vh ;
  }

  .last-card{
    height: auto ;
  }
  .last-card .inner {
    height:auto ;
    padding-bottom: 30px;
  }
  .trapezoid2 {
    height: 60% ;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 94%) ;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .trapezoid3 {
    height: 60% ;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 94%, 0 74%)  ;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  .trapezoid-right .content img{
    width: 100px;
    margin-left: 5px;
  }
  .trapezoid-left .content img{
    width: 100px;
    margin-right: 5px;
  }

  .last-card{
    height: auto;
  }
  .last-card .inner{
    height:auto;

  }
  .last-card .inner h3{
    margin-left: 10px;

  }
  #setting{
    display: block;
  }

  .w-hidden-main, .w-hidden-medium {
    display: inherit ;
  }

  .w-hidden-small {
    display: none ;
  }

  .w-row, .w-container .w-row {
    margin-left: 0;
    margin-right: 0;
  }

  .w-col {
    width: 100%;
    left: auto;
    right: auto;
  }

  .w-col-small-1 {
    width: 8.33333%;
  }

  .w-col-small-2 {
    width: 16.6667%;
  }

  .w-col-small-3 {
    width: 25%;
  }

  .w-col-small-4 {
    width: 33.3333%;
  }

  .w-col-small-5 {
    width: 41.6667%;
  }

  .w-col-small-6 {
    width: 50%;
  }

  .w-col-small-7 {
    width: 58.3333%;
  }

  .w-col-small-8 {
    width: 66.6667%;
  }

  .w-col-small-9 {
    width: 75%;
  }

  .w-col-small-10 {
    width: 83.3333%;
  }

  .w-col-small-11 {
    width: 91.6667%;
  }

  .w-col-small-12 {
    width: 100%;
  }
}
@media screen and (max-width: 714px) {

  .navigator-flex {
    height: 96vh ;
    top: 10px;
  }
  .navigator-flex .inner {
    width: 100%;
    height:100% ;
  }

  .last-card{
    height: auto;
  }
  .last-card .inner{
    height:auto;

  }
  .trapezoid2 {
    height: 60% ;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 69%, 0 90%) ;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .trapezoid3 {
    height: 60% ;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 69%)  ;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
}



@media screen and (max-width: 601px) {
  .image-container img {
  width: 40px;
  height: auto;
  transition: filter 0.3s ease-in-out;
}
.page-wrapper {
    background-image: url("../img/mobile.jpg");
    background-position: 20% 10%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /*background-size: cover; */
    background-attachment: fixed;
}
 .footer-left-div ul > li {
    font-size: 16px ;
}
.sevices p {
    font-size: 16px ;
  }
  .hero-text {
      font-size: 16px ;
  }
  .mail-box {
         font-size: 16px ;
  }
  .copyright{
    font-size : 16px ;
}
  .navigator-flex .inner .grid-column{
    min-width: 240px;
  }
  .grid-column-6{
    min-width: 250px;
  }

  .navigator-flex {
    height: 80vh;
    top: 10px;
  }
  .navigator-flex .inner {
    width: 100%;
    height:100%;
  }

  .last-card{
    height: auto ;
  }
  .last-card .inner{
    height:auto;

  }
  .trapezoid2 {
    height: 410px;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 73%, 0 94%) ;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .trapezoid3 {
    height: 410px;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 94%, 0 73%)  ;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

}

@media screen and (max-width: 540px) {

  .navigator-flex .inner .grid-column{
    min-width: 240px;
  }
  .grid-column-6{
    min-width: 250px;
  }

  .navigator-flex {
    height: 90vh ;
    top: 10px;
  }
  .navigator-flex .inner {
    width: 100%;
    height:100%;
  }

  .last-card{
    height: auto ;
  }
  .last-card .inner{
    height:auto;

  }
  .trapezoid2 {

    height: 310px ;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 95%) ;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .trapezoid3 {
    height: 310px ;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0 70%)  ;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

}
@media screen and (max-width: 479px) {

  .navbar-container {
    flex-direction: column; /* Change flex direction to column for smaller screens */
    align-items: center; /* Center-align items */
  }
  .brand{
    justify-content: center;
    margin-bottom: 30px;
    margin-top: 20px;
  }
  .brand,
  .nav-button {
    width: 100%; /* Make both brand and nav-button take full width */
/* Add space between columns */
}
.navigator-flex {
  height:97vh ;
  top: 10px;
}
.navigator-flex .inner {
  width: 100%;
  height:100%;
}
.last-card{
  height: auto ;
}
.last-card .inner{
  height:auto ;

}
.trapezoid2 {
  height: 410px ;
  background-size: cover; /* Ensures the image fills the container without repeating */
  clip-path: polygon(0 0, 100% 0, 100%  214px, 0 290px) ;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.trapezoid3 {
  height: 410px ;
  background-size: cover; /* Ensures the image fills the container without repeating */
  clip-path: polygon(0 0, 100% 0, 100% 290px, 0 214px)  ;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}


.w-container {
  max-width: none;
}
.w-hidden-main, .w-hidden-medium, .w-hidden-small {
  display: inherit ;
}

.w-hidden-tiny {
  display: none ;
}

.w-col {
  width: 100%;
}

.w-col-tiny-1 {
  width: 8.33333%;
}

.w-col-tiny-2 {
  width: 16.6667%;
}

.w-col-tiny-3 {
  width: 25%;
}

.w-col-tiny-4 { 
  width: 33.3333%;
}

.w-col-tiny-5 {
  width: 41.6667%;
}

.w-col-tiny-6 {
  width: 50%;
}

.w-col-tiny-7 {
  width: 58.3333%;
}

.w-col-tiny-8 {
  width: 66.6667%;
}

.w-col-tiny-9 {
  width: 75%;
}

.w-col-tiny-10 {
  width: 83.3333%;
}

.w-col-tiny-11 {
  width: 91.6667%;
}

.w-col-tiny-12 {
  width: 100%;
}
}

@media screen and (max-width: 437px) {
  .w-nav-brand {
    width: 100% ;
  }
  .navigator-flex .inner .grid-column{
    min-width: 190px;
  }
  .grid-column-6{
    min-width: 250px;
  }

  .navigator-flex {
    height:700px ;
    top: 10px;
  }
  .navigator-flex .inner {
    width: 100%;
    height:100%;
  }
  .last-card{
    height: auto ;
  }
  .last-card .inner{
    height:auto ;

  }
  .trapezoid2 {
    height: 410px ;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100%  214px, 0 293px) ;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .trapezoid3 {
    height: 410px ;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 293px, 0 214px)  ;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
}
@media screen and (max-width: 414px) {
  .w-nav-brand {
    width: 100% ;
  }

  .grid-column-6{
    min-width: 250px;
  }

  .navigator-flex {
    height:700px ;
    top: 10px;
  }
  .navigator-flex .inner {
    width: 100%;
    height:100% ;
  }
  .last-card{
    height: auto ;
  }
  .last-card .inner{
    height:auto ;

  }
  .trapezoid2 {
    height: 410px ;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100%  214px, 0 293px) ;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .trapezoid3 {
    height: 410px ;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 293px, 0 214px)  ;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  .bottom-div-footer {
    height: 60px;
  }
  .cont-btn {
    bottom: 62px;
  }
}
  @media screen and (min-width: 700px) and (max-width: 950px) and (orientation: landscape) {
  .socio-btn {
    display: flex;
    justify-content: center !important ; 
  }
  .text {
  margin-top: 12px;
  font-size: 18px;
  line-height: 22px;
}
  .hide-show{
    display: none !important;
  }

  .show-hide{
    display: block  !important;
  }
  .navigator-flex {
    height: 330px;
    top: 8%;
  }
  .navigator-flex .inner {
    width: 100%;
    height:300px;
  }

  .tab-heading {
    font-size: 24px;
    line-height: 30px;
  }
  .horizontal-content{
    height: 100%;
  }
  .horizontal-content .text{
    font-size: 16px;
    margin-top: 2px;
  }
  .last-card{
    height: auto ;
  }
  .last-card .inner {
    height:auto ;
    padding-bottom: 30px;
  }
  .trapezoid2 {
    height: 85%;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 92%) ;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .trapezoid3 {
    height: 85%;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 75%) ;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .navigator-flex .inner .grid-column{
    min-width: 120px ;
  }
}
 @media screen and (min-width: 400px) and (max-width: 699px) and (orientation: landscape) {
  .hero-heading {
  margin-bottom: 3px;
  font-size: 18px !important; 
}
  .text {
  margin-top: 2px;
  font-size: 9px;
  line-height: 13px;
}
  .hide-show{
    display: none !important;
  }

  .show-hide{
    display: block  !important;
  }
  .navigator-flex {
    height: 330px;
    top: 8%;
  }
  .navigator-flex .inner {
    width: 100%;
    height:300px;
  }

  .tab-heading {
    font-size: 24px;
    line-height: 30px;
  }
  .horizontal-content{
    height: 100%;
  }
  .horizontal-content .text{
    font-size: 16px;
    margin-top: 2px;
  }
  .last-card{
    height: auto ;
  }
  .last-card .inner {
    height:auto ;
    padding-bottom: 30px;
  }
  .trapezoid2 {
    height: 85%;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 92%) ;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .trapezoid3 {
    height: 85%;
    background-size: cover; /* Ensures the image fills the container without repeating */
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 75%) ;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .navigator-flex .inner .grid-column{
    min-width: 120px ;
  }
}