/* ===============================
   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;
}
#tutorials_tab {
   color: #E3CB73;
}
/* Hero */
.tutorials_hero{
   position: relative;

   width: 1200px;
   height: 500px;
   margin: 0 auto;
   padding: 50px;

   box-sizing: border-box;
   overflow: hidden;

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

   
   background: url(../images/tutorials/tutorials_hero_bg.jpg) center center no-repeat;
}
.tutorial_back{
   position: absolute;

   top: 32px;
   left: 55px;

   z-index: 3;

   display: inline-flex;
   align-items: center;
   gap: 8px;

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

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

   color: #9299AA;

   text-decoration: none;

   transition: 
      color 0.25s ease, 
      transform 0.25s ease;
}
.tutorial_back:hover{
   color: #E3CB73;
   transform: translateX(-3px);
}
.tutorial_back:focus-visible{
   outline: 1px solid #f1DFA0;
   outline-offset: 5px;
}

/* Hero Content */
.tutorial_hero_content{
   position: relative;
   z-index: 2;

   width: 470px;
   flex-shrink: 0;

   text-align: left;

   transform: translateX(12px);
}
.tutorials_hero_category{
   margin: 0 0 18px;

   font-family: 'Manrope', sans-serif;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   text-align: left;

   color: #E3CB73;
}
.tutorial_hero_content h1{
   margin: 0 0 20px;

   font-family: 'Cormorant', serif;
   font-size: 58px;
   font-weight: 500;
   line-height: 0.98;
   letter-spacing: 0.025em;
   text-align: left;

   color: #F1EEE5;

}
.tutorial_hero_content h1 span{
   display: block;
   position: relative;

   transform: translateX(-32px);
}
.tutorial_hero_description{
   max-width: 460px;
   margin: 0 0 26px;

   font-family: 'Manrope', sans-serif;
   font-size: 13px;
   font-weight: 400;
   line-height: 1.75;
   text-align: left;

   color: #9299AA;
}
.tutorial_hero_button{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 12px;

   min-width: 220px;
   height: 44px;
   padding: 0 18px;

   box-sizing: border-box;

   border: 1px solid rgba(227, 203, 115, 0.6);
   background: rgba(17, 23, 42, 0.55);

   font-family: 'Manrope', sans-serif;
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 0.12em;
   text-transform: uppercase;

   color: #E3CB73;
   text-decoration: none;

   transition: 
      background 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease;
}
.tutorial_hero_button:hover{
   background: rgba(227, 203, 115, 0.1);
   border-color: #f1DFA0;

   box-shadow: 0 0 16px rgba(227, 203, 115, 0.08);
}
.tutorial_button_icon{
   font-size: 10px;
   color: #E3CB73;
}
.tutorial_button_arrow{
   font-size: 15px;
   transition: transform 0.25s ease;
}
.tutorial_hero_button:hover .tutorial_button_arrow{
   transform: translate(2px, -2px);
}

.tutorial_hero_tagline{
   margin: 16px 0 0;

   font-family: 'Cormorant', serif;
   font-size: 18px;
   font-weight: 400;
   font-style: italic;
   text-align: left;

   color: #9299AA;
}

/* Hero Video Thumbnail */
.tutorial_hero_media{
   position: relative;
   z-index: 2;

   width: 520px;
   flex-shrink: 0;
}
.tutorials_video_preview{
   position: relative;

   display: block;
   width: 100%;
   aspect-ratio: 16/9;

   box-sizing: border-box;
   overflow: hidden;

   border: 1px solid rgba(227, 203, 115, 0.6);

   box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);

   transition: 
      border-color 0.3s ease,
      box-shadow 0.3s ease;
}
.tutorial_video_thumbnail{
   display: block;

   width: 100%;
   height: 100%;

   object-fit: cover;

   transition: transform 0.4s ease;
}
.tutorial_video_play{
   position: absolute;

   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

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

   width: 64px;
   height: 64px;

   border: 1px solid rgba(227, 203, 115, 0.85);
   border-radius: 50%;

   background: rgba(7, 9, 18, 0.75);

   font-size: 24px;
   color: #f1DFA0;

   padding-left: 4px;
   box-sizing: border-box;

   transition: 
      background 0.3s ease,
      box-shadow 0.3s ease;
}

/* Video Hover */
.tutorials_video_preview:hover{
   border-color: #f1DFA0;

   box-shadow: 
      0 12px 35px rgba(0, 0, 0, 0.3),
      0 0 18px rgba(227, 203, 115, 0.12);
}
.tutorials_video_preview:hover .tutorial_video_thumbnail{
   transform: scale(1.025);
}
.tutorials_video_preview:hover .tutorial_video_play{
   background: rgba(227, 203, 115, 0.2);

   box-shadow: 0 0 22px rgba(227, 203, 115, 0.3);
}

