@charset "UTF-8";
/* CSS Document */

*{
    margin: 0;
    padding: 0;
}

body {
    
    font-family: "Roboto", sans-serif;
}


.sec3main1 {
    width: 100%;
    height: 25vh;
    background-color: #bdccd0;
/*    border: 2px solid red;*/
}

.sec3main1-title {
    width: 86%;
    height: 100%;
    margin: auto;
/*    border: 2px solid cyan;*/
    display: flex;
    flex-direction: row;
    
}

.sec3main1-title1 {
    width: 30%;
    height: 100%;
/*    border: 2px solid blue;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.sec3main1-title11 {
    width: 85%;
    height: 75%;
/*    border: 2px solid red;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}


.sec3main1-title1 p{
    font-weight: 400;
    font-size: 1.2vw;
    color: #0b4251;
}


.sec3main1-title2 {
    width: 70%;
    height: 100%;
/*    border: 2px solid pink;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.sec3main1-title22 {
    width: 80%;
    height: 75%;
/*    border: 2px solid red;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.sec3main1-title22-img {
    width: 31px;
    height: 12px;
    margin-right: 15px;
    z-index: 1;
    /*border: 2px solid red;*/
/*    border: 2px solid yellow;*/
}

.sec3main1-title22-img img {
    width: 100%;
}

.sec3main1-title2 h1 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 4.2vw;
    color: white;
    z-index: 1;
    /*color: red;*/
/*
    margin-top: 5px;
    border: 2px solid red;
*/
}

.sec3main1-title2 p{
    font-weight: 400;
    font-size: 1.2vw;
    color: white;
    letter-spacing: 1px;
    z-index: 1;
    /*color: blue;*/
}


/*title and sub above*/


/*the timeline content start here*/

        .main-content {
/*
            padding-top: 80px;
            padding-bottom: 80px;
*/
/*            border: 2px solid red;*/
            width: 100%;
            height: 238vh;
            background-color: #bdccd0;
        }

        .timeline-container {
            width: 86%;
            height: 100%;
/*            border: 2px solid blue;*/
            margin: auto;
    
        }





        /* Timeline Styles */

/*        timeline container*/

        .timeline {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
/*            margin-top: 20px;*/
            margin-bottom: 20px;
/*            border: 2px solid pink;*/
        }

        .timeline-line {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            background-color: #CBD5E0;
            height: 100%;
            z-index: 1;
        }

        .timeline-line-progress {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            background-color: #0b4251;
            height: 0%;
            z-index: 2;
        }

        .timeline-item {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 80px;
            position: relative;
            align-items: center;
/*            border: 2px solid green;*/
        }

/*    step 4*/

        .timeline-item:last-child {
            margin-bottom: 0;
/*            border: 2px solid red;*/
        }

        /* Timeline marker group - contains both line and number square */

        .timeline-marker-group {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 3;
/*            border: 2px solid blue;*/
        }

/*        number box*/

        .timeline-item-marker {
            width: 80px;
            height: 80px;
            background-color: #CBD5E0;
/*            border: 4px solid #178CAC;*/
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-size: 3vw;
            color: white;
        }

        .timeline-item.active .timeline-item-marker {
            background-color: #0b4251;
            color: #f2c864;
/*
            box-shadow: 0 0 5px #f2e064,
                0 0 15px #f2e064,
                0 0 30px #f2e064,
                0 0 60px #f2e064,
                0 0 120px #f2e064;
            border: 0.8px solid white;
*/
        }

        .timeline-item-content {
/*            background-color: white;*/
            padding: 15px 0;
/*
            border-radius: 10px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
*/
            z-index: 4;
            width: 35%;
            opacity: 0;
            transition: opacity 1s;
/*            border: 2px solid red;*/
        }

        .timeline-item.active .timeline-item-content {
            opacity: 1;
/*            background-color: red;*/
        }

        .timeline-item:nth-child(odd) .timeline-item-content {
            text-align: left;
            margin-left: 0;
            margin-right: auto;
        }

        .timeline-item:nth-child(even) .timeline-item-content {
            text-align: right;
            margin-right: 0;
            margin-left: auto;
        }

        .timeline-item-content h3 {
            margin-bottom: 5px;
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-size: 2.6vw;
            color: #0b4251;
        }

        .timeline-item-content p {
            font-weight: 400;
            font-family: "Roboto", sans-serif;
            font-size: 1.1vw;
/*            line-height: 1.5vw;*/
            color: #0b4251;
/*            color: red;*/
        }
        
        
