styles.css

/* Google fonts */
  /* @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300&display=swap'); */
  @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;700&display=swap');
body {
    font-family: 'Source Sans 3', sans-serif;
}

/* SUMMARY
1. GLOBAL
    2. LAYOUT
    3. SECTION
    4. CARD
*/

/*** 1. GLOBAL ***/

/* 
 *   Reset / Normalize
*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}



/* Variables
   ============================= */

   :root {
    --color-primary: #C271FF;
    --color-secondary: #071629;
    --color-black:  #090909;
    --color-white: #ffffff;
    --color-grey: #a0a0a0;
    --color-light-grey: #f3f3f3;
    --color-dark-grey: #353535; 
    --color-background-dark: #071629;
    --color-background-light: rgb(245, 240, 240);
    --color-text-white: #ffffff;
    --link-hover-color: #C271FF;

    --container-max-width: 62.5rem; 
  
    --text-color: var(--color-white);
  
    --font-family-base: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-title: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  
    --font-size-small: 1.2rem;
    --font-size-medium: 1.6rem;
    --font-size-large: 1.8rem;
    --font-size-x-large: 2.3rem;
    --font-size-xx-large: 4.8rem;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --line-height-small: 1.2;
    --line-height-base: 1.5;
    --line-height-big: 1.8;

    /* flex */
    --d-flex: flex;
    --flex-direction-row: row;
    --flex-column-wrap : column wrap;
    --flex-column-nowrap : column nowrap;
    --flex-row-wrap : row wrap;
    --flex-row-nowrap : row nowrap;
    --flex-direction-column: column;
    --flex-justify-content-center:center;
    --flex-justify-content-start:flex-start;
    --flex-justify-content-end:flex-end;
    --flex-justify-content-between: space-between;
    --flex-justify-content-around: space-around;
    --flex-align-items-center: center;
    --flex-align-items-start: flex-start;
    --flex-align-items-end: flex-end;
    --flex-align-items-between: space-between;

  
    /** SECTION **/
     --section-padding-y: 0rem 0;
    --section-header-padding: 0 0 3rem;
    --section-header-align: center;
    --section-title-font-size: var(--font-size-xx-large);
    --section-title-font-weight: var(--font-weight-bold);
    --section-title-line-height: var(--line-height-small);
    --section-title-margin: 0;
    --section-title-color: var(--color-black);
    --section-tagline-transform: uppercase;
    --section-tagline-color: var(--color-primary);
    --section-tagline-font-family: var(--font-family-headings);
    --section-tagline-font-weight: var(--font-weight-bold);
    --section-tagline-margin: 0;
    --section-body-padding: 2rem 0 4rem;
    --section-footer-padding: 3rem 0 0;
    --section-footer-align: center;
  
    /** HEADER **/
    --header-padding: 4rem 0 0;
    --header-logo-position: relative;
    --header-logo-link-display: inline-block;
    --header-logo-link-position: absolute;
    --header-logo-link-top: -1rem;
    --header-logo-link-left: 0;
  
    /** FOOTER **/
    --footer-padding: 5rem 0 1rem;
      
    /** BUTTON **/
    --button-display: inline-block;
    --button-padding: 1.5rem 3rem;
    --button-border: var(--color-primary) solid 0.2rem;
    --button-text-decoration: none;
    --button-font-size: var(--font-size-large);
    --button-hover-text-decoration: none;
  
    /** MOTION **/
    --transition-duration: .3s;
    --transition-cubic-bezier: cubic-bezier(0.17, 0.67, 0, 1.01);
  }

/* Body */

.brd {
    border: 2px solid #D73953;
}

/* *{
    border: 2px solid #D73953;
} */

p, h1, h2, h3, h4, h5, h6 {
    margin: 10px;
}

section {
    margin: auto auto;
}

/* Base containers */
.container {
    max-width: 62.5rem;
    /* color: var(--color-white); */
    display: var(--d-flex);
    flex-flow: var(--flex-column-nowrap);
    justify-content: var(--flex-justify-content-center); 
    align-items: var(--flex-align-items-center);
    margin:auto auto;    
    /* border: 1px solid var(--color-primary); */
}

