@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* General Styles */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    margin-right:;
    box-sizing: border-box !important;
    background-color: #f8f9fa; /* A light background color */
}
*{
    padding: 0;
    margin: 0;
    margin-right: 0;
    box-sizing: border-box;
}

@media (max-width:700px) {
    body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    background-color: #f8f9fa; /* A light background color */
}
*{
    padding: 0;
    margin: 0;
    margin-right: 0 !important;
    box-sizing: border-box;
}
    
}
/* -----contact------ */
#contactuspage {
    text-align: left;
    width: 100%;
    box-shadow: 0 4px 4px 4px #ddd;
    margin: 16px auto !important; /* Added for centering */
    padding: 16px;
    background-color: #003366;
    color: #fff;
    display: none;
}

#contactuspage h1 {
    text-align: center;
    font-size: 2em;
    color: #fff;
}

#haveaQ {
    text-align: center;
    color: #fff;
}

#contactuspage h4 {
    margin-left: 1em;
}

#contactuspage p {
    padding-left: 2em;
    padding-bottom: 1em;
}

#contactuspage a {
    margin-left: 2em;
    border: solid #bab40b;
    padding: 5px 50px;
    text-decoration: none;
    color: #fff;
    background-color: #bab40b;
    border-radius: 25px;
}

#callus {
    margin-top: 1.5em;
}
/* -----tracking---- */
 .tracking-container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 400px;
            width: 100%;
        }

        h1 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.5em;
        }

        .tracking-form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .input-group {
            text-align: left;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
            font-weight: bold;
        }

        input[type="text"] {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
            font-size: 1em;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        input[type="text"]:focus {
            border-color: #007bff;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
            outline: none;
        }

        button {
            background-color: #007bff;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 5px;
            font-size: 1.1em;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;
        }

        button:hover {
            background-color: #0056b3;
            transform: translateY(-2px);
        }

        button:active {
            transform: translateY(0);
        }

        .info-text {
            color: #888;
            font-size: 0.9em;
            margin-top: 10px;
        }
        /* ----signup------ */
        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 12px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            box-sizing: border-box;
            font-size: 16px;
        }
        #signuppage input{
            width: 100%;
            padding: 12px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            box-sizing: border-box;
            font-size: 16px;
        }
        /* -----openacc----- */
        .openacc{
            text-decoration:none;
            background-color:#0056b3;
            color: #fff;
            padding: 10px 25px;
           border-radius: 5px;
        }

        input[type="text"]:focus,
        input[type="password"]:focus {
            border-color: #007bff;
            outline: none;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
        }
        #signuppage {
            background-color:#fff;
            padding: 16px;
            border-radius: 8px;
            box-shadow: 0 4px 4px 4px #ddd;
            width: 100%;
            text-align: center;
            margin-top: 16px;
        }

        /* -----login----- */
        .login-container {
            background-color:#fff;
            padding: 16px;
            border-radius: 8px;
            box-shadow: 0 4px 4px 4px #ddd;
            width: 100%;
            text-align: center;
            margin-top: 16px;
        }

        h2 {
            margin-bottom: 10px;
            font-size: 20px;
        }

        .input-group {
            margin-bottom: 10px;
            text-align: left;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: #555555;
            font-weight: bold;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 12px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            box-sizing: border-box;
            font-size: 16px;
        }

        input[type="text"]:focus,
        input[type="password"]:focus {
            border-color: #007bff;
            outline: none;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
        }

        .remember-me {
            display: flex;
            align-items: center;
            margin-top: -5px;
            margin-bottom: 20px;
        }

        .remember-me input[type="checkbox"] {
            margin-right: 10px;
        }

        .forgot-password {
            font-size: 14px;
            text-align: right;
            margin-bottom: 20px;
        }

        .forgot-password a {
            color: #007bff;
            text-decoration: none;
        }

        .forgot-password a:hover {
            text-decoration: underline;
        }

        button[type="submit"] {
            width: 100%;
            padding: 12px;
            background-color: #ffc107;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button[type="submit"]:hover {
            background-color: #0056b3;
        }

        .signup-link {
            margin-top: 20px;
            font-size: 14px;
            color: #555555;
        }

        .signup-link a {
            color: #007bff;
            text-decoration: none;
        }

        .signup-link a:hover {
            text-decoration: underline;
        }

