@media only screen and (min-width: 1921px) {

    #main-header .nav-container,
    #about, #technologies, 
    #technologies-about, 
    .digital-services.second-part, 
    .contact-us,
    .footer-top,
    .footer-bottom,
    .sectionTeam, .contact,
    .services, .portfolio {
        max-width: 1440px;
        margin: auto;
    }

    #main-header {
        padding: 0.5rem 0;
    }

    #main-header .nav-container{
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

@media only screen and (max-width: 1440px) {
    .digital-services.second-part {
        & .hero-container {
            gap: 2rem;

            .hero-visual {
                width: 50%;
            }
        }
    }
}

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

    .none-br br {
        display: none;
    }

/* ===============================
        STYLE  RESPONISVE HEADER 
================================== */
    #main-header{
      padding: 0.5rem 40px;
    }

    .nav-toggle {
      display: flex;
    }

    .nav-links {
      position: fixed;
      top: 105px;
      right: -120%;
      flex-direction: column;
      align-items: flex-start;
      background: rgba(255, 255, 255, 1);
      width: 100%;
      height: calc(100vh - 105px);
      padding: 1rem 20px;
      transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      border-left: 1px solid rgba(0, 0, 0, 0.08);
    }

    #primary-navigation {
      flex-direction: column;
      width: 100%;
      margin-bottom: 2rem;
    }

    .nav-active .hamburger span:first-child {
      transform: rotate(45deg);
      top: 9px;
    }

    .nav-active .hamburger span:nth-child(2) {
        opacity: 0;
        width: 0;
    }

    .nav-active .hamburger span:last-child {
        transform: rotate(-45deg);
        top: 9px;
    }

    .nav-active .nav-links {
        right: 0;
    }

    .nav-item {
        width: 100%;
    }

    #main-header {
      & .nav-links {
        top: 80px;
        height: calc(100vh - 80px);

            & ul {
                .nav-link {
                    width: 100%;
                    padding: 0.5rem 20px;
                    color: #333;

                    &:hover {
                        background: transparent;
                        color: #333;
                    }
                }

            }
            
            .dropdown {
                position: static;
                width: 100%;
                background: var(--button-bg);
                border: none;
                padding: 0;
                display: none;
                box-shadow: none;
                border-left: 1px solid rgba(0, 0, 0, 0.08);
                transform: none;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .has-dropdown.active .dropdown {
                display: block;
                opacity: 1;
                visibility: visible;
            }
        }
        
    }

    .nav-item.has-dropdown.active a:hover,
    .nav-item.has-dropdown.active {
        font-weight: 500;
        color: #333 !important;
    }

    .dropdown-item {
        width: 100%;
    }

/* ===============================
        END STYLE HEADER 
================================== */

    .digital-services {
        padding: 5rem 40px 0;
    }

    #about,
    .digital-services.second-part,
    #technologies, 
    #technologies-about,
    .section-projects,
    .contact-us,
    .footer-bottom,
    .footer-top,
    .section-projects,
    .intro-container,
    .services,
    .portfolio {
        padding: 4rem 40px;
    }

    .digital-services.gradient-bg h1,
    #about .content-about #about-col-1 h3,
    #technologies .headline h3,
    #technologies-about .headline h3,
    .hero-badge h4,
    .digital-services.gradient-bg h4, 
    .section-projects h4, 
    .section-text h4, 
    .testimonial h4, 
    .portfolio h4, 
    .contact h4,
    .intro-container h3,
    .form-contact-us .headline h4,
    .headline h2,
    .page-header h3,
    .section-scroll h4,
    .section-scroll .box h3,
    .secondHero h1, 
    .banner-services figure h1, 
    .banner-portfolio figure h1, 
    .slices h1,
    .headlineServcices h2{
        font-size: 1.5em;
        line-height: 1;
    }

    .headline p,
    .fancy-text,
    #single-service .description-headline{
        max-width: 100%;
    }

    #technologies-about{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    #technologies {
        padding-top: 1rem;
    }

    .animate_letters {
        overflow: visible;
        height: stretch;
        align-items: center;
    }

    #about .content-about {
        & > div {
            width: 100%;
        }

        & #about-col-1 {
            h3 {
                margin-bottom: 1.3rem;
            }
        }

        #about-col-2 .hero-image-container {
            width: 400px;
            height: 400px;
        }
    }

    .digital-services.second-part {
        .hero-container {
            flex-direction: column;
        }
    }

    .digital-services.second-part {
        & .hero-container {
            .hero-content {
                width: 100%;
            }

            .hero-visual {
                width: 100%;
            }
        }
    }

    .digital-services .img{
        min-width: auto;
    }

    .viewport {
        max-width: 100%;
        padding: 0;
    }

    .secondHero figure,
    .secondHero figure, 
    .banner-portfolio figure, 
    .slices figure {
        max-width: 90%;
        padding: 2rem 1rem;
    }

    .sectionTeam, .contact {
        padding: 4rem 40px 0;
    }

    .section-scroll,
    .portfolio{
        padding-bottom: 0;
    }

    .section-scroll .box{
        padding: 2rem;
    }

    .section-scroll .page-header{
        height: auto;
        margin-bottom: 1rem;
    }
    
    .cert-card.cert1, .cert-card.cert2, .cert-card.cert3, 
    .cert-card.cert4, .cert-card.cert5, .cert-card.cert8, 
    .cert-card.cert9, .cert-card.cert10, .cert-card.cert11, 
    .cert-card.cert12 { 
        grid-area: auto; 
    }

    .cert-card.cert6 {
        grid-area: 2 / 1 / 3 / 4;
    }

    .cert-card.cert7 {
        grid-area: 3 / 1 / 5 / 1;
    }

    .split-screen-container{
        flex-direction: column-reverse;
    }
    

    .split-right,
    .split-left,
    .image-slide-description{
        width: 100%;
    }

    .close-button{
        top: 2rem;
        right: 2rem;
    }

    .contact-us .footer-section{
        flex-direction: column;
    }

    .col-md-4 {
        flex: 1;
    }

    .footer-contact .two-columns, 
    .footer-contact .radio-group {
        flex-direction: column;
        align-items: flex-start;
    }

}

