/*
 Theme Name:     Casa Azul
 Theme URI:      https://www.stric.nl
 Description:    Casa Azul
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */


body {
	font-weight: 400;
}


@font-face {
  font-family: 'Operina Pro';
  src: url('fonts/Operina Pro Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


.moonArc {
	font-family: 'Operina Pro', serif;
	text-transform:uppercase;
	
}

 .cls-ani1 {
  animation: wave 30s ease-in-out infinite;
  transform-origin: center;
}

.cls-ani2 {
  animation: wave2 30s ease-in-out infinite;
  transform-origin: center;
}

@keyframes wave {
  0%   { transform: rotate(0deg) translate(0px, 0px); }
  10%  { transform: rotate(1deg) translate(-4px, -4px); }
  20%  { transform: rotate(0deg) translate(0px, 0px); }
  100% { transform: rotate(0deg) translate(0px, 0px); }
}

@keyframes wave2 {
  0%   { transform: rotate(0deg) translate(0px, 0px); }
  10%  { transform: rotate(-1deg) translate(-4px, 4px); }
  20%  { transform: rotate(0deg) translate(0px, 0px); }
  100% { transform: rotate(0deg) translate(0px, 0px); }
}



.multi-bg-section {
  background-image: 
    url('https://casaazulmarrakech.com/wp-content/uploads/2025/04/COMPLEMENTARY-ELEMENTS-BLUE-EDIT_MEDUSA.png'), 
    url('https://casaazulmarrakech.com/wp-content/uploads/2025/04/COMPLEMENTARY-ELEMENTS-BLUE-EDIT_AZUL-BEACH.png'),
    url('https://casaazulmarrakech.com/wp-content/uploads/2025/04/background-scaled.jpg');
  
  background-position: 
    calc(100% - -10%) calc(100% - 0%), /* bottom right but 30px away */
    calc(0% + 30px) calc(0% + 30%),     /* top left but 30px away */
    center;
  
  background-size: 
    650px, 
    400px, 
    cover;
  
  background-repeat: 
    no-repeat, 
    no-repeat, 
    no-repeat;
}


/* Style input fields, textarea, and submit button */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea {
  border: 1px solid #967e53;
  color: #967e53;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
}

/* Style the labels */
.wpcf7-form label {
  color: #967e53;
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

/* Make text inside placeholders also #967e53 */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: #967e53;
  opacity: 0.7; /* Slightly lighter */
}

/* Style the submit button */
.wpcf7-form input[type="submit"] {
  background: transparent;
  border: 2px solid #967e53;
  color: #967e53;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

/* Hover effect for button */
.wpcf7-form input[type="submit"]:hover {
  background: #967e53;
  color: white;
}

/* Make fields more inline on larger screens */
@media (min-width: 768px) {
  .wpcf7-form p {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
  }

  .wpcf7-form label {
    flex: 1 0 150px; /* Label takes some width */
    margin-bottom: 0;
  }

  .wpcf7-form .wpcf7-form-control-wrap {
    flex: 2 0 300px; /* Input field grows */
  }
}