/* *************************************************** *
 * File Name:        responsive.css
 * Description:      Styles for the Delta Website
 * Author:           SE-2
 * Created Date:     2025-02-11
 * Last Modified:    2025-02-11
 * Version:          1.1
 * Project:          Delta Website
 * Company:          Progmize Software Systems
 * Contact:          tech@progmize.com
 *
 * Revision History:
 * 2025-02-11   SE-2    Initial creation for project setup, added styles for responsive Header, Hero, Table and Footer.
 * ***************************************************  */

 @media (max-width: 991px) {

     body {
         overflow-y: hidden;
     }

     .signup-modal,
     .forgotPassword-modal {
         position: absolute;
         top: 136px;
     }

     /* HOME PAGE STYLES */
     /* Shipping Section Styles */
     .shipping-section {
         padding: 0;
     }

     .shipping-section .container {
         padding: 0%;
     }

     .shipping-section .row {
         flex-direction: column-reverse;
         text-align: center;
     }

     .shipping-text {
         padding: 20px;
         width: 100%;
         max-width: 100%;
         min-width: 100%;
         background: #0d3b66;
         color: #ffffff;
         border-radius: 0px;
         text-align: start;
         height: 100%;
         margin-top: 50px;
     }

     .shipping-text h2 {
         font-size: clamp(22px, 2vw, 30px);
     }

     .shipping-text h2 span {
         position: static;
         font-size: clamp(22px, 2vw, 30px);
     }

     .shipping-text p {
         font-weight: 200;
         margin-top: 15px;
     }

     .shipping-img {
         width: 50%;
         min-width: 80%;
         margin: auto;
         margin-top: 50px;
     }

     .shipping-img img {
         width: 100%;
         height: auto;
         display: block;
         border-top-right-radius: 0px;
         border-bottom-right-radius: 0px;
     }


     .shipping-section .btn-learn-more {
         margin-top: 50px;
         border-radius: 5px;
         background: #184476;
         box-shadow: 8px 8px 6.6px 0px rgba(0, 0, 0, 0.25);
         color: #fff;
         padding: 10px 20px;
         text-decoration: none;
         font-weight: bold;
         display: inline-block;
         border-radius: 5px;
     }

     /* Shipping Banner Styles */
     .shipping-banner {
         background: #FFF;
         box-shadow: 17px 4px 7.9px 1px rgba(0, 0, 0, 0.25);
         color: #184476;
         font-size: clamp(14px, 2vw, 16px);
         padding: 30px;
         padding-bottom: 20px;
         min-width: 100%;
         max-width: 100%;
         border-bottom-right-radius: 0;
     }

     .shipping-banner-text {
         width: 100%;
     }

     .shipping-banner p {
         font-size: 15px;
     }

     /* Services Section One & Two Styles */
     .services-section-one {
         background: var(--DESIGNER2, linear-gradient(90deg, #165E99 0.29%, #1F1C1C 102.45%));
         backdrop-filter: blur(2px);
         padding: 50px 0px;
     }

     .services-section-two {
         padding: 50px;
     }

     .services-section-two .service-card {
         margin: 0 auto;
     }

     .services-section-two .service-card img {
         height: auto;
     }

     .services-section-one .service-title {
         background: #ffff;
         background-clip: text;
         -webkit-background-clip: text;
         -webkit-text-fill-color: #fff;
         line-height: 1.3;
     }

     .service-title {
         font-size: clamp(45px, 2vw, 45px);
     }

     .shipping-image .feature-container {
         border: 3px solid #FFF;
     }

     .service-feature-title span,
     .service-span {
         font-size: clamp(27px, 2vw, 27px);
         text-transform: capitalize;
         margin-left: 10px;
         margin-top: 0px;
     }

     /* Logistics Section Styles */
     .services-section-one .row {
         padding: 50px 40px;
     }

     .services-section-one .row {
         border-radius: 40px 200px 200px 40px;
         border: none;
         background: none;
         backdrop-filter: blur(2px);
     }

     .services-section-one .service-span {
         color: #fff !important;
     }


     .services-section-two .service-title {}


     .services-section-two .service-title span {
         font-size: clamp(18px, 2vw, 18px);
     }

     .services-section-one .service-card {
         padding: 30px 0;
         height: 500px;
         border-right: none;
         border-radius: 30px;
         background: var(--DESIGNER, linear-gradient(180deg, #165E99 0.02%, #071F33 85.4%));
     }

     .info-card {
         padding-right: 0;
     }

     .info-card p {
         padding-right: 0;
         text-align: justify;
         font-size: 19px;
         font-weight: 400;
     }

     .services-section-two .col-md-3:has(.service-card) {
         margin-bottom: 20px;
     }

     .services-section-one .service-card h3 {
         font-size: clamp(38px, 2vw, 38px);
         line-height: 1.6;
     }

     .services-section-one .info-card {
         background: none;
         box-shadow: none;
         height: 100%;
         padding-bottom: 10px;
     }

     /* Contact Form Section Styles */
     .map-container {
         border-left: none;
         border-top: 1px solid var(--white);
         margin-right: 0;
         margin-left: 0;
     }

     .contact-info {
         color: var(--white);
     }

     .contact-title {
         font-size: 2.5rem;
     }

     /* 
    .info-item p {
        font-size: clamp(13px, 2vw, 13px);
    }

    .info-item i {
    font-size: clamp(15px, 2vw, 16px);
    } */

     /* Download Application Styles */
     .download-title {
         font-size: clamp(45px, 2vw, 45px);
         line-height: 30px;
     }

     .download-title span {
         font-size: clamp(18px, 2vw, 18px);
         margin-left: 0;
     }

     .download-box {
         padding: 20px 0;
         border-radius: 18px;
         border: 1px solid #FFF;
         background: linear-gradient(97deg, rgba(22, 94, 153, 0.40) 1.94%, rgba(228, 228, 228, 0.40) 139.66%);
         backdrop-filter: blur(7px);
     }

     .app-buttons a {
         padding: 8px 0px;
         font-size: clamp(8px, 2vw, 16px);
         margin: 0;
         border-radius: 8px;
         background: linear-gradient(90deg, #162140 0%, #3956A6 100%);
     }

     .app-buttons a img {
         height: 30px;
     }

     .app-buttons a:last-of-type img {
         height: 20px;
     }

     /* Brands Section  */
     .brands h2 {
         font-size: clamp(45px, 2vw, 45px);
     }

     .brand-box {
         border-radius: 12px;
         background: #F2F3F4;
         box-shadow: 9px 10px 6.2px 1px rgba(0, 0, 0, 0.25);
     }

     .brand-box .row {
         flex-direction: column;
         gap: 20px;
     }

     .brand-box .row .col-4:has(img) {
         margin: auto;
         margin-bottom: 10px;

     }

     /* .brand-box img {
         margin: auto;
     } */

     /* First Row */
     .brand-box .row {
         gap: 50px;
     }

     .brand-box .row .col-4:first-of-type img {
         max-width: 120px;
         max-height: 120px;
         object-fit: contain;
     }

     .brand-box .row .col-4:nth-of-type(2) img {
         max-width: 120px;
         max-height: 120px;
         object-fit: contain;
     }

     .brand-box .row .col-4:nth-of-type(3) img {
         width: 180px;
         object-fit: contain;
     }

     .brand-box .row .col-4:nth-of-type(4) img {
         width: 140px;
         object-fit: contain;
         margin-top: 0px;
     }

     /* Second Row */
     .brand-box .row .col-4:nth-of-type(5) img {
         width: 150px;
         object-fit: contain;
     }


     .brand-box .row .col-4:nth-of-type(6) img {
         width: 80px;
         object-fit: contain;
     }

     .brand-box .row .col-4:nth-of-type(7) img {
         width: 90px;
         object-fit: contain;
     }

     .brand-box .row .col-4:last-of-type img {
         width: 140px;
         object-fit: contain;
     }

     /* Shipping Page Styles */
     .shipping-page-section {
         padding: 0px;
     }

     .shipping-page-section .row {
         /* border: 2px solid #184476; */
         border-radius: 14px;
         /* padding-bottom: 20px; */
     }

     .shipping-text-box {
         /* background: white; */
         height: 100%;
     }

     .shipping-image {
         background-size: cover;
         background-position: right;
     }

     /* .shipping-image img {
         width: 100%;
         height: 100%;
         border-radius: 15px;
     } */

     /* .shipping-text-box h2 {
         color: #184476;
     }

     .shipping-text-box p {
         color: #184476;
     } */

     .shipping-text-box .btn-light {
         border-radius: 5px;
         /* background: #184476; */
         box-shadow: 8px 8px 6.6px 0px rgba(0, 0, 0, 0.25);
         /* color: #fff; */
         border: none;
         padding: 12px 20px;
     }

     .services-features {
         background-size: 1999px;
         padding: 20px;
     }

     /* Footer Styles */
     .footer {
         background-size: cover;
     }

     .footer .container-fluid {
         padding: 0 0px;
     }

     .footer .row:first-of-type {
         padding: 10px 10px;
     }

     .social-icons-container {
         margin-right: 0px;
     }

     .social-icons {
         display: flex;
         flex-wrap: wrap;
     }


     .bottom-navigation {
         padding: 0 70px;
         padding-left: 30px;
     }

     .footer .col-md-3:last-of-type {
         border-left: none;
         border-top: 1px solid var(--white);
         padding-top: 18px;
     }


 }

 @media (max-width: 868px) {
     #menuDropdown {
         padding: 0px 6px;
         align-items: center;
         text-align: center;
     }



     .filter-button {
         justify-content: center;
     }

     .btn-group .btn-secondary {
         width: 120px;
         font-size: 14px;
         padding: 8px;
     }

     .custom-arrow {
         width: 14px;
     }

     /* LOGIN FORM STYLES */
     .login-card {
         background-image: url('../img/login/form-bg.png'),
             url('../img/login/form-bg.png'), url('../img/login/form-bg.png');
         background-position: right bottom;
         max-width: 300px;
         width: 100%;
         padding: 30px 40px;
         margin: 0 auto;
         border-radius: 20px;
     }

     .login-card h3 {
         font-size: clamp(20px, 2vw, 24px);
     }

     .input-group-text img {
         width: 20px;
         height: 20px;
         object-fit: cover;
     }

     .login-card .form-control {
         font-size: clamp(10px, 2vw, 14px);
         font-weight: 500;
     }

     .login-card p,
     .forgot-password,
     .signup-link,
     .sign-in {
         font-size: clamp(12px, 2vw, 14px);
     }

     /* Signup and Forgot Password Modal*/
     .signup-modal,
     .forgotPassword-modal {
         height: 315px;
     }

     .signup-modal .modal-content,
     .forgotPassword-modal .modal-content {
         max-width: 260px;
         width: 100%;
     }


 }

 @media (max-width: 767px) {

     body {
         overflow-x: hidden;
     }

     .signup-modal,
     .forgotPassword-modal {
         position: absolute;
         top: 169px;
     }

     .balance-box {
         transform: rotate(-90deg);
         justify-self: center;
         margin: 0 auto;
     }
 }


 @media (max-width: 480px) {

     .signup-modal,
     .forgotPassword-modal {
         position: absolute;
         top: 152px;
     }

     .btn-group .btn-secondary {
         width: 110px;
         font-size: 12px;
         padding: 6px;
     }

     .custom-arrow {
         width: 12px;
     }

     #imageModal .modal-dialog {
         max-width: 90%;
         margin: auto;
     }

     .status-box {
         white-space: wrap;
     }

     .footer h5 {
         font-size: 18px;
         font-weight: 600;
     }


 }