@media only screen and (max-width: 912px) {
    .page-header p{
        max-width: 100%;
    }

    .section-scroll {
        padding: 4rem 40px;
        padding-bottom: 0;
    }

    .section-scroll h4{
        color: #333;
        margin-bottom: 2rem;
        position: static;
        width: 100%;
        text-align: center;
    }

    .line-svg{
        display: none;
    }

    .layout-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    #scroll-section {
        min-height: auto;
    }

    .section-scroll .box-1 {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .section-scroll .box-2 {
        grid-column: 2 / span 2;
        margin-top: 0;
        grid-row: 2;
    }

    .section-scroll .box-3 {
        grid-column: 1 / span 2;
        margin-top: 0;
    }

    .section-scroll .box-4 {
        grid-column: 2 / span 2;
        margin-top: 0;
        margin-bottom: 0;
    }

    .section-scroll .box-5 {
        grid-column: 1 / span 2;
        margin-top: 0;
    }

    .section-scroll .image-1,
    .section-scroll .image-2,
    .section-scroll .image-3,
    .section-scroll .image-4,
    .section-scroll .image-5{
        position: static;
        width: 100%;
        object-fit: cover;
        animation-range: 10% 40%;
        height: 100%;
    }

    .section-scroll .image-1 {
        grid-column: 3 / span 1;
        grid-row: 1;
    }

    .section-scroll .image-2 {
        grid-column: 1;
        grid-row: 2;
    }

    .section-scroll .image-3 {
        grid-column: 3;
        grid-row: 3;
    }

    .section-scroll .image-4 {
        grid-column: 1;
        grid-row: 4;
    }

    .section-scroll .image-5 {
        grid-column: 3;
        grid-row: 5;
    }

    #technologies {
        padding-top: 1rem;
    }

    .gallery-js {
        flex-direction: column-reverse;
    }

    .gallery-js .thumbs{
        width: 100%;
    }

    .gallery-js .main{
        width: 100%;
    }

    #single-service #technologies-about {
        .certs-grid {
            display: flex;
            justify-content: center;
            flex-direction: column;

            .list-technologies {
                columns: auto;
            }
        }
    }

    .certs-grid {
        grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
        justify-items: center;
    }
    
    #technologies .certs-grid .cert-card:last-child {
        grid-column: 1 / -1;
        width: fit-content;
    }

    #about .footer-section {
        margin-top: 3rem;
    }

    .footer-top .row.gy-4 .col-md-3:first-child {
        width: 100%;
    }

    .grid-container,
    .grid{
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    }

    .cert-card.cert2.width-70 {
        width: 100%;
    }

    .pp-grid {
        grid-template-columns: 250px 1fr;
    }

    .pp-container {
        padding: 3rem 40px;
        padding-bottom: 0;
    }
}

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

    .secondHero, 
    .banner-portfolio,
    .banner-portfolio,
    .slices {
        height: 400px;
        max-height: 400px;
    }

    .secondHero figure, 
    .banner-portfolio figure,
    .banner-portfolio figure,
    .slices figure {
        max-width: 90%;
    }

    :root {
        --slice-height: 7.2vh;
    }

    .none-br br {
        display: none;
    }

    #main-header{
      padding: 0.5rem 20px;
    }

    .none-br br{
        display: none;
    }

    .digital-services {
        padding: 5rem 20px 0;
    }

    #about,
    #technologies, 
    #technologies-about,
    .section-projects,
    .contact-us,
    .footer-bottom,
    .footer-top,
    .section-projects,
    .intro-container,
    .section-scroll,
    .services,
    .portfolio {
        padding: 3rem 20px;
    }

    .section-projects {
        padding-bottom: 2rem;
    }

    #technologies {
        padding-top: 1rem;
    }

    .digital-services .img::before, 
    .digital-services .img::after {
        display: none;
    }

    #digital-complete-output.is-visible{
        margin: 1rem 0 3rem;
        font-size: 1.5rem;
    }

    #technologies::before{
        right: inherit;
    }

    #technologies::before,
    .section-scroll::before, 
    #technologies-about::before {
        top: -4rem;
        right: -1rem;
        width: 6rem;
        height: 6rem;
    }

    .hero-badge {
        text-align: center;
    }

    .headline p,
    .paragraph-about,
    .hero-badge p,
    .intro-container h4,
    .page-header p,
    .section-scroll .box p,
    .secondHero figcaption, 
    .banner-services figcaption, 
    .banner-portfolio figcaption, 
    .slices figcaption,
    .headlineServcices p {
        max-width: 100%;
        font-size: 18px;
        line-height: 24px;
    }

    .hero-badge p{
        margin-bottom: 0.5rem;
    }

    .digital-services .img.open p, 
    .digital-services .img:hover p {
        opacity: 0;
        transition: opacity 1s ease;
    }

    .digital-services .imgs-parent{
        padding: 2rem 0;
    }

    .digital-services .img {
        height: 8rem;
    }

    #about .footer-section {
        align-items: center;

        .icon-content {
            grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
            gap: 0.8rem;
            width: 100%;

            .icon {
                font-size: 15px;
                gap: 0.3rem;

                img {
                    width: 1.8rem;
                    height: 1.8rem;
                }
            }
        }
    }

    #about .content-about {
        & > div {
            width: 45%;
            flex: 100%;
        }
    }

    .icon-content .icon:last-child {
        grid-column: 1 / -1;
    }

    .certs-grid {
        padding: 0;
        gap: 0.8rem;

        .cert-card {
            padding: 1rem 0.5rem;

            .cert-badge {
                width: 60px;
                height: 60px;
                margin: 0 auto 0.5rem;
            }
        }
    }

    #technologies .footer-section{
        margin-top: 2rem;
    }

    .digital-services.second-part .hero-container .hero-stats{
        grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
        gap: 0.8rem;
    }

    .digital-services.second-part {
        padding: 3rem 0;

        & .hero-container {
            & .hero-stats {
                .stat-card {
                    padding: 1rem 0.5rem;
                }
            }

            .hero-content {
                padding: 0 20px;
            }
        }
    }

    .form-contact-us{
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .content-text,
    .animate_letters{
        width: 100%;
    }

    .animate_letters{
        flex: initial;
        justify-content: center;
        height: 50vh;
        overflow: visible;
        display: none;
    }

    #about .content-about {
        gap: 2rem;
        margin-bottom: 4.5rem;

        & #about-col-2 {

            .hero-image-container {
                width: 300px;
                height: 300px;
            }

            .floating-badge {
                padding: 0.3rem;
            }

            .floating-badge img {
                width: auto;
                height: 50px;
            }

            .badge-content {
                gap: 0.1rem;
            }

            .badge-title {
                font-size: 0.8rem;
            }

            .badge-libs {
                font-size: 0.5rem;
            }

            .badge-2 {
                right: -10%;
            }

            .badge-3{
                top: 25%;
                left: -10%;
            }

            .badge-4{
                left: -10%;
                top: 75%;
            }

            .badge-5 {
                right: -10%;
                top: 100%;
            }
        }
    }

    .btnProjects {
        flex-direction: column;
        align-items: center;
    }

    .namesSectionForm,
    .contactSectionForm {
        display: grid;
        grid-template-columns: 1fr;
    }

    .btn-section{
        font-size: 18px;
    }

    .fancy-text {
        max-width: 100%;
        font-size: 20px;
    }

    .sky-container {
        width: 100vw;
        height: 100%;
    }

    .sky-dots {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem 0;
        z-index: 1;
        width: 90%;
        justify-items: center;
    }

    #services {
        .service-dot {
            position: static;
            inset: auto;
            margin: 0;
            width: 2rem;
            height: 2rem;
            --radius: 0rem;

            .service-title {
                top: 110%;
                text-align: center;
                font-size: 80%;
            }
        }

        .service-dot:hover {
            width: 80px;
            height: 80px;
        }

         #service-overlay {
            top: 40px;
            left: 1rem;
        }

        #service-overlay > div .btn {
            width: 40px;
            height: 40px;
        }

        #service-popup {
            width: 90%;
            right: -100%;

            .service-screen{

                h4 {
                    font-size: 1.3rem;
                }

                .headline-popup {
                    padding: 1rem 1.5rem;
                }

                p {
                    font-size: 18px;
                    line-height: 20px;
                }

            }
        }
    }

    .x-mark, .services-button {
        top: 40px;
        left: 3rem;
    }

    .x-mark .container {
        width: 40px;
        height: 40px;
    }

    .services-button {
        top: 40px;
        left: 5rem;
        opacity: 1;
    }

    .services-button a {
        display: flex;
        position: relative;
        padding: 0.4rem;
        font-size: 65%;
        align-items: center;
        justify-content: center;
        min-height: 40px;
    }

    .sectionTeam, 
    .contact {
        padding: 3rem 20px 0;
    }

    .viewport {
        max-width: 100%;
        padding: 0;
    }

    .section-scroll,
    .services {
        padding-bottom: 0;
    }

    .layout-container {
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    .section-scroll .image-1,
    .section-scroll .image-2,
    .section-scroll .image-3,
    .section-scroll .image-4,
    .section-scroll .image-5{
        max-height: 400px;
        height: 100%;
    }

    .section-scroll .box-1 {
        grid-column: 1;
        grid-row: 1;
    }

    .section-scroll .image-1 {
        grid-column: 1;
        grid-row: 2;
    }

    .section-scroll .box-2 {
        grid-column: 1;
        margin-top: 0;
        grid-row: 3;
    }

    .section-scroll .image-2 {
        grid-column: 1;
        grid-row: 4;
    }

    .section-scroll .box-3 {
        grid-column: 1;
        grid-row: 5;
        margin-top: 0;
    }

    .section-scroll .image-3 {
        grid-column: 1;
        grid-row: 6;
    }

    .section-scroll .box-4 {
        grid-column: 1;
        grid-row: 7;
        margin-top: 0;
        margin-bottom: 0;
    }

    .section-scroll .image-4 {
        align-self: end;
        grid-column: 1;
        grid-row: 8;
    }

    .section-scroll .box-5 {
        grid-column: 1;
        grid-row: 9;
        margin-top: 0;
    }

    .section-scroll .image-5 {
        grid-column: 1;
        grid-row: 10;
    }

    .grid {
        grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
        gap: 0.5rem;
    }

    .services .information-person h3 {
        padding: 12px;
        font-size: 18px;
    }

    #single-service .cert-card.cert2 {
        width: 100%;
    }

    #technologies-about .cert-card.cert1,
    #technologies-about .cert-card.cert2,
    #technologies-about .cert-card.cert3,
    #technologies-about .cert-card.cert4,
    #technologies-about .cert-card.cert5,
    #technologies-about .cert-card.cert6,
    #technologies-about .cert-card.cert7,
    #technologies-about .cert-card.cert8,
    #technologies-about .cert-card.cert9,
    #technologies-about .cert-card.cert10,
    #technologies-about .cert-card.cert11,
    #technologies-about .cert-card.cert12{
        grid-area: auto;
    }

    #technologies-about .cert-card ul{
        font-size: 15px;
    }

    #technologies-about .cert-card:before,
    #technologies-about .cert-card:after{
        content: none;
    }

    .cert-card p {
        font-size: 16px;
    }

    #technologies-about,
    .portfolio{
        padding-bottom: 0;
    }

    #technologies-about::before {
        top: 0rem;
        left: -2rem;
    }

    .gallery-js .thumbs {
        gap: 0.5rem;
    }

    .gallery-js .thumbs {
        max-height: 300px;
    }

    .list-technologies {
        columns: 2;
    }

    .close-button {
        width: 2rem;
        height: 2rem;
    }

    .section-projects .card-wrapper,
    .section-projects .card{
        height: 300px;
    }

    .pp-container {
        padding: 2rem 20px;
    }

    .footer-contact .radio-group input {
        width: fit-content;
        padding: 0;
    }


/* ===============================
    START RESPONSIVE STYLE FOOTER 
================================== */

    .row.gy-4{
      flex-direction: column;
      gap: 1rem;
    }

    .col-md-4,
    .col-md-3 {
      width: 100%;
    }

    footer a {
        font-size: 18px;
    }

    .two-columns, .radio-group {
        flex-direction: column;
        align-items: flex-start;
    }

/* ===============================
    END RESPONSIVE STYLE FOOTER 
================================== */
}

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

    .image-slide-description{
        top: 50%;
    }
    
    .split-screen-container {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
    }

    #splitLeft {
        display: none;
    }

    .split-right{
        height: 100%;
    }

    .close-button {
        top: 30%;
    }

    .icon-content .icon:last-child {
        justify-content: center;
    }
    
}