/*image but video start here*/

        .timeline-item-img {
            width: 420px;
            height: 360px;
/*            border-radius: 10px;*/
/*            object-fit: cover;*/
            margin: 25px 0;
            /*border: 2px solid blue;*/
    
        }
        
        /*.vector-video {*/
        /*    width: 110%;*/
        /*    height: auto;*/
        /*}*/

        .timeline-item-img img {
            width: 100%;
        }
        
/*motion vector until here*/

        .timeline-item:nth-child(odd) {
            flex-direction: row;
        }

        .timeline-item:nth-child(even) {
            flex-direction: row-reverse;
        }
        
        
/*    section 3 connect to 4*/
        
        .sec3main1-connect {
            width: 100%;
            height: 250px;
/*            border: 1px solid red;*/
            background-color: #bdccd0;
    
        }

        .sec3main1-connect img {
            width: 100%;
/*            object-fit: cover;*/
/*            border: 1px solid blue;*/
        }

/*small extend connection*/

.sec3main1-connect2 {
    width: 100%;
    height: 20px;
/*    border: 2px solid red;*/
    background-color: #0b4251;
}













/*media tablets start here*/




@media (max-width: 1194px) {
    
        
        .timeline {
                z-index: 1;
                /*border: 2px solid cyan;*/
            }
    
    
        .main-content {
            /*border: 2px solid red;*/
            width: 100%;
            /*height: 330vh;*/
            height: 1500px;
            background-color: #bdccd0;
            z-index: -2;
        }
    
    
             .timeline-item-content h3 {
                font-size: 2.6vw;
                /*color: red;*/
                
            }
            
             .timeline-item-content p {
                font-size: 1.6vw;
                /*color: aqua;*/
                
            }
            
            
            .sec3main1-title22 {
                width: 90%;
                height: 75%;
                /*    border: 2px solid red;*/
            }
            
            
            
            .sec3main1-title2 h1 {
              font-size: 4.6vw;
              color: white;
              /*color: red;*/
              text-align: right;
          }

            .sec3main1-title2 p{
              font-size: 1.6vw;
              color: white;
              /*color: red;*/
              letter-spacing: 1px;
            }     
            
            
            
             .timeline-item-img {
                /*width: 300px;*/
                /*height: 257px;*/
                width: 317px;
                height: 272px;
                /*border: 2px solid red;*/
            }
            
            
            
        .sec3main1-connect {
            width: 100%;
            height: 170px;
            /*border: 1px solid red;*/
            background-color: #bdccd0;
    
        }
            
    
    
    
    
}


/*media 1194px end here*/
        
        
        
/*media 920px portrait start here*/

