@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --dark-blue-color: #093e52;
    --light-blue-color: #00ffff;
    --white-color: #ffffff;
    --dark-grey-color: #afb0b3;
    --light-grey-color: #f2f2f2;
    --white-color-diff-color: #fafafa;
    --cream-color: #ebe6dd;

}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Raleway", sans-serif;

}

footer {

    color: var(--dark-blue-color);

}

.footer-container {
    display: flex;
    /* Flexbox for layout */
    flex-wrap: wrap;
    /* Allow wrapping of items */
    justify-content: space-around;
    /* Space items evenly */
    padding: 20px;
    background: linear-gradient(#398EB7, var(--white-color-diff-color));

    /* Padding around the container */
    border-bottom: 1px solid #6c8e47;
    /* Bottom border color */
}

.footer-section {
    flex: 1;
    /* Allow sections to grow */
    margin: 20px;
    /* Margin around sections */
    min-width: 200px;
    /* Prevent sections from getting too narrow */
}

.opening-times {
    min-width: 250px;
}

.opening-times div {
    margin: 10px 0;

}

.footer-section h3 {
    color: var(--dark-blue-color);
    /* Header color */
    font-size: 1.5em;
    margin-bottom: 15px;
    /* Font size for headers */
}

.footer-section p {
    font-size: 17px;
    margin-bottom: 10px;
}

.social-icons {
    display: flex;
    /* Flexbox for social icons */
    gap: 10px;
    /* Space between icons */
    margin: 20px 0;
    /* Margin around social icons */
}

.social-icons img {
    width: 24px;
    /* Icon size */
    height: 24px;
    /* Icon size */
}

.footer-bottom {
    text-align: center;
    padding: 15px 0;
    font-size: 0.9em;
    color: var(--dark-blue-color);

    align-items: center;
    justify-content: space-between;
    margin: 0px 60px;
}

.footer-bottom a {
    color: var(--dark-blue-color);
    /* Link color */
    text-decoration: none;
    /* Remove underline */
}

.footer-flex {
    display: flex;
    /* Flexbox for footer items */
    align-items: center;
    /* Center items vertically */
}

.footer-flex i {
    font-size: 20px;
    /* Icon size */
    margin-right: 20px;
    /* Space between icon and text */
    color: var(--dark-blue-color);
    /* Icon color */
}

.footer-timing-div {
    display: flex;
    /* Flexbox for timing info */
    align-items: flex-start;
    /* Align items to the start */
}

.footer-timing-div i {
    font-size: 20px;
    /* Icon size */
    margin-right: 10px;
    /* Space between icon and text */
    color: var(--dark-blue-color);
    /* Icon color */
}

.social-icons a {
    text-decoration: none;
    /* Remove underline */
    color: var(--dark-blue-color);
    /* Link color */
}

.social-icons a i {
    font-size: 30px;
    /* Icon size */
    color: var(--dark-blue-color);
    /* Icon color */
    margin: 5px;
    /* Margin around icons */
    margin-left: 0;
    /* No left margin */
}

.footer-section p a {
    text-decoration: none;
    /* Remove underline */
    color: inherit;
    /* Inherit color from parent */
    font-size: 1em;
    /* Font size for links */
}

.margin-span {
    margin: 0 10px;
    /* Margin for spans */
}


/* Responsive Design */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        /* Stack items vertically */
        align-items: flex-start;
        /* Align to the start */
        text-align: left;
        /* Left align text */
    }

    .footer-section {
        margin: 10px 0;
        /* Margin around sections */
    }

    .social-icons {

        margin: 20px 0;
        /* Margin around social icons */
    }

    .footer-section h3 {
        color: var(--dark-blue-color);
        /* Header color */
        font-size: 1.5em;
        /* Font size for headers */
        margin: 20px 0;
        /* Margin around headers */
    }
}

@media (max-width: 900px) {
    .footer-bottom {
        flex-direction: column;
        /* Stack items vertically */
        margin: 0 20px;
        /* Margin around footer bottom */
    }

    .footer-bottom p {
        margin: 10px 0;
        /* Margin around paragraphs */
    }
}

.canadian-div img {
    width: 180px !important;
    height: 69px !important;
}

.canadian-div p {
    margin-top: 0 !important;
}

.footer {
    color: var(--dark-grey-color);

    background: var(--dark-blue-color);
    padding: 20px;
    text-align: center;
}

.footer a {
    text-decoration: none;
    color: inherit;
    font-size: 18px;
}

.footer-top {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px;
    gap: 40px;
}

.footer-top div {
    text-align: center;
    margin: 10px;
}

.footer-top i {
    font-size: 24px;
    display: block;
    margin-bottom: 10px;
}

.opening-times div {
    padding-right: 50px;
    display: flex;
    align-items: center;
    min-width: 300px;

    justify-content: space-between;
}

.opening-times div p {
    margin-bottom: 2px;
}

.footer-bottom p {
    margin-bottom: 10px;
}

.section-attr {

    background-image: url(../images/1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    display: flex;
    padding: 75px;
    text-align: center;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}


.section-attr h1 {
    font-size: 2.5rem;
    color: var(--dark-blue-color);
}

.section-attr p {
    font-size: 1.2rem;
    margin: 15px 0px;
    color: var(--dark-blue-color);
}


@media (max-width: 524px) {
    .section-attr {

        padding: 75px 40px;

    }
}