@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');


* {
    margin: 0rem;
    padding: 0rem;
    scroll-behavior: smooth;
    box-sizing: border-box;

}

body {
    background-color: #151515;
   
}
body {
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .viewport {
    position: fixed;
    width: 100%;
  }
  #smooth-scroll{
    width: 100%;
  }
  .scroll-container{

    max-width:1440px;
    margin: 0 auto;
    transform-style: preserve-3d;
  }
  
  


a {
    text-decoration: none;
}

p,
h1,
span {
    margin: 0rem;
    padding: 0rem;
}

button {
    border: none;
    outline: none;
    cursor: pointer;
}


.overlay {
    background-color: #F2F2F2;
    position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      --clip-path-size: 25px;
      -webkit-clip-path: circle(var(--clip-path-size) at var(--x, 0%) var(--y, 0%));
      clip-path: circle(var(--clip-path-size) at var(--x, 0%) var(--y, 0%));
      transition: -webkit-clip-path 150ms;
      transition: clip-path 150ms;
      transition: clip-path 150ms, -webkit-clip-path 150ms
}

.overlay.disabled {
    clip-path: circle(0px at var(--x, 50%) var(--y, 50%));

}

.overlay.hovered {

    clip-path: circle(125px at var(--x, -50%) var(--y, -50%));
}




.main-page-container {
    max-width: 1440px;
    margin: auto;
    padding: 40px 50px 0rem 50px;
  
}
.main-page-container .section-one{
   
}
.main-page-container .section-one .d-flex {
    display: flex;
    justify-content: space-between;
 /*    align-items: end; */
 /*    overflow: hidden; */
    position: relative;
}

.main-page-container .section-one .d-flex h1.title {
    color: #F2F2F2;
    font-family: "Marche Pro", Arial, sans-serif;
    font-size: 180px;
    font-style: normal;
    font-weight: 800;
    line-height: 140px;
    /* 77.778% */
  
}
.overlay .main-page-container .section-one .d-flex h1.title{
color: #151515;
}

.main-page-container .section-one .d-flex img.head {
    width: 25%;
    position: absolute;
    right: 2.5%;
    transform: translate(0%, 10%);
}
.main-page-container .section-one .d-flex img.looping-img{
    position: absolute;
    right:0%;
    top:0%;
    width: 30%;
    animation: rotateAntiClockwise 30s infinite;
}

@keyframes rotateAntiClockwise {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
  }




.main-page-container .section-one .d-flex2 {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-top: 20px;
}

.main-page-container .section-one .d-flex2 p {
    color: #F2F2F2;
    font-family:  Surt, Helvetica, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 84;
    line-height: 25px;
    /* 125% */
    max-width: 300px;
}
.overlay .main-page-container .section-one .d-flex2 p{
color: #151515;
}

.main-page-container .section-one .d-flex2 h1.sub-title {
    color: #F2F2F2;
    text-align: right;
    font-family: "Marche Pro", Arial, sans-serif;
    font-size: 180px;
    font-style: normal;
    font-weight: 800;
    line-height: 140px;
    /* 77.778% */
}
.overlay .main-page-container .section-one .d-flex2 h1.sub-title {
color: #151515;
}
.main-page-container .section-one .d-flex2 h1.sub-title span {
    color: #DBFF00;
    font-family: "Marche Pro", Arial, sans-serif;
    font-size: 180px;
    font-style: normal;
    font-weight: 800;
    line-height: 110px;
}
.overlay .main-page-container .section-one .d-flex2 h1.sub-title span {
    color: #5F3EFF;
}
.section-two{
    width: 100%;
margin-top:200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap:15px;

}
.section-two .row1{
    display: inline-block;
white-space: nowrap; 
  
  
} 

