/* 

---------- TYPOGRAPHY ----------

FONT SIZES
12px / 16px / 20px / 24px / 32px / 40px / 48px / 62px

FONT WEIGHTS
400 / 700

LINE HEIGHTS
1.2 / 1.5

LETTER SPACING
0 / -2px

FONT FAMILY
Inter

--------------COLORS--------------------

BODY COLORS
Dark Blue: #101223
Sea Green: #50f5ac

PRIMARY
Base: #101223 (Dark Royal Blue)
Tint: #888991 (Sand Nickle)
Shade: #080912 (Black Blue)
Grade: #335dd8 (Blue)

SECONDARY
Base: #50f5ac (Seafoam green)
Tint: #96f9cd (Light sea)
Shade: #206245 (DS green)

TERTIARY
Base: #d0c88e (Sand)
Tint: #e3debb (Egg Shell)
Shade: #686447 (Oatmeal)

GREY
Base: #495057 (Slate)
Tint: #f1f3f5 (Pebble)
Shade: #212529 (Graphite)
White: #ffffff (White)
Black: #000000 (Black)

---------- BORDER RADIUS ----------

4px / 8px / 20px

---------- SPACING SYSTEM ----------

5px / 10px / 15px / 20px / 25px / 30px / 40px / 50px / 60px / 70px / 80px / 90px / 100px / 125px / 150px / 200px / 250px / 300px / 400px / 500px

*/

/* ----------------------- GLOBAL STYLES ----------------------- */

:root{

    /* FONT SIZE */
    --text-sm: 1.2rem;
    --text-base: 1.6rem;
    --text-paragraph: 2rem;
    --text-h5: 2.4rem;
    --text-h4: 3.2rem;
    --text-h3: 4rem;
    --text-h2: 4.8rem;
    --text-h1: 6.2rem;

    /* FONT WEIGHT */
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* LINE HEIGHTS */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;

    /* LETTER SPACING */
    --letter-spacing-tight: -2px;

    /* FONT FAMILY */
    --font-family: 'Inter', sans-serif;

    /* COLORS */
    --primary-base: #101223;
    --primary-tint: #888991;
    --primary-shade: #080912;
    --primary-grade: #335dd8;
    --secondary-base: #50f5ac;
    --secondary-tint: #96f9cd;
    --secondary-shade: #206245;
    --tertiary-base: #d0c88e;
    --tertiary-tint: #e3debb;
    --tertiary-shade: #686447;
    --grey-base: #495057;
    --grey-tint: #f1f3f5;
    --grey-shade: #212529;
    --white: #ffffff;
    --black: #000000; 

    /* MISCELLANEOUS */
    --nav-height: 7rem; /* Update the value in the flexbox topic */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }

html {
   font-size: 62.5%; 
   /* 10px / 16px = 62.5% */
}

body {
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--grey-tint);
    background-color: var(--primary-base);
}

.container {
    max-width: 1280px;
    width: 90%;
    margin: 0 auto;
}

h1, h2, h3, h4, h5 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    /*letter-spacing: var(--letter-spacing-tight);*/
    color: var(--grey-tint);
}

h1 {
    font-size: var(--text-h1);
}

h2 {
    font-size: var(--text-h2);
}

h3 {
    font-size: var(--text-h3);
}

h4 {
    font-size: var(--text-h4);
}

h5 {
    font-size: var(--text-h5);
}

p {
    font-size: var(--text-paragraph);
}


a {
    text-decoration: none;
    font-size: var(--text-base);
    display: inline-block;
}

a:link, a:visited, a:hover, a:active {
    color: var(--grey-tint);
}

ul {
    list-style: none;
}

span {
    display: inline-block;
}

.small-text {
    font-size: var(--text-sm);
}

/* ----------------------- SECTIONS ----------------------- */

/* ------ COMPONENTS ------ */

.highlight {
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 4px;
}

.highlight-black {
    color: var(--black);
    padding: 0.5rem 1rem;
    border-radius: 4px;
}


.highlight-primary {
    background-color: var(--primary-base);
}

.highlight-secondary {
    background-color: var(--secondary-shade);
}

.highlight-secondary-base {
    background-color: var(--secondary-base);
}

.highlight-tertiary {
    background-color: var(--tertiary-base);
}

.bold {
    font-weight: var(--font-weight-bold);

}

/*--------Buttons---------*/


.btn {
    font-size: var(--text-h4);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    padding: 1.5rem 3rem;
    border-radius: 8px;
}