/* -----login----- */
/* #loginpage{
    padding: 16px;
    width: 100%;  
    background-color: #001a33;
    color: #fff;
    margin-top: 1em;
    
}
#loginpage label{
 padding-left: 1em;
}
#loginpage input{
    padding: 7px 0;
    width: 70%;
}
#loginpage button{
    text-align: center !important;
    margin-top: 16px;
    padding-left: 2em;
    padding-right: 2em;
} */


/* ----registration--- */
.form-container {
    background-color: hwb(0 98% 1%);
    padding: 40px;
    border-radius: 10px;
    margin: 1em auto; /* Corrected to center */
    max-width: 500px;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
}

/* Titles and Headers */
h1 {
    color: #004d99;
    font-size: 2.5em;
    margin-bottom: 10px;
}

h2 {
    color: #333;
    font-size: 1.5em;
    margin-top: 0;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}
/* ---open an account---- */
#Registerlink{
    text-decoration: none;
    background-color: #003366;
    padding: 8px 16px;
    color: #fff;
    margin-bottom: 16px;
    border-radius: 5px;
}

/* Stage Progress Bar */
#progress-bar {
    margin: 20px 20px;
}

.stage {
    width: 40px;
    height: 40px;
    background-color: #ccc;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s;
}

.stage.active {
    background-color: #004d99;
    transform: scale(1.1);
}

.stage.completed {
    background-color: #4CAF50;
}

/* Form Stages */
.form-stage {
    text-align: left;
    transition: opacity 0.5s;
}

.hidden {
    display: none;
    opacity: 0;
}

/* Form Labels and Inputs */
label {
    display: block;
    margin-top: 20px;
    color: #555;
    font-weight: bold;
}

input[type="text"],
input[type="tel"] {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1em;
}

input:focus {
    border-color: #004d99;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 77, 153, 0.2);
}

/* Action Button */
.shipping-button {
    background-color: #004d99;
    color: white;
    padding: 15px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    margin-top: 30px;
    width: 100%;
    transition: background-color 0.3s, transform 0.2s;
}

.shipping-button:hover {
    background-color: #003366;
    transform: translateY(-2px);
}

.shipping-button:active {
    background-color: #001a33;
    transform: translateY(0);
}

/* Summary and Fee Display */
#summary {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px dashed #ccc;
}

#summary h4 {
    margin-top: 0;
    color: #004d99;
}

.fee-container {
    text-align: center;
    background-color: #e6f2ff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #004d99;
}

.navbar-toggler-icon {
    color: #fff;
    background-color: #fff;
    border: solid #fff !important;
    padding: 10px 20px;
}

.fee-label {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 5px;
}

.fee-amount {
    font-size: 2em;
    font-weight: bold;
    color: #e74c3c;
    margin: 0;
}

/* Mock Payment Section */
.payment-mockup {
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    color: #666;
    margin-top: 20px;
}

/* Custom Color Variables and Classes for consistency */
.bg-warning { background-color: #ffc107 !important;
}
.text-warning { color: #ffc107 !important; }
.bg-primary-dark { background-color: #003366 !important; }
.text-primary-dark { color: #003366 !important; }

/* Global Container Styles */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem; /* Added padding to prevent content from touching the edges on small screens */
}

/* Hero Section */
.hero-section {

}

.hero-section h1 {
    font-size: 3em;
    font-weight: 700;
}

/* Card and Section Styles */
.card {
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}

/* Responsive Images */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Specific Section Styles */
#shipping-form {
    max-width: 800px;
}

#track-section {
    max-width: 600px;
}

/* This is a crucial block for centering content responsively without extra margins. */
.container,
.container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Remove default Bootstrap container max-width to let Flexbox or Grid handle layout */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px; /* Bootstrap's default max-width for xl */
    }
}
@media (max-width:620px) {
    header h1{
        font-size: 2.5em !important;
    }
}
/* -----about----- */
#about h2 {
    text-align: center;
    color: #003366;
    font-size: 2em;
    font-weight: 300px;
}
.divider{
    width: 100px;
    background-color: #ffc107;
    height: 7px;
    margin: 0 auto;
    border-radius: 25px;
    margin-bottom: 16px;

}
/* ----why trust us------ */

