/* ===============================
   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;
}
#about {
   color: #E3CB73;
}

/* Hero */
.about_hero{
   width: 1200px;
   height: 620px;
   margin: 0 auto;

   background: url('../images/about/about_hero_bg.jpg') center center no-repeat;
   background-size: 1200px 620px;
}
.about_hero h1{
   position: absolute;
   left: 60px;
   top: 110px;
   
   font-family: 'Cormorant', serif;
   font-size: 55px;
   font-weight: 500px;
   line-height: 0.8;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: #F1EEE5;

   text-align: left;
}
.about_hero h1 em{
   color: #F1DFA0;
   font-style: normal;
}
.about_hero p{
   position: absolute;
   left: 60px;
   top: 350px;

   font-family: 'Manrope', sans-serif;
   font-size: 17px;
   font-weight: 400;
   line-height: 1.7;
   letter-spacing: 0.01em;
   color:#9299AA;
   text-align: left;

   max-width: 500px;
}

#about_hero_button{
   position: absolute;
   left: 60px;
   top: 460px;

   /*height: 54px;*/
   font-family: 'Manrope', sans-serif;
   font-weight: 500;
   padding: 20px 64px 20px 20px;
   font-size: 13px;
   border: 1px solid #F1EEE5;
   border-radius: 2px;
   text-transform: uppercase;
   text-decoration: none;
   background: url(../images/star-01.png) top right no-repeat;
   background-size: 54px;
   letter-spacing: 0.18em;
}
#about_hero_button:hover{
   color: #11172A;
   background: #F1EEE5 url(../images/star-01-dark.png) top right no-repeat;
   background-size: 54px;
   border: 1px solid #11172A;
}

/* My Story */
.about_mystory{
   width: 1200px;
   height: 720px;
   margin: 0 auto;

   background: url('../images/about/about_mystory_bg.jpg') center center no-repeat;
}
#about_mystory_title{
   position: absolute;
   right: 60px;
   top: 80px;

   font-family: "Cormorant", serif;
   font-size: 46px;
   font-weight: 500;
   line-height: 1.05;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: #F1EEE5;

}
.about_mystory p{
   position: absolute;
   right: 60px;
   top: 180px;

   font-family: 'Manrope', sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.5;
   letter-spacing: 0.01em;
   color:#9299AA;
   text-align: justify;

   max-width: 520px;
}
#about_mystory_button{
   position: absolute;
   right: 60px;
   top: 630px;

   /*height: 54px;*/
   font-family: 'Manrope', sans-serif;
   font-weight: 500;
   padding: 20px 64px 20px 20px;
   font-size: 13px;
   border: 1px solid #F1EEE5;
   border-radius: 2px;
   text-transform: uppercase;
   text-decoration: none;
   background: url(../images/star-01.png) top right no-repeat;
   background-size: 54px;
   letter-spacing: 0.18em;
}
#about_mystory_button:hover{
   color: #11172A;
   background: #F1EEE5 url(../images/star-01-dark.png) top right no-repeat;
   background-size: 54px;
   border: 1px solid #11172A;
}

/* What I Do */
.about_whatido{
   width: 1200px;
   height: 650px;
   margin: 0 auto;

   background: url('../images/about/about_whatido_bg.jpg') center center no-repeat;
}
.about_whatido h2{
   font-family: "Cormorant", serif;
   font-weight: 500;
   line-height: 1.08;
   color:#F1EEE5;
   font-size: 48px;

   position: relative;
   top: 50px;
}
.about_whatido ul{
   
   list-style: none;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 24px;
   
   width: fit-content;
   margin: 0 auto;
   padding: 0;

   position: relative;
   top: 100px;

} 
.about_whatido ul li{
   display: inline-block;
   margin: 0 5px;
   width: 300px;
   height: 390px;
}
#about_whatido_vfx{
   background: url(../images/about/about_whatido_vfx.jpg) center center no-repeat;
   background-size: 300px 390px;
}
#about_whatido_tutorials{
   background: url(../images/about/about_whatido_tutorials.jpg) top left no-repeat;
   background-size: 300px 390px;
}
#about_whatido_experiments{
   background: url(../images/about/about_whatido_experiments.jpg) top left no-repeat;
   background-size: 300px 390px;
}
.about_whatido ul li h3{
   font-family: 'Cormorant', serif;
   font-size: 20px;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   color: #E3CB73;

   position: relative;
   top: 200px;
}
.about_whatido ul li p{
   font-family: 'Manrope', sans-serif;
   font-size: 15px;
   font-weight: 400;
   line-height: 1.5;
   color: #9299AA;

   padding: 0 20px;

   position: relative;
   top: 220px;
}
.about_whatido ul li a{
   font-family: 'Manrope', sans-serif;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.18em;
   color: #E3CB73;
   text-decoration: none;

   position: relative;
   top: 240px;
}
.about_whatido ul li a:hover{
   color: #F1EEE5;
}

