/* ===============================
   Author: {Marina}
   Date:   {August 2026}
   
   Notes:
   Hand coded for Build a Website
   from Scratch with HTML & CSS
   by Marina VFX
   
   Colour Palette:
   ---------------
   Void:		         #070912
   Deep Space:			#11172A
   Field Blue:			#19243D
   Starlight:			#F1EEE5
   Cosmic Dust:      #9299AA
   Marina Gold:      #E3CB73
   Stellar Gold:     #F1DFA0
   Quantum Violet:   #685B88
   =============================== */
/* Fonts */
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'PlexMono';
  src: url('../fonts/IBMPlexMono-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-VariableFont_wght.ttf') format('truetype');
}
/* General */
*{
   margin: 0;
   padding: 0;
   text-align: center;
   position: relative;
   list-style: none;
}
html {
   scroll-behavior: smooth;
}
#contact_tab {
   color: #E3CB73;
}
/* Hero */
.contact_hero{
   position: relative;
   width: 1200px;
   height: 420px;

   margin: 0 auto;
   overflow: hidden;

   background: url('../images/contact/contact_hero_bg.jpg') center center no-repeat;
}
.contact_hero_content{
   position: absolute;
   top: 50%;
   left: 150px;

   width: 430px;

   transform: translateY(-50%);

   text-align: left;
   z-index: 2;
}
.contact_hero_content h1{
   margin: 0;
   text-align: left;

   font-family: 'Cormorant', serif;
   font-size: 58px;
   font-weight: 500;
   line-height: 1;

   letter-spacing: 0.06em;
   text-transform: uppercase;

   color: #F1EEE5;
}
.contact_hero_accent{
   display: block;

   width: 48px;
   height: 1px;

   margin: 18px 0 18px;

   background: rgba(227, 203, 115, 0.7);
}
.contact_hero_subtitle{
   margin: 0;

   text-align: left;

   font-family: 'Cormorant', serif;
   font-size: 22px;
   font-weight: 400;
   font-style: italic;
   line-height: 1.4;

   color: rgba(241, 238, 229, 0.82);
}

/* Side Note */
.contact_hero_note{
   position: absolute;

   bottom: -50px;
   right: -50px;

   width: 150px;

   display: flex;
   flex-direction: column;
   align-items: center;

   text-align: center;
}
.contact_hero_note_star{
   margin-bottom: 12px;

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

   color: #E3CB73;

   text-shadow: 0 0 10px rgba(227, 203, 115, 0.35);
}
.contact_hero_note_line{
   width: 1px;
   height: 80px;

   margin-bottom: 14px;
   background: rgba(227, 203, 115, 0.35);
}
.contact_hero_note p{
   margin: 0;
   text-align: right;

   position: relative;
   top: -95px;
   left: -40px;

   font-family: 'Manrope', sans-serif;
   font-size: 9px;
   font-weight: 500;
   line-height: 2.2;

   letter-spacing: 0.18em;
   text-transform: uppercase;

   color: #9299AA;
}

/*Main Section */
.contact_main{
   width: 1200px;
   margin: 0 auto;

   padding: 52px 110px 58px;

   box-sizing: border-box;

   display: grid;
   grid-template-columns: 390px 1fr;
   column-gap: 95px;

   background: #070912;
}

/*Left Column */
.contact_intro{
   text-align: left;
}
.contact_intro_label{
   margin: 0 0 22px;

   text-align: left;

   font-family: 'Manrope', sans-serif;
   font-size: 11px;
   font-weight: 600;

   letter-spacing: 0.22em;
   text-transform: uppercase;

   color: #E3CB73;
}
.contact_intro_text{
   max-width: 360px;

   margin: 0 0 22px;

   text-align: left;

   font-family: 'Manrope', sans-serif;
   font-size: 13px;
   font-weight: 400;

   line-height: 1.8;

   color: #9299AA;
}
.contact_intro_accent{
   display: block;

   width: 44px;
   height: 1px;

   margin: 30px 0 28px;

   background: rgba(227, 203, 115, 0.7);
}
.contact_links{
   display: flex;
   flex-direction: column;

   gap: 14px;
}
.contact_link{
   display: flex;
   align-items: center;
   gap: 16px;

   width: fit-content;

   font-family: 'PlexMono', monospace;
   font-size: 11px;

   letter-spacing: 0.06em;

   color: #F1EEE5;

   text-decoration: none;

   transition: color 0.25s ease;
}
.contact_link:hover{
   color: #E3CB73;
}
.contact_link_icon{
   width: 22px;
   height: 22px;

   display: flex;
   align-items: center;
   justify-content: center;

   flex-shrink: 0;

   box-sizing: border-box;

   border: 1px solid #E3CB73;
   border-radius: 3px;

   font-family: 'Manrope', sans-serif;
   font-size: 8px;
   font-weight: 600;

   color: #E3CB73;
}

/*Form*/
.contact_form_wrap{
   width: 100%;
}
.contact_form{
   width: 100%;
}
.contact_form_field{
   margin-bottom: 18px;

   text-align: left;
}
.contact_form_field label{
   display: block;

   margin-bottom: 8px;

   text-align: left;

   font-family: 'Manrope', sans-serif;
   font-size: 9px;
   font-weight: 600;

   letter-spacing: 0.18em;
   text-transform: uppercase;

   color: #9299AA;
}
.contact_form_field input, .contact_form_field textarea{
   display: block;

   width: 100%;

   box-sizing: border-box;

   padding: 13px 13px;

   font-family: 'Manrope', sans-serif;
   font-size: 13px;

   text-align: left;
   color: #F1EEE5;
   background: rgba(17, 23, 42, 0.25);
   border: 1px solid rgba(146, 153, 170, 0.45);
   outline: none;
   transition: 
      border-color 0.25s ease,
      background 0.25s ease,
      box-shadow 0.25s ease;
}
.contact_form_field input{
   height: 39px;
}
.contact_form_field textarea{
   min-height: 95px;
   resize: vertical;
}
.contact_form_field input:focus, .contact_form_field textarea:focus{
   border-color: rgba(227, 203, 115, 0.7);
   background: rgba(17, 23, 42, 0.45);
   box-shadow: 0 0 0 1px rgba(227, 203, 115, 0.08);
}

/*Button*/
.contact_form_button{
   width: 230px;
   height: 48px;

   margin-top: 6px;
   padding: 0 24px;

   display: flex;
   align-items: center;
   justify-content: space-between;

   font-family: 'Manrope',sans-serif;
   font-size: 10px;
   font-weight: 600;

   letter-spacing: 0.17em;
   text-transform: uppercase;
   color: #E3CB73;

   background: transparent;
   border: 1px solid #E3CB73;

   cursor: pointer;

   transition: 
      background 0.25s ease,
      color 0.25s ease,
      box-shadow 0.25s ease;
}
.contact_form_button:hover{
   background: rgba(227, 203, 115, 0.06);
   box-shadow: 0 0 18px rgba(227, 203, 115, 0.08);
}
.contact_form_arrow{
   font-size: 15px;
   transition: 
      transform 0.25s ease;
}
.contact_form_button:hover .contact_form_arrow{
   transform: translateX(4px);
}