:root {
    --primary: #0c1f4c;
    --secondary: #ff4000;
    --white: #fff;
    --black: #000;
    --gray: #474343;
}

@media (min-width: 1466px) {
    .subjectRight p {
        font-size: 16.1px;
    }

    .priceBox {
        gap: 21px;
    }

    .priceBox h5 {
        font-size: 2rem;
    }

    .priceBox p {
        font-size: 1.4rem;
    }

    .writerImg {
        padding: 80px 0px;
    }

    .topBar .navbar {
        width: 92%;
    }

    .processBox {
        padding: 80px 21px;
    }

    .subjectSlider .swiper-slide ul li.ScndLast {
        position: relative;
        left: 68px;
    }
}

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

    /* Your CSS rules for 1024px and smaller screens */
    body {
        background-color: lightblue;
    }

    .priceBox p {
        font-size: 1.5rem !important;
    }

}

@media screen and (max-width: 992px) {
    .topBar nav {
        border-radius: 0px;
    }

    .swiper-1 li:nth-child(even) {
        position: relative;
        left: 0px;
    }

    .writerSlider .swiper-pagination {
        position: static;
    }

    .order-details .form-control,
    .order-form .form-control {
        border: 1px solid black;
        border-radius: 10px;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .subBook {
        display: none;
    }

    .nav-link {
        font-size: 14px;
        padding: 0 5px !important;
    }

    a.navbar-brand img {
        width: 180px;
    }

    .blueBtn {
        background: var(--primary);
        color: var(--white);
        transition: 0.3s;
        padding: 11px 8px;
        border-radius: 14px;
        border-top-right-radius: 0px;
        font-weight: 600;
    }
}



@media screen and (max-width: 1024px) {
    /* Your CSS rules for 1024px and smaller screens */

    .nav-link {
        font-size: 14px;
        padding: 0 5px !important;
    }

    a.navbar-brand img {
        width: 180px;
    }

    .blueBtn {
        background: var(--primary);
        color: var(--white);
        transition: 0.3s;
        padding: 11px 8px;
        border-radius: 14px;
        border-top-right-radius: 0px;
        font-weight: 600;
    }
}

@media (min-width: 1367px) and (max-width: 2000px) {
    .serviceHeading {
        gap: 1.5rem;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}

@media (min-width: 481px) and (max-width: 767px) {}

@media (min-width: 200px) and (max-width: 480px) {
    .headerPoints li {
        flex: 100%;
    }

    .headerForm {
        width: 100% !important;
    }

    .topBar nav {
        width: 100%;
        padding: 10px 20px;
        position: inherit;
        top: 0;
    }

    .ctaBg .list-unstyled {
        gap: 25px !important;
    }

    .header {
        padding-top: 0;
    }

    .subAngel,
    .subBook,
    .subCircle,
    .cta img:nth-child(2),
    .cta img:nth-child(1),
    .subjectHexa,
    .subjectTriangle,
    .subjectletter,
    .subjects .subCircle,
    .priceLetterVector,
    .priceCircleVector,
    .priceDotteddVector,
    .priceBlurCircleVector,
    .process .right,
    .process .left,
    .capBottom,
    .capTop,
    .letterBottom,
    .letterTop {
        display: none;
    }

    .subjectleft {
        padding: 20px;
        border-radius: 13px;
    }

    .serviceHeading li::before {
        content: none;
    }

    .subjectRight {
        margin-top: 20px;
        position: inherit;
        padding: 20px 30px;
        border-radius: 13px;
    }

    .serviceHeading hr {
        width: 83%;
    }

    .processBorder {
        margin: 0px 29px;
    }

    .processBox {
        padding: 75px 38px;
    }

    .priceBox img {
        height: 12.3rem !important;
    }

    .ctaBg {
        margin-top: 1rem;
    }

    .ctaGirl {
        position: initial;
        display: block;
        margin: auto;
    }

    .dottedBorder p {
        font-size: 13px;
    }

    li.nav-item {
        width: 100%;
    }

    .serviceHeading {
        gap: 5px;
    }
}