.btn-l {
    font-size: var(--text-h5);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    padding: 1.5rem 3rem;
    border-radius: 8px;
}

.btn-primary:link, .btn-primary:visited {
    color: var(--white);
    background-color: var(--secondary-shade);
    border: 2px solid var(--tertiary-base);
    transition: 0.5s;
}

.btn-primary:hover, .btn-primary:active {
    color: var(--white);
    background-color: var(--secondary-base);
    border: 2px solid var(--secondary-shade);
    transform: scale(1.05, 1.05);
    box-shadow: 0px 3px 6px var(--secondary-tint);
}

.btn-primary-outline:link, .btn-primary-outline:visited {
    color: var(--primary-base);
    background-color: var(--white);
    border: 2px solid var(--primary-base);
    transition: 0.5s;
}

.btn-primary-outline:hover, .btn-primary-outline:active {
    color: var(--primary-shade);
    background-color: var(--white);
    border: 2px solid var(--primary-shade);
    transform: scale(1.05, 1.05);
    box-shadow: 0px 3px 6px var(--grey-base);
}

.btn-secondary:link, .btn-secondary:visited {
    color: var(--white);
    background-color: var(--secondary-base);
    border: 2px solid var(--secondary-base);
    transition: 0.5s;
}

.btn-secondary:hover, .btn-secondary:active {
    color: var(--white);
    background-color: var(--secondary-shade);
    border: 2px solid var(--secondary-shade);
    transform: scale(1.05, 1.05);
    box-shadow: 0px 3px 6px var(--grey-base);
}


/* ------ NAVBAR ------ */

.navbar-full-length {
    width: 100vw;
    height: var(--nav-height);
    background-image: linear-gradient( rgba(16, 18, 35, 0.644), rgba(16, 18, 35, 0.5));
    backdrop-filter: blur(8px);
    position: fixed;
    top: 0;
    z-index: 1000;
}
.navbar {
    max-width: 1280px;
    width: 90%;
    margin: 0 auto;
    height: var(--nav-height);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navlinks:link {
    font-weight: var(--font-weight-bold);
    font-size: var(--text-h5);
    padding-right: 2rem;
}

.navlinks:hover {
    color: var(--secondary-base);
}

/* ------ HERO SECTION ------ */

.hero-section {
    /*height: calc(75vh - var(--nav-height));*/
    min-height: 400px;
    /*margin-bottom: 10rem;*/
    padding-top: 15rem;
    padding-bottom: 10rem;

}

.hero-section-pre-container{
    background-image: radial-gradient(var(--primary-grade), 3%, var(--primary-base));
    padding-bottom: 3rem;
}

.hero-grid-container{
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    row-gap: 15rem;
    column-gap: 5rem;
    justify-items: center;
    align-items: center;
    z-index: 1;
    
}

.hero-heading {
    margin-bottom: 1rem;
    text-align: center;
    z-index: 4;
    position: relative;
    
}

.hero-paragraph {
    margin-bottom: 5rem;
    text-align: center;
    z-index: 4;
    position: relative;
    
}

#background-video {
  width: 100%;  
  height: 100%;
  object-fit: cover; /* Important:  This ensures the video covers the entire area, cropping as needed. Alternatives are 'contain' or 'fill'. */
  z-index: 2; /* Place the video *behind* the overlay */
  border-radius: 20%;
  mask-image: radial-gradient(var(--primary-base) 10%, transparent 80%); 
  
}

.overlay-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70rem;
  padding-top: 15rem;
  padding-bottom: 10rem;
  background-image: linear-gradient(180deg, var(--primary-base), 65%, rgba(16, 18, 35, 0.1));
  z-index: 3; 
}

/* ------ ABOUT SECTION ------ */

.about-section-pre-container {
    background-image: radial-gradient(var(--primary-grade), 3%, var(--primary-base));
    padding-bottom: 3rem;
    padding-top: 3rem;
}

.about-grid-container {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    row-gap: 15rem;
    column-gap: 5rem;
    justify-items: center;
    align-items: center;
    margin: 3rem;
    padding: 1rem;
    
      
}

.profile-flex {
    display: flex;
    flex-direction: column;
    background-color: rgba(16, 18, 35, 0.4);
    backdrop-filter: blur(8px);
    border: 0.5rem var(--secondary-base) solid;
    border-radius: 2rem;
    margin: 1rem;
    padding: 1rem;
    box-shadow: 10px 5px 5px var(--secondary-shade);
    
}

