/* ==========================
   GLOBAL
========================== */
   html {
        scroll-behavior: smooth;
        scroll-padding-top: 10vh;
   }

    a {
        text-decoration: none;

    }

    button {
        cursor: pointer;
        transition: .3s;
    }

    .hide {
        visibility: hidden;
    }

    *, *::before, *::after {
        box-sizing: border-box;
    }

/* ==========================
   LARGE
========================== */

    .large_layout{
        display: block;
    }
    .medium_layout{
        display: none;
    }
    .small_layout{
        display: none;
    }

    /* NAVBAR (LARGE) */
    header {
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
        position: sticky;
        top: 0;
        z-index: 100;
        font-size: 2vw;
    }

   .lrg-nav-links{
        display: flex;
        justify-content: space-between;
        list-style: none;
        padding: 0;
        font-size: 1.1em;
    }

    .navbar li {
        align-content: center;
        padding: 0 2vw;
    } 

    .navbar a, .navbar a:visited {
        color: #00154F;
        font-weight: 600;
    }

    .navbar a:hover {
        color: #0058CC;
    }

    .logo img {
        width: 8vw;
    }

    .Celtri{
        margin:0;
        font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
        font-size: 1.2em;
        color: #f95506 ;
        font-weight: 900;
    }

    .Tech{
        margin:0;
        padding-left: 1vw;
    }

    .fp-right  {
            border:  1px solid green;
            display: none;
    }

 
    /* HERO (LARGE) */
    .hero {
        padding-left: 3vw;
        padding-bottom: 10vh;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: center;

    }

    .hero h1 {

        font-size: 1.5em;
        margin-bottom: 20px;

    }

    .hero h1 span {

        color: #0058CC;

    }
    
    .hero p {

        color: #666;
        line-height: 1.7;
        font-size: 0.6em;
        /* margin-bottom: 30px; */

    }

    .hero-image img {
        width:100%;
        display: block;
        padding-top: 8vh;
    }

    .sign-in  {
        cursor: pointer;
        background-image: linear-gradient(#003780, #0058CC);
        color: white;
        /* border-radius: 5px; */
        padding: 2vh 6vw;
        font-weight: 700;
    }

    .sign-in:hover  {
        background-image: linear-gradient(#0058CC,#003780 );
        transform: translateY(-3px);
    }

    .sign-up  {
        cursor: pointer;
        background-image: linear-gradient(#fff, #d4cfcfe5);
        color: #00154F;
        /* border-radius: 5px; */
        padding: 2vh 6vw;
        font-weight: 700;
        margin-left: 1vw;
    }

    .sign-up:hover  {
        background-image: linear-gradient(#d4cfcfe5,#fff );
        transform: translateY(-3px);
    }



    /* SECTION (LARGE) */ 
    .section {
        width: 90vw;
        padding-left: 3vw;
        padding-bottom: 15vh;
        font-size : 3vw;
    }

    .section-title {

        display: flex;
        justify-content: space-between;
        align-items: center;
        /* margin-bottom: 25px; */

    }

    .section-title h2 {

        font-size: 2.5vw;
        padding: 2vh 0 0 0;
        font-size: 1em;
    }

    .section-title a {

        color: #2563eb;
        font-weight: bold;
        font-size: 0.7em;
    }


    /* CARD (LARGE) */
    .card-container {

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        gap: 25px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
        transition: .3s;
    }

    .card {

        background: white;

        height: 60vh;
        
        border-radius: 18px;

    }

    .card-container:hover {

        transform: translateY(-8px);

    }

    .card-body {
        
        display: flex;
        justify-content: center;
        align-items: center;
        
    }


    .card-body h3 {

        margin-bottom: 12px;

    }

    .card-body p {

        color: #666;

        line-height: 1.6;

        margin-bottom: 15px;

    }


    /* VIDEO (LARGE) */
    .video-container:hover {

        transform: translateY(-20px);
    }

    .video-container img {
        display: block;
        margin: auto;
        width: auto;
        /* height: 70vh; */
        width: 70vw;
        object-fit: contain;
        padding-top: 5vh;
    }

    /* QUIZ (LARGE) */
    .quiz-card {

        background: white;

        border-radius: 18px;

        padding: 20px 20px 50px 20px;

        text-align: center;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

        transition: .3s;

    }

    .quiz-card:hover {

        transform: translateY(-8px);
        background: #f9f9f9;

    }

    .quiz-card img{
        width: 100%;
        border: 3px solid #C8A2C8;
        border-radius: 5px;
    }

    .quiz-card h3 {
        
        margin-bottom: 30px;
        font-size: 1.5vw;

    }
    
    /* BOOK (LARGE) */
    .book-container{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        column-gap: 20px;
    }


    .book-card {
        background: white;
        width: 50%;
        height: 60vh;
        border-radius: 18px;
        padding: 10px 20px;
        text-align: center;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
        transition: .3s;
        display: grid;
        grid-template-columns: 60% 40%;
        grid-template-rows: 20% 45% 20% 10%;
        grid-template-areas:
        "title title"
        "bkimg writeup"
        "bkimg price"
        "bkimg bkbtn"; 


    }

    .book-card:hover {

        transform: translateY(-8px);

    }

    .book-card img {
        grid-area: bkimg;
        height: auto;
        width: 60%;
        margin: 0 auto;
    }

    .book-card h3 {
         grid-area: title;
        font-size: 0.8em;
    }

    .book-card span {
        grid-area: writeup;
        font-size: 1.2em;
    }

    .book-card p {
        display: grid;
        grid-area: price;
        font-size: 0.5em;
        color: #0058CC;
        font-weight: bold;
        align-items: end;
    }

    .book-card button {
        grid-area: bkbtn;
        width: 100%;
        background-image: linear-gradient(#003780, #0058CC);
        color: white;
        border: none;
        /* font-size: 1em; */

    }

    .book-card button:hover {

         background-image: linear-gradient(#0058CC,#003780 );

    }
    
    .book-card * {
        /* border: 1px solid greenyellow; */
    }

    /* CONTACT (LARGE) */
    .contact-content {
        display: flex;
        justify-content: space-between;
    }

    .contact {
        width: 60%;
        max-height: 60vh;
        margin: 0;
        padding-top: 8vh;
    }

    .logo-pic {
        display: flex;
        flex-direction: column;
        width: 20%;
        height: auto;
        float: right;
        /* padding-right: 10%; */
        /* border: 2px dotted red; */
        justify-items: center;
        align-items: center;
    }

    .logo-pic h2{
        text-align: center;
    }

    .logo-img{
        width: 100%;
    }


    input,
    textarea,
    label {
	display: block;
	margin: 0 auto;
	width: 100%;
    }

    input,
    textarea {
        background-color: transparent;
        border: 0;
        border-bottom: 2px solid #708090;
        font-size: 16px;
        /* padding: 2vh 0; */
        font-family: 'Roboto Mono', monospace;
    }

    textarea {
        /* margin-top: 15px; */
    }


    label {
        padding: 1vh 0;
        color: #e03d02;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-size: 0.5em;
    }

    input[type=text],
    input[type=email] {
        padding-left: 10px;
    }

    input[type=submit] {
        background-color: #f95506;
        border-radius: 2px;
        border: 0;
        box-shadow: rgba(1, 60, 136, .5) 0 -1px 3px 0 inset, rgba(0, 44, 97, .1) 0 3px 6px 0;
        box-sizing: border-box;
        color: #fff;
        cursor: pointer;
        display: inherit;
        font-family: "Space Grotesk", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 18px;
        font-weight: 700;
        line-height: 24px;
        margin: 0;
        padding: 16px 20px;
        position: relative;
        text-align: center;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        vertical-align: baseline;
        transition: all .2s cubic-bezier(.22, .61, .36, 1);
        margin-top: 30px;
    }

    input[type=submit]:hover {
        background-color: #e03d02;
        transform: translateY(-2px);
    }




    /* FOOTER (LARGE) */
    footer {

        background: #0f172a;

        color: white;

        text-align: center;

        padding: 30px;

        margin-top: 50px;

    }




    .post-contact-us {
        display: flex;
        flex-direction: column;
        height: 50vh;
        justify-content: center;
        align-items: center;

    }

    .post-contact-us p {
        font-size: larger;
        font-weight: 500;
        text-align: center;
    }

    .post-contact-us img {
        width: 150px;
    

    }

    .fa-angles-left{
        color: #f95506;
    }

    #back2main:hover .fa-angles-left {
        transform: translateX(-10px);
    }



/* ==========================
   MEDIUM
========================== */
/* @media(max-width:768px) { */
@media(max-width:660px) {
    html {
        scroll-padding-top: 15vh;
   }

    .large_layout{
        display: none;
    }
    .medium_layout{
        display: block;
        /* border: 2px dashed orange; */
    }
    .small_layout{
        display: none;
    }

    /* NAVBAR (MEDIUM) */

    .med-nav-links{
        display: flex;
        justify-content: space-between;
    }

    .navbar-med li {
        align-content: center;
        padding: 0 2vw;
    } 

    .navbar-med a, .navbar-med a:visited {
        color: #00154F;
        font-weight: 600;
    }

    .navbar-med a:hover {
        color: #0058CC;
    }

    .logo img {
        width: 8vw;
    }

    .med-nav-links {

        display: flex;
        list-style: none;
        padding: 0;
        font-size: 1.1em;
    }
    
    /* HERO (MEDIUM) */
    .hero-med {
        display: grid;
        height: 90vh; 
        
    }
    .hero-text-med h1{
        grid-area: h1-med;
        font-size: 5.5vw;
        text-align: center;
    }

    .hero-text-med p{
        font-size: 2.5vw;
        text-align: justify;
        padding: 0 4vw;
    }

    .login-btn-med {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1vw;
        padding: 3vh 4vw;
    }


    .hero-img-med {
        display: flex;
        justify-content: center;
    } 

    .hero-img-med img 
    {   
        width: 60vw;
        height: auto;
    }

     /* SECTION (MEDIUM) */
    .section {
        display: grid;
        grid-template-areas:
		"title"
		"med";
        justify-content: center;
        align-content: center;

    }

    .med-section {
        padding-bottom: 10vh;
    }

    .med-section-title h2 {
        grid-area: title;
        text-align: center;
        font-size: 3.5vw;
    }

    .med-section-content {
        grid-area: med;  
        /* text-align: center; */
        /* border: 3px dashed lightseagreen ; */
    }

    .book-med, .vid-med {
        display: flex;
        justify-content: center;
        align-content: center;
    }
    

    /* VIDEO (MEDIUM) */
    .pic_mobile {
        width: 70vw;
        height: auto;
    }

    .pic_mobile:hover {

        transform: translateY(-20px);
    }


    /* QUIZ (MEDIUM) */
    .quiz-mobile-card p {
        color: #1f1f1f;
        background-color: white;
        font-size: 1.2em;
        text-align: center;
        padding: 5vw 0;
        margin: 5vh 0;
        /* border: 2px solid white; */
        border-left: 2px solid #0b57d0;
        border-top: 2px solid #720091;
        border-radius: 10px;
        height: 20%;
        font-family: "Roboto", sans-serif;
        font-weight: 600;
    }


    /* BOOK (MEDIUM) */

    .med-book-card{
        border: 2px solid whitesmoke;
        background-color: white;
        width: 70vw;
        height: 70vh;
        display: grid;
        grid-template-columns: 25% 35% 15% 23%;
        grid-template-rows: 15% 45% 15% 25%;
        grid-template-areas:
        "title title title title"
        "bkimg bkimg writeup writeup"
        "bkimg bkimg price price"
        "bkimg bkimg bkbtn bkbtn";
        align-items: end;
        border-radius: 20px;
    }

    .med-book-card h3{
        grid-area: title;
        text-align: center;
        /* padding: 3vh 0; */
    }

    .med-book-card .writeup{
        grid-area: writeup;
        font-size: 0.8em;
        align-self: end;
        height: 80%;
    }

    .med-book-card img{
        grid-area: bkimg;
        background-color: lightblue;
        height: 57vh;
        width: auto;
        justify-self: start;
    }

    .med-book-card .price{
        grid-area: price;
        color: black;
        text-align: center;
        margin: 10;
        align-self: end;
        font-size: 0.8em;
        color: #2563eb;
        font-weight: bold;
        margin-bottom: 1vh;

    }
    .med-book-card button{
        grid-area: bkbtn;
        width: 100%;
        height: 8vh;
        background: #2563eb;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 0.8em;
        margin-bottom: 1vh;
        align-self: start;
    } 

    .logo-pic
    {
       height: 80vh;
       width: 25%;
    }

    .logo-pic img {
        margin-top: 6vh;
    }

    .contact {
        padding-top: 2vh;
    }

}


.hero-med h1 span {

        color: #0058CC;

        }


/* ==========================
   SMALL
========================== */
@media(max-width:500px) {
    .large_layout{
        display: none;
    }
    .medium_layout{
        display: none;
    }
    .small_layout{
        display: grid;
        grid-template-areas: 
        "mainContent sideBar";

    }
    
    html {
        scroll-padding-top: 0;
    }

    .side-bar {
        display: flex;
        width: 15vw;
        grid-area: sideBar;
         /* border: 3px solid violet; */
         box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    }

    .side-bar-links {
        display: flex;
        top: 0;
        position: sticky;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        height: 98vh;
        width: 100%;
    }  

    .side-bar-links a, .side-bar-links a:visited{
        color: #00154F;
    }

    .side-bar-links a:hover{
        padding-bottom: 10px;
        border-bottom: 5px solid #0058CC;
    }

    .side-bar-links a:active{
        color: #0058CC;
    }

    .side-bar-link{
        display: block;
        text-align: center;
        
    }

    .side-bar-links span{
        display: block;
    }

    .side-bar-links i{
        display: block;
        font-size: larger;
    }

    .main-content {
        width: 80vw;
        /* height: 95vh; */
        /* border: 3px solid lightseagreen; */
        grid-area: mainContent;
    }

    .section {
        width: 100%;
        height: 100%;
    }


    .hero {
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .hero h1 {
        font-size: 2.3rem;
        margin-bottom: 20px;
        text-align: center;
        margin: 1vh 0;
        padding-top: 5%;

    }
    
    .hero p {

        color: #666;
        line-height: 1.7;
        font-size: 1.3rem;
        text-align: center;

    }

    .hero img {
        padding: 0 0 2vh 0;
    }

    .login-btns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        justify-items: center;
        /* border: 2px dashed peru; */
    }
    
    .login-btns button {
        margin: 0;
        width: 90%;
        font-size: 1.1rem;
    }

    .s2, .s3, .s4, .s5 {
        display: grid;
        /* border: 2px dashed firebrick; */
        padding: 0;
        min-height: 100vh;
        align-content: stretch;
        grid-template-areas: 
        "smTitle"
        "content";
    } 

    .section-title h2{
      display: inline-block;
      /* width: 100%; */
      width: 70vw;
      font-size: 2rem;
      /* border: 1px solid #00154F; */
      text-align: center;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .video-container img {
        width: 65vw;
        padding-bottom: 10vh;
    }



    .content_sm{
        grid-area: content;
        /* background-color: palegoldenrod; */
        margin-top: 0;
        padding-top: 0;
    }

    .book-card{
        width: 85%;
        height: 40vh;
    }

    .book-card h3{
        font-size: 1.2em;
    }

    .book-card img {
        width: 50%;
    }

    .book-card .writeup_sm {
        font-size: 1em;
    }

    .book-card p {
        font-size: 1.2em;
    }

    .book-card:hover {

        transform: translateY(0px);

    }


    .contact {
        width: 100%;
    }

    label {
        font-size: 1em;
    }

    input[type=text],
    input[type=email] {
        padding: 1vh 0;
    }

}