body{
  /* overlay first, then image */
  background-image:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.3)),
    url("/static/images/contact/skra-bg.webp");   /* <-- your path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* optional for a subtle parallax feel */
  background-attachment: fixed;
}

.logo-svg {  
  fill: white !important; 
}

.site-header {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.5) 0%,
    rgba(0,0,0,0.0) 90%
  );
}

/* ==== Contact Page Layout ==== */

.container {
  padding: 0 2rem;
}

.contact-title {
  display: block;
  border-bottom: 1.5px solid white;
  font-weight: 400;
  font-size: 4rem;
  line-height: 0.75;
  margin: 6rem 0 4rem 0;
  padding-bottom: 2rem;
  color: white;
}

.menu-toggle {color: white;}
.menu-toggle.active {
    color: black;
  }

@media (max-width: 1300px) {

  .contact-title {
    font-size: 4rem;
    line-height: 0.8;
  }
}

@media (max-width: 768px) {
  .container {padding: 0 1rem;
  margin-top: 8rem;}
    .contact-title{
    margin: 5rem 0;
  }
}
@media (max-width: 450px) {

  .contact-title {
    font-size: 3rem;
    font-weight: 400;
  }
}

.contact-grid {

  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
}

@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ==== Left column ==== */
.info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 5rem;

}

@media (max-width: 720px) {
  .info {
    grid-template-columns: 1fr;
     gap: 4rem;
  }
}

.overline {
  font-size: 2rem;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  color: white;
}

.muted {
  color: #c2c2c2;
  margin: 0 0 0.8rem;
  line-height: 1.5;
}

.email {
  color: white;
  text-decoration: none;
}

.email:hover {
  text-decoration: underline;
}

.links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.links a {
  color: white;
  text-decoration: none;
}

.links a:hover {
  text-decoration: underline;
}

@media (max-width: 800px) {
  p {font-size: 1rem;}
}

/* ==== Right column (form) ==== */
.form {
  color: white;
  padding-bottom: 2rem;
}

.form-intro {
  color: white;
  font-size: 1.2rem;
  margin: 0 0 1rem;
}

.form label {
  display: block;
  margin: 1rem 0 0.4rem;
}

.form input,
.form textarea,
.form select {
  box-sizing: border-box;
  width: 100%;
  background: transparent;
  color: white;
  border: 1.5px solid white;
  border-radius: 4px;
  padding: 0.75rem 1rem;
}

.form textarea {
  resize: vertical;
  min-height: 220px;
}

.message-wrap {
  position: relative;
}


.form select {
  color: #949494;
  padding: 0.75rem 2rem;}

.row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 1rem;
}

@media (max-width: 720px) {
  .row {
    grid-template-columns: 1fr;
  }
}

.select-wrap {
    position: relative;
}

.select-wrap::after {
  content: "";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

.select-wrap select {
  appearance: none;
  cursor: pointer;
  padding-right: 2rem;
}

/* Button */


/* Full-width, bottom-pinned button */
.form .btn{
  border: 1.5px solid white;
  background: white;
  color: black;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;            /* small gap from the bottom edge */
  height: 40px;
  width: 100%;
  margin: 0;
  z-index: 2;             /* sit over the textarea */
  border-radius: 4px;   /* keep your rounded look */
}

/* Optional: match the inner paddings of inputs if you use insets */
@media (max-width: 720px){
  .form{ padding-bottom: 72px; }
}

.btn:hover {
  background: black;
  color: white;
}

/* slide-in keyframes */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* animate the 4 cards on load */
.info .card { opacity: 0; }                  /* start hidden */
.info .card:nth-child(odd)  { animation: slideInLeft  .6s cubic-bezier(.2,.7,.2,1) both; }
.info .card:nth-child(even) { animation: slideInRight .6s cubic-bezier(.2,.7,.2,1) both; }

/* stagger the timing */
.info .card:nth-child(1) { animation-delay: .05s; }
.info .card:nth-child(2) { animation-delay: .15s; }
.info .card:nth-child(3) { animation-delay: .25s; }
.info .card:nth-child(4) { animation-delay: .35s; }

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .info .card { animation: none; opacity: 1; transform: none; }
}

/*!FLASH*/

.flash-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  text-align: center;
  animation: fadeOut 3s forwards;
}

.flash {
  display: inline-block;
  padding: 16px 28px;
  margin: 6px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  opacity: 0.95;
}

.flash.success {
  border-color: #0a0;
  color: #0a0;
}

.flash.error {
  border-color: #c00;
  color: #c00;
}

@keyframes fadeOut {
  0%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}