.profile-img {
    max-width: 20rem;
    width: 90%;
    margin: 0 auto;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.about-heading {
    margin-bottom: 1rem;
    text-align: center;
}

.about-paragraph {
    margin-bottom: 1rem;
    text-align: center;
}

/*----------Logo Scroll----------------------*/

.logo-banner-box {
    margin-top: 4rem;
    margin-bottom: 4rem;
}


.logo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 3rem;
    column-gap: 1rem;
    justify-items: center;
    align-items: center;
    margin: 3rem;

    
}

.logos{
    max-height: 4rem;
    max-width: auto;
}

/*------------Strategic Cartesian Framework--------*/

.SCF-section-background {
    background-image: radial-gradient(var(--primary-grade), 3%, var(--primary-base));
    padding-bottom: 3rem;
    padding-top: 3rem;
}


.SCF-heading {
    margin-bottom: 1rem;
    margin-top: 3rem;
    text-align: center;
}

.SCF-paragraph {
    margin-bottom: 1rem;
    text-align: center;
}

.explain-grid {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    row-gap: 3rem;
    column-gap: 1rem;
    justify-items: center;
    align-items: center;
    margin: 3rem;
}

.explain-grid-imgs {
    max-width: 30rem;
    max-height: 30rem;
    height: auto;
    margin: 1rem;

}

.explain-flexbox-text {
    display: flex;
    flex-direction: column;
    background-color: rgba(16, 18, 35, 0.4);
    backdrop-filter: blur(8px);
    /*border: 0.5rem var(--secondary-base) solid;*/
    border-radius: 2rem;
    margin: 1rem;
    padding: 1rem;
    /* box-shadow: 10px 5px 5px var(--secondary-shade);*/
    
}

.four-card-grid-right {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    row-gap: 3rem;
    column-gap: 1rem;
    justify-items: center;
    align-items: center;
    margin: 3rem;
    background-color: rgba(16, 18, 35, 0.4);
    backdrop-filter: blur(8px);
    border: 0.5rem var(--secondary-base) solid;
    border-radius: 2rem;
    box-shadow: 10px 5px 5px var(--secondary-shade);
}



.four-card-flexbox-text {
    display: flex;
    flex-direction: column;
    margin: 1rem;
    padding: 1rem;

}

/*--------------------Contact Now Section-----------------------*/

.contact-section-background {
    background-image: radial-gradient(var(--primary-grade), 3%, var(--primary-base));
    padding-bottom: 3rem;
    padding-top: 3rem;
}
.contact-heading {
    margin-bottom: 1rem;
    margin-top: 3rem;
    text-align: center;
}
.contact-now-button {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    margin-top: 6rem;
    

}


/*----------------------Case Study Section---------------*/

.case-study-section-background {
    background-image: radial-gradient(var(--primary-grade), 3%, var(--primary-base));
    padding-bottom: 3rem;
    padding-top: 3rem;
}

.case-study-heading {
    margin-bottom: 1rem;
    margin-top: 3rem;
    text-align: center;
}

.case-study-paragraph {
    margin-bottom: 1rem;
    text-align: center;
}

.case-study-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 3rem;
    column-gap: 1rem;
    justify-items: center;
    align-items: center;
    margin: 3rem;
}

.case-study-flex-card {
    display: flex;
    flex-direction: column;
    background-color: rgba(16, 18, 35, 0.4);
    backdrop-filter: blur(8px);
    border: 0.5rem var(--secondary-base) solid;
    border-radius: 2rem;
    margin: 1rem;
    padding: 1rem;
    box-shadow: 10px 5px 5px var(--secondary-shade);
}

/*--------------Feature Section-------------------------*/

.feature-section-background {
    background-image: radial-gradient(var(--primary-grade), 5%, var(--primary-base));
    padding-bottom: 3rem;
    padding-top: 3rem;
}

.feature-section-heading {
    margin-bottom: 1rem;
    margin-top: 3rem;
    text-align: center;
}

.feature-section-card-heading {
    margin-bottom: 1rem;
    margin-top: 1rem;
    text-align: center;
    color: var(--secondary-base);
}

.feature-section-paragraph {
    margin-bottom: 1rem;
    text-align: center;
    color: var(--tertiary-base);
}

.feature-section-grid-cards {
    display: grid;
    grid-template-columns: 1fr 2fr;
    row-gap: 3rem;
    column-gap: 1rem;
    justify-items: center;
    align-items: center;
    margin: 3rem;
    background-color: rgba(16, 18, 35, 0.4);
    backdrop-filter: blur(8px);
    border-radius: 2rem;
    padding: 1rem;
}

