/* Customizing the primary color to match the logo */
.bg-primary {
    background-color: #001f3f !important;
}

.navbar-brand img {
    max-height: 50px;
}


/* Style adjustments for large and medium screens */
@media (min-width: 992px) {
    .navbar {
        padding: 0.8rem 1rem;
    }
    .navbar-nav .nav-link {
        color: #ffffff;
        font-weight: 500;
        padding: 0.8rem 1rem;
    }
    .navbar-nav .nav-link:hover {
        color: #cce0ff;
    }
}

/* Hamburger menu for smaller screens */
@media (max-width: 991px) {
    .navbar-nav {
        text-align: center;
    }
    .navbar-nav .nav-link {
        color: #ffffff;
        font-weight: 500;
        padding: 1rem;
    }
    .navbar-nav .nav-link:hover {
        color: #cce0ff;
    }
}

/* Styling the form and icons */
.form-control {
    border-radius: 0.25rem;
    border: 1px solid #ffffff;
    /*background-color: #004080;*/
    color: #ffffff;
}

.form-control:focus {
    border-color: #cce0ff;
    box-shadow: none;
    /*background-color: #004080;*/
}

.input-group-text {
    background-color: #004080;
    border: 1px solid #ffffff;
    color: #ffffff;
}

.btn-outline-light {
    color: #ffffff;
    border-color: #ffffff;
}

.btn-outline-light:hover {
    color: #004080;
    background-color: #ffffff;
    border-color: #ffffff;
}


/*body {*/
/*    font-family: Arial, sans-serif;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    background-color: #f9f9f9;*/
/*}*/

.h3{
    color: #004080;
    font-weight:400;
    font-size:35px;
}

.h4{
    color: #004080;
    font-weight:500;
    font-size:40px;
}

.gradient{
    background: hsla(236, 49%, 89%, 1);

    background: linear-gradient(45deg, hsla(236, 49%, 89%, 1) 0%, hsla(0, 0%, 100%, 1) 100%);
    
    background: -moz-linear-gradient(45deg, hsla(236, 49%, 89%, 1) 0%, hsla(0, 0%, 100%, 1) 100%);
    
    background: -webkit-linear-gradient(45deg, hsla(236, 49%, 89%, 1) 0%, hsla(0, 0%, 100%, 1) 100%);
    
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#D6D8F1", endColorstr="#ffffff", GradientType=1 );
}


.gallery {
    --s: 150px;
    --g: 10px;
    display: grid;
    margin: calc(var(--s) + var(--g));
    /*background-color:#d9e6f2;*/
}

.gallery > img {
    grid-area: 1/1;
    width: var(--s);
    aspect-ratio: 1.15;
    object-fit: cover;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    transform: translate(var(--_x, 0), var(--_y, 0)) scale(var(--_t, 1));
    cursor: pointer;
    filter: grayscale(80%);
    transition: .2s linear;
}

.gallery > img:hover {
    filter: grayscale(1);
    z-index: 1;
    --_t: 1.2;
}

.gallery > img:first-child {
    --_y: calc(-100% - var(--g));
}

.gallery > img:nth-child(7) {
    --_y: calc(100% + var(--g));
}

.gallery > img:nth-child(3),
.gallery > img:nth-child(5) {
    --_x: calc(-75% - .87 * var(--g));
}

.gallery > img:nth-child(4),
.gallery > img:nth-child(6) {
    --_x: calc(75% + .87 * var(--g));
}

.gallery > img:nth-child(3),
.gallery > img:nth-child(4) {
    --_y: calc(-50% - .5 * var(--g));
}

.gallery > img:nth-child(5),
.gallery > img:nth-child(6) {
    --_y: calc(50% + .5 * var(--g));
}

body {
    margin: 0;.
    padding:0;
    min-height: 100vh;
    /*display: grid;*/
    place-content: center;
}


/* +++++++++++++++++ Footer +++++++++++++++++++ */

footer {
    background-color: #b4c1c7;
    padding: 40px 20px;
    border-top: 1px solid #e0e0e0;
    bottom:0;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-section {
    flex: 1;
    min-width: 200px;
    margin-bottom: 20px;
}

.footer-logo {
    width: 50px;
    margin-bottom: 10px;
}

.footer-section h2, .footer-section h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    text-decoration: none;
    color: #555;
    transition: color 0.3s;
}

.footer-section ul li a:hover {
    color: #000;
}

.social-links .social-icons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.social-icons img {
    width: 30px;
    height: 30px;
    transition: transform 0.3s;
}

.social-icons img:hover {
    transform: scale(1.1);
}

.app-links a img {
    width: 120px;
    margin-bottom: 10px;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    font-size: 14px;
    color: #888;
}


/* ================== moving crousole cards =================== */

.card {
  flex: 1 1 0;
  margin: 10px;
  max-width: 180px; /* Ensure a consistent width for all cards */
  transition: transform .3s;
}

.card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  transition: transform .3s;
}

.card:hover img {
  transform: scale(1.02);
}

.d-flex {
  justify-content: space-between; /* Ensures even spacing between cards */
}