/* Responsive styles */
/* // X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
    
    :root {
    --heading-size: 28px;
    --heading-size2: 25px;
    --body-textsize2: 18px;
}
.paragraph-content {
    font-size: 16px;
    line-height: 1.4;
}

.section-padding {
    padding-top: 30px;
}

.feature-item {
    padding: 15px 15px;
}

.card-modern {
    padding-bottom: 40px;
}

.custom-form {
    padding: 0;
}
    .cardcirclebg {
    height: 100px;
    font-size: 22px;
}

.desktoparrow {
    display: none;
}

.mobilearrow {
    display: block;
    transform: rotate(91deg);
    top: calc(50% - 25px);
}

.paragraph-content {
    text-align: justify;
}
.main-title {
    margin-bottom: 20px;
}
.instructor-image img {
    width: 100%;
}
/* Login modal design */
 .login-modal .modal-header {
                padding: 20px;
            }
           .login-modal .modal-title {
                font-size: 16px;
            }
            .login-modal .modal-title span {
                font-size: 16px;
            }
            .login-modal .modal-body {
                padding: 16px;
            }
           .lead-text {
                font-size: 18px;
            }
            .sub-text {
                font-size: 14px;
             
            
            }
            .role-card {
                padding: 14px;
            }
            .role-icon {
                font-size: 32px;
                margin-bottom: 12px;
            }
            .role-title {
                font-size: 16px;
            }
            .role-sub {
                font-size: 12px;
                margin-bottom: 15px;
            }
            .role-description {
                font-size: 14px;
                margin-bottom: 14px;
            }
            .btn-login {
                padding: 10px 12px;
                font-size: 15px;
            }
            .btn-trigger {
                padding: 10px 20px;
                font-size: 0.9rem;
                border-radius: 40px;
            }
            .btn-login {
    font-size: 14px;
    padding: 10px 8px;
}
.input-container {
    max-width: 90%;
}

.map-container img {
    width: 100%;
}
}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { 
    .hero-banner-button-web {
    bottom: 10px;
    right: 10px;
    width: 120px;
}
    :root {
    --heading-size: 38px;
    --heading-size2: 25px;
    --body-textsize2: 18px;
}
.paragraph-content {
    font-size: 16px;
}

.section-padding {
    padding-top: 60px;
}

.feature-item {
    padding: 15px 15px;
}

.card-modern {
    padding-bottom: 20px;
}

.custom-form {
    padding: 0;
}
.main-title {
    margin-bottom: 30px;
}
          /* adjust modal padding */
           .login-modal .modal-header {
                padding: 22px 24px 16px 24px;
            }
            .login-modal .modal-title {
                font-size: 22px;
            }
           .login-modal .modal-title span {
                font-size: 18px;
                display: inline-block; /* better wrapping */
            }
            .login-modal .modal-body {
                padding: 20px;
            }
            .lead-text {
                font-size: 20px;
            }
            .sub-text {
                font-size: 15px;
               
              
            }
            /* cards stack with reduced padding */
            .role-card {
                padding: 24px 18px 22px 18px;
                border-radius: 22px;
            }
            .role-icon {
                font-size: 36px;
                margin-bottom: 16px;
            }
            .role-title {
                font-size: 22px;
            }
            .role-sub {
                font-size: 14px;
                margin-bottom: 14px;
                padding-bottom: 12px;
            }
            .role-description {
                font-size: 15px;
                margin-bottom: 22px;
            }
            .btn-login {
                padding: 12px 14px;
                font-size: 16px;
            }
           
            .btn-login {
    font-size: 14px;
    padding: 14px 8px;
}
.input-container {
    max-width: 90%;
}

.map-container img {
    width: 100%;
}
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { 
    .hero-banner-button-web{
        bottom: 10px;
    right: 10px;
    width: 100px;
    }
        :root {
    --heading-size: 38px;
    --heading-size2: 25px;
    --body-textsize2: 18px;
}
   .paragraph-content {
    font-size: 16px;
}

.section-padding {
    padding-top: 60px;
}

.feature-item {
    padding: 15px 15px;
}

.card-modern {
    padding-bottom: 20px;
}

.custom-form {
    padding: 0;
}
.btn-login {
    font-size: 14px;
    padding: 14px 8px;
}
.input-container {
    max-width: 90%;
}

.map-container img {
    width: 100%;
}
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { 
      .hero-banner-button-web{
        bottom: 15px;
        right: 15px;
        width: 170px;
      }
      .input-container {
    max-width: 60%;
}

.card-title {
    font-size: 18px;
}

}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1400.98px) {
   
}

/* // For 2k Monitors, (more than 1401 px) */
@media (min-width: 1401px) and (max-width: 1599.98px) {
    
}

@media (min-width: 1600px) and (max-width: 2559.98px) {
    
}

@media (min-width: 2560px) {
  
}