:root {
    --primary-color: #b6afac;
    --black-color: #1A2A36;
    --light-black-color: #4E4C49;
    --dark-color: #9B9B9B;
    --primary-color-200: #E8F0F1;
    --primary-color-400: #c4e9ed;
    --yellow-color: #d8d5d5;
    --gray-color: #777F81;
    --bs-body-bg: #FFFFFF;
    --bs-dark-rgb: 80, 80, 80;
    --bs-gray-100: #cbc7c0;
    --bs-gray-300: #DCDCDC;
    --bs-primary-text-emphasis: var(--primary-color);
    --bs-light-rgb: rgba(255, 255, 255, 1);
    --bs-primary-rgb: 253, 140, 78;
    --light-color: #fdfdfd;
    --swiper-theme-color: #111 !important;
    --cadet-blue-color: #9AB4B7;
    --heading-font: "Syne", sans-serif;
    --body-font: "Poppins", sans-serif;
  }

* 
{ 
   margin: 0; 
   padding: 0; 
   box-sizing: border-box; 
}
.contact 
{
   position: relative; 
   min-height: 100vh; 
   padding: 50px 100px; 
   display: flex; 
   justify-content: center; 
   align-items: center; 
   flex-direction: column; 
   background: var(--background-color);
   margin-top: 10px;
}
.contact .content 
{
   max-width: 800px;
   text-align: center;
}
.contact .content h2
{
   font-size: 3em;
   color: var(--black-color);
   font-weight: 500;
}
.contact .content p 
{
   color: var(--black-color);
   font-size: 1.1rem;
   font-weight: 300;
}
.containerContact {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 50px;
   margin-top: 30px;
}
.containerContact .contactInfo
{
   width: 50%;
   display: flex;
   flex-direction: column;
}
.containerContact .contactInfo .box
{
   position: relative;
   padding: 20px 0;
   display: flex;
   cursor: pointer;
}
.containerContact .contactInfo .box .icon 
{
   position: relative;
   min-width: 60px;
   height: 60px;
   background: var(--primary-color);
   display: flex;
   justify-content: center;
   align-items: center;
   box-shadow: 100px 100px 0px var(--primary-color), 100px 100px 0px var(--light-color);
   animation: shadow 2s infinite;
}
@keyframes shadow {
 0%, 100% {
   box-shadow: 100px 100px 0px var(--primary-color), 100px 100px 0px var(--light-color);
 }
 50% {
   box-shadow: -100px -100px 0px var(--primary-color), -100px -100px 0px var(--light-color);
 }
}
.containerContact .contactInfo .box .icon::before
{
   content: '';
   position: absolute;
   inset: 0;
   background: repeating-conic-gradient(from 117.5deg, var(--primary-color) 0%, var(--primary-color) 10%, transparent 10%, transparent 50%);
}
.containerContact .contactInfo .box .icon::after
{
   content: '';
   position: absolute;
   inset: 2px;
   background: var(--yellow-color);
}
.containerContact .contactInfo .box .icon b 
{
   position: absolute;
   inset: 8px;
   background: var(--light-color);
   z-index: 2;
}
.containerContact .contactInfo .box .icon i
{
   position: relative;
   z-index: 1000;
   color: var(--primary-color);
   font-size: 1.25em;
}
.containerContact .contactInfo .box .text
{
   position: relative;
   display: flex;
   flex-direction: column;
   margin-left: 20px;
   font-size: 1.1em;
   color: var(--gray-color);
   font-family: 300;
}
.containerContact .contactInfo .box .text h3
{
   font-weight: 500;
   color: var(--black-color);
}
.containerContact .contactInfo .txt
{
   color: var(--black-color);
   margin-top: 50px;
   font-weight: 500;
   border-left: 50px solid var(--primary-color);
   padding-left: 10px;
   line-height: 1em;
}
.containerContact .contactInfo .sci
{
   position: relative;
   display: flex;
   gap: 30px;
   margin: 20px 0;
}
.containerContact .contactInfo .sci li
{
   list-style: none;
}
.containerContact .contactInfo .sci li a 
{
   color: var(--gray-color);
   font-size: 1.5em;
   transition: 0.25s;
}
.containerContact .contactInfo .sci li a:hover 
{
   color: var(--primary-color);
   filter: drop-shadow(0 0 5px var(--primary-color));
}
.containerContact .contactForm 
{
   position: relative;
   width: 40%;
   background: var(--primary-color);
   animation: animate 6s linear infinite;
   padding: 60px;
   box-shadow: 10px 10px 0px var(--primary-color), 10px 10px 0px var(--light-color);
   animation: shadow 2s infinite;
}
@keyframes shadow {
 0%, 100% {
   box-shadow: 10px 10px 0px var(--primary-color), 10px 10px 0px var(--light-color);
 }
 50% {
   box-shadow: -10px -10px 0px var(--primary-color), -10px -10px 0px var(--light-color);
 }
}