/* Tools and Technologies */
.about_tools{
   width: 1200px;
   height: 400px;
   margin: 0 auto;

   background: url('../images/about/about_tools_bg.jpg') center center no-repeat;
}
.about_tools h2{
   font-family: 'Cormorant', serif;
   font-size: 20px;
   text-transform: uppercase;
   color: #E3CB73;
   letter-spacing: 0.25em;

   position: relative;
   top: 25px;
}
.about_tools h3 em{
   color: #E3CB73;
}
.about_tools ul{
   
   list-style: none;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 80px;
   
   width: fit-content;
   margin: 0 auto;
   padding: 0;

   position: relative;
   top: 35px;

} 
.about_tools ul li{
   display: inline-block;
   margin: 0 5px;
}
.about_tools ul li p{
   font-family: 'Manrope', sans-serif;
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.14em;
   color: #F1EEE5;

   position: relative;
   top: 0px;
}
#about_whatguidesme_h3{
   position: relative;
   top: 100px;
}
#about_whatguidesme ul{
   transform: translateY(90px);
}
.about_whatguidesme_text {
   font-family: 'Cormorant', serif;
   font-size: 24px;
   font-weight: 500;
   line-height: 1;
   text-transform: uppercase;
   color: #F1EEE5;
}
.about_tools p{
   font-family: 'Manrope', sans-serif;
   color: #9299AA;
   font-size: 12px;
   font-weight: 400;
   line-height: 1.6;

   position: relative;
   top: 150px;
}

/* Resume */
.about_resume{
   width: 1200px;
   height: 560px;
   margin: 0 auto;
   background: url('../images/about/about_professionalpath_bg.jpg') center center no-repeat;

   text-align: center;
   position: relative;
}
.about_resume ul{
   
   list-style: none;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 24px;
   
   width: fit-content;
   margin: 0 auto;
   padding: 0;

   position: relative;
   top: 140px;
} 
.about_resume ul li{
   display: inline-block;
   margin: 0 5px;
   width: 255px;
   height: 270px;
}
#about_resume_experience{
   background: url('../images/about/about_professionalpath_experience.jpg') center center no-repeat;
}
#about_resume_tools{
   background: url('../images/about/about_professionalpath_tools.jpg') center center no-repeat;
}
#about_resume_education{
   background: url('../images/about/about_professionalpath_education.jpg') center center no-repeat;
}
#about_resume_background{
   background: url('../images/about/about_professionalpath_background.jpg') center center no-repeat;
}
.about_resume ul li h3{
   font-family: 'Cormorant', serif;
   font-size: 23px;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: #E3CB73;

   position: relative;
   top: 125px;
}
.about_resume ul li p{
   font-family: 'Manrope', sans-serif;
   font-size: 14px;
   line-height: 1.65;
   color: #9299AA;
   padding: 0 15px;;

   position: relative;
   top: 140px;
}
.about_resume h2{
   font-family: 'Cormorant', serif;
   font-size: 44px;
   font-weight: 500;
   line-height: 1.05;
   color: #F1EEE5;

   position: relative;
   top: 40px;
}
.about_resume p{
   font-family: 'Manrope', sans-serif;
   font-weight: 400;
   line-height: 1.65;
   color: #9299AA;

   position: relative;
   top: 60px;
}
.about_resume a{
   font-family: 'Manrope';
   font-size: 14px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.18em;
   color: #E3CB73;
   text-decoration: none;

   position: relative;
   top: 90px;
}
.about_resume a:hover{
   color: #F1DFA0;
}

/* CTA */
.about_cta{
   width: 1200px;
   height: 360px;
   margin: 0 auto;
   background: url('../images/about/about_cta_bg.jpg') top left no-repeat;
   text-align: center;

   position: relative;
}
.about_cta ul{
   list-style: none;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 24px;
   
   width: fit-content;
   margin: 0 auto;
   padding: 0;

   position: relative;
   top: 100px;
   text-align: left;
}

.about_cta ul li{
   display: inline-block;
   margin: 0 5px;
   padding: 0 50px;
}
#about_cta_first{
   border-right: 1px solid rgba(241, 238, 229, 0.25);
}
.about_cta h2{
   font-family: 'Cormorant', serif;
   font-size: 44px;
   font-weight: 500;
   line-height: 1.08;
   text-transform: uppercase;
   
}
.about_cta p{
   font-family: 'Manrope', sans-serif;
   font-size: 15px;
   font-weight: 400;
   line-height: 1.6;
   color: #9299AA;

   position: relative;
   top: -25px;
}
.about_cta a{
   font-family: 'Manrope', sans-serif;
   font-size: 14px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.18em;
   color: #E3CB73;
   text-decoration: none;

   position: relative;
   top: 25px;
}
.about_cta a:hover{
   color: #F1DFA0;
}