/*start-home*/
    @media screen and (min-width:315px) and (max-width:600px){
       .main h1 ,h2{
        font-size: 30px !important;
       }
      .word .title{
        font-size: 80px !important;
        left: 0rem !important;
        padding-top: 15px;
      } 
      .certifications .title{
        font-size: 35px !important;
      }
      .flex p{
        font-size: 20px;
      }
      .certifications .names {
        font-size: 18px;
      }
      header a {
        color: aliceblue;
        text-decoration: none;
        padding-top: 10px;
        font-size: 1em !important;
        font-weight: 300;
        padding: 0 4%;
        white-space: nowrap;
      }
      .content .text {
        padding: 20px 0 0 10px !important;
        font-size: 20px !important;
        /* padding-block: 5%; */
        /* position: relative; */
        white-space: initial !important;
      }
      .content::before {
        content: "START";
        position: absolute;
        top: -4%;
        left: -21% !important;
        font-size: 20px;
        font-weight: 200;
        padding: 5px 15px;
        color: aliceblue;
      }
      .content::after {
        content: "STILL GOING";
        position: absolute;
        bottom: -4%;
        left: -26% !important;
        font-size: 20px;
        font-weight: 200;
        color: aliceblue;
      }
      .time-line .title{
        font-size: 55px !important;
      }
      .time-line .content {
        margin: auto;
        border-left: 4px solid white;
        position: relative;
      }
      .content .text .left {
        position: absolute;
        font-size: 100% !important;
        font-weight: 700;
        left: -30% !important;
        padding: 5px;
        color: aliceblue;
      }
      
    }
    @media screen and (max-width:600px) {
       .main h1 ,h2{
        font-size: 30px !important;
       }
       .time-line .title{
        font-size: 55px !important;
      }
      .word .title{
        font-size: 80px !important;
        left: 0rem !important;
        padding-top: 15px;
      } 
      .flex p{
        font-size: 20px;
      }
      .certifications .names {
        font-size: 18px;
      }
      header a {
        color: aliceblue;
        text-decoration: none;
        padding-top: 10px;
        font-size: 1.4em;
        font-weight: 300;
        padding: 0 4%;
        white-space: nowrap;
      }
      .content .text {
        padding: 60px 0 0 0;
        font-size: 20px !important;
        /* padding-block: 5%; */
        /* position: relative; */
        white-space: initial;
      }
      .content::before {
        content: "START";
        position: absolute;
        top: -2%;
        left: -25%;
        font-size: 20px;
        font-weight: 200;
        padding: 5px 15px;
        color: aliceblue;
      }
      .content::after {
        content: "STILL GOING";
        position: absolute;
        bottom: -4%;
        left: -20%;
        font-size: 20px;
        font-weight: 200;
        color: aliceblue;
      }
      .time-line .content {
        margin: auto;
        border-left: 4px solid white;
        position: relative;
      }
      .content .text .left {
        position: absolute;
        font-size: 100%;
        font-weight: 700;
        left: -37%;
        /* padding: 5px; */
        color: aliceblue;
        top: 5px;
      }
      .content .text .left2 {
        position: absolute;
        font-size: 100%;
        font-weight: 700;
        left: -40%;
        padding: 5px;
        color: aliceblue;
      }
    }
    @media screen and (min-width:601px) and (max-width:768px) {
      .main h1 ,h2{
        font-size: 40px !important;
       }
       .time-line .title{
        font-size: 65px !important;
      }
       .word .title{
        font-size: 80px !important;
        left: 0rem !important;
        padding-top: 15px;
      } 
      .flex p{
        font-size: 30px;
      }
      .certifications .names {
        font-size: 18px;
      }
      .content .text {
        padding: 60px 0 0 0;
        font-size: 20px !important;
        /* padding-block: 5%; */
        /* position: relative; */
        white-space: initial;
      }
      .content::before {
        content: "START";
        position: absolute;
        top: -4%;
        left: -16%;
        font-size: 20px;
        font-weight: 200;
        padding: 5px 15px;
        color: aliceblue;
      }
      .content::after {
        content: "STILL GOING";
        position: absolute;
        bottom: -4%;
        left: -20%;
        font-size: 20px;
        font-weight: 200;
        color: aliceblue;
      }
      .time-line .content {
        margin: auto;
        border-left: 4px solid white;
        position: relative;
      }
      .content .text .left {
        position: absolute;
        font-size: 130%;
        font-weight: 700;
        left: -25%;
        padding: 5px;
        color: aliceblue;
      }
      .content .text .left2 {
        position: absolute;
        font-size: 130%;
        font-weight: 700;
        left: -45%;
        padding: 5px;
        color: aliceblue;
      }
    }
    @media screen and (min-width:769px) and (max-width:991px) {
      .main h1 ,h2{
        font-size: 50px !important;
       }
       .word .title{
        font-size: 85px !important;
        left: 0rem !important;
        padding-top: 15px;
      } 
      .flex p{
        font-size: 35px;
      }
      .certifications .names {
        font-size: 22px;
      }
      .content .text {
        padding: 60px 0 0 0;
        font-size: 20px !important;
        /* padding-block: 5%; */
        /* position: relative; */
        white-space: initial;
      }
      .content::before {
        content: "START";
        position: absolute;
        top: -4%;
        left: -11%;
        font-size: 20px;
        font-weight: 200;
        padding: 5px 15px;
        color: aliceblue;
      }
      .content::after {
        content: "STILL GOING";
        position: absolute;
        bottom: -4%;
        left: -14%;
        font-size: 20px;
        font-weight: 200;
        color: aliceblue;
      }
      .time-line .content {
        margin: auto;
        border-left: 4px solid white;
        position: relative;
      }
      .content .text .left {
        position: absolute;
        font-size: 150%;
        font-weight: 700;
        left: -21%;
        padding: 5px;
        color: aliceblue;
      }
      .content .text .left2 {
        position: absolute;
        font-size: 150%;
        font-weight: 700;
        left: -40%;
        padding: 5px;
        color: aliceblue;
      }
    
    }
    @media screen and (min-width:992px) and (max-width:1325px) {
      .main h1 ,h2{
        font-size: 70px !important;
       }
       .word .title{
        font-size: 95px !important;
        left: -2rem !important;
        padding-top: 15px;
      } 
      .flex p{
        font-size: 35px;
      }
      .certifications .names {
        font-size: 22px;
      }
      .content .text {
        padding: 60px 0 0 0;
        font-size: 30px !important;
        /* padding-block: 5%; */
        /* position: relative; */
        white-space: initial;
      }
      .content::before {
        content: "START";
        position: absolute;
        top: -60px;
        left: -12%;
        font-size: 35px;
        font-weight: 200;
        padding: 5px 15px;
        color: aliceblue;
      }
      .content::after {
        content: "STILL GOING";
        position: absolute;
        bottom: -6%;
        left: -18%;
        font-size: 35px;
        font-weight: 200;
        color: aliceblue;
      }
      .time-line .content {
        margin: auto;
        border-left: 4px solid white;
        position: relative;
      }
      .content .text .left {
        position: absolute;
        font-size: 130%;
        font-weight: 700;
        left: -21%;
        padding: 5px;
        color: aliceblue;
      }
      .content .text .left2 {
        position: absolute;
        font-size: 130%;
        font-weight: 700;
        left: -35%;
        padding: 5px;
        color: aliceblue;
      }
    }
    @media screen and (min-width:1115px) and (max-width:1325px) {
      .content .text .left2 {
        position: absolute;
        color: RED !;
        font-weight: 700;
        left: -35% !important;
        padding: 5px;
        color: aliceblue;
      }
    }
    @media screen and (min-width:1325px) and (max-width:1425px) {
      .content .text .left2 {
        position: absolute;
        /* color: RED !; */
        font-weight: 700;
        left: -35% !important;
        padding: 5px;
        color: aliceblue;
      }
      .content .text .left {
        position: absolute;
        font-size: 130%;
        font-weight: 700;
        left: -20%;
        padding: 5px;
        color: aliceblue;
      }
      .content .text {
        font-size: 30px !important;
        /* padding-block: 5%; */
        /* position: relative; */
        white-space: initial;
      }
    }