#card2 {
  background-color:#003366;
  box-shadow: 0 4px 4px 4px #011325;
  border: solid #03305e;
  padding: 30px;
  border-left: 10px solid #ffc107;
  color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Heading styling */
#cardh2 {
  color: #ffc107; 
  font-size: 1.5em;
  margin-top: 0;
  display: flex;
  align-items: center;
}


/* #cardh2::before {
  content: "✓";
  color: #ff5722; 
  font-size: 1.5em;
  margin-right: 10px;
  font-weight: bold;
} */

#card2p{
  font-size: 1em;
  color: #e0e0e0;
  line-height: 1.6;
}
/* ----testimonies----- */
.testimonials-section {
    padding: 3.5rem 0;
    background-color: var(--bg-color-light);
    text-align: center;
}

.testimonials-section h2 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    color: var(--primary-color);
    margin-bottom: 2rem;
}

.testimonial-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

.testimonial-card {
    flex: 0 0 85%;
    scroll-snap-align: start;
    background-color: #f0f4f8;
    padding: 30px;
    border-radius: 10px;
    border-left: 5px solid var(--primary-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: left;
}

.testimonial-card p {
    font-style: italic;
    margin-bottom: 1rem;
}

.testimonial-author {
    font-weight: bold;
    color: var(--primary-color);
}
.cta-section {
    background-color:#ffc107;
    padding: 1rem 0;
    text-align: center;
}

.cta-section h2 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #03305e;
    margin-bottom: 1rem;
}

.cta-section p {
    font-size: 1.2rem;
    color: var(--text-color-dark);
    max-width: 800px;
    margin: 0 auto 2rem;
}
.divider2{
    width: 200px;
    background-color: grey;
    height: 2px;
    margin: 0 auto;
    border-radius: 25px;
    margin-bottom: 16px;
}
/* -----our services-- */
/* #card22{
    border-left: solid #ffc107;
}
.card4{
    border-top: solid #ff5722;
} */
/* -----contact---- */
.contact-info {
    background-color: #17161c;
    color: #ffffff;
    padding: 50px;
    flex: 1;
    min-width: 300px;
}

.contact-info h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.contact-info p {
    font-size: 16px;
    margin-bottom: 30px;
    opacity: 0.9;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.info-item i {
    font-size: 24px;
    margin-right: 20px;
    width: 30px;
    text-align: center;
}

.info-item h3 {
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: bold;
}

.info-item p {
    margin: 0;
    font-size: 14px;
}
.contact-container {
    max-width: 1000px;
    margin: 40px auto; /* Corrected to center */
    padding: 20px;
}

/* Contact Card Layout (split-screen effect) */
.contact-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.contact-form-container {
    padding: 50px;
    flex: 1;
    min-width: 300px;
}

.contact-form h3 {
    font-size: 28px;
    margin-bottom: 25px;
    color: #1a1a1a;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #bab40b;
    outline: none;
}

/* Submit Button */
.submit-btn {
    display: inline-block;
    background-color: #bab40b;
    color: #ffffff;
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.submit-btn:hover {
    background-color: #bab40b;
    transform: translateY(-2px);
}
/* ----ratings----- */
#header6 i{
    color: #ffc107;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* General Styles */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f8f9fa; /* A light background color */
    overflow-x: hidden; /* This is the key change to prevent horizontal scrolling */
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* New CSS rule for centering the main content */
main {
    max-width: 100%;
    margin: 0 auto;
}

/* New CSS rule to ensure Bootstrap containers and rows don't cause overflow */
.container, .container-fluid, .row, .col {
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
}

/* Adjustments for specific sections to prevent overflow and center content */
.hero-section {
    padding: 2em 1em !important; /* Adjust padding to avoid overflow */
}

/* Adjust the container-fluid within the navbar to remove any potential side space on smaller screens. */
.navbar .container-fluid {
    padding: 0 1rem;
}

/* Added a new rule to fix the alignment for elements with `container` class not using Bootstrap's default spacing. */
.form-container, .tracking-container {
    margin-left: auto;
    margin-right: auto;
    width: 90%; /* Use a percentage for responsive width */
    max-width: 600px; /* Optional: Sets a max-width for larger screens */
}


/* Your Original CSS Rules follow below... */

/* -----tracking---- */
.tracking-container {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ...rest of your original CSS code... */