.section-two .row2{
    display: inline-block;
    white-space: nowrap; 
  
 
}
.section-two .row3{
    display: inline-block;
    white-space: nowrap; 
  
}
.section-two .row1 img{
    animation: infiniteText1 35s ease  infinite;
}
.section-two .row2 img{
    animation: infiniteText2 35s ease infinite;
}
.section-two .row3 img{
    animation: infiniteText3 60s ease infinite;
}
.section-two .row1 img,
.section-two .row2 img,
.section-two .row3 img{
    display: inline-block;
}
@keyframes infiniteText1{
    0%{
        transform: translate(0%);
    }
    100%{
        transform: translate(-100%);
    }
}
@keyframes infiniteText2{
    0%{
        transform: translate(0%);
    }
    100%{
        transform: translate(100%);
    }
}
@keyframes infiniteText3{
    0%{
        transform: translate(0%);
    }
    100%{
        transform: translate(-100%);
    }
}
.section-two img{
    height:205px;
    object-fit: cover;
}
.section-three .row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    min-height: 515px;
    margin-top: 100px;
}
.section-three .row div.img-container{
    width: 40%;
    position: relative;
}
.section-three .row img {
    width: 100%;
    /*     height: 426px; */
    object-fit: cover;
}
.section-three .row div.img-container img:nth-child(2){
    position: absolute;
   /*  right:13%;
    bottom: 17%;
    width: 26%; */
    right:12%;
    bottom: 16%;
    width: 28%; 
    animation: rotateClockwise 30s infinite linear;
      }


      @keyframes rotateClockwise {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

.section-three .row .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 360px;
    width: 30%;
}

.section-three .row .column p {
    color: #F2F2F2;
    text-align: justify;
    font-family: Surt, Helvetica, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 84;
    line-height: 25px;
    /* 125% */
}
.overlay  .section-three .row .column p{
    color:#151515;
}

.section-four .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 23px;
    margin-top: 132px;
}





.section-four .grid-container .project-overview {
    padding: 40px 30px 0px 30px;
    border-radius: 25px;
    background: #F2F2F2;
    height: 343px;
    transition: all 0.3s ease
}

.section-four .grid-container .project-overview:hover {
    background: #000;
    color: #F2F2F2
}

.section-four .grid-container .project-overview:hover>div {
    border-bottom: 2px solid #F2F2F2;
}

.section-four .grid-container .project-overview:hover>div h1 {
    color: #F2F2F2;
}

.section-four .grid-container .project-overview:hover>p {
    color: #F2F2F2;
}

.section-four .grid-container .project-overview div {
    width: 100%;
    border-bottom: 2px solid #191919;
    padding-bottom: 40px;
    transition: all 0.3s ease;
}

.section-four .grid-container .project-overview h1 {
    color: #000;
    font-family: Surt, Helvetica, sans-serif;
    font-size: 70px;
    font-style: normal;
    font-weight: 132;
    transition: all 0.3s ease;
text-transform:uppercase;
}

.section-four .grid-container .project-overview p {
    color: #000;
    font-family: Surt, Helvetica, sans-serif;
    ;
    font-size: 25px;
    font-style: normal;
    font-weight: 84;
    line-height: 90px;
    white-space: nowrap;
    transition: all 0.3s ease;

}

.section-four .grid-container .project-overview.design {
    border-radius: 25px;
    background: #DBFF00;
    transition: all 0.3s ease;
    font-size: 120px;
}
.section-four .grid-container .project-overview.design div h1,
.section-four .grid-container .project-overview.grid div h1{
    font-size: 120px;
}

.section-four .grid-container .project-overview.design:hover {
    background: #000;
}

.section-four .grid-container .project-overview.design:hover>div {
    border-bottom: 2px solid #DBFF00;
}

.section-four .grid-container .project-overview.design:hover>div h1 {
    color: #DBFF00;
    
}

.section-four .grid-container .project-overview.design:hover>p {
    color: #DBFF00;
}

.section-four .grid-container .num-of-clients {
    border-radius: 25px;
    background: #5F3EFF;
    padding: 40px 30px 0px 30px;
    transition: all 0.3s ease;
}

.section-four .grid-container .num-of-clients:hover {
    background: #F2F2F2;
}

.section-four .grid-container .num-of-clients:hover>div {
    border-bottom: 2px solid #5F3EFF;
}

.section-four .grid-container .num-of-clients:hover>div h1,
.section-four .grid-container .num-of-clients:hover>p {
    color: #5F3EFF;
}

.section-four .grid-container .num-of-clients div {
    border-bottom: 2px solid #F2F2F2;
    padding-bottom: 120px;
    transition: all 0.3s ease;
}

.section-four .grid-container .num-of-clients h1 {
    color: #F2F2F2;
    font-family: Surt, Helvetica, sans-serif;
    transition: all 0.3s ease;
    font-size: 120px;
    font-style: normal;
    font-weight: 132;
    line-height: 90px;
    transition: all 0.3s ease;
}

