@media screen and (min-width:100px) and (max-width: 600px){
    .navbar{
        padding: 30px 10px;
        width: 100%;
        background-color: white;
        z-index: 10;  
    }
    .companyLogo{
        width: 50px;
        height: 50px;
    }
    .navItems .nav-link {
        font-size: 17px;
    }

    .navbar-toggler{
        color:#0690CE;
        width: 65px;
        height: 40px;
    }

    .navbar-toggler-icon {
        width: 35px;
        height: 20px;
    }

    .container {
        max-height: calc(100vh - 120px); 
        display: flex;
        flex-direction: column;
    }

    .explorebtn{
        width: 136px;
        font-size: 15px;
        background-color: #0B3861;
        color: white;
        margin-right: 10px;
    }

    .main{
        width: 100%;
    }

    .content{
        width: auto;
        position: relative;      
        height: auto;
        left: auto;
        margin: 0px;
    }

    .content .titles{
        margin-left: 0px;
        margin-top: 3rem;
        padding: 0px 10px;
    }

    .contactbtn{
        width: 136px;
        font-size: 15px;
    }
    .content h5{
        font-size: 16px;
    }
   .content h3{
        font-size: 35px;
   }

    .content p{
        font-size: 18px;
        line-height: 28px;
        margin-top: 0px;
        margin-bottom: 1rem;
        color: #5d5a5a;
    }

    .buttons{
        margin-bottom: 2rem;
    }

    .services-content h5{
        font-size: 16px;
    }

    .service-titles{
        margin-top: 3rem;
        margin-left: 0px;
        padding: 0px 10px;
    }

    .services-content h3{
        font-size: 35px;
    }

    .services-content p{
        font-size:18px;
        margin-bottom: 70px;
        line-height: 35px;
        color: #5d5a5a;
    }
    .services-content{
        position: relative;
        left:0px;
        width: 100%;
        margin-right: 5px;
    }
    .container.services {
        margin-left: 0px;
    }

    .faq-drawer label{
        font-size: 25px;
    }
    .faq-drawer {
        margin-right: 18px;
    }
    .faq-drawer p{
        font-size: 18px;
        padding-left: 10px;
        margin-left: 5px;
        color: #5d5a5a;
    }
    .faq-drawer__content img {
        display: none;
    }

    .subdiaries-content > .d-flex {
        display: flex;
        flex-direction: column; 
    }

    .subdiaries-content .flex-fill {
        width: 100%;
        min-width: 0px;
    }

    .subdiaries-content {
        width: 100%;
        left: 0px;
    }

    .sub-column {
        height: auto;             
        margin: 30px 15px;       
        justify-items: stretch;   
    }

    .first .sub-column{
        height: auto !important;
    }
    .subdiaries-content h6::after{
        left: 0%;
    }
     .sub-column {
        height: auto !important;  
        min-height: unset !important; 
        overflow: visible !important; 
    }

    .sub-column button {
        margin-top: 50px;        
        align-self: flex-start;  
    }
    
    .subdiaries-content p{
        font-size: 18px;
        line-height: 40px;
        color: #5d5a5a;
    }
    .subdiaries-content h6{
        font-size: 22px;
        line-height: 45px;
    }

    .logos{
        width: 27vh;
        padding: 6px 0px;
        margin: 0px;
    }

    .sub-column{
        height:auto;
    }
    .sub-column .btn{
        font-size: 21px;
        width: 100%;
        height: 55px;
    }

    .sub-column button::after{
        width: 13%;
        height: 55%;
        right:6%;
    }

    .partner-main{
        width: 100%;
        left: 0%;
    }
    .partners-content{
        width: 100%;
        margin-bottom: 30px;
        left: 0px;
        position: relative;      
        height: auto;
    }
    .partners-header {
        margin-right: 0px;
        margin-left: 0px;
    }

    .partners-content h5{
        font-size: 16px;
    }
    .partners-content h3{
        font-size: 35px;
    }

    .partners-content p{
        font-size:18px;
        line-height: 35px;
        color: #5d5a5a;
    }

    .logopic{
        width:90px;
    }
    .partners-titles{
        margin: 5rem 0px 10px 10px;
    }
    

    .test-content{
        width: 100%;
        left: 0px;
    }
    .test-content .blue{
        height: auto;
        width: 100%;
        margin: 0px;
        display: flex;      
        flex-direction: column;
    }
   
    .test-title{
        margin-top: 5rem;
        margin-left: 20px;
        margin-right: 20px;
    }
    .slider-dots {
        justify-content: flex-end;
        margin-top: 15px;
        gap: 12px;
        margin-right: 2rem;
        position: relative;
    }
    
    .arrow-svg {
        width: 12%;
    }

    .card-slider {
        display: flex;
        gap: 20px;           
        padding-left: 20px;  
    }

    .card-slider-container {
        max-width: 100%;   
        margin: 0px;
    }

    .card {
        flex: 0 0 80%;    
        margin-right: 20px;
        height: 500px;    
        display: flex;      
        flex-direction: column; 
    }

    .test-content h5{
        font-size: 16px;
    }

    .test-content h3{
        font-size: 35px;
    }

    .card img {
        width: 31%;
    }

    .card-body h5{
        font-size: 15px;
    }

    .card p {
        font-size: 18px;
        color: #5d5a5a;
    }

    .card hr {
        margin: 10px 0px;
    }

    .main-contact{
        width: 100%;
        left: 0%;

    }

    .contact-content h5{
        font-size: 16px;
    }
    .contact-content h3{
        font-size: 35px;
    }
    .contact-header{
        margin-top: 5rem;
        margin-bottom: 30px;
    }
    .country{
        width: 100%;
    }
    .contact-titles{
        padding: 0px 20px;
        margin: 0px;
    }

    .country p{
        color: #5d5a5a;
        font-size: 18px;
    }

    .test-content .blue .image{
        margin-left: 40px;

    }

    .contact-box{
        border-bottom: 1px solid #5d5a5a90;
    }

    .first::before,
    .second::before,
    .third::before,
    .fourth::before {
        opacity: 0.75 !important;   
        transition: none !important;
    }

    .first:hover::before,
    .second:hover::before,
    .third:hover::before,
    .fourth:hover::before {
        opacity: 0.75 !important;  
    }

    .first > *,
    .second > *,
    .third > *,
    .fourth > * {
        position: relative;
        z-index: 2;
    }

    .sub-column button {
        opacity: 1 !important;   /* always show */
        transform: none !important;
    }

    .sub-column:hover button {
        background: linear-gradient(to right, #0B3861 75%, #0690CE 75% 100%) !important; 
    }
    .offcanvas-body {
        height: 90%;
        margin-left: 10px;
    }

    /* Center navItems vertically */
    .offcanvas-body .navItems {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Stick social icons to bottom */
    .offcanvas-body .navItemsSocial {
        margin-top: auto;
    }
    .offcanvas-body .navItemsSocial {
        margin-top: auto !important;
    }

    .facebook{
        width:19px;
    }
    .linkedin , .twitter{
        width:20px;
    }
    .facebook.btn-icon{
        padding: 8px;
        background-color: #0B3861;
        border-color: #0B3861;
    }

    .twitter.btn-icon{
        background-color: #40C4FF;
        border-color: #40C4FF;
        padding: 8px;
    }

    .linkedin.btn-icon{
        background-color: #0690CE;
        border-color: #0690CE;
        padding: 8px;
    }

    .socialmediaimg {
        width: 25px;
        height: 25px;
        opacity: 1;
    }

    .btn-icon img {
        filter: brightness(0) invert(1);
    }
    .partners-content .logo-box:hover{
        transition: none;
    }
    .navItemsSocial{
        gap:1.5rem;
    }

    .blog-content{
        margin-top: 3rem;
        margin-left: 10px;
        margin-right: 10px;
    }

    .blog-main{
        width: 100%;
        left: 0%;
    }

}

@media screen and (min-width:601px) and (max-width: 1024px){
    .col-xl-10 {
        width: 100.333333%;
    }

    .navbar {
        padding: 20px;
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        background-color: white;
        z-index: 10;  
    }
    .companyLogo{
        width: 75px;
        height: 75px;
        
    }
    .navItems .nav-link{
        font-size: 30px;
    }
    .facebook{
        width:20px;
    }
    .linkedin , .twitter{
        width:24px;
    }

    .socialmediaimg {
        width: 30px;
        height: 34px;
        opacity: 1;
    }

    .container {
        min-height: calc(100vh - 100px); 
        display: flex;
        flex-direction: column;
    }

    .content p {
        font-size: 30px;
        line-height: 40px;
    }
    .content{
        width: auto;  
        position: relative;      
        left: auto;            
    }

    .content .titles{
        padding: 0px 10px;
        margin: 0px !important;
    }

    .explorebtn{
        width: 246px;
        height: 61px;
        font-size: 22px;
        background-color: #0B3861;
        color: white;
    }

    .contactbtn{
        width: 246px;
        height: 61px;
        font-size: 22px;
    }
    .buttons{
        padding-bottom: 20px;
    }
    .container.services{
        margin-left: 28px;
    }
    .services-content{
        left:0px;
        width: 100%;
    }
    .service-titles{
        margin-top: 130px;
    }
    .services-content p{
        font-size: 30px;
        line-height: 40px;
    }

    .faq-drawer p{
        font-size: 30px;
        line-height: 40px;
    }


    .subdiaries-content p{
        font-size: 30px;
        line-height: 60px;
    }
    .first::before,
    .second::before,
    .third::before,
    .fourth::before {
        opacity: 0.75 !important;   
        transition: none !important;
    }

    .first:hover::before,
    .second:hover::before,
    .third:hover::before,
    .fourth:hover::before {
        opacity: 0.75 !important;  
    }

    .first > *,
    .second > *,
    .third > *,
    .fourth > * {
        position: relative;
        z-index: 2;
    }

    .sub-column button {
        opacity: 1 !important;  
        transform: none !important;
        width: 440px;
        height: 80px;
        font-size: 30px;
    }
    .sub-column{
        height: 50vh;
        margin-bottom: 30px;
    }

    .sub-column .logos{
        width: 20rem;
    }

    .sub-column:hover button {
        background: linear-gradient(to right, #0B3861 75%, #0690CE 75% 100%) !important; 
    }

    .subdiaries-content h6{
        font-size: 34px;
        line-height: 70px;
    }
    .sub-column button::after{
        width: 50px;
        height: 70px;
        right:6%;
    }

    .partner-main{
        width: 100%;
        left: 0%;
    }
    .partners-content{ 
        width: 100%;
      }

    .partners-content p{
        font-size: 30px;
        line-height: 40px;
    }

    .card-slider {
        display: flex;
        gap: 20px;           
        padding-left: 20px; 
    }

    .card-slider-container {
        max-width: 100%;   
        margin: 0px;
    }

    .card {
        flex: 0 0 80%;     
        margin-right: 20px;
        height: 500px;      
        display: flex;      
        flex-direction: column; 
    }

    .test-content h5{
        font-size: 20px;
    }

    .card img {
        width: 100px;
        height: 100px;
    }

    .card-body h5 {
        font-size: 28px;
    }

    .card p {
        font-size: 30px;
        color: #5d5a5a;
        line-height: 40px;
    }
    .card hr {
        margin: 25px 0px;
    }
    .test-content{
        width: 100%;
        left: 0px;
    }
    .test-content .blue {
        height: 95vh;
        width: 95%;
    }
    .main-contact{
        background-position: center;
        width: 100%;
        left: 0%;
    }
    .country{
        justify-content: flex-start;
    }
    .contact-content{
        background-position: bottom;
        left: 0px;
        width: 100%;
    }
    .content .titles {
        margin: 0px 60px;
    }
    .contact-box{
        margin-bottom: 18px;
    }

    .subdiaries-content p {
        font-size: 30px;
    }

    .subdiaries-content {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100%;
        left: 0px;
    }
    .partners-content{
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .partners-content .logo-box {
        width: 233px;
        height: 160px;
    }

    .logo-box{
        margin: 0px;
    }
    .logopic{
        width: 115px;
    }


    nav.navbar {        
        line-height: 70px;   
    }
    
    .offcanvas-body {
        display: flex !important;
        flex-direction: column !important;

    }
    .offcanvas-body .navItems {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .offcanvas-body .navItemsSocial {
        margin-top: auto !important;
        gap:2rem;
    }
    .facebook.btn-icon{
        padding: 15px;
        background-color: #0B3861;
        border-color: #0B3861;
    }

    .twitter.btn-icon{
        background-color: #40C4FF;
        border-color: #40C4FF;
        padding: 13px;
    }

    .linkedin.btn-icon{
        background-color: #0690CE;
        border-color: #0690CE;
        padding: 13px;
    }

    .btn-icon img {
        filter: brightness(0) invert(1);
    }

    .contact-header{
        margin-top: 130px;
    }
    .country p{
        font-size: 26px;
        line-height: 32px;
    }

    .dot {
        height: 20px;
        width: 20px;
    }

    .dot-ring{
        width: 35px;
    height: 35px;
    }
    .partners-content .logo-box{
        transition: none !important;
        width: 100%;
    }
    .partners-titles{
        margin-top: 3rem;
    }

    .partners-content .row{
        --bs--gutter-x: 0rem !important;
        --bs--gutter-y: 0rem !important;   

    }
}

@media (min-width: 1400px){
    .content{
        left: 7%;
    }
    .partners-content{
        left: 1%;
    }
    .partners-content .logo-box {
        width: 100%;
        height: 170px;
    }


    .navItems .nav-link{
        font-size: 18px;
    }
    .card-slider-container {
        width: 1356px;
    }
    .navItems .nav-link.active {
        color: #0690CE;
        font-weight: 700;
    }

    .sub-column{
        margin-top: 12rem;
    }

    .first::before , .second::before, .third::before, .fourth::before {
        height: 70%;
    }

    .navItems .nav-link.active::before,
    .navItems .nav-link.active::after {
        content: "";
        position: absolute;
        left: 0;
        width: 10%;
        height: 4px;
        background-color: #0690CE;
        border-radius: 2px;
        transition: width 0.3s ease-in-out;
    }

    .navItems .nav-link.active::before {
        top: 0;
    }
    .navItems .nav-link.active::after {
        bottom: 0;
    }
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: none;
    }
    .service-titles{
        margin: 0px 20px;

    }
    .services-content{
        left:5.2%;
        height: 100vh;
    }

    .subdiaries-content {
        height: 100vh;
        left: 5.2%;
    }
    
}