.contact__container {

  background: var(--color-bg1);

  padding: 4rem;

  display: grid;

  grid-template-columns: 40% 60%;

  gap: 4rem;

  height: 30rem;

  margin: 7rem auto;

  border-radius: 1rem;

}

.btn1 {



  background-size: 200%;



  color: var(--white);



  padding: 12px 35px;



  font-size: var(--fs-8);



  font-weight: var(--fw-500);



 



  transition: var(--transition-2);



  border: solid white 1px;



}

/*-----------------------------------*\



  #formularz



\*-----------------------------------*/



.contact-content {



  text-align: center;



  max-width: 600px;



  margin: 0 auto;



}







.contact-text {



  font-size: 1.1rem;



  margin-bottom: 20px;



  color: #555;



}







.contact-form {



  display: flex;



  flex-direction: column;



  align-items: center;



}







.input-group {



  width: 100%;



  margin-bottom: 15px;



}







.input-field {



  width: 100%;



  padding: 12px;



  border: 1px solid #ccc;



  border-radius: 5px;



  font-size: 1rem;



  outline: none;



}







.input-field:focus {



  border-color: #061c3f;



}

.recaptcha-wrapper {

  display: flex;

  justify-content: center;

  margin: 20px 0; /* opcjonalnie, odstępy */

}







.btn-primary {



  border: solid white 1px !important;



  color: white;



  padding: 12px 20px;



  font-size: 1.5rem;



  border: none;



  border-radius: 5px;



  cursor: pointer;



  transition: background 0.3s;



}







.btn-primary:hover {



  background-color: transparent;



}





/* =================== ASIDE ================ */

.contact__aside {

  background: var(--color-primary);

  padding: 3rem;

  border-radius: 1rem;

  position: relative;

  bottom: 10rem;

}



.aside__image {

  width: 12rem;

  margin-bottom: 2rem;

}



.contact__aside h2 {

  text-align: left;

  margin-bottom: 1rem;

}



.contact__aside p {

  font-size: 0.9rem;

  margin-bottom: 2rem;

}



.contact__details li {

  display: flex;

  gap: 1rem;

  align-items: center;

  margin-bottom: 1rem;

}



.contact__socials {

  display: flex;

  gap: 0.8rem;

  margin-top: 3rem;

}



.contact__socials a {

  background: var(--color-bg2);

  padding: 0.5rem;

  border-radius: 50%;

  font-size: 0.9rem;

  transition: var(--transition);

}



.contact__socials a:hover {

  background: transparent;

}



/* =================== FORM ================ */

.contact__form {

  display: flex;

  flex-direction: column;

  gap: 1.2rem;

  margin-right: 4rem;

}



.form__name {

  display: flex;

  gap: 1.2rem;

}



.contact__form input[type="text"] {

  width: 50%;

}



input,

textarea {

  width: 100%;

  padding: 1rem;

  background: var(--color-bg);

  color: var(--color-white);

}



.contact__form .btn {

  width: max-content;

  margin-top: 1rem;

  cursor: pointer;

}



/* =================== MEDIA QUERIES (TABLETS) ================ */

@media screen and (max-width: 1024px) {

  .contact {

    padding-bottom: 0;

  }



  .contact__container {

    gap: 1.5rem;

    margin-top: 3rem;

    height: auto;

    padding: 1.5rem;

  }



  .contact__aside {

    width: auto;

    padding: 1.5rem;

    bottom: 0;

  }



  .contact__form {

    align-self: center;

    margin-right: 1.5rem;

  }

}



/* =================== MEDIA QUERIES (PHONES) ================ */

@media screen and (max-width: 600px) {

  .contact__container {

    grid-template-columns: 1fr;

    gap: 3rem;

    margin-top: 0;

    padding: 0;

  }



  .contact__form {

    margin: 0 1.5rem 3rem;

  }



  .form__name {

    flex-direction: column;

  }



  .form__name input[type="text"] {

    width: 100%;

  }

}