@media (max-width: 1199.98px) {
    .hero-area > div > img {
        width: 230px;
    }
    .banner h1 {
        font-size: 2.8rem;
    }
    .banner h1 span {
        font-size: 3rem;
    }
    .banner h2 {
        font-size: 1.25rem;
    }
    .banner::after,
    .connect-section::after,
    .connect-section::before,
    .sourcing-section::after,
    .sourcing-section::before {
        height: 220px;
        width: 220px;
    }
    .mission-vision h2,
    .heading h2 {
        font-size: 2rem;
    }
    .mission-vision h2 span,
    .comparison h3,
    .services h3 {
        font-size: 1.25rem;
    }
    .heading h3 {
        font-size: 1.5rem;
    }
    .heading img,
    .title img,
    .social-impact .title img,
    .comparison .title img {
        max-width: 60px;
    }
    .title h2,
    .social-impact .title h2,
    .comparison .title h2 {
        font-size: 1.8rem;
    }
    .sourcing-section .title h2 strong {
        font-size: 1.6rem;
    }
    .slider-nav-connect h3,
    .slider-nav-social-impact h3,
    .slider-nav-sourcing h3,
    .slider-nav-transparency h3 {
        font-size: 1.15rem;
        margin-bottom: 2rem !important;
    }
    .table > thead > tr > th,
    .table-striped > tbody > tr:nth-of-type(odd) > *,
    .table > :not(caption) > * > *,
    .small-card a,
    .small-card a:hover {
        font-size: 14px;
    }
    .theme-btn,
    .theme-btn:hover {
        font-size: 1rem;
    }
    .testimonial .item ul li {
        font-size: 14px;
        margin: 10px 0px;
    }
    .services .item::before {
        top: 10px;
        right: 10px;
        bottom: 10px;
        left: 10px;
    }
    .services .item h4 {
        font-size: 15px;
        margin: 0 0 0 20px;
    }
    .law-section .item .item-title {
        padding: 14px 0;
        width: 80%;
        border-radius: 30px;
    }
    .law-section .item .item-title img,
    .law-section.alt .item .item-title img {
        height: 100px;
        width: 100px;
    }
    .law-section .item .item-title h3 {
        font-size: 1.2rem;
    }
    .law-section .item .item-desc p {
        font-size: 1rem;
    }
    footer > div > img {
        height: 100px;
    }
    footer h3 {
        font-size: 1.25rem;
    }
    footer .download {
        margin: 20px 0 30px;
    }
    footer .download img {
        height: 50px;
    }
    footer h2 {
        font-size: 1.4rem;
    }
    footer .links li a {
        font-size: 1rem;
        font-weight: 500;
    }
    footer .social-links li a {
        height: 35px;
        width: 35px;
    }
    footer .copyright {
        margin: 40px 0 0;
    }
}

@media (max-width: 991.98px) {
    .rounded-pill {
        border-radius: 3rem !important;
    }
    .navbar-toggler {
        padding: 10px;
        font-size: 1rem;
        border: 2px solid var(--dark-blue);
        border-radius: 50%;
    }
    .navbar-light .navbar-toggler {
        color: rgb(5 68 124);
        border-color: rgb(5 68 124 / 50%);
    }
    .navbar-toggler:focus {
        outline: 0;
        box-shadow: none;
    }
    .navbar-collapse > .d-flex {
        justify-content: center;
    }
    .navbar-expand-lg .navbar-nav .nav-item {
        margin: 0 0 10px;
    }
    .header-btn,
    .header-btn:hover {
        margin-bottom: 30px;
    }
    .banner {
        text-align: center;
    }
    .banner::before {
        top: 0;
        left: 0;
    }
    .banner h1 {
        font-size: 2.5rem;
    }
    .banner h1 span {
        font-size: 2.6rem;
    }
    .banner h2 {
        font-size: 1.4rem;
    }
    .banner img {
        position: relative;
        top: 0;
        right: 0;
        padding-left: 0;
        max-width: 420px;
        margin-bottom: 50px;
    }
    .banner::after,
    .connect-section::before,
    .sourcing-section::after,
    .sourcing-section::before {
        height: 180px;
        width: 180px;
    }
    .mission-vision {
        padding: 110px 0 70px;
    }
    .mission-md {
        display: flex;
        align-items: center;
    }
    .mission-vision h2 {
        font-size: 2rem;
        padding: 0 10px;
    }
    .connect-section::after {
        display: none;
    }
    .slider-nav-connect,
    .slider-nav-social-impact,
    .slider-nav-sourcing,
    .slider-nav-transparency {
        display: none;
    }
    .slick-slide img {
        display: block;
        margin: auto;
    }
    .slick-slide h3 {
        color: #ffffff;
        font-size: 1.4rem;
        font-weight: 600;
        margin: 30px auto 10px;
        max-width: 400px;
        text-align: center;
    }
    .slider-for-social-impact .slick-slide h3 {
        color: var(--dark-blue);
    }
    .services .item {
        max-width: 500px;
        margin: 0 auto 50px;
    }
    .small-card {
        max-width: 280px;
        margin: 60px auto 0;
    }
    footer {
        margin-top: 30px;
    }
}

