@media (max-width: 400px) {
    
    .portfolio{
        transform: scale(0.5);
    }
    .portfolio-container{
        width: 100%;
        justify-content: center;
        margin: 0;
        margin-bottom: -10px;
    }
    .desc1{
        font-size: 0.7rem;
        width: 95%;
        bottom: 180px;
        text-align: center;
    }
    .desc2{
        visibility: hidden;
    }
    .logoMain{
        margin-top: -200px;
        scale: 1.5;
    }
    .nav{
        scale: 0.4;
        top: 0;
        margin-right: -160px;
        margin-top: -5px;
    }
    .nav.active{
        height: 100%;
        width: 100%;
        position: absolute;
        margin: 0;
        transform: scale(2);
        z-index: 1;
    }
    .Fcontainer{
        display: flex;
        flex-direction: column;
    }
    .btncontactform{
        max-width: 70%;
        transform: translateY(10px) scale(0.6);
        height: fit-content;
    }
    .btncontactform .Fcontainer{
        display: flex;
        flex-direction: column;
        max-width: 70%;
    }
    .btnsvg{
        display: none;
    }
    .formsvg{
        transform: scale(0.7);
    }
    .logo-holder{
        margin: 0;
        margin-left: -40px;
        margin-top: -10px;
        animation: logo-screen-mobile .8s ease-in-out forwards;
    }
    .logo{
        width: 40%;
    }
    .searchbtns{
        transform: scale(0.5);
    }
    .intro1{
        flex-direction: column;
        width: 100%;
        height: 100%;
        transform: scale(0.5) translateY(50px);
        text-align: center;
    }
    .events{
        transform: translateY(0);
    }
    .stlg svg{
        transform: scale(0.3);
    }
    .stlg{
        animation: stlogo-mobile linear both;
        animation-timeline: scroll();
    }
    .Ptitle{
        transform: scale(0.7) translateY(-10px);
    }
    .Car-container{
        transform: scale(0.4);
    }
    .timelinectn{
        transform: scale(0.5) translateY(200px);
    }
    .TimeTitle{
        transform: scale(0.7) translateY(-50px);
    }
    .formctn{
        animation: contactscrn-mobile linear both;
        animation-timeline: scroll();
    }
    .conttitle{
        font-size: 2.5rem;
    }
    .testitle{
        transform: scale(0.8);
    }
    .clientctn{
        transform: scale(0.5);
    }
    .footer-content{
        width: 100vw;
        transform: scale(0.5);
        display: flex;
        flex-direction: column;
    }
}
@keyframes contactscrn-mobile {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    74% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(50px) scale(0.7);
    }

    75% {
        opacity: 0;
        visibility: visible;
        transform: translateY(50px) scale(0.7);
    }

    80% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(0.7);
    }

    83% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(0.7);
    }

    88% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes stlogo-mobile{
    0% {
        opacity: 0;
    }

    24% {
        opacity: 0;
    }

    27% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    29% {
        opacity: 1;
        transform: translateY(-50px) scale(0.5);
    }

    31% {
        opacity: 1;
        transform: translateY(-220px) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: translateY(-220px) scale(0.5);
    }
}

@keyframes logo-screen-mobile {
    0% {
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
        background: #000;
    }

    30% {
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
        background: #000;
    }

    100% {
        width: 200px;
        height: 90px;
        background: #00000000;
    }
}

@media (max-width: 450px) {
    .portfolio{
        transform: scale(0.5);
    }
    .portfolio-container{
        width: 100%;
        justify-content: center;
        margin: 0;
        margin-bottom: -10px;
    }
    .desc1{
        font-size: 0.7rem;
        width: 95%;
        bottom: 180px;
        text-align: center;
    }
    .desc2{
        visibility: hidden;
    }
    .logoMain{
        margin-top: -200px;
        scale: 1.5;
    }
    .nav{
        scale: 0.4;
        top: 0;
        margin-right: -160px;
        margin-top: -5px;
    }
    .nav.active{
        height: 100%;
        width: 100%;
        position: absolute;
        margin: 0;
        transform: scale(2);
        z-index: 1;
    }
    .Fcontainer{
        display: flex;
        flex-direction: column;
    }
    .btncontactform{
        max-width: 70%;
        transform: translateY(10px) scale(0.6);
        height: fit-content;
    }
    .btncontactform .Fcontainer{
        display: flex;
        flex-direction: column;
        max-width: 70%;
    }
    .btnsvg{
        display: none;
    }
    .formsvg{
        transform: scale(0.7);
    }
    .logo-holder{
        margin: 0;
        margin-left: -40px;
        margin-top: -10px;
        animation: logo-screen-mobile .8s ease-in-out forwards;
    }
    .logo{
        width: 40%;
    }
    .searchbtns{
        transform: scale(0.5);
    }
    .intro1{
        flex-direction: column;
        width: 100%;
        height: 100%;
        transform: scale(0.5) translateY(50px);
        text-align: center;
    }
    .events{
        transform: translateY(0);
    }
    .stlg svg{
        transform: scale(0.3);
    }
    .stlg{
        animation: stlogo-mobile2 linear both;
        animation-timeline: scroll();
    }
    .Ptitle{
        transform: scale(0.7);
    }
    .Car-container{
        transform: scale(0.4) translateY(50px);
    }
    .timelinectn{
        transform: scale(0.5) translateY(200px);
    }
    .TimeTitle{
        transform: scale(0.7) translateY(0);
    }
    .formctn{
        animation: contactscrn-mobile linear both;
        animation-timeline: scroll();
    }
    .conttitle{
        font-size: 2.5rem;
    }
    .testitle{
        transform: scale(0.8);
    }
    .clientctn{
        transform: scale(0.5);
    }
    .footer-content{
        width: 100vw;
        transform: scale(0.5);
        display: flex;
        flex-direction: column;
    }
}