/*Infor Bar */
.tutorial_info_bar{
   width: 1200px;
   min-height: 100px;
   margin: 0 auto;
   padding: 20px 35px;

   box-sizing: border-box;

   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));

   background: #11172a;

   border-top: 1px solid rgba(227, 203, 115, 0.2);
   border-bottom: 1px solid rgba(227, 203, 115, 0.2);
}
.tutorial_infor_item{
   display: flex;
   align-items: center;
   gap: 14px;

   min-width: 0;
   padding: 0 20px;

   border-right: 1px solid rgba(227, 203, 115, 0.2);
}
.tutorial_infor_item:last-child{
   border-right: none;
}
/*Icon*/
.tutorial_info_icon{
   display: block;

   width: 32px;
   height: 32px;

   flex-shrink: 0;
   object-fit: contain;

   opacity: 0.85;
   margin-right: 12px;
}
/* Text */
.tutorial_info_text{
   display: flex;
   flex-direction: column;
   gap: 7px;
}
.tutorial_info_label{
   font-family: 'Manrope', sans-serif;
   font-size: 10px;
   font-weight: 600;

   letter-spacing: 0.15em;
   text-transform: uppercase;
   text-align: left;

   color: #E3CB73;
}
.tutorial_info_value{
   font-family: 'Manrope', sans-serif;
   font-size: 12px;
   font-weight: 400;
   line-height: 1.45;
   text-align: left;

   color: #9299AA;
}

/*Project Files */
.tutorial_project_files{
   width: 1200px;
   margin: 0 auto;

   padding: 28px 50px;
   box-sizing: border-box;

   background: #11172a;
   border-bottom: 1px solid rgba(227, 203, 115, 0.2);
}
.tutorial_project_files_content{
   display: flex;
   align-items: center;
   justify-content: space-between;

   gap: 40px;
}
.tutorial_project_files_text{
   text-align: left;
}
.tutorial_project_files_label{
   margin: 0 0 8px;

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

   letter-spacing: 0.16em;
   text-transform: uppercase;
   text-align: left;

   color: #E3CB73;
}
.tutorial_project_files_text h2{
   margin: 0 0 7px;

   font-family: 'Cormorant', serif;
   font-size: 25px;
   font-weight: 500;
   text-align: left;

   color: #F1EEE5;
}
.tutorial_project_files_text p:last-child{
   margin: 0;

   font-family: 'Manrope', sans-serif;
   font-size: 12px;
   line-height: 1.6;
   text-align: left;

   color: #9299AA;
}
.tutorial_project_files_button{
   display: inline-flex;
   align-items: center;
   gap: 10px;

   flex-shrink: 0;

   height: 42px;
   padding: 0 18px;

   border: 1px solid rgba(227, 203, 115, 0.6);

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

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

   color: #E3CB73;
   text-decoration: none;

   transition: 
      background 0.25s ease,
      border-color 0.25s ease;
}
.tutorial_project_files_button:hover{
   background: rgba(227, 203, 115, 0.1);
   border-color: #f1DFA0;
}

