/*!
 * Bootstrap v5.3.2 (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under MIT
 */

:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0));
}

/* Box sizing reset 
*, *::before, *::after {
    box-sizing: border-box;
}
*/


/* Form elements inherit font */
input, textarea, select, button {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    all: unset;
    
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}

/* Paragraphs */
p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.form_title{
  position: relative;
display: flex;
margin-bottom: 5%;
padding-left:5%;

font-size:15px; 
font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-optical-sizing: auto;
  color:#4f4f4f;
  border-left:5px solid rgb(176, 176, 176)
}

.form-label{
color: #727272;

}

/* Container (responsive) */
.contact_form {
margin-left:5px;
padding-left:5%;
}

#contactForm{
height:100%;

}
.contact_form_bottom {
display: flex;
height:15%;
padding-bottom:5px;

}



.contact_form .mt-5 {

      width: 100%;
      margin: auto;
    }

    input {
        min-width: 0;
      width: 100%;
      border-bottom: 1px solid rgb(201, 201, 201);
      font-size: 12px;
      padding:2% 0 2% 0;
    margin-bottom: 5%;
    }


textarea[name="message"] {
    width:100%;
    height: 50%;
    margin-top:2%;
    font-size: 12px;
  border-bottom: 1px solid rgb(195, 195, 195);
}

/* Buttons */
.btn_box {
display: flex;
margin-left:auto;
margin-top: 20px;
position: relative;height:30px;
width:100px;
cursor: pointer;justify-content: center;text-align: center;
padding:2%;

}  

.btn_box::before {
content: "";
position: absolute;
inset: 0;
transition: transform 0.4s ease;
z-index: -1;
background-color: #525252;
border-radius: 5px;

}
.btn_box:hover::before {
transform: scale(1.08);
}

.btn_contact {
font-weight: 400;
color: #fff;
user-select: none;

font-size: 10px; 
line-height: 1;

}


#result {

}


#result {
  width:250px;
display: flex;
height:45px;
padding-top:25px;
align-items: center; 
color:#198754;
font-size:12px;
font-weight: 500;
}


#result .alert.alert-success {
  border-left:5px solid #198754;
  padding-left:15px;
  opacity: 0;
  transform: translateY(24px);
  animation: successIn 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes successIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}