@keyframes stlogo-mobile2{
    0% {
        opacity: 0;
    }

    24% {
        opacity: 0;
    }

    27% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    29% {
        opacity: 1;
        transform: translateY(-50px) scale(0.5);
    }

    31% {
        opacity: 1;
        transform: translateY(-300px) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: translateY(-300px) scale(0.5);
    }
}
@media (min-width: 451px) and (max-width: 549px) {
    .portfolio{
        transform: scale(0.5);
    }
    .portfolio-container{
        margin: -30px;
        margin-right: -60px;
    }
    .desc1, .desc2{
        font-size: 0.7rem;
    }
    .nav{
        scale: 0.5;
        top: 0;
        margin-right: -120px;
    }
    .nav.active{
        transform: scale(1.5);
        margin: 0;
        z-index: 1;
    }
    .Fcontainer{
        display: flex;
        flex-direction: column;
    }
    .btncontactform{
        max-width: 70%;
        transform: translateX(500px);
        transform: scale(0.7);
    }
    .btncontactform .Fcontainer{
        display: flex;
        flex-direction: column;
        max-width: 70%;
    }
    .btnsvg{
        display: none;
    }
    .formsvg{
        transform: scale(0.7);
    }
    .logo-holder{
        margin: 0;
        margin-left: -40px;
    }
    .logo{
        width: 50%;
    }
    .searchbtns{
        transform: scale(0.6);
    }
}
@media (min-width: 550px) and (max-width: 649px) {
    .portfolio{
        transform: scale(0.4);
    }
    .portfolio-container{
        margin: -30px;
    }
    .desc1, .desc2{
        font-size: 0.7rem;
    }
    .nav{
        scale: 0.5;
        top: 0;
        margin-right: -80px;
    }
    .Fcontainer{
        display: flex;
        flex-direction: column;
    }
    .btncontactform{
        max-width: 70%;
        transform: translateX(20px);
        transform: scale(0.7);
    }
    .btncontactform .Fcontainer{
        display: flex;
        flex-direction: column;
        max-width: 70%;
    }
    .btnsvg{
        display: none;
    }
    .formsvg{
        transform: scale(0.7);
    }
}

@media (min-width: 650px) and (max-width: 768px) {
    .portfolio{
        transform: scale(0.4);
    }
    .portfolio-container{
        margin: -30px;
    }
    .desc1, .desc2{
        font-size: 0.7rem;
    } 
    .nav{
        scale: 0.8;
        top: 0;
        margin-right: -50px;
    }
    .Fcontainer{
        display: flex;
        flex-direction: column;
    }
    .btncontactform{
        max-width: 70%;
        transform: translateX(20px);
        transform: scale(0.7);
    }
    .btncontactform .Fcontainer{
        display: flex;
        flex-direction: column;
        max-width: 70%;
    }
    .btnsvg{
        display: none;
    }
    .formsvg{
        transform: scale(0.7);
    }
}

@media (min-width: 768px) and (max-width: 950px) {
    .portfolio{
        transform: scale(0.5);
    }
    .portfolio-container{
        margin: -20px;
    }
    .desc1, .desc2{
        font-size: 1rem;
    }
    .nav{
        scale: 0.8;
        top: 0;
        margin-right: -50px;
    }
    .Fcontainer{
        display: flex;
        flex-direction: column;
    }
    .btncontactform{
        max-width: 70%;
        transform: translateX(20px);
    }
    .btncontactform .Fcontainer{
        display: flex;
        flex-direction: column;
        max-width: 70%;
    }
    .btncontactform form, .btncontactform .social{
        transform: translateY(-100px);
    }
    .btnsvg{
        transform: scale(0.5) translateY(50px);
    }
    .formsvg{
        transform: scale(0.7);
    }
    .intro1{
        transform: scale(0.8);
    }
    .stlg{
        animation: stlogo768 linear both;
        animation-timeline: scroll();
    }
    .Ptitle{
        transform: translateY(-70px);
    }
    .carousel{
        transform: scale(0.8) translateY(40px);
    }
    .TimeTitle{
        transform: translateY(-50px) scale(0.8);
    }
    .timelinectn{
        transform: scale(0.6) translateY(20px);
    }
    .formctn{
        animation: contactscrn768 linear both;
        animation-timeline:  scroll();
    }
    .clientctn{
        transform: scale(0.7) translateY(20px);
    }
    .intro1{
        flex-direction: column;
        text-align: center;
    }.events{
        transform: translateY(30px);
    }
}

