/*------------------------------------------------------------------
        Project:  Direcho Landing page
        Version:  1.0.2
        Last change:  23.06.2024
        Assigned to:  direcho
        Primary use:  direcho.com
        -------------------------------------------------------------------*/

        /*//////////////////////////////////////////////////////////////////
        [ FONT ]*/

        @font-face {
          font-family: Barlow-Regular;
          src: url('../fonts/Barlow/Barlow-Regular.ttf'); 
        }

        @font-face {
          font-family: Barlow-Medium;
          src: url('../fonts/Barlow/Barlow-Medium.ttf'); 
        }

        @font-face {
          font-family: Barlow-Bold;
          src: url('../fonts/Barlow/Barlow-Bold.ttf'); 
        }

/* Background Container */
.bg-img1 {
    position: sticky; /* Added to position the background container */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh; /* Full-screen height */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(255, 255, 255, 0.8); /* Optional overlay effect */
}

/* Contact Section Styling */
.wsize1 {
    text-align: center;
    background-color: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Modern shadow */
    max-width: 90%; /* Responsive max width */
    width: 100%;
    max-width: 500px; /* Ensures content doesn't stretch too much on large screens */
}


        h1.delivery-text {
            font-family: Barlow-Bold;
            font-size: 24px; /* Adjust font size */
            color: #333; /* Dark color for visibility */
            margin: 20px 0; /* Spacing around the heading */
        }

        /* Flexbox for the contact section */
        .contact-info {
            display: flex;
            justify-content: center;
            gap: 20px; /* Space between each box */
            flex-wrap: wrap; /* Allow wrapping for smaller screens */
            margin-top: 20px;
        }

        /* Styling for individual contact boxes */
        .contact-box {
            background-color: #f4f4f4; /* Light background color for the boxes */
            border-radius: 10px;
            padding: 20px;
            width: 250px;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for a modern effect */
            transition: transform 0.3s ease;
        }

        .contact-box:hover {
            transform: translateY(-5px); /* Lift effect on hover */
        }

        .contact-box img {
            width: 30px;
            height: 30px;
            margin-bottom: 10px;
        }

        .contact-box p {
            font-family: Barlow-Regular;
            font-size: 15px;
            color: #333; /* Darker color for the text */
            margin: 0;
        }

        .contact-box a {
            color: #846add;
            text-decoration: none;
        }

        .contact-box a:hover {
            text-decoration: underline;
        }

        /* Responsive styles */
        @media (max-width: 768px) {
            .bg-img1 {
                padding: 40px; /* More padding for mobile */
            }

            .contact-box {
                width: 100%; /* Full width on small screens */
                margin: 10px 0; /* Space between boxes */
            }

            h1.delivery-text {
                font-size: 20px; /* Adjust font size for mobile */
            }
        }