/* Header */

section, header {
    width: 99.85%;
}

header {
    position: absolute;
}

header >.container{
    flex-flow: var(--flex-row-wrap);
    justify-content: var(--flex-justify-content-between); 
    margin-top: 2rem;    
}
  .close:hover, .hamburger:hover, .logo:hover {
    color: var(--color-primary);
    opacity: 0.5;
    cursor: pointer;  
  }  
  
header >.container .nav-items {
    color: var(--color-text-white);
    display: var(--d-flex);
    flex-flow: var(--flex-row-nowrap);
    justify-content: var(--flex-justify-content-end); 
    gap: 2.5rem;
}
.nav-items a {
    text-decoration: none;
    color: var(--color-text-white)
}

.nav-items a:hover {
    color: var(--color-primary);
    border-bottom: 1px ridge var(--color-primary);
    cursor: pointer;
    -webkit-transition: all 0.5s ease-in-out;
}

header >.container >.hamburger, .close {
    display: none;
}

/* Banner section */

.banner-section {
    color: var(--color-text-white);
    height: 65rem;
    background-image: url(./assets/images/Object.png);
    background-color: var(--color-background-dark);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    margin: auto 0px;
}

.banner-section >.container {
    /* padding: 10rem 0 1rem 0 ; */ 
    height: 45rem;
    display: var(--d-flex);
    flex-flow: var(--flex-column-nowrap);
    justify-content: var(--flex-justify-content-around); 
    align-items: var(--flex-align-items-center);
    /* border: 2px solid green; */
    /* margin: auto auto; */
}

.banner-section >.container >.get-schooled-container {
    display: var(--d-flex);
    flex-flow: var(--flex-column-nowrap);
    justify-content: var(--flex-justify-content-between); 
    align-items: var(--flex-align-items-center);
    margin-top: 12rem
}

.get-schooled-container >div{
    display: var(--d-flex);
    flex-flow: var(--flex-column-wrap);
    justify-content: var(--flex-justify-content-start); 
    align-items: var(--flex-align-items-center);
    /* border: 2px solid green; */
    margin-bottom: 2rem;
}

h1[class="get-schooled"]  {
    margin: 0rem;
    font-size: 7rem;
    font-weight:700;
}
h1[class="get-schooled"]:hover  {
    color: var(--color-primary);
    -webkit-transition: all 1.5s ease-in-out;
    cursor: context-menu;
    font-weight: 900;
    font-size: 8rem;
}

p[ class="title"] {
    font-size: 2.2rem;
}

p[ class="title"] >b{
    color: var(--color-primary);
}


.h-d-t-w h6 {
    font-size: 1.2rem;
}

.banner-section >.container >.get-schooled-container >div {
    display: var(--d-flex);
    flex-flow: var(--flex-row-nowrap);
    justify-content: var(--flex-justify-content-end); 
    gap: 2.8rem;
    font-size: 1rem;
}

.banner-section .learn-from-the-pros-container {
    margin-top: 12rem;
    width: 100%;
    display: var(--d-flex);
    flex-flow: var(--flex-column-wrap);
    justify-content: var(--flex-justify-content-end);
    align-items: center;
    gap: 3rem;
    /* border: 1px solid #D73953; */
}

.banner-section .pros-container {
    width: 100%;
    display: var(--d-flex);
    flex-flow: var(--flex-row-wrap);
    justify-content: var(--flex-justify-content-between);
}

.banner-section .pros-container >.pro{
    max-width: 12rem;
    display: var(--d-flex);
    flex-flow: var(--flex-column-wrap);
    justify-content: var(--flex-justify-content-start);
    align-items: var(--flex-align-items-center);
}

.banner-section .pros-container .pro p, .banner-section .pros-container .pro-text {
    margin: .3rem;
    text-align: center;
}

.banner-section .pro-photo {
    width: 10rem;
    height: 10rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
    border-radius: 100%;
}