.section-four .grid-container .num-of-clients p {
    color: #F2F2F2;
    font-family: Surt, Helvetica, sans-serif;
    ;
    font-size: 25px;
    font-style: normal;
    font-weight: 84;
    line-height: 90px;
}


.section-four .grid-container .num-of-projects {
    border-radius: 25px;
    background: #FD403C;
    padding: 40px 30px 0px 30px;
    transition: all 0.3s ease;
}

.section-four .grid-container .num-of-projects:hover {
    background-color: #F2F2F2;
}

.section-four .grid-container .num-of-projects:hover>div {
    border-bottom: 2px solid #FD403C;
}

.section-four .grid-container .num-of-projects:hover>div h1,
.section-four .grid-container .num-of-projects:hover>p {
    color: #FD403C;
}

.section-four .grid-container .num-of-projects div {
    border-bottom: 2px solid #F2F2F2;
    padding-bottom: 120px;
    transition: all 0.3s ease;
}

.section-four .grid-container .num-of-projects h1 {
    color: #F2F2F2;
    font-family: Surt, Helvetica, sans-serif;
    transition: all 0.3s ease;
    ;
    font-size: 120px;
    font-style: normal;
    font-weight: 132;
    line-height: 90px;
}

.section-four .grid-container .num-of-projects p {
    color: #F2F2F2;
    font-family: Surt, Helvetica, sans-serif;
    transition: all 0.3s ease;
    font-size: 25px;
    font-style: normal;
    font-weight: 84;
    line-height: 90px;
}

.section-five {
    margin-top: 158px;
}

.section-five h1 {
    color: #F2F2F2;
    font-family: "Marche Pro", Arial, sans-serif;
    font-size: 180px;
    font-style: normal;
    font-weight: 800;
    line-height: 140px;


}
 /* Define animation to play when the element is in the viewport */
 @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(50%);
    }
    to {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  
  /* Apply animation only when the element is in the viewport */
  .animated-header.in-viewport {
    animation: fadeInUp 0.7s ease forwards;
  }
.overlay .section-five h1 {
    color: #151515;
}
.overlay .section-five svg.plus path{
    fill: #5F3EFF;
}


.logo-project-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 25px;
    background: #DBFF00;
    padding: 40px;
    height: 372px;
    margin-top: 128px;
    transition: all 0.3s ease
}

.logo-project-container:hover {
    color: #DBFF00;
    background-color: #212121;
}

.logo-project-container:hover>.column h1 {
    color: #DBFF00;
}

.logo-project-container .column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 57px;
}

.logo-project-container .column h1 {
    color: #191919;
    font-family: Surt, Helvetica, sans-serif;

    font-size: 70px;
    font-style: normal;
    font-weight: 132;
    line-height: 70px;
    text-transform: uppercase;
    transition: all 0.3s ease
}

.logo-project-container .column button {
    color: #FFF;
    font-family: Surt, Helvetica, sans-serif;
    ;
    font-size: 35px;
    font-style: normal;
    font-weight: 84;
    line-height: 100px;
    /* 285.714% */
    border-radius: 15px;
    background: #191919;
    padding: 0px 25px;
    transition: all 0.3s ease
}

.visual-project-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 25px;
    background: #5F3EFF;
    padding: 40px;
    height: 372px;
    margin-top: 30px;
    position: relative;
    transition: all 0.3s ease
}

.visual-project-container:hover {
    background-color: #F2F2F2;

}

.visual-project-container:hover>.column h1 {
    color: #5F3EFF;
}

.visual-project-container .column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 57px;

}

.visual-project-container .column h1 {
    color: #F2F2F2;
    font-family: Surt, Helvetica, sans-serif;
    transition: all 0.3s ease;
    font-size: 70px;
    font-style: normal;
    font-weight: 132;
    line-height: 70px;
    text-transform: uppercase;


}

.visual-project-container .column button {
    color: #FFF;
    font-family: Surt, Helvetica, sans-serif;
    ;
    font-size: 35px;
    font-style: normal;
    font-weight: 84;
    line-height: 100px;
    /* 285.714% */
    border-radius: 15px;
    background: #191919;
    padding: 0px 25px;
    transition: all 0.3s ease
}