/*---------------Projects----------------------*/

.project-section-background {
    background-image: radial-gradient(var(--primary-grade), 5%, var(--primary-base));
    padding-bottom: 3rem;
    padding-top: 3rem;
}

.project-section-heading {
    margin-bottom: 1rem;
    margin-top: 3rem;
    text-align: center;
}

.project-section-paragraph {
    margin-bottom: 1rem;
    text-align: center;
    color: var(--tertiary-base);
}

.project-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 3rem;
    column-gap: 1rem;
    justify-items: center;
    align-items: stretch;
    margin: 3rem;
}

.project-section-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
    background-color: rgba(16, 18, 35, 0.4);
    backdrop-filter: blur(8px);
    border: 0.5rem var(--secondary-base) solid;
    border-radius: 2rem;
    margin: 1rem;
    padding: 2rem;
    box-shadow: 10px 5px 5px var(--secondary-shade);
}

.project-section-card:hover {
    box-shadow: 10px 5px 5px var(--secondary-tint);
}

.project-section-img {
    max-width: 30rem;
    height: auto;
    margin: 0 auto;
    border-radius: 0.8rem;
    margin-bottom: 1rem;
    
}

/*--------------------Software-------------------*/

.software-section-background {
    background-image: radial-gradient(var(--primary-grade), 5%, var(--primary-base));
    padding-bottom: 3rem;
    padding-top: 3rem;
}

.software-section-title-heading {
    margin-bottom: 1rem;
    margin-top: 3rem;
    text-align: center;
}

.software-section-heading {
    margin-bottom: 1rem;
    margin-top: 1rem;
    margin-left: 1rem;
    text-align: center;
}

.software-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    row-gap: 2rem;
    column-gap: 1rem;
    justify-items: center;
    align-items: center;
    margin: 2rem;
    /*
    background-color: rgba(16, 18, 35, 0.4);
    backdrop-filter: blur(8px);
    border-radius: 2rem;*/
}

.software-logo-flex {
    display: flex;
    flex-direction: row;
    margin: 1rem;
    padding: 1rem;
    justify-content: center;
    align-content: center;
    
}

.software-logo-img {
    
    max-height: var(--text-h5);
    width: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    
}

/*------------Articles----------*/

.article-section-background {
    background-image: radial-gradient(var(--primary-grade), 5%, var(--primary-base));
    padding-bottom: 3rem;
    padding-top: 3rem;
}

.article-section-title-heading {
    margin-bottom: 1rem;
    margin-top: 3rem;
    text-align: center;
}

.article-title-links {
    padding-bottom: 2rem;
}

.article-title-links:link {
    font-size: var(--text-h5);
    color: var(--white);
}
.article-title-links:visited {
    font-size: var(--text-h5);
    color: var(--white);
}
.article-title-links:active {
    font-size: var(--text-h5);
    color: var(--white);
}

.article-title-links:hover {
    font-size: var(--text-h5);
    color: var(--secondary-base);
}
.article-list {
    text-align: left;
}

.article-titles {
    margin: 2rem;
    background-color: rgba(16, 18, 35, 0.4);
    backdrop-filter: blur(8px);
    border-radius: 2rem;
    padding: 3rem;
    border: 0.5rem var(--secondary-base) solid;
    box-shadow: 10px 5px 5px var(--secondary-shade);
}

.article-titles:hover {
    box-shadow: 10px 5px 5px var(--secondary-tint);
}

/*-------------Contact Form-----------------*/

.contact-form-background {
    background-image: radial-gradient(var(--primary-grade), 5%, var(--primary-base));
    padding-bottom: 3rem;
    padding-top: 3rem;
}

.contact-section-title-heading {
    margin-bottom: 1rem;
    margin-top: 3rem;
    padding-top: 1rem;
    text-align: center;
}

.contact-section-title-paragraph {
    margin-bottom: 1rem;
    text-align: center;
}

.contact-section-title-paragraph-red {
    margin-bottom: 1rem;
    text-align: center;
    color: var(--secondary-tint);
    
}

.special-key {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    margin: 2rem;
}
.contact-form-img {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-right: auto;
    margin-left: auto;
    max-height: 10rem;
    
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    
    background-color: rgba(16, 18, 35, 0.4);
    backdrop-filter: blur(8px);
    border-radius: 2rem;
    padding: 3rem;
    border: 0.5rem var(--secondary-base) solid;
    box-shadow: 10px 5px 5px var(--secondary-shade);
}

