/* Contact Section  */

@media (max-width: 768px) {
    .contact-section {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        height: auto;
        margin-top: 30px;
    }

    .contact-header {
        font-size: 30px;
        text-align: center;
        margin-bottom: 30px;
    }

    .contact-left img {
        width: auto;
        height: 100%;
        /* margin-bottom: 40px; */
        display: block;
    }


    .contact-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 0px;
        padding-right: 0px;
        margin-top: 20px;
    }

    .contact-right .fs14,
    input {
        font-size: 12px !important;
    }

    .contact-form {
        width: 100%;
        gap: 4vh;
    }

    .input-container {
        flex-direction: column;
        align-items: stretch;
        gap: 1vh;
    }

    .contact-form label {
        font-size: 18px;
        text-align: left;
    }

    .border-bottom-input,
    .input-message-wrapper textarea {
        font-size: 16px;
        line-height: 10px;
        padding: 10px;
    }

    .form-buttons-container {
        flex-direction: column;
        align-items: center;
        gap: 2vh;
        margin-top: 3vh;
    }

    .schedule-call-container {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .schedule-call-container button,
    .schedule-call-container input {
        width: 100%;
        margin-bottom: 10px;
    }

    .schedule-call-container input[type="date"] {
        padding: 10px;
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        min-height: 45px;
        width: 100% !important;
    }

    .m-btn-secondary {
        padding: 12px;
        font-size: 16px;
    }

    .form-buttons-container .m-btn-primary {
        padding: 12px;
        font-size: 16px;
        /* margin-right: 40px; */
    }
}

/* Blogs Section  */

@media (max-width: 768px) {
    .blogs-head {
        width: 90%;
    }

    .blogs-head .m-btn-primary {
        margin-right: 1px;
    }

    .blog-cards-container {
        padding: 0 10px;
    }

    .blog-cards {
        gap: 3vw;
        width: 100%;
        overflow-x: auto;
    }

    .blog-card {
        min-width: 220px;
    }

    .blog-author {
        width: 100%;
    }

    .blog-card-content {
        gap: 3vh;
    }

    .blog-card-content__inner {
        gap: 3vh;
    }

    .author-img {
        border: 3px solid #000;
    }
}

