@media screen and (min-width: 1151px) {
      * {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
      }

      .gallery {
        max-width: 1200px;
        display: flex;
        justify-content: space-between;
        align-content: center;
        flex-direction: row;
        margin: 0px auto;
      }

      .right {
        max-width: 50%;
      }

      .left {
        height: 100vh !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 50%;
        position: relative;
      }

      .cardSlide {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
      }

      .card-container {
        position: absolute;
        width: fit-content;
        height: fit-content;
        padding: 20px 30px;
        background: #ffffff;
        border-top-right-radius: 14px;
        left: 0px;
        bottom: 0px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        z-index: 100;
      }

      .card-large-number {
        font-style: normal;
        font-weight: 800;
        font-size: 56px;
        line-height: 68px;
        text-transform: capitalize;
        color: #d50c3d;
        will-change: transform, opacity;
      }

      .card-title {
        margin: 5px 0px 20px;
        font-style: normal;
        font-weight: 700;
        font-size: 22.68px;
        line-height: 27px;
        text-transform: capitalize;
        color: #232826;
        will-change: transform, opacity;
      }

      .card-description {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        color: #232826;
        max-width: 240px;
      }

      .content-container {
        width: fit-content;
        height: 50%;
        display: none;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: space-around;
        align-items: flex-start;
        position: relative;
      }

      .content-heading {
        max-width: 460px;
        height: fit-content;
        font-style: normal;
        font-weight: 400;
        font-size: 48px;
        line-height: 58px;
        text-transform: uppercase;
        color: #232826;
        position: relative;
        overflow: hidden;
      }

      .content-heading h3 {
        transform: translateY(100%);
        opacity: 0;
        will-change: transform, opacity;
      }

      .number-label {
        position: absolute;
        top: 20%;
        left: 72%;
        font-style: normal;
        font-weight: 800;
        font-size: 128px;
        line-height: 34px;
        display: flex;
        align-items: center;
        color: rgba(0, 0, 0, 0.06);
        transform: translateY(20px);
        opacity: 0;
        will-change: transform, opacity;
      }

      .content-paragraph {
        max-width: 440px;
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 30px;
        color: #232826;
        position: relative;
        transform: translateY(20px);
        opacity: 0;
        will-change: transform, opacity;
      }

      .desktopPhotos {
        height: 544px;
        width: 630px;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
        box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
      }
      .desktopPhotos img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .desktopPhoto {
        position: absolute;
        width: 100%;
        height: 100%;
      }

      .image {
        background-image: url("");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }

      /* Animation classes */
      .fade-out {
        animation: fadeOut 0.5s forwards;
      }

      .fade-in {
        animation: fadeIn 0.5s forwards;
      }

      @keyframes fadeOut {
        from {
          opacity: 1;
          transform: translateY(0);
        }
        to {
          opacity: 0;
          transform: translateY(20px);
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* small screen / mobile layout */
      .mobileContent {
        display: none;
        width: 80vw;
      }

      .mobilePhoto {
        width: 80vw;
        height: 80vw;
        margin-top: 5em;
        border-radius: 6vw;
      }
      .our-work {
        display: none;
      }
      @media screen and (max-width: 1150px) {
        .gallery {
          display: none;
        }
        .our-work {
          position: relative;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          max-width: 1200px;
          margin: 0 auto;
          height: 100vh;
        }

        .our-work .content-wrapper {
          width: 100%;
          height: 100vh;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
        }

        .our-work .sliderparent {
          width: 100%;
          height: 100vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }

        .our-work .sliderChildren {
          position: relative;
          width: 100%;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .our-work .cardSlideChildren {
          width: 100%;
          height: 100vh;
          color: #fff;
          border-radius: 16px;
          position: absolute;
          opacity: 1;
          display: flex;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;
          column-gap: 60px;
          flex-direction: column-reverse;
        }

        .our-work .img-container {
          position: absolute;
          width: 90%;
          height: 45vh;
          bottom: 1%;
          /* padding-bottom: 30px; */
          border-radius: 12px;
          overflow: hidden;
          will-change: transform, opacity;
        }

        .our-work .img-container img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        .our-work .img-container::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.15)
          );
          pointer-events: none;
        }

        .our-work .card-container {
          position: absolute;
          width: fit-content;
          height: fit-content;
          padding: 20px 30px 20px 10px;
          background: #ffffff;
          border-top-right-radius: 14px;
          left: 0;
          bottom: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          display: none;
        }

        .our-work .card-large-number {
          font-weight: 800;
          font-size: 56px;
          line-height: 68px;
          text-transform: capitalize;
          color: #d50c3d;
        }

        .our-work .card-title {
          margin: 5px 0 20px;
          font-weight: 700;
          font-size: 22.68px;
          line-height: 27px;
          color: #232826;
        }

        .our-work .card-description {
          font-weight: 700;
          font-size: 16px;
          line-height: 20px;
          color: #232826;
          max-width: 300px;
        }

        .our-work .content-container-child {
          width: 90%;
          margin: 0px auto;
          height: auto;
          position: absolute;
          top: 10%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          gap: 10px;
        }

        .our-work .content-container-child .content-heading {
          max-width: 460px;
          font-weight: 700;
          font-size: 48px;
          line-height: 58px;
          text-transform: uppercase;
          color: #232826;
          /* margin-bottom: 20px; */
        }
        .content-container-child .content-heading h3 {
          transform: translateY(0%);
          opacity: 1;
        }
        .our-work .content-container-child .number-label {
          position: absolute;
          top: 19%;
          left: 72%;
          font-style: normal;
          font-weight: 800;
          font-size: 128px;
          line-height: 34px;
          display: flex;
          align-items: center;
          color: rgba(0, 0, 0, 0.06);
          transform: translateY(0px);
          opacity: 1;
        }

        .our-work .content-container-child .content-paragraph {
          width: 100%;
          font-weight: 400;
          font-size: 30px;
          line-height: 45px;
          color: #232826;
          max-width: 100%;
          opacity: 1 !important;
          max-width: 900px;
        }

        @keyframes bounce {
          0%,
          20%,
          50%,
          80%,
          100% {
            transform: translateY(0) translateX(-50%);
          }
          40% {
            transform: translateY(-20px) translateX(-50%);
          }
          60% {
            transform: translateY(-10px) translateX(-50%);
          }
        }
      }
      @media screen and (max-width: 768px) {
        .our-work .cardSlideChildren {
          width: 90%;
        }

        .our-work .img-container,
        .our-work .content-container-child {
          width: 100%;
          /* height: 50vh !important; */
        }

        .our-work .content-container-child .content-heading h3 {
          font-weight: 700;
          font-size: 30px;
          line-height: 100%;
          letter-spacing: 0px;
          max-width: 380px;
        }

        .our-work .content-container-child .content-paragraph {
          font-weight: 400;
          font-size: 30px;
          line-height: 36px;
          display: -webkit-box;
          -webkit-line-clamp: 6;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .our-work .content-container-child .number-label {
          font-size: 60px;
          top: 5%;
          left: auto;
          right: 0% !important;
        }
        .card-container {
          display: none;
        }
      }
      @media screen and (min-width: 500px) and (max-width: 600px) {
        .our-work .content-container-child .content-paragraph {
          font-weight: 400;
          font-size: 22px;
          line-height: 30px;
          display: -webkit-box;
          -webkit-line-clamp: 6;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      @media screen and (min-width: 400px) and (max-width: 500px) {
        .our-work .content-container-child {
          width: 90%;
          margin: 0px auto;
          height: auto;
          position: absolute;
          top: 10%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
        }
        .our-work .content-container-child .content-heading h3 {
          font-size: 20px;
        }
        .our-work .content-container-child .content-paragraph {
          font-size: 22px;
          line-height: 30px;
        }
        .our-work .content-container-child .number-label {
          font-size: 50px;
        }
      }
      @media screen and (min-width: 380px) and (max-width: 400px) {
        .our-work .content-container-child {
          width: 90%;
          margin: 0px auto;
          height: auto;
          position: absolute;
          top: 10%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
        }
        .our-work .content-container-child .content-heading h3 {
          font-size: 20px;
        }
        .our-work .content-container-child .content-paragraph {
          font-size: 24px;
          line-height: 30px;
          display: -webkit-box;
          -webkit-line-clamp: 7;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .our-work .content-container-child .number-label {
          font-size: 50px;
        }
      }
      @media screen and (min-width: 300px) and (max-width: 380px) {
        .our-work .content-container-child {
          width: 90%;
          margin: 0px auto;
          height: auto;
          position: absolute;
          top: 10%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
        }
        .our-work .content-container-child .content-heading h3 {
          font-size: 20px;
        }
        .our-work .content-container-child .content-paragraph {
          font-size: 22px;
          line-height: 30px;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .our-work .content-container-child .number-label {
          font-size: 50px;
        }
      }
      @media screen and (max-width: 300px) {
        .our-work .content-container-child {
          width: 90%;
          margin: 0px auto;
          height: auto;
          position: absolute;
          top: 10%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
        }
        .our-work .content-container-child .content-heading h3 {
          font-size: 15px;
        }
        .our-work .content-container-child .content-paragraph {
          font-size: 22px;
          line-height: 30px;
          display: -webkit-box;
          -webkit-line-clamp: 5;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .our-work .content-container-child .number-label {
          font-size: 50px;
        }
      }
		@media screen and (min-width:1150px){
			
		
		.content-heading h3{
			font-size:2rem!important;
		}
		.content-paragraph {
			font-size:20px!important;
		}
			.our-work .content-container-child .content-paragraph{
				font-size:20px!important;
			}
		}
		@media screen and (max-width: 768px) {
    .our-work .content-container-child .content-paragraph {
        font-size: 16px!important;
        line-height: 1.5em!important;
    }
}
		.content-paragraph strong{
			color:#D50C3D;
		}