.banner-section >.container >.get-schooled-container >.register-btn, .register-btn {
    color: var(--color-text-white);
    background-color: var(--color-primary);
    padding: .7rem 1.2rem;
    border-radius: 1.5rem;
    border: 0;
    box-shadow: 0 0 .5rem var(--color-dark-grey);
    /* font-weight: 600; */
    font-size: 1.2rem;
}

.banner-section >.container >.get-schooled-container >.register-btn:hover, .register-btn:hover    {
    opacity: 0.8;
    /* color: var(--color-dark-grey); */
    cursor: pointer;
    box-shadow: 0 0 2rem var(--color-dark-grey);
}

/* Testimonial section */

.testimonial-section {
    color: var(--color-white);
    background-color: var(--color-primary);
}

.testimonial-container {
    display: var(--d-flex);
    flex-flow: var(--flex-row-nowrap);
    justify-content: var(--flex-justify-content-between); 
    gap: 2rem;
    padding: 6rem 0;
}

.testimonial-container >.testimonial-text {
    /* border: 2px solid #D73953; */
    font-size: var(--font-size-medium);
}
.testimonial-text p, .testimonial-text h6, .testimonial-container >.testimonial-text i {
    margin: 1rem 0;
}

/* most-popular-tutorial-section */
body {
    background-color: #090909;
}
.most-popular-tutorial-section {
    background-color: var(--color-background-light);
    border: 1px ridge;
    color: var(--color-black);
}

.most-popular-tutorial-section >.most-popular-tutorial-container{
    /* max-width: fit-content; */
    padding: 4rem 0;
}

.most-popular-tutorial-container >.tutorial-cards-container{
    max-width: inherit;
    display: var(--d-flex);
    flex-flow: var(--flex-row-wrap);
    justify-content: var(--flex-justify-content-center); 
    gap: 1rem;
    padding: 6rem 0;
    /* border: 1px solid #D73953; */
}

.tutorial-cards-container .tutorial-card {
    width:14rem;
    height: auto;
    /* border: 1px solid var(--color-primary); */
}

.tutorial-cards-container .tutorial-card:hover {
    cursor: pointer;
    /* padding: .2rem; */
    box-shadow: 0 0 2rem var(--color-grey);
    transform:translateY(-2rem);
    -webkit-transition: all 0.5s ease-in-out;
  }

.tutorial-cards-container .tutorial-card-image {
    width:inherit;
    height: 9rem;
    border-radius: 5px;
    border: 1px solid var(--color-primary);
    background-repeat: no-repeat;
}

.tutorial-card .tutorial-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tutorial-card  .testimonial-img {
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
}

.tutorial-card .testimonial, .tutorial-card .rating {
    display: flex;
    align-items: center;
    justify-content: var(--flex-justify-content-between);
    color: var(--color-primary);
    font-weight: bold;
}

/*********************Membership section *******************/
.membership-section {
    color: var(--color-text-white);
    background-color: var(--color-background-dark);
    
}

.membership-section >.container {
    /* border: 1px solid #D73953; */
    padding: 4rem 0;
    gap: 3rem;

}

.membership-section >.membership-container >.members-container{
    display: var(--d-flex);
    flex-flow: var(--flex-row-wrap);
    justify-content: var(--flex-justify-content-center);
}

.membership-container >.members-container >div{
    /* padding-top: 1rem; */
    max-width: 15rem;
    display: var(--d-flex);
    flex-flow: var(--flex-column-nowrap);
    justify-content: var(--flex-justify-content-center);
    align-items: var(--flex-align-items-center);
    /* border: 1px solid #D73953; */
}
.membership-container >.members-container >div p{
    text-align: center;
    margin: 0;
    line-height: 1.5rem;
    /* border: 1px solid #D73953; */
}

/* ***************** FAQ SECTION ***************** */
.faq-section {
    background-color: var(--color-background-light);
}
 .faq-container {
    padding: 3rem 0rem;
    /* border: 1px solid #D73953; */
 }
