@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    scroll-behavior: smooth;
    color: #1b1b1b;
}

body {
    background-color: #fbfbfb;
    min-height: 100vh;
}

.block {
    padding: 100px 64px;
}

.top {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.logo {
    display: flex;
    width: fit-content;
}

@media(max-width: 1180px) {
    .pricing {
        grid-template-columns: 1fr;
    }
}

@media(max-width: 1100px) {
    .anims div {
        width: 240px;
    }

    .benefit-anim {
        justify-content: center;
    }
}

@media(max-width: 1000px) {
    .s-flex.two {
        flex-direction: column;
        align-items: initial;
    }

    .s-flex.two p {
        margin-bottom: 20px;
    }

    .s-flex.two .links {
        justify-content: left;
        width: 100%;
    }

    .heading, .head-flex .heading {
        font-size: 65px;
    }

    .head-flex .heading {
        margin-bottom: 20px;
    }

    .port-desc {
        max-width: 600px;
    }

    .head-flex {
        flex-direction: column;
        align-items: initial;
        justify-content: initial;
    }

    .head-flex .links {
        justify-content: left;
    }

    .contact {
        grid-template-columns: 1fr;
    }

    .contact-img {
        height: 500px;
    }
}

@media(max-width: 980px) {
    .benefit-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .other {
        padding-bottom: 20px;
    }
}

@media(max-width: 900px) {
    .s-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 400px;
    }

    .s-grid .serv {
        height: 400px;
    }

    footer {
        padding: 64px 64px;
    }
    
    .s-grid .serv:nth-child(3) {
        grid-column: initial;
        height: 400px;
    }

    .portfolio, .feed-grid {
        grid-template-columns: 1fr;
    }

    .feed-grid {
        grid-template-rows: repeat(4, 640px);
    }

    .f-flex {
        flex-direction: column;
        align-items: initial;
        gap: 30px;
    }

    .f-flex span {
        margin-left: initial;
    }

    .f-flex ul {
        flex-direction: column;
        gap: 8px;
        margin-left: 0px;
    }
}

@media(max-width: 800px) {
    .nav-links {
        display: none;
        flex-direction: column;
        border-radius: 20px;
        transition: 0.3s;
        transform: translateY(-35px);
    }

    .nav-links a {
        padding: 20px 50px;
    }

    .nav-links a:hover {
        padding: 20px 50px;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a:not(:nth-child(1)) {
        border-top: 1.5px solid #eee;
        border-left: none;
    }

    nav {
        height: auto;
    }
    
    .nav-middle {
        flex-direction: column;
        transform: translateY(-25px);
    }

    .nav-links a {
        justify-content: center;
    }

    #toggle {
        display: initial;
    }

    .faq {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .block, .hero, .about {
        padding: 100px 50px;
    }

    footer {
        padding: 64px 50px;
    }
}

@media(max-width: 760px) {
    .heading, .infinite div p {
        font-size: 60px;
    }
}

@media(max-width: 715px) {
    .heading, .infinite div p  {
        font-size: 50px;
    }
}

@media(max-width: 700px) {
    .pack-2 {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .pack-2 div .pack2-f:not(:nth-child(1)) {
        margin-top: 15px;
    }
}

@media(max-width: 590px) {
    .heading {
        font-size: 45px;
        margin-top: 20px;
    }

    .head-flex .heading, .infinite div p {
        font-size: 45px;
    }

    .heading span, 
    .block .heading.three span,
    .block .heading.four span {
        border-left: none;
        background: none;
        padding: 0px;
    }

    .links {
        margin-top: 40px;
    }

    .s-flex.two .links {
        flex-direction: column;
    }

    .s-flex.two .links a {
        justify-content: center;
        width: 100%;
    }

    .s-flex.two .links a:nth-child(1) {
        box-shadow: none;
    }

    .s-flex p:nth-child(1) {
        font-size: 23px;
    }

    .s-flex p:nth-child(2) {
        display: none;
    }

    .s-grid {
        margin-top: 30px;
    }

    .work-banner {
        padding: 30px 30px 0px 30px;
    }

    .feed, 
    .quest, 
    .service-block, 
    form {
        padding: 30px;
    }

    .contact-img-div,
    .contact-img .subhead {
        margin: 30px;
    }
}

@media(max-width: 540px) {
    .infinite::before, .infinite::after {
        display: none;
    }
}

@media(max-width: 510px) {
    .hero .links {
        flex-direction: column;
    }

    .hero .links a {
        justify-content: center;
        box-shadow: none;
        width: 100%;
    }
}

@media(max-width: 500px) {
    .block, .hero, .about {
        padding: 100px 40px;
    }

    footer {
        padding: 64px 40px;
    }

    .s-text {
        margin: 30px;
    }

    .about-desc {
        font-size: 25px;
    }
}

@media(max-width: 460px) {
    .price-head p:nth-child(2) {
        display: none;
    }

    .pack-title {
        margin: 30px 0px;
        font-size: 25px;
    }

    .work-flex {
        margin-top: 15px;
        padding: 0px 20px;
    }

    .work-flex a span {
        display: none;
    }
}

@media(max-width: 420px) {
    .heading {
        font-size: 40px;
    }
}

@media(max-width: 400px) {
    .heading,
    .head-flex .heading,
    .infinite div p {
        font-size: 35px;
    }
}

@media(min-width: 1500px) {
    .video {
        margin: 100px auto 0px auto;
        width: 1400px;
    }

    .infinite {
        width: 1400px;
        margin: auto;
    }
}