.visual-project-container img.bike {

    margin-right: -3.8rem;
}

.layout-project-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 25px;
    background: #FD403C;
    padding: 40px;
    height: 372px;
    margin-top: 30px;
    position: relative;
    transition: all 0.3s ease
}

.layout-project-container:hover {
    background-color: #F2F2F2;
}

.layout-project-container:hover>.column h1 {
    color: #FD403C;
}

.layout-project-container .column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 57px;

}

.layout-project-container .column h1 {
    color: #F2F2F2;
    font-family: Surt, Helvetica, sans-serif;
    transition: all 0.3s ease;
    font-size: 70px;
    font-style: normal;
    font-weight: 132;
    line-height: 70px;
    text-transform: uppercase;

}

.layout-project-container .column button {
    color: #FFF;
    font-family: Surt, Helvetica, sans-serif;
    ;
    font-size: 35px;
    font-style: normal;
    font-weight: 84;
    line-height: 100px;
    /* 285.714% */
    border-radius: 15px;
    background: #191919;
    padding: 0px 25px;
    transition: all 0.3s ease
}

.logo-project-container .column button:hover,
.visual-project-container .column button:hover,
.layout-project-container .column button:hover {
 color: #191919;
        background-color: #fff;

}

.logo-project-container .column button:active,
.visual-project-container .column button:active,
.layout-project-container .column button:active {
    transform: scale(0.9);
}

.layout-project-container img.paper {
    margin-right: -7rem;
}

.section-six .first-paragraph {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.section-six .first-paragraph p {
    color: #F2F2F2;
    font-family: "Marche Pro", Arial, sans-serif;
    font-size: 70px;
    font-style: normal;
    font-weight: 800;
    line-height: 60px;
    text-transform: uppercase;
    text-align: center;
    width: 90%;
}
.overlay .section-six .first-paragraph p {
color: #151515;
}

.section-six .first-paragraph p:nth-child(1) {
    margin-top: 148px;
    margin-bottom: 100px;
}

.section-six .first-paragraph p:nth-child(2) {
    color: #F2F2F2;
    font-family: Surt, Helvetica, sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 187;
    line-height: 90px;
    /* 225% */
}
.overlay .section-six .first-paragraph p:nth-child(2) {
color: #151515;
}

.section-six .first-paragraph p span {
    color: #5F3EFF;
    text-align: center;
    font-family: "Marche Pro", Arial, sans-serif;
    font-size: 70px;
    font-style: normal;
    font-weight: 800;
    line-height: 60px;
    /* 85.714% */
    text-transform: uppercase;
}
.overlay .section-six .first-paragraph p span{
color: #FD403C;
}

.section-six .second-paragraph {
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    ;
}

.section-six .second-paragraph p:nth-child(1) {
    color: #F2F2F2;
    text-align: center;
    font-family: "Marche Pro", Arial, sans-serif;
    font-size: 70px;
    font-style: normal;
    font-weight: 800;
    line-height: 60px;
    /* 85.714% */
}
.overlay .section-six .second-paragraph p:nth-child(1){
    color: #151515;
}

.section-six .second-paragraph p:nth-child(1) span {
    color: #DBFF00;
    font-family: "Marche Pro", Arial, sans-serif;
    font-size: 70px;
    font-style: normal;
    font-weight: 800;
    line-height: 60px;
}
.overlay   .section-six .second-paragraph p:nth-child(1) span {
color:#5F3EFF
}
.section-six .second-paragraph p:nth-child(2) {


    color: #F2F2F2;
    font-family: Surt, Helvetica, sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 97;
    max-width: 500px;
    margin-top: 160px;

    text-align: center;

}
.overlay .section-six .second-paragraph p:nth-child(2){
color: #151515;
}
.section-six .second-paragraph p:nth-child(2) span {
    font-weight: 187;
}

.section-six .third-para {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 116px;
    margin-top: 344px;
}

.section-six .third-para img {
    width: 90%;
}

.section-six .third-para p {
    color: #F2F2F2;
    font-family: Surt, Helvetica, sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 84;
    line-height: 90px;
    /* 225% */
}
.overlay .section-six .third-para p{
    color: #151515;
}

footer {
    margin-top: 150px;
    margin-bottom: 150px;
}

footer h1 {
    color: #F2F2F2;
    font-family: "Marche Pro", Arial, sans-serif;
    font-size: 150px;
    font-style: normal;
    font-weight: 800;
    line-height: 180px;
    /* 120% */
    text-align: center;
    text-transform: uppercase;
}
.overlay footer h1{
    color: #151515;
}

footer .d-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 90%;
    margin: auto;
    margin-top: 30px;
}

