@media only screen and (max-width: 1023px) {
     .classic-heading {
         max-width: 100%;
     }
     .gradient-intro .wrapper .content .classic-heading h2 {
         font-size: 2rem;
     }
     .gradient-intro .wrapper .content {
         padding: 0;
     }
     nav.industry-nav {
         max-width: 100%;
         border-top: 1px solid rgba(0,0,0,0.2);
         background-color: rgba(0,0,0,0.1);
     }
     ul.industry-nav__list {
         flex-wrap: nowrap;
         white-space: nowrap;
         overflow-x: auto;
         padding: 20px 40px;
     }
     .projects-content ul.projects-list li a .image-wrapper {
         max-height: 50vh;
     }
     .header-content {
         position: fixed;
         top: 0;
         left: 0;
         height: 100vh;
         flex-direction: column;
         align-items: flex-start;
         justify-content: flex-start;
         padding: 40px;
         background: linear-gradient(45deg, rgba(53, 36, 122, 1) 0%, rgba(29, 146, 169, 1) 100%);
         transform: translateX(-100%);
         visibility: hidden;
         transition: .3s all ease;
         width: 90%;
         z-index: 10;
         background-size: 400% 400%;
         animation: gradient 3s ease infinite;
     }
     @keyframes gradient {
         0% {background-position: 0% 50%;}
         50% {background-position: 100% 50%;}
         100% {background-position: 0% 50%;}
     }
     .mobile-menu-contact-details {
         display: block;
     }
     .mobile-menu-contact-details ul {
         list-style: none;
         padding: 0;
         display: flex;
         flex-direction: column;
         font-weight: 300;
         font-size: 13px;
         margin-top: 0;
     }
     .mobile-menu-contact-details ul li span {
         display: none;
     }
     .mobile-menu-contact-details ul li a {
         color: white;
         text-decoration: none;
         padding: 3px 0;
         display: block;
     }
     button.close-menu {
         display: block;
         position: absolute;
         top: 20px;
         right: 20px;
         background: transparent;
         border: none;
         box-shadow: none;
         color: #fff;
     }
     button.close-menu svg {
         width: 28px;
         height: 28px;
     }
     .header-content-mobile {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 10px 20px;
     }
     button.open-menu {
         background: transparent;
         color: white;
         border: none;
         box-sizing: border-box;
         box-shadow: none;
     }
     button.open-menu svg {
         width: 28px;
         height: 28px;
     }
     body.menu-is-open {
         overflow-y: hidden;
     }
     body.menu-is-open .header-content {
         transform: translateX(0);
         visibility: visible;
     }
    .menu-overlay {
        background: rgba(0, 0, 0, 0);
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        visibility: hidden;
        z-index: 9;
        transition: .6s all ease;
    }
    body.menu-is-open .menu-overlay {
        background: rgba(0, 0, 0, 0.6);
        visibility: visible;
    }
     body.scrolled-down #header .header-content {
         padding: 40px;
     }
     .header-content nav {
         margin:  0;
     }
     .header-content .header-logo img{
         width: 140px;
     }
     .header-content nav ul {
         flex-direction: column;
         align-items: flex-start;
         padding: 0;
         gap: 10px;
         margin-bottom: 0;
     }
     .header-content nav ul li:last-child {
         margin-top: 40px;
         border-top: 1px solid rgba(255, 255, 255, 0.2);
         width: 100%;
         display: block;
         padding-top: 40px;
     }
     .header-content nav ul li:last-child a {
         font-size: 20px;
     }
     .header-content nav ul li a {
         font-size: 1.6rem;
         font-weight: 500;
     }
     #home-welcome {
         overflow: hidden;
     }
     #home-welcome .content h2.hero {
         font-size: 3rem;
     }
     .home_wrapper .left h2 {
         font-size: 2rem;
     }
     #home-welcome video {
         height: 100vh;
         width: unset;
     }
     #home-welcome .content {
         padding: 20px;
         box-sizing: border-box;
         width: 100%;
     }
     section#home-about .home_wrapper {
         flex-direction: column;
         padding: 20px 20px 120px 20px;
     }
     section#home-about .home_wrapper .left,
     section#home-about .home_wrapper .right {
         min-width: 100%;
         padding: 0;
     }
     .home_wrapper .right .card-wrapper {
         flex-direction: column;
     }
     #home-about .home_wrapper .right .card-wrapper .left-side {
         min-width: 100%;
         height: 40vh;
         min-height: unset;
         border-radius: 20px 20px 0 0;
     }
     #home-about .home_wrapper .right .card-wrapper .right-side {
         min-width: 100%;
         height: 40vh;
         min-height: unset;
         border-radius:  0 0 20px 20px;
     }
     #home-services ul.home-services-list li, #home-services ul.home-services-list li:last-child {
         width: 100%;
         min-height: unset;
     }
     #home-services ul.home-services-list li a {
         padding: 20px;
     }
     section#home-achievements .home_wrapper {
         padding:0;
     }
     #home-achievements .home_wrapper ul {
         flex-wrap: nowrap;
         white-space: nowrap;
         overflow-x: auto;
         padding: 40px 20px;
     }
     #home-achievements .home_wrapper ul li {
         width:  auto;
         min-width: 70%;
     }
     #home-achievements .home_wrapper ul li span,
     #home-achievements .home_wrapper ul li strong {
         white-space: break-spaces;
     }
     section#home-clients .home_wrapper {
         flex-direction: column;
         padding: 40px 20px;
     }
     section#home-clients .home_wrapper .left {
         min-width: 100%;
     }
     section#home-clients .home_wrapper .right {
         display: none;
     }
     #home-clients ul.clients-logos li {
         width: 50%;
     }
     #home-clients ul.clients-logos li img {
         padding: 0;
     }
     /*Footer Mobile*/
     .footer-wrapper {
         flex-direction: column-reverse;
     }
     #footer .footer-wrapper .left {
         width: 100%;
     }
     #footer .footer-wrapper .right {
         width: 100%;
         padding: 40px 0;
     }
     #footer .footer-wrapper .right .footer-nav,
     #footer .footer-wrapper .right ul.achievements {
         padding: 0 40px;
     }
     #footer .footer-wrapper .right .footer-nav ul li a {
         font-size: 2.5rem;
     }
     #footer .footer-wrapper .right ul.achievements {
         flex-wrap: nowrap;
         white-space: nowrap;
         overflow-x: auto;
         width: 100%;
     }
     #footer .footer-wrapper .right ul.achievements li {
         width: auto;
     }
     /*Home page Projects*/
     #home-projects .home_wrapper {
         padding: 40px 0;
         flex-direction: column;
     }
     .related-projects .wrapper {
         padding: 40px 0;
     }
     .related-projects .wrapper .classic-heading {
         padding: 0 20px;
     }
     section#home-projects .left {
         padding: 0 20px;
         min-width: 100%;
         box-sizing: border-box;
     }
     section#home-projects .right {
         display: none;
     }
     #home-projects ul.projects-list, .related-projects ul.projects-list {
         flex-wrap: nowrap;
         white-space: nowrap;
         margin: 0;
         overflow-x: auto;
         padding: 0 20px;
         gap: 20px;
     }
     #home-projects ul.projects-list li, .related-projects ul.projects-list li {
         min-width: 95%;
     }
     #home-projects ul.projects-list li .description-wrapper,
     .related-projects ul.projects-list li .description-wrapper {
         white-space: normal;
     }
     #home-projects ul.projects-list li .project-info .image-wrapper, .related-projects ul.projects-list li .project-info .image-wrapper {
         max-height: 55vh;
     }
     .gradient-intro .wrapper .content .left,
     .about-team .wrapper .content .left {
        width: 100%;

     }
     #achievements .wrapper .content .splide:before,
     #achievements .wrapper .content .splide:after {
         width: 40px;
     }
     #reviews-section {
         padding-top: 60px;
     }
     #reviews-section .wrapper .content {
         padding: 0;
     }
     #reviews-section .wrapper .content .classic-heading {
         padding: 0 20px;
     }
     .gradient-intro .wrapper .content .left {
         padding: 0;
         box-sizing: border-box;
     }
     #achievements .wrapper .content,
     .about-team .wrapper .content {
         padding: 40px 20px;
     }
     .about-team .wrapper .content .left h2 {
         font-size: 3rem;
     }
     ul.members-list {
         gap: 10px;
         padding: 40px 20px;
     }
     ul.members-list li {
         width: calc(50% - 5px);
         padding: 20px 10px;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         text-align: center;
     }
     ul.members-list li.call-to-action {
         min-width: 100%;
     }
     ul.members-list li span {
         width: 50%;
     }
     ul.members-list li.call-to-action span {
         width: 20%;
     }
     ul.members-list li.call-to-action .member-info {
         text-align: left;
     }
     .projects-content {
         padding: 20px;
     }
     .projects-content ul.projects-list {
         flex-direction: column;
     }
     .projects-content ul.projects-list li {
         width: 100%;
     }
     .index-page .wrapper .content {
         flex-direction: column;
         padding: 20px;
     }
     .blog-index {
         column-count: 1;
         column-gap: 20px;
         width: 100%;
     }
     .index-page .wrapper .content .right {
         display: none;
     }
     .single-post .container {
         flex-direction: column;
     }
     .single-post .container .left {
         width: 100%;
         padding: 0;
         min-height: unset;
         position: relative;
     }
     .single-post .container .left .post-date {
         padding: 10px;
     }
     .single-post .container .right {
         min-width: 100%;
         padding:  20px;
     }
     .single-post .container .right h1 {
         font-size: 2rem;
     }
     main.projects-page .classic-heading {
         padding: 60px 20px 20px 20px;
         box-sizing: border-box;
     }
     main.projects-page .classic-heading h1 {
         margin-bottom: 10px;
     }
     .text-wrapper {
         max-height: 120px; /* adjust height */
         overflow: hidden;
         transition: max-height 0.3s ease;
     }
     .text-wrapper.expanded {
         max-height: 1000px; /* large enough to fit content */
     }
     .read-more-text {
         display: inline-block;
         margin-top: 10px;
         background: none;
         border: 1px solid #fff;
         color: #fff;
         font-weight: bold;
         cursor: pointer;
     }
     .read-more-text .less {
         display: none;
     }
     .read-more-text .more {
         display: block;
     }
     .read-more-text.expanded .less {
         display: block;
     }
     .read-more-text.expanded .more {
         display: none;
     }
     .project-header .overlay {
         min-height: 80vh;
     }
     .project-header .overlay .content h1 {
         font-size: 2.5rem;
     }
     .project-content .section-wrapper {
         flex-direction: column;
     }
     .project-content .section-wrapper .left,
     .project-content .section-wrapper .right {
         min-width: 100%;
         padding: 40px 20px ;
     }
     .project-content .section-wrapper .left h2 {
         font-size: 2rem;
     }
     ul.elegento-teams {
         gap: 10px;
     }
     ul.elegento-teams li {
         width: calc(25% - 10px);
     }
     ul.elegento-teams li p {
         font-size: 10px;
     }
     img.img-responsive.iphone-mockup.center-block {
         position: relative;
         top: 0;
         max-height: 80vh;
         left: 0;
         transform: none;
         max-width: 100%;
     }
     .seperate-container {
         background-position: center center;
     }
     .feature-section .wrapper {
         flex-direction: column;
     }
     .feature-section .wrapper .left,
     .feature-section .wrapper .right {
         min-width: 100%;
         padding: 40px 20px 0 20px ;
     }
     .feature-section .wrapper .right img {
         left: 0;
         position: relative;
         margin-bottom: -5px;
     }
     .awards-section ul {
         flex-wrap: nowrap;
         white-space: nowrap;
         overflow-x: auto;
         max-width: 100%;
         padding: 40px 20px;
     }
     .awards-section ul li {
         white-space: normal;
         min-width: 80%;
     }
     .numbers-facts .wrapper .numbers {
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 0;
     }
     ul.related-projects-list {
         flex-direction: column;
     }
     ul.related-projects-list li {
         width: 100%;
     }
     .numbers-facts {
         padding: 40px 20px;
     }
     .single-service-header .wrapper {
         padding: 0;
     }
     .single-service h1 {
         font-size: 2.5rem;
     }
     .services-c2a .double-btn {
         flex-direction: column-reverse;
     }
     .services-c2a .double-btn a:first-child,
     .services-c2a .double-btn a:last-child {
         border-radius: 40px;
         box-sizing: border-box;
         text-align: center;
         width: 100%;
     }
     .services-c2a .wrapper h4 {
         font-size: 2.5rem;
     }
     .career-contact-form-wrapper .left, .career-contact-form-wrapper .right {
         min-width: 100%;
     }
     .career-contact-form-wrapper {
         flex-direction: column;
         padding: 40px 20px;
     }
     #career-page .classic-heading{
         padding: 40px 20px;
     }
     .contact-page .gradient-intro .wrapper .content {
         flex-direction: column;
     }
     .contact-page .gradient-intro .wrapper .content .left, .contact-page .gradient-intro .wrapper .content .right {
         min-width: 100%;
         padding: 40px 20px;
     }
 }