@media (max-width: 767.98px) {
    header {
        margin-top: 1rem;
        transition: all 0.3s;
        z-index: 9999;
    }
    .banner {
        border-radius: 50px;
        margin-bottom: 120px;
    }
    .banner h1 {
        font-size: 2.2rem;
        margin-bottom: 0;
    }
    .banner h2 {
        display: none;
    }
    .banner-mobile h2 {
        color: var(--blue);
        font-size: 1.8rem;
        font-weight: 700;
        text-align: center;
        text-transform: uppercase;
        line-height: 1.25;
        margin-bottom: 0;
    }
    .banner-mobile h2 span {
        color: var(--dark-blue);
    }
    .banner .text {
        padding: 0;
        position: relative;
        top: 50px;
    }
    .banner img {
        top: 80px;
        margin: 0;
    }
    .banner::after {
        display: none;
    }
    .mission-vision {
        padding: 50px 0 70px;
    }
    .connect-section::before,
    .sourcing-section::after,
    .sourcing-section::before {
        height: 135px;
        width: 135px;
    }
    .heading > div > div {
        width: 60%;
    }
    .mission-vision h2,
    .heading h2 {
        font-size: 1.8rem;
    }
    .heading h3 {
        font-size: 1.2rem;
    }
    .title h2,
    .social-impact .title h2,
    .comparison .title h2 {
        font-size: 1.5rem;
    }
    .sourcing-section .title h2 strong {
        font-size: 1.3rem;
    }
    .connect-section,
    .social-impact,
    .sourcing-section,
    .transparency-section {
        border-radius: 50px;
    }
    .slick-slide h3 {
        font-size: 1.2rem;
    }
    .comparison {
        padding: 40px 0px;
        border-radius: 50px;
    }
    .heading {
        padding: 20px 0;
    }
    .heading h3 br {
        display: none;
    }
    .card-in-mobile {
        display: block;
    }
    footer h2,
    footer .links,
    footer .social-links {
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .container-md {
        padding: 0;
    }
    header .navbar {
        padding: 3px 10px !important;
    }
    .navbar-light .navbar-toggler {
        display: none;
    }
    header .mobile-view {
        display: flex !important;
    }
    .header-btn,
    .header-btn:hover {
        font-size: 16px;
        font-weight: 700;
        border-radius: 30px;
        padding: 10px 18px;
        margin: 0;
    }
    .mobile-nav {
        display: block;
    }
    .theme-btn,
    .theme-btn:hover {
        font-size: 1rem;
    }
    .title {
        margin-bottom: 15px !important;
    }
    .mission-vision {
        padding: 30px 0 30px;
    }
    .comparison {
        padding: 0px 0px 30px;
    }
    .testimonial {
        padding: 0 0 30px;
        border-radius: 20px;
        margin-top: 30px;
        margin-bottom: 40px !important;
    }
    .tutorials-section {
        padding: 0px;
        margin-top: 30px;
    }
    .tutorials .slick-dots {
        bottom: -30px;
    }
    .tutorials-section .pt-4 {
        padding-top: 0 !important;
    }
    .table {
        margin-bottom: 30px;
    }
    .hero-area > div > img {
        width: 220px;
    }
    .hero-area .mt-30 {
        margin-top: 25px;
    }
    .banner {
        max-height: 320px;
        border-radius: 30px;
        margin-top: 25px;
        margin-bottom: 90px;
    }
    .banner h1 {
        font-size: 2rem;
    }
    .banner h1 span {
        font-size: 2rem;
    }
    .banner img {
        top: 35px;
        margin: 0;
        max-width: 180px;
    }
    .banner .text {
        padding: 0;
        position: relative;
        top: 25px;
    }
    .banner-mobile h2 {
        font-size: 1rem;
    }
    .mission-vision .m-4 {
        margin: 0.6rem !important;
    }
    .mission-vision h2 {
        font-size: 1.8rem;
        margin: 0 5px;
    }
    .mission-vision h3 {
        font-size: 14px;
        line-height: 1.4;
        letter-spacing: 0.25px;
    }
    .heading h2,
    footer h2 {
        font-size: 1.2rem;
    }
    .mission-vision img {
        border-radius: 0.75rem;
    }
    .mission-vision h2 span {
        font-size: 1rem;
    }
    .comparison h3,
    .services h3,
    .tutorials-section h3 {
        font-size: 1.15rem;
    }
    .connect-section::before,
    .sourcing-section::after,
    .sourcing-section::before {
        height: 100px;
        width: 100px;
    }
    .sourcing-section::after {
        display: none;
    }
    .heading h3 {
        font-size: 14px;
    }
    .heading img,
    .title img,
    .social-impact .title img,
    .comparison .title img {
        max-width: 50px;
        max-height: 60px;
    }
    .title img,
    .social-impact .title img,
    .comparison .title img {
        margin-right: 3px;
    }
    .title h2,
    .social-impact .title h2,
    .comparison .title h2,
    .sourcing-section .title h2 strong,
    footer h3 {
        font-size: 14px;
    }
    .heading {
        border-radius: 20px;
    }
    .connect-section,
    .social-impact,
    .sourcing-section,
    .transparency-section {
        padding: 20px 15px;
        border-radius: 20px;
    }
    .slick-slide h3 {
        font-size: 14px;
        font-weight: 700;
        margin-top: 15px;
        margin-bottom: 0;
    }
    .table > thead > tr > th {
        padding: 5px;
    }
    .table > thead > tr > th,
    .table-striped > tbody > tr:nth-of-type(odd) > *,
    .table > :not(caption) > * > * {
        font-size: 10px;
        font-weight: 500;
    }
    .table > :not(caption) > * > * {
        padding: 5px 8px;
    }
    .check {
        font-size: 16px;
    }
    .uncheck {
        font-size: 14px;
    }
    .heading {
        padding: 20px 15px;
    }
    .heading > div > div {
        display: inline-block;
        width: 100%;
    }
    .testimonial .bg-blue {
        padding-right: 20px;
    }
    .testimonial .bg-dark-blue {
        padding-left: 20px;
    }
    .testimonial .bg-blue::before {
        top: 10px;
        right: 10px;
        bottom: 10px;
        left: 10px;
        border-radius: 20px;
    }
    .testimonial .bg-dark-blue::before {
        top: 10px;
        right: 10px;
        bottom: 10px;
        left: 10px;
        border-radius: 20px;
    }
    .testimonial a img {
        height: 35px;
        width: 35px;
    }
    .testimonial .item ul {
        margin: 0 0 0 10px;
        padding: 0;
        max-width: 150px;
    }
    .testimonial .item ul li {
        font-size: 8px;
        margin: 10px 0px;
    }
    .services {
        padding: 0px;
    }
    .services .item {
        margin: 0 auto 30px;
    }
    .services .item::before {
        top: 5px;
        right: 5px;
        bottom: 5px;
        left: 5px;
        border-radius: 20px;
    }
    .services .item img {
        width: 55%;
    }
    .services .item h4 {
        font-size: 12px;
        margin: 0 0 0 10px;
    }
    .law-section {
        padding: 20px 0;
    }
    .law-section .item .item-title img,
    .law-section.alt .item .item-title img {
        height: 80px;
        width: 80px;
    }
    .law-section .item .item-title {
        padding: 14px 0;
        width: 90%;
        border-radius: 25px;
    }
    .law-section .item .item-title h3 {
        font-size: 15px;
    }
    .law-section .item .item-desc {
        padding: 20px;
        border: 6px solid var(--blue);
        border-radius: 30px;
    }
    .law-section .item .item-desc p {
        font-size: 14px;
        font-weight: 500;
    }
    .small-card {
        max-width: 250px;
        margin: 40px auto 10px;
    }
    .small-card img {
        top: -20px;
        right: -30px;
        height: auto;
        width: 95%;
    }
    footer {
        padding: 50px 0 30px;
    }
    footer .download img {
        height: 40px;
    }
    footer .download {
        margin: 20px 0 10px;
        padding: 0 0 20px;
        border-width: 3px;
    }
    footer h2 {
        margin: 30px 0 14px;
    }
    footer .links li {
        margin-bottom: 0;
    }
    footer .links li a {
        font-size: 14px;
        font-weight: 500;
    }
    footer .copyright {
        font-size: 12px;
        margin: 30px 0 0;
    }
    .services .item p {
        font-size: 10px;
        line-height: 1;
    }
}