@media screen and (max-width: 768px) {
    .custom-container {
        width:100%;
    }
    .navbar-brand {
        margin-left: 0;
    }
    .navbar-toggler {
        display: none;
    }
    .main-body::before {
        width: 600px;
        height: 900px;
        transform: scale(.8);
        top: -90px;
        right: -58px;
    }
    .particle-section {
        position: absolute;
        right: 0px;
        top: 160px;
        width: 500px;
        height: 500px;
    }
    .hero-section {
        margin-bottom: 100px;
    }
    .title {
        font-size: 30px;
    }
    .what-we-do .title {
        font-size: 30px;
    }
    #up-arrow-section, #left-rectangle-section, #right-rectangle-section, #right-rectangle-section2 {
        display: none;
    }
    .why-choose-us-section .box {
         width: 100%;
        margin-bottom: 50px;
    }
    .mobile-body {
        position: relative;
        width: 100%;
        height: 660px;
    }
    .screen {
        top: 50px;
        left: 30px;
        width: 83%;
        height: 525px;
    }
    .buttons-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .buttons-section .join-btn {
        margin-bottom: 10px;
        font-size: 14px;
        width: 215px;
        text-align: center;
    }
    .hideOnSmallDevices {
        display: none;
    }
    .hideOnDesktop {
        display: block!important;
    }
    .why-choose-us-section .title {
        margin-bottom: 40px;
    }
    .mobile-subtitle {
        width: 330px;
    }
    /*.mobile-app-section {*/
    /*     margin-top: 0px;*/
    /*}*/
    .testimonials-section {
        margin-top: 80px;
    }
    .contact-section .tab-content {
        width: 100%;
    }
    footer {
        margin-top: 80px;
    }
    .smaller-rectangle {
        width: 400px;
        height: 450px;
        content: '';
        background-image: url(/assets/images/smaller-rectangle.svg);
        background-repeat: no-repeat;
        position: absolute;
        right: 0px;
        bottom: 0;
    }
}
@media (max-width: 575.98px) {
    body {
        background-image: linear-gradient(to bottom, #123075, #092056)!important;
    }
    .main-body::before {
        width: 900px;
        height: 900px;
        transform: scale(.3);
        right: -315px;
        top: -315px;
    }
    .particle-section {
        width: 200px;
        height: 200px;
        top: 40px;
    }
    .logo {
        width: 130px;
    }
    .title {
        font-size: 20px;
        line-height: 1.5;
    }
    .what-we-do .title {
        font-size: 20px;
        margin-bottom: 40px;
    }
    .what-we-do .card {
        max-height: 261px;
        padding: 20px;
    }
    .subtitle {
        font-size: 16px;
    }
    .custom-tabs .nav-item:first-child {
        margin-bottom: 21px;
        margin-right: 0px;
    }
    .contact-section img {
        display: none;
    }
    .about-col {
        display: none;
    }
    .mobile-title {
        margin-top: 40px;
    }
    .mobile-body {
        height: 520px;
        width: 278px;
        margin: 0 auto;
    }
    .screen {
        height: 420px;
        width: 85%;
        left: 20px;
        top: 50px;
    }
    .mobile-body-col {
        margin-top: 20px;
    }
    .features-rectangle {
        display: none;
    }
    .mobile-app-section .title span {
        display: inline-block!important;
    }
    .mobile-app-section .title {
        text-align: center;
    }
    .hideOnMobile {
        display: none;
    }
    .contact-form {
        padding: 15px;
    }
}
@media screen and (max-width: 410px) {
    body {
        background-image: linear-gradient(to bottom, #123075, #092056)!important;
    }
    .main-body::before {
        width: 900px;
        height: 900px;
        transform: scale(.3);
        right: -315px;
        top: -315px;
    }
    .particle-section {
        width: 200px;
        height: 200px;
        top: 40px;
    }
    .logo {
        width: 130px;
    }
    .title {
        font-size: 20px;
        line-height: 1.5;
    }
    .what-we-do .title {
        font-size: 20px;
        margin-bottom: 40px;
    }
    .what-we-do .card {
        max-height: 261px;
        padding: 20px;
    }
    .subtitle {
        font-size: 16px;
    }
    .custom-tabs .nav-item:first-child {
        margin-bottom: 21px;
        margin-right: 0px;
    }
    .contact-section img {
        display: none;
    }
    .about-col {
        display: none;
    }
    .mobile-title {
        margin-top: 20px;
    }
    .mobile-body {
        height: 520px;
        width: 278px;
        margin: 0 auto;
    }
    .screen {
        height: 420px;
        width: 85%;
        left: 20px;
        top: 50px;
    }
    .mobile-body-col {
        margin-top: 20px;
    }
    .features-rectangle {
        display: none;
    }
    .mobile-app-section .title span {
        display: inline-block!important;
    }
    .mobile-app-section .title {
        text-align: center;
    }
    .hideOnMobile {
        display: none;
    }
    .contact-form {
        padding: 15px;
    }

}