/* Written Guide*/
.tutorial_guide_intro{
   width: 1200px;
   margin: 0 auto;

   display: grid;
   grid-template-columns: 52px minmax(0, 1fr);
   column-gap: 30px;

   padding: 50px 50px 46px;
   box-sizing: border-box;

   text-align: left;

   background: #070912;

   border-top: 1px solid rgba(227, 203, 115, 0.16);
   
}
.tutorial_guide_intro > *{
   grid-column: 2;
}
.tutorial_guide_label{
   margin: 0 0 14px;

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

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

   color: #E3CB73;
}
.tutorial_guide_intro h2{
   margin: 0 0 18px;

   font-family: 'Cormorant', serif;
   font-size: 38px;
   font-weight: 500;
   line-height: 1.1;
   text-align: left;

   letter-spacing: 0.01em;

   color: #F1EEE5;
}
.tutorial_guide_intro > p:not(.tutorial_guide_label){
   max-width: 780px;

   margin: 0;

   font-family: 'Manrope', sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.75;
   text-align: left;

   color: #9299AA;
}
/*Preview*/
.tutorial_process_preview{
   width: 1200px;
   margin: 32px auto;
   padding-bottom: 42px;

   border-bottom: 1px solid rgba(227, 203, 115, 0.12);
}
.tutorial_process_preview img{
   display: block;

   width: 256px;
   max-width: 100%;
   height: auto;

   margin: 0 auto;

   border: 1px solid rgba(227, 203, 115, 0.2);

   background: #11172a;
}
.tutorial_process_preview figcaption{
   margin-top: 10px;

   text-align: center;

   font-family: 'PlexMono', monospace;
   font-size: 10px;
   line-height: 1.5;

   color: #9299AA;
}
/*Section*/
.tutorial_guide_section{
   width: 1200px;
   margin: 0 auto;

   display: grid;
   grid-template-columns: 52px minmax(0, 1fr);
   column-gap: 30px;

   padding: 46px 50px 54px;
   box-sizing: border-box;

   background: #070912;
}
/*Section Number*/
.tutorial_guide_marker{
   display: flex;
   flex-direction: column;
   align-items: center;
}
.tutorial_guide_number{
   font-family: 'Manrope', sans-serif;
   font-size: 11px;
   font-weight: 600;
   line-height: 1;

   letter-spacing: 0.12em;

   color: #E3CB73;
}
.tutorial_guide_line{
   width: 1px;
   height: 58px;

   margin-top: 14px;

   background: rgba(227, 203, 115, 0.6);
}
/*Content*/
.tutorial_guide_content{
   min-width: 0;

   text-align: left;
}
.tutorial_guide_content h2{
   margin: 0 0 20px;

   font-family: 'Cormorant', serif;
   font-size: 32px;
   font-weight: 500;
   line-height: 1.1;
   text-align: left;

   letter-spacing: 0.01em;

   color: #F1EEE5;
}
.tutorial_guide_content > p{
   max-width: 900px;

   margin: 0 0 20px;

   font-family: 'Manrope', sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.75;
   text-align: left;

   color: rgba(241, 238, 229, 0.72);
}
.tutorial_guide_content strong{
   font-weight: 600;
   color: #F1EEE5;
}
.tutorial_guide_image{
   width: 100%;
   margin: 30px 0 30px;
}
.tutorial_guide_image a{
   display: block;
   cursor: zoom-in;
}
.tutorial_guide_image img{
   display: block;

   width: 100%;
   height: auto;

   border: 1px solid rgba(227, 203, 115, 0.8);

   transition: 
      border-color 0.25s ease,
      opacity 0.25s ease;
}
.tutorial_guide_image a:hover img{
   border-color: rgba(227, 203, 115, 0.6);
   opacity: 0.75;
}
.tutorial_guide_image figcaption{
   margin-top: 10px;

   font-family: 'PlexMono', monospace;
   font-size: 10px;
   font-weight: 400;
   line-height: 1.5;
   text-align: left;

   letter-spacing: 0.04em;

   color: #9299AA;
}
/*Final Result*/
.tutorial_final_result{
   width: 1200px;
   margin: 0 auto;

   padding: 58px 50px 62px;
   box-sizing: border-box;

   text-align: center;

   background: 
      radial-gradient(
         circle at 50% 40%,
         rgba(104, 91, 136, 0.12),
         transparent 55%
      ),
      #11172a;
   border-top: 1px solid rgba(227, 203, 115, 0.2);
   border-bottom: 1px solid rgba(227, 203, 115, 0.2);
}
.tutorial_final_content{
   max-width: 680px;
   margin: 0 auto;
}
.tutorial_final_label{
   margin: 0 0 14px;

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

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

   color: #E3CB73;
}
.tutorial_final_content h2{
   margin: 0 0 18px;

   font-family: 'Cormorant', serif;
   font-size: 38px;
   font-weight: 500;
   line-height: 1.1;

   color: #F1EEE5;
}
.tutorial_final_description{
   max-width: 580px;
   margin: 0 auto 30px;

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

   color: #9299AA;
}
.tutorial_final_button{
   display: inline-flex;
   align-items: center;
   justify-content: center;

   gap: 12px;

   min-width: 245px;
   height: 46px;
   padding: 0 20px;

   box-sizing: border-box;

   border: 1px solid rgba(227, 203, 115, 0.6);
   background: rgba(7, 9, 18, 0.45);

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

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

   color: #E3CB73;
   text-decoration: none;

   transition: 
      background 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease;
}
.tutorial_final_button:hover{
   background: rgba(227, 203, 115, 0.1);

   border-color: #f1DFA0;

   box-shadow: 0 0 18px rgba(227, 203, 115, 0.1);
}
.tutorial_final_button_icon{
   font-size: 10px;
   color: #E3CB73;
}
.tutorial_final_button_arrow{
   font-size: 15px;
   transition: transform 0.25s ease;
}
.tutorial_final_button:hover .tutorial_final_button_arrow{
   transform: translate(2px, -2px);
}
/*Bottom navigation*/
.tutorial_bottom_nav{
   width: 1200px;
   margin: 0 auto;

   padding: 24px 50px 28px;
   box-sizing: border-box;

   background: #070912;

   border-bottom: 1px solid rgba(227, 203, 115, 0.16);
}
.tutorial_bottom_back{
   display: inline-flex;
   align-items: center;
   gap: 8px;

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

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

   color: #9299AA;
   text-decoration: none;

   transition: 
      color 0.25s ease,
      transform 0.25s ease;
}
.tutorial_bottom_back span:first-child{
   font-size: 14px;
   transform: translateX(-3px);
}
.tutorial_bottom_back:hover{
   color: #E3CB73;
   transform: translateX(-3px);
}