.containerContact .contactForm::before
{
   content: '';
   position: absolute;
   inset: 0;
   background: repeating-conic-gradient(from var(--a), var(--primary-color) 0%, var(--primary-color) 10%, transparent 10%, transparent 50%);
   animation: animate 6s linear infinite;
   animation-delay: -1.5s;
}
.containerContact .contactForm::after
{
   content: '';
   position: absolute;
   inset: 2px;
   border: 20px solid var(--yellow-color);
   background: #ffffff;
}
@keyframes animate 
{
   0%
   {
       --a: 0deg;
   }
   100%
   {
       --a: 360deg;
   }
}
.containerContact .contactForm form
{
   position: relative;
   z-index: 10;
}
.containerContact .contactForm form h2 
{
   font-size: 2em;
   color: var(--dark-color);
   font-weight: 500;
}
.containerContact .contactForm form .inputBox
{
   position: relative;
   width: 100%;
   margin-top: 20px;
}
.containerContact .contactForm form .inputBox input
{
   width: 100%;
   padding: 5px 0;
   font-size: 1.1em;
   margin: 10px 0;
   border: none;
   background: transparent;
   border-bottom: 2px solid var(--primary-color);
   color: var(--black-color);
   outline: none;
   resize: none;
}
.containerContact .contactForm form .inputBox textarea
{
   width: 100%;
   padding: 5px 0;
   font-size: 1.1em;
   margin: 10px 0;
   border: none;
   background: transparent;
   border-bottom: 2px solid var(--primary-color);
   color: var(--black-color);
   outline: none;
   resize: none;
}
.containerContact .contactForm form .inputBox span
{
   position: absolute;
   left: 0;
   pointer-events: none;
   padding: 5px 0;
   margin: 10px 0;
   font-size: 1.1em;
   color: var(--black-color);
   transition: 0.5s;
}
.containerContact .contactForm form .inputBox input:focus ~ span,
.containerContact .contactForm form .inputBox textarea:focus ~ span,
.containerContact .contactForm form .inputBox input:valid ~ span,
.containerContact .contactForm form .inputBox textarea:valid ~ span 
{
   color: var(--primary-color);
   font-size: 0.9em;
   transform: translateY(-24px);
}
.containerContact .contactForm form .inputBox input[type="submit"] 
{
   width: 100%;
   background: var(--primary-color);
   color: var(--light-color);
   border: none;
   cursor: pointer;
   padding: 10px;
   font-size: 1.1em;
   font-weight: 500;
}
@media (max-width: 991px)
{
   .contact 
   {
       padding: 50px 50px;
   }
   .containerContact
   {
       flex-direction: column;
   }
   .containerContact .contactInfo,
   .containerContact .contactForm
   {
       width: 100%;
   }
   .containerContact .contactForm 
   {
       padding: 30px;
   }
   .containerContact .contactForm form
   {
       padding: 10px;
   }
}