/* Navigation hover effects */
.navbar div, 
.frame-19 div, 
.frame-20 div, 
.frame-21 div, 
.frame-23 div, 
.frame-24 div,
.text-wrapper-12,
.text-wrapper-13,
.text-wrapper-21,
.text-wrapper-22,
.text-wrapper-23 {
    transition: color 0.3s ease;
    cursor: pointer;
}

.navbar div:hover, 
.frame-19 div:hover, 
.frame-20 div:hover, 
.frame-21 div:hover, 
.frame-23 div:hover, 
.frame-24 div:hover,
.text-wrapper-12:hover,
.text-wrapper-13:hover,
.text-wrapper-21:hover,
.text-wrapper-22:hover,
.text-wrapper-23:hover {
    color: #007bff;
}

/* Logo hover effect */
.logo, .logo-2 {
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.logo:hover, .logo-2:hover {
    opacity: 0.8;
}

/* Store button hover effect */
.text-wrapper-10:hover, 
.text-wrapper-2:hover {
    opacity: 0.8;
}

/* Language switcher hover effect */
.text-wrapper-11:hover {
    opacity: 0.8;
}

/* Footer links hover effects */
[class*="text-wrapper"] {
    transition: color 0.3s ease, transform 0.2s ease;
}

[class*="text-wrapper"]:hover {
    color: #007bff;
    transform: translateX(-5px);
}

/* Footer contact info specific styles */
[class*="text-wrapper"][class*="phone"]:hover,
[class*="text-wrapper"][class*="email"]:hover,
[class*="text-wrapper"]:hover[href^="tel:"],
[class*="text-wrapper"]:hover[href^="mailto:"] {
    text-decoration: underline;
    transform: none;
}

/* Disable hover effect for headers and titles */
.text-wrapper-7,
.text-wrapper-8,
.text-wrapper-15,
.text-wrapper-16,
.text-wrapper-20,
.text-wrapper-25,
.text-wrapper-26,
.text-wrapper-27 {
    transform: none !important;
}

/* Footer contact info hover effects */
.text-wrapper-15:hover,
.text-wrapper-16:hover {
    text-decoration: underline;
}
/* Phones only: 320–768px */
@media (max-width: 768px) {
  /* Grid with 2 columns, centered inside its area */
  #ig-feed {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;                 /* space between cards */
    width: 100%;
    margin-inline: auto;       /* center the grid */
    padding: 8px 12px 16px;
    justify-items: center;     /* center each item in its cell (safety) */
    align-items: start;
  }

  /* Make each card fill its grid cell and ignore desktop widths */
  #ig-feed .social-post-card {
    display: block !important; /* override inline-block */
    width: 100% !important;    /* fill the cell */
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
    height: auto;
    object-fit: contain!important;
    overflow: hidden;
    background: #fff;           /* color behind letterbox */
    aspect-ratio: 1 / 1;        /* square tile */


  }

  /* If the card contains an <img>, keep it fluid */
  #ig-feed .social-post-card img {
    display: block;
    width: 100%;
    height: auto;
  }
}
/* ≥750px: your existing tablet/desktop styles remain unchanged */
/* 2) When that mobile grid is active, move the footer up */
@media (max-width: 767px) {
  .home .footer {
    position: absolute !important;
    bottom: -980px !important;  /* as requested */
  }
}