/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,700;0,800;0,900;1,600&display=swap');


/* Changing from the Default Style */
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

:root {
    --color-primary: #6c63ff;
    --color-success: #00bf8e;
    --color-warning: #f7c94b;
    --color-danger: #f75842;
    --color-danger-variant: rgba(247, 88, 66, 0.4);
    --color-white: #fff;
    --color-light: rgba(255, 255, 255, 0.7);
    --color-black: #000;
    --color-bg: #080d13;
    --color-bg1: #2e3267;
    --color-bg2: #424890;
    --container-width-lg: 80%;
    --container-width-md: 90%;
    --container-width-sm: 94%;
    --transition: all 400ms ease;    
}

.contact__container {
    /*background-color: var(--color-bg1);*/
	background-color:#c5d1ec;
    padding: 4rem;
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 4rem;
    height: 30rem;
    margin: 6rem auto;
    border-radius: 1rem;
}

/* ***************** ASIDE ******************* */

.contact__aside {
    /*background: var(--color-primary);*/
	background: #00bf8e;
    padding: 3rem;
    border-radius: 1rem;
    position: relative;
    bottom: 11rem;
	margin-top:3.5rem;
}

.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);*/
	background:#222550;
    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%;
}

.contact__form input, textarea {
    width: 100%;
    padding: 1rem;
    /*background: var(--color-bg);*/
	background:#fff;
    /*color: var(--color-white);*/
	color:#161636;
	border: 0.1rem solid #161636;
    
}
.buttons {
  text-align: right;
}
.button {
  font-family: 'Hammersmith One', sans-serif;
  font-size: 20px;
  color: white;
  text-align: center;
  border-radius: 8px;
  font-size: 15px;
  background: #06064f;
  padding: 10px 20px 10px 20px;
  border: none;
}
.button:hover {
  background: #f0fdfa;
  color: black;
}
.contact__form .btn.btn-primary {
width: max-content;
margin: 1rem;
cursor: pointer;
}

/* ************* MEDIA QUERIES (TABLET)**************** */
@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 (MOBILE)**************** */
@media screen and (max-width: 600px) {
    .contact__container {
        grid-template-columns: 1fr;
        gap: 3rem;
        margin-top:7.2rem;
        padding: 0;
    }

.contact__form {
    margin: 0 1.5rem 3rem;
}

.form__name {
    flex-direction: column;
}

.form__name input[type="text"] {
    width: 100%;
}
}