@font-face {
    font-family: "Lato";
    src: url('static/fonts/Lato/Lato-Regular.tff') format('truetype');
}

/* play fair display font  */

@font-face {
    font-family: 'Playfair Display';
    src: url('static/fonts/PlayfairDisplay/static/PlayfairDisplay-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Playfair Display';
    src: url('static/fonts/PlayfairDisplay/static/PlayfairDisplay-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Playfair Display';
    src: url('static/fonts/PlayfairDisplay/static/PlayfairDisplay-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
  }

#slider {
    position: relative;
    width: 600px;
    height: 400px;
    margin: 100px auto;
    overflow: hidden;
    
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    }
    #slider ul {
    position: relative;
    list-style: none;
    height: 100%;
    width: 10000%;
    padding: 0;
    margin: 0;
    
    transition: all 750ms ease;
    left: 0;
    }
    #slider ul li {
    position: relative;
    height: 100%;
    
    float: left;
    }
    #slider ul li img{
        width: 599px;
        height: 468px;
    }
    
    
    
    #slider #prev, #slider #next {
    width: 40px;
    line-height: 40px;
    
    font-size: 1.5rem;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    text-align: center;
    color: black;
    background: #f9f7fb;
    text-decoration: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 150ms ease;
    }
    #slider #prev:hover, #slider #next:hover {
    background-color: rgba(0, 0, 0, 0.5);
    text-shadow: 0;
        color: white;
    }
    #slider #prev {
    
    }
    #slider #next {
    right: 0px;
    }
    
    
    .counter {
        background-position: center;
        background-size: 80%;
        background-repeat: no-repeat;
        height: 300px;
    }
    
    .number p {
        position: relative;
        display: block;
        text-align: center;
        font-size: 120px;
        color: #091337;
        font-family: "Poppins", sans-serif;
        font-weight: 600;
    }
    
    canvas#gradientChartCanvas {
    max-width: 800px;
    margin: 40px auto;
    }
    
    /*** Typewriter CSS ***/
    
    .typeh1 {
        font-size: 9vmin;
        color: black;
        text-align: left;
        font-family: "Playfair Display", sans-serif;
        font-weight: 700;
        margin: 1rem 0 1rem 2rem; 
        margin-left: 23%;
    }
    
    @keyframes typing {
        0.00% { content: ""; }
        6.25% { content: "U"; }
        12.50% { content: "UN"; }
        18.75% { content: "UNF"; }
        25.00% { content: "UNFO"; }
        31.25% { content: "UNFOR"; }
        37.50% { content: "UNFORT"; }
        43.75% { content: "UNFORTU"; }
        50.00% { content: "UNFORTUN"; }
        56.25% { content: "UNFORTUNA"; }
        62.50% { content: "UNFORTUNAT"; }
        68.75% { content: "UNFORTUNATE"; }
        75.00% { content: "UNFORTUNATEL"; }
        81.25% { content: "UNFORTUNATELY"; }
        87.50% { content: "UNFORTUNATELY."; }
        93.75% { content: "UNFORTUNATELY.."; }
        100.00% { content: "UNFORTUNATELY..."; }
    }
    
    @keyframes text-fade{
        0% {opacity: 0}
        50% {opacity: 0;}
        100% {opacity: 1}
    }
    
    .typewriter::before {
        content: "";
    }
    
    .typewriter.in-view::after {
        content: "";
        animation: typing 2.25s linear ;
        animation-fill-mode: forwards;
        border-right: 0;
    }
    
    .smalltext{
        opacity: 0;
        font-size: 1.7em;
        font-family: "Lato", sans-serif;
        font-weight: 400;
    }
    
    .smalltext.in-view {
        opacity: 0;
        animation: text-fade linear;
        animation-fill-mode: forwards;
        animation-timeline: view();
        animation-range: entry 40% cover 50%;
    }
    
    /*** Map CSS ***/
    
    @keyframes fade{
        0% {opacity: 1}
        20% {opacity: 1}
        50% {opacity: 0}
        75% {opacity: 0}
        100% {opacity: 1}
    }
    
    .map{
        margin: auto;
        width: 50%;
        padding: 10px;
    }
    
    .map-wrapper{
        position: relative;
        animation: fade 9s linear infinite;
        animation-fill-mode: forwards;
        animation-range: entry 50%;
        z-index: 4;
    }
    
    #Now{
        z-index: 3;
        position: relative;
    }
    
    #Then{
        position: absolute;
    }
    
    #MapText{
        position: absolute;
        z-index: 5;
    }
    
    /* svg */
    
    .svg_container{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: -10;
        text-align: center;
    }
    
    svg{
        display: inline-block;
        height: 100%;
    }
    
    .line-running{
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: line-animation 10s linear forwards;
        animation-timeline: scroll();
        animation-range-start: 11%;
        animation-range-end: 95%;
        z-index: 2;
    }
    
    @keyframes line-animation{
        from {
            stroke-dashoffset: 1;
        }
        to {
            stroke-dashoffset: 0;
        }
    }
    
    .line-circle{
        top: 0;
        transform-box: fill-box;
        offset-anchor: 50% 50%;
        offset-path: path("M320.68,37c-56.61,184.06-32.32,257,3.06,288.77,44.91,40.28,104.43-1,258.89,15.32,100.46,10.64,189.71,20.09,242,87.31,55.17,70.87,56.74,189.83,1.53,248.17-30.45,32.18-69.5,36.74-145.53,44.43-345.74,35-423.59,41-467.25,99.57-4.41,5.91-45.73,63-30.64,127.15,2,8.4,10.22,41.5,38.3,65.88,47,40.8,255.13,42,255.13,42,112.47-1,318.77-2.92,366.82,86.64,26.4,49.2,9.69,134.71-41.36,180.76-142.95,129-469.29-128.9-602,0-37.6,36.51-55.52,100-35.24,133.28,43.09,70.68,254-2.55,281.13,58.21,8.53,19.07-4.64,43.33-14.56,58.21h0c-1.65,11.76-3.14,30.82-6.12,68.94-1,12.77-1.48,19.87-1.54,29.11-.16,26.1,3.21,48.56,4.6,53.61,13.87,50.29,275.66-19.36,360,72,52.23,56.59,49.94,189.63-13.78,251.24-115.9,112.06-420.29-26.39-582.13,61.27-15.5,8.4-50.38,27.92-61.28,64.35-10.14,33.91,6.74,61.64,32.17,121C219.7,2426.93,220.18,2440,218,2453.6c-10,63.15-72.39,75.86-65.87,119.49,7.86,52.61,105.21,78.36,110.3,79.65,91.18,23.16,154.66-22.18,180.76,10.73,4.71,5.93,4.71,10,7.66,78.13,2.32,53.44,3.48,80.16,3.59,80.52,26.09,84.87,318.45.57,410,123.22,38.25,51.23,39.1,135.38,3.15,179C821,3181.09,732.56,3144.87,503,3143c-298.13-2.49-347.26,56.91-361.53,78.13-23.41,34.77-36.79,91.22-13.79,131.74,27.7,48.8,98.79,57.94,372.25,61.28,242.91,3,320-2.63,360,52.08,30,41,39.81,117,4.6,162.38-100.87,130.11-504.13-76.49-648,53.62-11.23,10.15-45.91,41.52-52.09,90.38-5.14,40.69,10.23,87.52,42.9,113.37,37.11,29.37,85.29,22.74,132.34,16.75,47.55-6.05,266.49-33,425.27-29,77.82,2,101.61,19.6,112.35,38.81,24.68,44.16-19.65,122.89-65.37,166.47a225.78,225.78,0,0,1-51.06,36.76C675.27,4160,608.4,4122.17,575,4160.66c-9.24,10.63-19.37,31.05-12.26,73.53");
        animation: move 5s linear forwards;
        animation-timeline: scroll();
        animation-range-start: 11%;
        animation-range-end: 95%;
    }
    
    @keyframes move {
        to {
            offset-distance: 100%;
        }
    }
    
    /* parallax */
    
    .parallax{
        margin: auto;
        width: 90%;
        height: auto;
        justify-content: center;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 1em;
    }
    
    .item-box{
        height: 30vh;
        text-align: center;
        padding: 1em;
        border: 5px solid red;
        border-radius: 10px;
        font-size: 1.7em;
        font-family: "Lato", sans-serif;
        font-weight: 400;
    }
    
    .img-parallax{
        width: 30%;
    }
    
    .text-parallax{
        width: 60%;
    }
    
    .img-1{
        border: none;
        width: 30%;
        height: 500px;
        margin-top: 100px;
    }
    
    .text-1{
        margin-top: 100px;
        width: 60%;
        border: none;
    }
    
    .img-2{
        margin-bottom: 200px;
        border: none;
        width: 30%;
    }
    
    .text-2{
        width: 100%;
        border: none;
    }
    
    .img-3{
        margin-top: 100px;
        height: 50vh;
        border: none;
    }
    
    .text-3{
        width: 60%;
        margin-top: 150px;
        border: none;
    }
    
    .img-4{
        border: none;
        width: 30%;
    }
    
    .text-4{
        border: none;
        width: 55%;
    }
    
    .img-5{
        border: none;
        width: 30%;
    }
    
    .text-5{
        border: none;
    }


    .img-6{
        border: none;
        width: 30%;
    }

    .text-6{
        border: none;
    }

    .img-7{
        border: none;
        width: 30%;
    }

    .img-8{
        border: none;
        width: 30%;
    }

    .img-9{
        border:none;
        width: 100%
    }

    /* Media Querries */

    .graph_mac{
        position: relative;
        top: -10em;
        right: 3em;
    }

    @media (min-width:1400px){
        .graph_mac{
            top: -15em;
        }
    }
    
    .text1_mac{
        position: relative;
        top: 6em;
    }

    @media (min-width:1400px){
        .text1_mac{
            top: -3em;
        }
    }

    .factory_mac{
        top: 0em;
    }

    @media (min-width:1400px){
        .factory_mac{
            top: -5em;
        }
    }

    .tonnes_mac{
        position: relative;
        top: 6em;
    }

    @media (min-width:1400px){
        .tonnes_mac{
        top:-2em;
        }
    }

    .pietext_mac{
        position: relative;
        top: 18em;
        right: -5em;
    }

    @media (min-width:1400px){
        .pietext_mac{
            top:-1em; 
        }
        .piechart_mac{
            top: 2em; 
        }
        .bottle_mac{
            top: 0em; 
        }
        .bottletext_mac{
            top: -2em;
        }
        .text2_mac{
            top: 3em; 
        }
        .eg_mac{
            top:-2em; 
        }
        .tpa_mac{
            top:0em; 
        }
        .bact_mac{
            top:-4em; 
        }
        .bacttext_mac{
            top: -1em; 
        }
        .santalene_mac{
            top:1em; 
        }
        .santalol_mac{
            top:-5em; 
        }
        .text3_mac{
            top:3em; 
        }
    }

    .piecharrt_mac{
        position: relative;
        top: 18em;
        right: -13em;
    }

    .bottle_mac{
        position: relative;
        top: 10em;
        right: 5em;
    }

    .bottletext_mac{
        position: relative;
        top: 10em;
    }

    .text2_mac{
        position: relative;
        top: 15em;
    }

    .eg_mac{
        position: relative;
        top: 9em;
        right: -5em;
    }

    .tpa_mac{
        position: relative;top: 11em;right: -5em;
    }

    .bact_mac{
        position: relative;top: 7em;right: 4em;
    }

    .bacttext_mac{
        position: relative;top: 11em;right: 5em;
    }

    .santalene_mac{
        position: relative;top: 13em;right: 4em;
    }

    .santalol_mac{
        position: relative;top: 7em;right: 15em;
    }
    .text3_mac{
        position: relative;top: 15em;
    }