.double-h-d-t-w-container {
    margin-top: 2rem;
    display: var(--d-flex);
    flex-flow: var(--flex-row-wrap);
    justify-content: var(--flex-justify-content-center);
    align-items: var(--flex-align-items-center);
    /* border: 1px solid #D73953; */

}
.double-h-d-t-w {
    margin-bottom: 2rem;
    width: 100%;
    display: var(--d-flex);
    flex-flow: var(--flex-row-wrap);
    justify-content: var(--flex-justify-content-center);
    align-items: var(--flex-align-items-center);
    gap:3rem;
    /* border: 1px solid #D73953; */

}

.h-d-t-w {
    width: 22rem;
    /* gap: 2rem; */

}

/* ***************** footer section ***************** */

.footer-section {
    display: flex;
    flex-flow: var(--flex-column-nowrap);
    justify-content: center;
    align-items: center;
    background-color: var(--color-background-dark);
    color: var(--color-text-white);
    gap: 1.5rem;
}

.footer-container {
    width: 70%;
    flex-flow: var(--flex-row-wrap);
    justify-content: var(--flex-justify-content-between); 
    margin-top: 1rem;
    gap: 5rem;
    /* border: 1px solid #D73953; */
}
p[class="tm"] {
    color: var(--color-grey);
}



@media screen and (max-width: 768px) {
    .container {
        width: 99%;
        padding-left:.3rem;
        padding-right: .3rem;
        /* color: var(--color-text-white); */
        display: var(--d-flex);
        flex-flow: var(--flex-column-nowrap);
        justify-content: var(--flex-justify-content-center); 
        align-items: var(--flex-align-items-center);
        align-items: var(--flex-align-items-center);
        /* border: 1px solid #D73953; */
    
        align-items: var(--flex-align-items-center);    
        /* border: 1px solid #D73953; */
    
    }
    
    header >.container >.hamburger, header >.container .close {
      /* margin: 1rem 0 0 1rem; */
      display: block;
      font-size: 2rem;
      height: fit-content;
      width: fit-content;
      cursor: pointer;
      color:var(--color-text-white);
    }

    .navbar-container{
        position:fixed;
        display: flex;
        flex-direction: column;
        justify-content: start;
        gap: 5rem;
        top: 0px;
        right: -100%;
        z-index: 2;
        width: 100%;
        height: 100vh;
        background-color: var(--color-primary);
        -webkit-transition: all 0.5s ease-in-out;
      }

      header >.container .nav-items {
        display: var(--d-flex);
        color: var(--color-text-white);
        display: var(--d-flex);
        flex-flow: var(--flex-column-nowrap);
        justify-content: var(--flex-justify-content-start); 
        font-size: 3rem;
        gap: 2.5rem;
        text-align: center;
        -webkit-transition: all 0.5s ease-in-out;
    }    

      .nav-items a:hover{
        width: 100%;
        background-color: var(--color-background-light);
        color: var(--color-primary);
        cursor: pointer;
      }    
      .banner-section {
        color: var(--color-text-white);
        height: 60rem;
        background-image: url(./assets/images/Object.png);
        background-color: var(--color-background-dark);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        margin: auto 0px;
    }

    .banner-section >.container >.get-schooled-container {
        /* display: var(--d-flex);
        flex-flow: var(--flex-column-nowrap);
        justify-content: var(--flex-justify-content-between); 
        align-items: var(--flex-align-items-center); */
        margin-top:1rem;
        height: 20 rem;
        /* border: 1px solid #272122; */
    }

    .banner-section .learn-from-the-pros-container {
        margin-top: 3rem;
    }
    
    
    
    .most-popular-tutorial-container >.tutorial-cards-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        /* border: 2px solid #D73953; */
    }  
    .membership-container >.members-container >div{
        margin-top: 2rem;
    }

    h1[class="get-schooled"]  {
        margin-top: 6rem;
        font-size: 3rem;
        font-weight:700;
    }    
    .footer-container {
        margin-top: 3rem;
        /* border: 2px solid #D73953; */

    }
    
}