footer .d-flex .column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;

}

footer .d-flex .column a.gmail {
    color: #000;
    font-family: Surt, Helvetica, sans-serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 84;
    padding: 30px 50px;
    border-radius: 15px;
    background: #F2F2F2;
    transition: all 0.3s ease;
    text-align: center;
}
.overlay footer .d-flex .column a.gmail {
    background-color: #000;
    color: #F2F2F2;
    text-align: center;
}


footer .d-flex .column a.gmail:hover,
footer .d-flex .column .phone a:nth-child(1):hover,
footer .d-flex .column .phone a:nth-child(2):hover,
footer .d-flex .column .be a:nth-child(1):hover,
footer .d-flex .column .be a:nth-child(2):hover,
footer .d-flex .column:nth-child(2) a:hover {
    opacity: 0.9;
}

footer .d-flex .column .phone {
    display: flex;
    justify-content: center;
    gap: 20px;
 
}

footer .d-flex .column .phone a:nth-child(1) {
    background-color: #DBFF00;
  padding: 10px;
    border-radius: 15px;
    transition: all 0.3s ease;
    width: 114px;
    height:114px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.overlay footer .d-flex .column .phone svg path
{
fill: #DBFF00;
}
.overlay footer .d-flex .column .phone a:nth-child(1){
background-color: #5F3EFF;

}


footer .d-flex .column .phone a:nth-child(2) {
    color: #000;
    width: 80%;
    font-family: Surt, Helvetica, sans-serif;
    font-size: 45px;
    white-space: nowrap;
    font-style: normal;
    font-weight: 84;
    padding: 30px 50px;
    border-radius: 15px;
    background: #DBFF00;
    color: #5F3EFF;
    transition: all 0.3s ease;

    text-align: center;
}
.overlay  footer .d-flex .column .phone a:nth-child(2){
background-color: #5F3EFF;   
color: #DBFF00;
text-align: center;
}

footer .d-flex .column .be {
    display: flex;
    justify-content: center;
    gap: 20px;

}

footer .d-flex .column .be a:nth-child(1) {
    border-radius: 15px;
    background: #5F3EFF;
    padding: 10px;
 width: 114px;
 height:114px;
 display: flex;
 justify-content: center;
 align-items: center;;
    transition: all 0.3s ease;
}
.overlay footer .d-flex .column .be svg path{
    fill: #151515;
    
}
.overlay  footer .d-flex .column .be a:nth-child(1){
    background: #DBFF00;
    display: flex;
     justify-content: center;
     align-items: center;;
}
footer .d-flex .column .be a:nth-child(2) {
    color: #000;
    width: 80%;
    font-family: Surt, Helvetica, sans-serif;
    font-size: 45px;
    white-space: nowrap;
    font-style: normal;
    font-weight: 84;
    padding: 30px 50px;

    border-radius: 15px;
    background: #5F3EFF;
    color: #F2F2F2;
    transition: all 0.3s ease;
text-align: center;

}
.overlay footer .d-flex .column .be a:nth-child(2) {
background-color: #DBFF00;
color: #151515;
text-align: center;
}

footer .d-flex .column:nth-child(2) a {
    border-radius: 15px;
    background: #5F3EFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 70px;
    width: 383px;
    height: 383px;
    transition: all 0.3s ease;
}
.overlay   footer .d-flex .column:nth-child(2) a {
    background-color: #DBFF00;
}
footer .d-flex .column .download-img {
    width: 60%;

}

footer .d-flex .column:nth-child(2) p {
    color: #D9D9D9;
    text-align: center;
    font-family: Surt, Helvetica, sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 84;
    line-height: 50px;
}
.overlay footer .d-flex .column:nth-child(2) p{
color: #151515;

}

.section-four .grid-container .project-overview.grid {
    grid-column: 2/4;
}

@media screen and (max-width:1440px) {
 
    .main-page-container .section-one .d-flex h1.title {
        font-size: 100px;
        line-height: 80px;
    }
    .main-page-container .section-one .d-flex2{
        margin-top: 200px;
    }
    .main-page-container .section-one .d-flex2 h1.sub-title {
        font-size: 100px;
        line-height: 80px;
    }

    .main-page-container .section-one .d-flex2 h1.sub-title span {
        font-size: 100px;
        line-height: 80px;
    }

    .section-four .grid-container .project-overview,
    .section-four .grid-container .num-of-clients,
    .section-four .grid-container .num-of-projects {
        height: 283px;
    }

    .section-four .grid-container .project-overview div {
        width: 100%;
        border-bottom: 2px solid #191919;
        padding-bottom: 70px;
    }

    .section-four .grid-container .project-overview h1 {
        font-size: 30px;
    }

    .section-four .grid-container .project-overview .font-bigger {
        padding-bottom: 30px;
    }

    .section-four .grid-container .project-overview .font-bigger h1,
    .section-four .grid-container .project-overview .font-bigger h1 {
        font-size: 100px;
    }

    .section-four .grid-container .num-of-clients div,
    .section-four .grid-container .num-of-projects div {
        padding-bottom: 50px;
    }

    .section-four .grid-container .num-of-clients h1,
    .section-four .grid-container .num-of-projects h1,
    .section-four .grid-container .project-overview.design div h1,
    .section-four .grid-container .project-overview.grid div h1 {
        font-size: 100px;
    }

    .section-five h1 {
        font-size: 100px;
        line-height: 80px;
    }

    .logo-project-container .column h1,
    .visual-project-container .column h1,
    .layout-project-container .column h1 {

        font-size: 50px;


        line-height: 60px;

    }

    .logo-project-container,
    .visual-project-container,
    .layout-project-container {
        height: 272px;
    }

    .logo-project-container .column,
    .visual-project-container .column,
    .layout-project-container .column {
        gap: 37px
    }

    .logo-project-container .column button,
    .visual-project-container .column button,
    .layout-project-container .column button {
        font-size: 25px;
        line-height: 70px;

    }

    .logo-project-container img {
        width: 25%;
    }

    .visual-project-container img.bike {
        width: 35%;
    }

    .layout-project-container img.paper {
        width: 45%;
        margin-right: -4rem;
    }

    .section-six .first-paragraph p span {
        font-size: 50px;
    }

    .section-six .first-paragraph p:nth-child(1) {
        font-size: 50px;
    }

    .section-six .first-paragraph p:nth-child(2),
    .section-six .second-paragraph p:nth-child(2) {

        font-size: 30px;
    }

    .section-six .second-paragraph p:nth-child(1),
    .section-six .second-paragraph p:nth-child(1) span {
        font-size: 50px;
    }

    footer h1 {
        font-size: 80px;
    }

    footer .d-flex {
        gap: 10px
    }

    footer .d-flex .column {
        gap: 10px
    }

    footer .d-flex .column:nth-child(2) a {
        height: 292px;
        width: 292px;
        padding: 30px;
    }

    footer .d-flex .column .download-img {
        width: 50%;
    }

    footer .d-flex .column:nth-child(2) p {
        font-size: 30px;
    }

    footer .d-flex .column a.gmail,
    footer .d-flex .column .phone a:nth-child(2),
    footer .d-flex .column .be a:nth-child(2) {
        font-size: 30px;
        padding: 27px 40px;
    }
    footer .d-flex .column .phone a:nth-child(1),
    footer .d-flex .column .be a:nth-child(1) {

height: 90px;

    }

    footer .d-flex .column .phone svg,
    footer .d-flex .column .be svg {
        width: 40px;
        height: 40px;
    }

    footer .d-flex .column .phone,
    footer .d-flex .column .be {
        gap: 10px
    }

    footer .d-flex .column .phone a:nth-child(1),
    footer .d-flex .column .be a:nth-child(1) {
       /*  padding: 10px 14px */
    }
}

@media screen and (max-width:1100px) {
    .section-four .grid-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .section-four .grid-container .project-overview,
    .section-four .grid-container .num-of-clients,
    .section-four .grid-container .num-of-projects {
        width: 100%;
    }

    .section-four .grid-container .project-overview.grid {
        grid-column: 1/2;
    }
}

@media screen and (max-width:920px) {
    .main-page-container {
        padding: 40px 20px 0rem 20px
    }
 
    .main-page-container .section-one .d-flex h1.title {
        font-size: 50px;
        line-height: 40px;
    }

    .main-page-container .section-one .d-flex2 h1.sub-title {
        font-size: 50px;
        line-height: 40px;
    }

    .main-page-container .section-one .d-flex2 h1.sub-title span {
        font-size: 50px;
        line-height: 40px;
    }

    .main-page-container .section-one .d-flex img {}

    .main-page-container .section-one .d-flex2 p,
   
    .section-three .row .column p {
        font-size: 16px;
        line-height: 20px;
    }

    .section-three .row {
        flex-wrap: wrap;
        gap: 0px;
        margin-top: 60px;
    }
    .section-three .row div.img-container{
        width: 100%;
    }

    .section-three .row img {
        width: 100%;
    }

    .section-three .row .column {
        justify-content: start;
        gap: 20px;
        width: 80%;
    }

    .section-four .grid-container .project-overview,
    .section-four .grid-container .num-of-clients,
    .section-four .grid-container .num-of-projects {
        height: 220px;
    }

    .section-four .grid-container .project-overview div,
    .section-four .grid-container .num-of-clients div {
        padding-bottom: 30px;
    }

    .section-four .grid-container .num-of-projects div {
        font-size: 50px;
        padding-bottom: 30px;
    }

    .section-four .grid-container .project-overview p {
        line-height: 80px;
    }

    .section-four .grid-container .project-overview h1 {
        font-size: 30px;
    }

    .section-four .grid-container .project-overview .font-bigger {
        padding-bottom: 10px;
    }

    .section-four .grid-container .project-overview .font-bigger h1,
    .section-four .grid-container .project-overview .font-bigger h1 {
        font-size: 70px;
    }

    .section-four .grid-container .num-of-clients div,
    .section-four .grid-container .num-of-projects div {
        padding-bottom: 0px;
    }

    .section-four .grid-container .num-of-clients h1,
    .section-four .grid-container .num-of-projects h1,
    .section-four .grid-container .project-overview.design div h1,
    .section-four .grid-container .project-overview.grid div h1 {
        font-size: 70px;

    }

    .section-five svg.plus {
        width: 40px !important;
        height: 40px !important;
    }

    .section-five h1 {
        font-size: 70px;
        line-height: 60px;
    }

    .logo-project-container .column h1,
    .visual-project-container .column h1,
    .layout-project-container .column h1 {

        font-size: 30px;
        line-height: 30px;

    }

    .logo-project-container,
    .visual-project-container,
    .layout-project-container {
        height: 272px;
    }

    .logo-project-container .column,
    .visual-project-container .column,
    .layout-project-container .column {
        gap: 37px
    }

    .logo-project-container .column button,
    .visual-project-container .column button,
    .layout-project-container .column button {
        font-size: 20px;
        line-height: 60px;

    }

    .logo-project-container img {
        width: 35%;
        height: 100%;
    }

    .visual-project-container img.bike {
        width: 45%;
        height: 100%;
    }

    .layout-project-container img.paper {
        width: 55%;
        height: 100%;
        right: 0rem;
    }

    .section-six .first-paragraph p span {
        font-size: 30px;
        line-height: 30px;
    }

    .section-six .first-paragraph p:nth-child(1) {
        font-size: 30px;
        margin: 100px 0rem;
        line-height: 30px;
    }

    .section-six .second-paragraph {
        margin-top: 100px;
    }

    .section-six .first-paragraph p:nth-child(2),
    .section-six .second-paragraph p:nth-child(2) {
        margin-top: 100px;
        font-size: 20px;
    }

    .section-six .third-para {
        margin-top: 200px;
    }

    .section-six .second-paragraph p:nth-child(1),
    .section-six .second-paragraph p:nth-child(1) span {
        font-size: 30px;
        line-height: 30px;
    }

    .section-six .third-para p {
        font-size: 30px;
    }

    footer h1 {
        font-size: 60px;
    }

    footer .d-flex {
        width: 100%;
        margin: 0rem;
        gap: 10px;
        flex-direction: column;
        margin-top: 50px;
    }

    footer .d-flex .column {
        gap: 10px;
        width: 100%;
    }


    footer .d-flex .column:nth-child(2) a {
        height: 212px;
        width: 100%;
        padding: 30px;
        gap: 10px
    }

    footer .d-flex .column .download-img {
        width: 20%;
    }

    footer .d-flex .column:nth-child(2) p {
        font-size: 20px;
        line-height: 25px;
    }

    footer .d-flex .column a.gmail,
    footer .d-flex .column .phone a:nth-child(2),
    footer .d-flex .column .be a:nth-child(2) {
        font-size: 16px;
        padding: 20px 30px;
    }

    footer .d-flex .column .phone a:nth-child(2),
    footer .d-flex .column .be a:nth-child(2) {
        width: 90%;
    }

    footer .d-flex .column .phone svg,
    footer .d-flex .column .be svg {
        width: 30px;
        height: 30px;
    }

    footer .d-flex .column .phone,
    footer .d-flex .column .be {
        gap: 10px;
        justify-content: space-between;
    }

   
    footer .d-flex .column .phone a:nth-child(1),
    footer .d-flex .column .be a:nth-child(1) {

height: 60px;

    }
}
@media screen and (max-width:756px) {
   
            .main-page-container .section-one .d-flex2{
                margin-top: 120px;
            }
            .section-two{
                width: 100%;
            margin-top:100px;
                overflow: hidden;
            }
}
@media screen and (max-width:500px) {
    
    .main-page-container .section-one .d-flex h1.title,
    .main-page-container .section-one .d-flex2 h1.sub-title span,
    .main-page-container .section-one .d-flex2 h1.sub-title {
        font-size: 30px;
        line-height: 30px;
    }

    .main-page-container .section-one .d-flex2 p,

    .section-three .row .column p {
        font-size: 8px;
        line-height: 18px;
       width: 100%;
    }
    .main-page-container .section-one .d-flex2 p{
max-width: 100px;
    }
    .section-four .grid-container .project-overview p {
        white-space: wrap;
    }
    .section-four .grid-container {
        margin-top: 60px;
        flex-direction: column;
    }

    .section-four .grid-container .project-overview,
    .section-four .grid-container .num-of-clients,
    .section-four .grid-container .num-of-projects {
        height: 160px;
        padding: 20px;
        border-radius: 20px;
    }

    .section-four .grid-container .project-overview h1 {
        font-size: 20px;
    }

    .section-four .grid-container .num-of-clients h1,
    .section-four .grid-container .num-of-projects h1,
    .section-four .grid-container .project-overview .font-bigger h1,
    .section-four .grid-container .project-overview .font-bigger h1,
    .section-four .grid-container .project-overview.design div h1,
    .section-four .grid-container .project-overview.grid div h1{
        font-size: 30px;
        line-height: 70px;
    }

    .section-four .grid-container .project-overview p,
    .section-four .grid-container .num-of-clients p,
    .section-four .grid-container .num-of-projects p {
        line-height: 30px;
        font-size: 16px;

    }

    .section-five h1 {
        font-size: 30px;
        line-height: 30px;
    }

    .section-five svg.plus {

        width: 20px !important;
        height: 20px !important;
    }

    .logo-project-container,
    .visual-project-container,
    .layout-project-container {
        margin-top: 50px;
        flex-direction: column;
        height: auto;
        gap: 30px
    }

    .logo-project-container .column,
    .visual-project-container .column,
    .layout-project-container .column {
        gap: 17px
    }

    .logo-project-container .column button,
    .visual-project-container .column button,
    .layout-project-container .column button {
        font-size: 20px;
        line-height: 30px;
        padding: 15px 20px
    }

    .section-six .third-para p {
        font-size: 20px;

    }

    .section-six .first-paragraph p:nth-child(1) {
        font-size: 24px;
    }

    .section-six .first-paragraph p span,
    .section-six .second-paragraph p:nth-child(1),
    .section-six .second-paragraph p:nth-child(1) span {
        font-size: 24px;
    }

    .section-six .first-paragraph p:nth-child(2),
    .section-six .second-paragraph p:nth-child(2) {
        margin-top: 0px;
    }

    .section-six .third-para {
        margin-top: 100px;
    }

    footer h1 {
        font-size: 30px;
        line-height: 50px;
        white-space: nowrap;
    }

    footer .d-flex .column a.gmail,
    footer .d-flex .column .phone a:nth-child(2),
    footer .d-flex .column .be a:nth-child(2) {
        padding: 15px 10px
    }

}