@media (min-width: 950px) and (max-width: 1023px) {
    .portfolio{
        transform: scale(0.5);
    }
    .portfolio-container{
        margin: -20px;
    }
    .desc1, .desc2{
        font-size: 1rem;
    }
    .nav{
        scale: 0.8;
        top: 0;
        margin-right: -50px;
    }
    .btncontactform{
        max-width: 70%;
        transform: scale(0.7) translateY(100px);
    }
    .btnform{
        transform: translateY(1000px);
        position: relative;
    }
    .btncontactform .Fcontainer{
        position: relative;
        display: flex;
        flex-direction: row;
        max-width: 100%;
        /* transform: scale(0.8); */
    }
    .btncontactform .Fcontainer svg{
        position: relative;
        /* transform: scale(5); */
    }
    .btncontactform form, .btncontactform .social{
        z-index: 9999;
        transform: translateY(-100px);
        position: relative;
    }
    .intro1{
        transform: scale(0.8);
    }
    .stlg{
        animation: stlogo768 linear both;
        animation-timeline: scroll();
    }
    .Ptitle{
        transform: translateY(-70px);
    }
    .carousel{
        transform: scale(0.8) translateY(40px);
    }
    .TimeTitle{
        transform: translateY(-50px) scale(0.8);
    }
    .timelinectn{
        transform: scale(0.6) translateY(20px);
    }
    .formctn{
        animation: contactscrn768 linear both;
        animation-timeline:  scroll();
    }
    .clientctn{
        transform: scale(0.7) translateY(20px);
    }
    .intro1{
        flex-direction: column;
        text-align: center;
    }.events{
        transform: translateY(30px);
    }
}

@media (min-width: 1024px) and (max-width: 1200px) {
    .portfolio{
        transform: scale(0.7);
    }
    .portfolio-container{
        margin: 0;
    }
    .intro1{
        transform: scale(0.8);
    }
    .stlg{
        animation: stlogo1025 linear both;
        animation-timeline: scroll();
    }
    .Ptitle{
        transform: translateY(-30px);
    }
    .carousel{
        transform: translateY(20px);
    }
    .timelinectn{
        transform: scale(0.8) translateY(10px);
    }
    .btncontactform{
        transform: scale(0.8);
    }
    .btnsvg{
        display: none;
    }
    .formsvg{
        width: 500px;
    }
    .Car-container{
        transform: scale(0.7) translateY(50px);
    }
    .TimeTitle{
        transform: translateY(-50px);
    }
    .timelinectn{
        transform: translateY(30px) scale(0.6);
    }
    .formctn{
        transform: scale(0.5);
    }
    .clientctn{
        transform: scale(0.7);
    }
}

@media (min-width: 1200px) and (max-width: 1366px) {
    .portfolio{
        transform: scale(0.7);
    }
    .portfolio-container{
        margin: 0;
    }
    .intro1{
        transform: scale(0.8);
    }
    .stlg{
        animation: stlogo1025 linear both;
        animation-timeline: scroll();
    }
    .Ptitle{
        transform: translateY(-30px);
    }
    .carousel{
        transform: translateY(20px);
    }
    .timelinectn{
        transform: scale(0.8) translateY(10px);
    }
}

@keyframes stlogo1025 {
    0% {
        opacity: 0;
    }

    24% {
        opacity: 0;
    }

    27% {
        opacity: 1;
        transform: translateY(0) scale(0.9);
    }

    29% {
        opacity: 1;
        transform: translateY(-50px) scale(0.3);
    }

    31% {
        opacity: 1;
        transform: translateY(-300px) scale(0.3);
    }

    100% {
        opacity: 1;
        transform: translateY(-300px) scale(0.3);
    }
}

@keyframes stlogo768 {
    0% {
        opacity: 0;
    }

    24% {
        opacity: 0;
    }

    27% {
        opacity: 1;
        transform: translateY(0) scale(0.7);
    }

    29% {
        opacity: 1;
        transform: translateY(-50px) scale(0.5);
    }

    31% {
        opacity: 1;
        transform: translateY(-220px) scale(0.2);
    }

    100% {
        opacity: 1;
        transform: translateY(-220px) scale(0.2);
    }
}

@keyframes contactscrn768 {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(0) scale(0.7);
    }

    74% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(50px) scale(0.8);
    }

    75% {
        opacity: 0;
        visibility: visible;
        transform: translateY(50px) scale(0.8);
    }

    80% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(0.8);
    }

    83% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(0.8);
    }

    88% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(0) scale(0.8);
    }

    100% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(0) scale(0.8);
    }
}