/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
.py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .login-box-info {
        margin-top: 0px !important;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .nav a {
        font-size: 16px;
    }
    .login-box-info {
        margin-top: 0px !important;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .py-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    .vlbanner {
        height: 110px;
        position: absolute;
        left: 50%;
        margin-left: -3px;
        top: 10vh; 
    }
    .vlbanner2 {
        height: 330px;
        position: absolute;
        left: 50%;
        margin-left: -3px;
        top: 90%; z-index:4
    }
    .lead {
        text-align: center;
    }
    .vlfooter {
        top: 80%;
    }
    .login-box-info {
        margin-top: 0px !important;
    }
    .footer span, footer > span, a{
        font-size:16px;
    }
}


@media (max-width: 991px) {
    .vlbanner {
        height: 18vh; /* relative to viewport height */
        top: 5vh;
    }
    .vlbanner2 {
        height: 33vh;
        top: 100%;
        z-index: 99;
    }
	
	
}


@media (max-width: 400px) {
    .vlbanner {
        height: 18vh; /* relative to viewport height */
        top: 5vh;
    }
    .vlbanner2 {
        height: 33vh;
        top: 85%;
        z-index: 99;
    }
}


@media (max-width: 389px) {
    .vlbanner {
        height: 18vh; /* relative to viewport height */
        top: 5vh;
    }
    .vlbanner2 {
        height: 33vh;
        top: 100%;
        z-index: 99;
    }
}

  @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

    .vlbanner {
        height: 15vh; /* iPhone-specific height */
        top: 6vh;     /* adjusted top */
    }
    .vlbanner2 {
        height: 30vh; /* iPhone-specific height */
        top: 109%;
        z-index: 99;
    }
}
   @media only screen 
  and (min-device-width: 390px) 
  and (max-device-width: 420px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

    .vlbanner {
        height: 15vh; /* iPhone-specific height */
        top: 6vh;     /* adjusted top */
    }
    .vlbanner2 {
        height: 30vh; /* iPhone-specific height */
        top: 100%;
        z-index: 99;
    }
}