.contact-form:hover {
    box-shadow: 10px 5px 5px var(--secondary-tint);
}

.contact-form-label-text {
    font-size: var(--text-h5);
}

.contact-form-input-field {
    border-radius: 1rem;
    color: var(--black);
    height: 5rem;
    font-size: var(--text-h5);
    margin-top: 0.5rem;
    margin-bottom: 3rem;
    padding: 2rem;
    background-color: ivory;
}

.contact-form-input-field-message {
    border-radius: 1rem;
    color: var(--black);
    font-size: var(--text-h5);
    height: 20rem;
    margin-top: 0.5rem;
    margin-bottom: 3rem;
    padding: 1rem;
    background-color: ivory;
}


.contact-form-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*--------Footer--------*/

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /*justify-items: space-between;*/
    margin: 3rem;
}

.mail-flex-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.social-icons-flex-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}


.footer-paragraph {
    text-align: center;
    font-size: 1.2rem;
    padding: 1rem;
}

.footer-social-icons-img {
    max-width: 5rem;
}

/*---------------Article Main Navigation Page------------------*/

.article-nav-section-background {
    background-image: radial-gradient(var(--primary-grade), 5%, var(--primary-base));
    padding-bottom: 3rem;
    padding-top: 3rem;
}

.article-nav-head-title {
    margin-bottom: 1rem;
    margin-top: 10rem;
    text-align: center;
}
.article-nav-background-card {
    background-color: rgba(16, 18, 35, 0.4);
    backdrop-filter: blur(8px);
    border-radius: 2rem;
    padding: 3rem;
    border: 0.5rem var(--secondary-base) solid;
    box-shadow: 10px 5px 5px var(--secondary-shade);
    
    min-height: 400px;
    margin-bottom: 10rem;
    margin-top: 1rem;
    
}

.new-post-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin: 3rem;
}

.new-post-title-flex-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.new-post-button-flex-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 2rem;
}

.article-nav-descriptions {
    color: var(--tertiary-base);
}


/*---------------------Project Navigation page--------*/

#project-title-heading {
    margin-bottom: 1rem;
    margin-top: 10rem;
    text-align: center;
}

/*----------------------Article-Posts--------------------*/

.container-post {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
}

.post-spacer {
    margin-top: 15rem;
    margin-bottom: 10rem;
    margin-left: 3rem;
    margin-right: 3rem;
    min-height: 400px;
}

.post-title-heading {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--tertiary-tint);
}

.post-headings {
    margin-bottom: 2rem;
    margin-top: 2rem;
    text-align: center;
    color: var(--tertiary-tint);
}

.post-paragraph {
    margin-bottom: 2rem;
    text-align: left;
    color: var(--tertiary-tint);
}

.post-list {
    margin-bottom: 2rem;
    text-align: left;
    color: var(--tertiary-tint);
    font-size: var(--text-paragraph);
    list-style: square inside;
    padding-inline-start: 4rem;
}

.post-ol-list {
    margin-bottom: 2rem;
    text-align: left;
    color: var(--tertiary-tint);
    font-size: var(--text-paragraph);
    padding-inline-start: 4rem;
}



.post-img {
    
    max-width: 60rem;
    height: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    
}

figcaption {
    margin-bottom: 2rem;
}

blockquote p::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 8px;
  background: var(--secondary-shade);
}
blockquote {
  color: #535a60;
  padding: 0.5rem 2rem;
  margin-bottom: 2rem; 
  position: relative;
}   

code {
    /*color: var(--tertiary-base);*/
    font-size: var(--text-base);
    text-wrap: wrap;
    
}

pre {
    background-color: var(--black);
    padding: 3rem;
    margin-bottom: 2rem;
    border-radius: 8px;
}

table {
    color: var(--tertiary-base);
    font-size: var(--text-paragraph);
    margin-bottom: 2rem;
}

table, th, td {
    border: 1px solid var(--grey-base);
    border-collapse: collapse;
    padding: 1rem;
}   

.post-links {
    padding-bottom: 2rem;
}

.post-links:link {
    font-size: var(--text-h5);
    color: var(--secondary-base);
}
.post-links:visited {
    font-size: var(--text-h5);
    color: var(--secondary-base);
}
.post-links:active {
    font-size: var(--text-h5);
    color: var(--secondary-base);
}

.post-links:hover {
    font-size: var(--text-h5);
    color: var(--secondary-tint);
}