@media (max-width: 920px) {
    
    
         .main-content {
            /*border: 2px solid red;*/
            width: 100%;
            /*height: 330vh;*/
            height: 1420px;
        }
    
    
        .timeline-item-img {
                width: 279px;
                height: 239px;
                /*border: 2px solid red;*/
            } 
            
            
            
        .sec3main1-connect {
            width: 100%;
            height: 130px;
            /*border: 1px solid red;*/
            background-color: #bdccd0;
    
        }
        
        
        .timeline-item-marker {
            font-size: 4vw;
            color: white;
            /*color: red;*/
        }
    

    
    
/*all sub tag start here*/


.sec3main1-title22-img {
    width: 25px;
    height: 10px;
    margin-right: 15px;
    z-index: 1;
    /*border: 2px solid red;*/
    /*border: 2px solid yellow;*/
}
    
    
    
}
        
        
/*media 920px end here*/
        
        
        
        
        
        
        

        /* Mobile styles - keep the original layout */
        
        
        @media (max-width: 600px) {
            
            .timeline {
/*                flex-direction: column;*/
/*                align-items: flex-end;*/
                align-items: flex-start;
                padding-right: 40px;
                z-index: 1;
/*                border: 2px solid cyan;*/
            }
            
/*            adjust all the big section height below here*/
            
            .main-content {
/*
            padding-top: 80px;
            padding-bottom: 80px;
*/
            /*border: 2px solid red;*/
            width: 100%;
            /*height: 330vh;*/
            height: 2455px;
            background-color: #bdccd0;
            z-index: -2;
        }
            
           .sec3main1-connect {
            width: 100%;
            height: 85px;
            /*border: 1px solid cyan;*/
            background-color: #bdccd0;
    
        }
            
            .sec3main1-connect2 {
            height: 30px;
            background-color: #0b4251;
        }
            
/*            top title here media for all the title !*/
        
            .sec3main1 {
            width: 100%;
            /*height: 18vh;*/
            height: 135px;
            /*border: 2px solid red;*/
        }
            
            .sec3main1-title2 h1 {
              font-size: 6.5vw;
              color: white;
          }

            .sec3main1-title2 p{
              font-size: 2.6vw;
              color: white;
              letter-spacing: 1px;
            }     
            
            .sec3main1-title1 {
                width: 10%;
            }
            
            .sec3main1-title2 {
                width: 90%;
/*                border: 2px solid cyan;*/
            }
            
            .sec3main1-title22 {
                width: 100%;
/*                border: 2px solid red;*/
            }
            
            .sec3main1-title22-img {
                width: 18px;
                height: 7px;
                margin-right: 15px;
/*    border: 2px solid yellow;*/
            }

/*            timeline all content we adjust here*/
            
            .timeline-line {
                top: 0;
                right: 50px;
                left: auto;
                transform: none;
                height: 100%;
                
            }
            
/*            this is the line that will move*/
            
            .timeline-line-progress {
                top: 0;
                right: 50px;
                left: auto;
                transform: none;
                height: 100%;
/*                border: 2px solid orange;*/
            }
            
            
            .timeline-item {
                flex-direction: column;
                align-items: flex-start;
                margin-bottom: 60px;
                width: 80%;
                padding-right: 0;
                margin-right: 0;
/*                border: 2px solid red;*/
            }
            
            .timeline-marker-group {
                right: -10px;
                left: auto;
/*                transform: translateY(-50%);*/
                transform: translateX(125%);
/*                border: 2px solid red;*/
            }
            
            .timeline-item-marker {
            width: 90px;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9vw;
/*            border: 2px solid cyan;*/
        }
            
            .timeline-item-content {
                width: calc(100%);
                margin-right: 40px;
                margin-left: 0;
                text-align: left;
                order: 2;
                opacity: 0;
/*                border: 2px solid cyan;*/
            }
            
            .timeline-item-content h3 {
                font-size: 6vw;
                
            }
            
             .timeline-item-content p {
                font-size: 3vw;
                /*color: aqua;*/
                
            }
            
            .timeline-item.active .timeline-item-content {
                opacity: 1;
            }
            
            .timeline-item-img {
                width: 350px;
                height: 300px;
            }
            
            .timeline-item img {
                width: calc(100% - 40px);
                height: auto;
                margin-right: 40px;
                margin-left: 0;
                margin-top: 10px;
                margin-bottom: 0;
                order: 1;
            }
            
            /* Remove odd/even differences on mobile */
            .timeline-item:nth-child(odd),
            .timeline-item:nth-child(even) {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .timeline-item:nth-child(odd) .timeline-item-content,
            .timeline-item:nth-child(even) .timeline-item-content {
                margin-right: 40px;
                text-align: left;
            }
            
            .timeline-item:nth-child(odd) img,
            .timeline-item:nth-child(even) img {
                margin-right: 40px;
            }

            
            
            
        }

/*media 600px end here*/



@media (max-width: 550px) {
    
    
    .main-content {
            /*border: 2px solid red;*/
            width: 100%;
            /*height: 330vh;*/
            height: 2400px;
            background-color: #bdccd0;
            z-index: -2;
        }
    
    
    .timeline-marker-group {
                right: -10px;
                left: auto;
/*                transform: translateY(-50%);*/
                transform: translateX(125%);
/*                border: 2px solid red;*/
            }
            
            .timeline-item-marker {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8vw;
/*            border: 2px solid cyan;*/
        }

    
    

    
    
}

/*media 550px end here*/







@media (max-width: 480px) {
    
    
    .main-content {
            /*border: 2px solid red;*/
            width: 100%;
            /*height: 330vh;*/
            height: 2350px;
            background-color: #bdccd0;
            z-index: -2;
        }
    
    
    
    .timeline-marker-group {
                right: -10px;
                left: auto;
/*                transform: translateY(-50%);*/
                transform: translateX(125%);
/*                border: 2px solid red;*/
            }
            
            .timeline-item-marker {
            width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 7vw;
/*            border: 2px solid cyan;*/
        }
    
    
      .sec3main1-connect {
            width: 100%;
            height: 65px;
            /*border: 1px solid red;*/
            background-color: #bdccd0;
    
        }
    
    
    
    
    
    
    
    
    
    
}

/*media 480px end here*/





@media (max-width: 450px){
    
    
    .main-content {
            height: 2100px;
            /*border: 2px solid red;*/
        }
    
    
    .timeline-item-img {
                width: 291px;
                height: 249px;
                /*border: 2px solid red;*/
            }
    
    
    .timeline-marker-group {
                right: -10px;
                left: auto;
/*                transform: translateY(-50%);*/
                transform: translateX(125%);
/*                border: 2px solid red;*/
            }
            
    .timeline-item-marker {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 7vw;
/*            border: 2px solid cyan;*/
        }
    
    
    
}



/*media 450px end here*/








        @media (max-width: 428px) {
            
            .timeline {
/*                flex-direction: column;*/
/*                align-items: flex-end;*/
                align-items: flex-start;
                padding-right: 40px;
                z-index: 1;
/*                border: 2px solid cyan;*/
            }
            
/*            adjust all the big section height below here*/
            
            .main-content {
/*
            padding-top: 80px;
            padding-bottom: 80px;
*/
            /*border: 2px solid red;*/
            width: 100%;
            /*height: 280vh;*/
            height: 2050px;
            background-color: #bdccd0;
            z-index: -2;
        }
            
           .sec3main1-connect {
            width: 100%;
            height: 68px;
            /*border: 1px solid cyan;*/
            background-color: #bdccd0;
    
        }
            
            .sec3main1-connect2 {
            height: 30px;
            background-color: #0b4251;
        }
            
/*            top title here media for all the title !*/
        
            .sec3main1 {
            width: 100%;
            /*height: 18vh;*/
            height: 140.4px;
        }
            
            .sec3main1-title2 h1 {
              font-size: 7vw;
              color: white;
              text-align: right;
              line-height: 28px;
              margin-top: 5px;
              /*border: 2px solid black;*/
          }
          

            .sec3main1-title2 p{
              font-size: 3vw;
              color: white;
              letter-spacing: 1px;
            }     
            
            .sec3main1-title1 {
                width: 10%;
            }
            
            .sec3main1-title2 {
                width: 90%;
/*                border: 2px solid cyan;*/
            }
            
            .sec3main1-title22 {
                width: 100%;
/*                border: 2px solid red;*/
            }
            
            .sec3main1-title22-img {
                width: 18px;
                height: 7px;
                margin-right: 15px;
/*    border: 2px solid yellow;*/
            }

/*            timeline all content we adjust here*/
            
            .timeline-line {
                top: 0;
                right: 50px;
                left: auto;
                transform: none;
                height: 100%;
                
            }
            
/*            this is the line that will move*/
            
            .timeline-line-progress {
                top: 0;
                right: 50px;
                left: auto;
                transform: none;
                height: 100%;
/*                border: 2px solid orange;*/
            }
            
            
            .timeline-item {
                flex-direction: column;
                align-items: flex-start;
                margin-bottom: 60px;
                width: 80%;
                padding-right: 0;
                margin-right: 0;
/*                border: 2px solid red;*/
            }
            
            .timeline-marker-group {
                right: -10px;
                left: auto;
/*                transform: translateY(-50%);*/
                transform: translateX(117%);
/*                border: 2px solid red;*/
            }
            
            .timeline-item-marker {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 7vw;
/*            border: 2px solid cyan;*/
        }
            
            .timeline-item-content {
                width: calc(100%);
                margin-right: 40px;
                margin-left: 0;
                text-align: left;
                order: 2;
                opacity: 0;
/*                border: 2px solid cyan;*/
            }
            
            .timeline-item-content h3 {
                font-size: 5.5vw;
                /*color: red;*/
                
            }
            
             .timeline-item-content p {
                font-size: 3.2vw;
                /*color: red;*/
                
            }
            
            .timeline-item.active .timeline-item-content {
                opacity: 1;
            }
            
            .timeline-item-img {
                width: 291px;
                height: 249px;
            }
            
            .timeline-item img {
                width: calc(100% - 40px);
                height: auto;
                margin-right: 40px;
                margin-left: 0;
                margin-top: 10px;
                margin-bottom: 0;
                order: 1;
            }
            
            /* Remove odd/even differences on mobile */
            .timeline-item:nth-child(odd),
            .timeline-item:nth-child(even) {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .timeline-item:nth-child(odd) .timeline-item-content,
            .timeline-item:nth-child(even) .timeline-item-content {
                margin-right: 40px;
                text-align: left;
            }
            
            .timeline-item:nth-child(odd) img,
            .timeline-item:nth-child(even) img {
                margin-right: 40px;
            }
        }

/*media 428px end here*/







@media (max-width: 414px) {
    
     .main-content {
            /*border: 2px solid red;*/
            width: 100%;
            /*height: 280vh;*/
            height: 2000px;
            background-color: #bdccd0;
            z-index: -2;
        }
    
    
    
     .timeline-item-img {
                width: 283px;
                height: 242px;
            }
    
    
    .sec3main1-connect {
            width: 100%;
            height: 65px;
            /*border: 1px solid cyan;*/
            background-color: #bdccd0;
    
        }
        
        
    .timeline-marker-group {
                right: -10px;
                left: auto;
/*                transform: translateY(-50%);*/
                transform: translateX(120%);
/*                border: 2px solid red;*/
            }
            
    .timeline-item-marker {
            width: 55px;
            height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 7vw;
/*            border: 2px solid cyan;*/
        }
    
    
    
    
    
}








/*desktop media start here*/

@media (min-width: 1600px){
    
    
.timeline-item-img {
            width: 508px;
            height: 435px;
            /*margin: 25px 0;*/
            /*border: 2px solid blue;*/
    
        }
    
    
    
    
/*    section 3 connect to 4*/
        
        .sec3main1-connect {
            width: 100%;
            height: 250px;
            /*border: 1px solid red;*/
            background-color: #bdccd0;
            position: relative;
        }

        .sec3main1-connect img {
            width: 100%;
/*            object-fit: cover;*/
            /*border: 1px solid blue;*/
            position: absolute;
            margin-top: -90px;
        }

/*small extend connection*/

.sec3main1-connect2 {
    width: 100%;
    height: 40px;
    /*border: 2px solid yellow;*/
    background-color: #0b4251;
}
    
    
    
    
    
    
    
    
    
    
    
    
}

/*media 1600px end here*/





/*media gaming laptop start here*/

@media (min-width: 1445px) and (min-height: 864px) and (max-width: 1599px){
    

.main-content {
            /*border: 2px solid red;*/
            width: 100%;
            height: 230vh;
            background-color: #bdccd0;
        }


    
    
    
    
}


/*media gaming laptop end here*/