/* Use Case  */
@media (max-width: 768px) {
    .use-case-cards-container {
        display: flex;
        
        gap: 2vw;
    }

    .use-case-cards{
        display: flex;
        flex-wrap: nowrap;
        gap: 2vw;
    }
    .explore-mizzle .use-case-cards {
        width: 100%;
        flex-wrap: wrap;
    }

    .use-case-card {
        border: 1px solid #CECECE;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 20px;
        background-color: #fff;
        margin-bottom: 0;
        scroll-snap-align: start;
        width: 100%;
    }

    .use-case-btn {
        width: 100%;
        padding: 4px 0;
        margin-left: 0px;
    }

    .use-case-header {
        justify-content: center;
        text-align: center;
        height: auto;
        padding: 10px 0;
        flex-direction: column;
        /* display: unset; */
    }

    .use-case-header h1 {
        font-size: 36px;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .use-case-card-icon {
        width: 50%;
    }

}

/* Pricing  */
@media (max-width: 768px) {
    .lp-pricing-cards-container {
        overflow-x: auto;
        padding-bottom: 10px;
        margin: 0 40px;
    }

    .lp-pricing-cards {
        display: flex;
        flex-wrap: nowrap;
        gap: 12vw;
        height: 60vh;
        width: 80vw;
        flex-direction: row;
    }

    .lp-pricing-card {
        min-width: 90%;
        flex: 0 0 auto;
    }

    .lp-pricing-cards-container::after {
        content: "";
        flex: 0 0 20%;
    }

    .lp-pricing-btn-container .m-btn-primary {
        padding: 5px 10px;
    }

    .lp-pricing-section {
        margin-top: 30px;
    }

    .lp-pricing-card:hover {
        transform: none;
    }

    /* Spotlight  */
    .spotlight-section .blog-cards {
        flex-direction: row;
        margin-bottom: 40px;
    }

    .spotlight-section .blog-card {
        min-width: 250px;
    }

    .spotlight-title {
        justify-content: center;
        text-align: center;
        height: auto;
        padding: 10px 0;
        margin-top: 40px;
    }


    /* Mizzle  */
    .mizzle-vector-wrapper .mizzle-img {
        width: 100%;
        height: auto;
    }
}

/* abous us what we love  */
@media (max-width: 768px) {
    .what-we-love .left-area {
        position: relative;
        text-align: center;
    }

    .what-we-love .level-up-btn {
        font-family: "BebasNeue";
        font-size: 25px;
        line-height: 1.4;
        font-weight: 600;
        color: white;
        background: var(--primary-color);
        padding: 15px 10px;
        border-radius: 50px;
        position: absolute;
        top: -100px;
        left: 50%;
        transform: translateX(-50%);
        width: 13vw;
        min-width: 175px;
    }

    .what-we-love .left-area img {
        width: 100%;
    }

    /* .what-we-love .right-area h1 {
        justify-content: center;
        text-align: center;
        margin-top: 20px;
        width: 100%;
        font-style: 30px;
    }

    .what-we-love .right-area .grey-heading {
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .what-we-love .right-area .purple-heading {
        width: 90%;
    } */

    .what-we-love .right-area h1 {
        font-size: 36px;
        margin-top: 20px;
        justify-content: center;
        width: 100%;
    }

    .what-we-love .right-area p.text-gray {
        font-size: 18px;
        margin-bottom: 2rem;
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .what-we-love .right-area p.purple-line {
        margin-bottom: 1.5rem;
        font-size: 16px;
        width: 100%;
        font-weight: 600;
    }

    .what-we-love .right-area ul {
        padding-left: 0rem;
    }

    .what-we-love .right-area ul li {
        font-size: 16px;
        margin-bottom: 0.5rem;
        font-style: italic;
    }

    .what-we-love .btn-black {
        font-size: 16px;
        padding: 10px 20px;
        margin-top: 2rem;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .what-we-love {
        padding-bottom: 5vh;
        padding-top: 0px !important;
    }

    /* Partners  */
    /* .partners .right-area h1{
        justify-content: center;
        text-align: center;
        width: 100%;
        margin-top: 20px;
    }
    . .left-area img {
        width: 100%;
    }*/


    @media (max-width: 768px) {
        .partners .right-area h1 {
            justify-content: center;
            text-align: center;
            width: 100%;
            margin-top: 30px;
        }

        .partners .left-area img {
            width: 100%;
        }

        .partners .right-area p.purple-line {
            margin-bottom: 1.5rem;
            font-size: 18px;
            width: 100%;
            margin-left: 20px;
        }

        .partners .right-area ul {
            padding-left: 1.5rem;
        }

        .partners .right-area ul li {
            font-size: 16px;
            margin-bottom: 1rem;
            width: 100%;
        }

        .partners .partner-button {
            margin: 30px auto 0 auto;
            display: block;
        }

        .partners {
            padding-bottom: 5vh;
        }
    }


}

/* about us guardians page  */
@media (max-width: 768px) {
    .guardians-section {
        padding-top: 5vh;
        padding-bottom: 5vh;
    }

    .guardians-section h1 {
        font-size: 30px;
        margin-top: 35px;
        width: 100%;
    }

    .guardians-section p {
        width: 90%;
        font-size: 18px;
        /* Adjust font size for better readability */
    }

    .guardians-section img {
        width: 100%;
        margin-top: 2rem;
    }
}


/* Mobile responsiveness */
@media (max-width: 768px) {
    .hero-header {
        text-align: center;
        margin-bottom: 20px;
    }

    /* .hero-left-content a {
        margin: auto;
    } */
.hero-section-btn-group{
    justify-content: center;
}
    .hero-header span {
        text-align: center;
        justify-content: center;
    }

    .hero-container .mobile-para {
        text-align: center;
    }

    .hero-right-container {
        margin-bottom: 20px;
        margin-top: 20px;
    }

    /* .pioneer-left-container svg{
        max-height: 45vh;
    }
    .devops-right-container{
        padding-top: 60px;

    }
    .devops-right-container svg {
        max-height: 45vh;
    } */

    .pioneer-right-container h1 {
        font-size: 30px !important;
    }

    .pioneer-right-container .first-para {
        font-style: italic;
    }

    .pioneer-card-container {
        /* flex-direction: column; */
    }

    .pioneer-card-container .reverse-card img {
        margin-left: auto;
        height: unset;
        width: 30px;
    }

    .pioneer-card-container .reverse-card h5 {
        margin-left: auto;
        width: 130px;
        height: unset;
    }

    .pioneer-card-container .reverse-card p {
        font-style: italic;
        padding-left: 20px;
        text-align: right;
    }

    .devops-left-container h1 {
        font-size: 30px !important;
    }

    .devops-left-container .first-para {
        font-style: italic;
    }

    .devops-left-container p {
        font-style: bold;
    }

    .mizzle-vector-container {
        padding-top: 0px;
        padding-bottom: 0px;
        height: unset;
    }

    .lp-pricing-head .fs66 {
        font-size: 26px;
    }

    .banner-3-left-content p {
        margin-bottom: 1.5vh;
    }

    .lp-pricing-head p {
        font-style: italic;
        width: 100%;
    }

    .blogs-section .blogs-head h1 {
        font-size: 30px !important;
    }

    #pioneer-sec {
        /* overflow: scroll !important; */
    }

    #devops-sec {
        /* overflow: scroll !important; */
    }

    .mizzle-vector-container .hero-header {
        padding-top: 60px;
        font-size: 32px !important;
        margin-bottom: 5px !important;
    }

    .mizzle-vector-container .mizzle-para {
        font-size: 24px;
        font-style: italic;
        text-align: center;
        margin-bottom: 30px;
    }

    .banner-3-right-content h1 {
        margin-bottom: 30px;
        line-height: 1.2 !important;
    }

    .roadmap-card-arrow {
        width: calc(var(--resp)* 30px);
        height: calc(var(--resp)* 30px);
    }

    .key-insight-right {
        padding-top: 40px;
    }

    .spotlight-title {
        margin-top: 0px;
    }

    .paper-downlaod-container>div {
        height: 120px;
        text-align: center;
        width: 33.33%;
    }

    .support-tech-card-container {
        margin-top: 30px;
    }

    #support-sec {
        padding: 0;
    }

    .horizontal-scroll-sec__inner {
        padding: 4vh 10px 1vh 10px;
    }


    /* Storage page  */
    .inside-the-mizzle .section-title {
        margin-top: 20px !important;
    }

    #advance-storage {
        margin-top: 30px;
    }

    #advance-storage .advance-para {
        font-size: 16px !important;
        line-height: 1.1 !important;
        font-style: italic;
        margin-bottom: 10px !important;
    }

    #advance-storage ul li {
        margin-bottom: 2vh;
        font-size: 18px;
        font-style: italic;
        font-weight: 500;
        line-height: calc(var(--resp)* 24px);
        color: #000;
    }

    #advance-storage .storage-right-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #advance-storage .right-area .btn-black {
        margin: auto;
    }

    #better-storage-section {
        margin-top: 40px;
    }

    #better-storage-section .better-para {
        font-size: 18px !important;
        font-style: italic;
        font-weight: 400;
        line-height: 1.1 !important;
    }

    #better-storage-section .storage-text {
        font-size: 14px !important;
        font-style: italic;
        font-weight: 500;
    }

    #better-storage-section .storage-card {
        padding-bottom: 3vh;
    }

    #better-storage-section .storage-card-wrap {
        padding-block: 1vh;
    }

    #storage-pricing-sec {
        margin-top: 50px;
    }

    #storage-pricing-sec .pricing-text {
        font-style: italic;
        font-size: 16px !important;
        line-height: 1.1 !important;
    }

    .own-bucket-section {
        max-height: unset;
    }

    .own-bucket-container {
        background-image: url(../images/animations/mobileimage/storage-buck-back.svg);
    }

    #storage .own-bucket-container {
        padding-top: 40px;
    }

    #storage .bucket-name-input {
        font-size: 16px !important;
    }

    #storage .create-storage-form-wrap h6 {
        font-size: 18px !important;
        font-weight: 600;
        padding-left: 10px;
    }

    #create-bucket .bucket-text {
        font-style: italic;
        font-weight: 500;
        font-size: 14px !important;
        margin-bottom: 20px !important;
        margin-top: 20px !important;
    }

    .storage-deals ul li {
        margin-bottom: 3vh;
        font-size: 18px;
        font-style: italic;
        font-weight: 500;
    }

    .storage-deals {
        margin-top: 60px;
    }


    /* Compute Page  */
    .compute-page {
        margin-top: unset !important;
    }

    .compute-page .inside-the-mizzle {
        padding-bottom: 0px;
    }

    .advance-storage .hl-network .left-area .section-para {
        font-style: italic;
        margin-bottom: 10px !important;
        font-size: 16px;
    }

    .advance-storage .hl-network .left-area .pink-line {
        font-weight: 600;
    }

    .advance-storage .hl-network .left-area ul li {
        margin-bottom: 10px;
        font-weight: 500;
    }

    .advance-storage .hl-network .left-area h3 {
        margin-bottom: 10px;
    }

    .compute-page .scroller {
        margin-top: 5vh !important;
        margin-bottom: 5vh !important;
    }

    .benefits ul li {
        font-style: italic;
        padding-left: 5px;
        margin-bottom: 20px;
        font-weight: 700;
    }

    .explore-mizzle {
        padding-top: 0px !important;
    }

    .case-studies .card img {
        width: 50vw !important;
    }

    .case-studies .explore-mizzle .right-area .case-study-card {
        width: auto;
    }

    .case-studies .explore-mizzle .right-area .compute-case-para {
        font-size: 14px !important;
        font-weight: 400;
        font-style: italic;
        line-height: 1.2 !important;
    }

    .case-studies .card-title {
        font-size: 26px !important;
        font-weight: 500;
    }

    .use-case-left {
        height: unset;
    }

    .ai-devop .section-title {
        font-size: 36px;
        line-height: 1.3;
    }

    .ai-devop .section-para {
        font-style: italic;
        line-height: 1.2;
    }

    .ai-devop .right-area .styled-para {
        font-size: 16px !important;
        line-height: 1.1;
    }

    .ai-devop .ai-para {
        font-style: italic;
        font-weight: 500;
        font-size: 14px !important;
    }

    .hl-network .card-wrap .card .icon {
        width: 50px !important;
        min-height: 50px !important;
    }

    .ai-devop .card-wrap .card {
        height: 20vh !important;
    }

    .ai-devop .card-wrap .card-title {
        font-size: 16px !important;
        font-weight: 500;
        font-style: italic;
    }

    .compute-pricing-inner-wrapper{
        border: 1px solid #fff;
        position: relative;
        background-color: #000;
        border-radius: 10px;
        overflow: hidden;
    }
    .compute-pricing-inner-wrapper::before{
        content: '';
        left: -5px;
        top: -5px;
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: #fff;
    }

    .compute-pricing .compute-pricing-inner {
        background: url("../images/animations/mobileimage/black-substract.svg") no-repeat !important;
        background-size: contain !important;
        padding-bottom: unset !important;
        position: relative;
    }
    

    .compute-pricing .compute-pricing-inner .section-para {
        font-style: italic;
        font-size: 14px !important;
        color: white;
        font-weight: 400;
        padding: 0px 10px;
    }

    .compute-pricing .range-card .num-type-input .left {
        transform: rotate(90deg);
    }

    .case-studies .card {
        min-height: 500px !important;
    }



    /* about us  */
    .what-we-love .left-area {
        padding-right: 0;
    }

    .what-we-love .right-area .about-us-para {
        font-style: italic;
        font-weight: 500;
        text-align: unset !important;
        font-size: 14px !important;
    }
    #advance-storage{
        padding-bottom: 40px;
    }
}

@media (max-width: 575.98px) { 
    #advance-storage ul li {
        margin-bottom: 2vh;
        font-size: 14px;
    }
}