.font-outline-2 {

  -webkit-text-stroke: 0.5px black;

}

/* Search Input */

.wrapper{

  top: 4%;

  left: 50%;

  transform: translate(-50%, -50%);

}



.search-data{

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}



.wrapper{

  position: fixed;

  height: 0px;

  width: 0px;

  border-radius: 100%;

  background: #000;

  transition: all 0.4s linear;

}

.wrapper.active{

  height: 4000px;

  width: 4000px;

}

.search-btn{

    position: relative;

    display: block;

    width: 35px;

    cursor: pointer;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    background: none;

    outline: none;

    border: none;

  /* background: linear-gradient(-135deg, #c850c0, #4158d0); */

}

.search-btn span{

  color: #fff;

  font-size: 22px;

  line-height: 56px;

}

.search-data{

  position: absolute;

  height: 50px;

  min-width: 350px;

  display: flex;

  text-align: center;

  /* display: none; */

}

.search-data input{

  height: 100%;

  width: 100%;

  background: none;

  border: none;

  outline: none;

  font-size: 22px;

  font-weight: 500;

  color: #fff;

}

.search-data .line{

  position: absolute;

  height: 3px;

  width: 95%;

  background: #fff;

  bottom: 0;

  transform: scaleX(0);

  transition: transform 0.4s 0.3s linear;

}

.search-data .line.active{

  transform: scaleX(1);

}

.search-data label{

  position: absolute;

  top: 50%;

  left: 0;

  font-size: 20px;

  transform: translateY(-50%);

  pointer-events: none;

  color: rgba(255,255,255,0.7);

}

.search-data input:valid ~ label{

  opacity: 0;

}

.search-data span{

  color: #fff;

  position: absolute;

  width: 50px;

  font-size: 25px;

  right: 0;

  top: 0;

  line-height: 45px;

  cursor: pointer;

}

.close-btn{

  position: absolute;

  z-index: 99;

  right: 25px;

  top: 25px;

  font-size: 25px;

  color: #fff;

  cursor: pointer;

}

.search-data, .search-data span,

.search-data label, .close-btn{

  display: none;

}



.mobile-search-text {

    display: block;

    font-size: 18px;

    text-align: left;

    font-weight: 600;

    color: #FFF;

    text-decoration: none;

}



/* Navbar Menu */

.container {

    width: 100%;

    max-width: 1600px;

    margin: 0 auto;

    padding-left: 128px;

    padding-right: 128px;

}

@media (max-width: 1024px) {

    .container {

    padding-left: 64px;

    padding-right: 64px;

}

}@media (max-width: 767px) {

    .container {

    padding-left: 32px;

    padding-right: 32px;

}

}

.hamburger {

    position: relative;

    display: block;

    width: 35px;

    cursor: pointer;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    background: none;

    outline: none;

    border: none;

}

.hamburger 

.bar-nav, 

.hamburger:after, 

.hamburger:before {

    content: '';

    display: block;

    width: 80%;

    height: 3px;

    background-color: #FFF;

    margin: 6px 0px;

    -webkit-transition: 0.4s;

    transition: 0.4s;

}

.hamburger.is-active:before {

    -webkit-transform: rotate(-45deg) translate(-8px,  6px);

    transform: rotate(-45deg) translate(-6px,  4px);

}

.hamburger.is-active:after {

    -webkit-transform: rotate(45deg) translate(-9px,  -8px);

    transform: rotate(45deg) translate(-9px,  -8px);

}

.hamburger.is-active .bar-nav {

    opacity: 0;

}

.mobile-nav {

    position: fixed;

    top: 0;

    left: 100%;

    width: 100%;

    min-height: 100vh;

    display: block;

    z-index: 98;

    background-color: #000;

    padding-top: 120px;

    -webkit-transition: 0.4s;

    transition: 0.4s;

}

.mobile-nav.is-active {

    left: 0;

}

.mobile-nav p {

  display: block;

    width: 100%;

    margin-left: 50px;

    margin-top: 10px;

    font-size: 18px;

    text-align: left;

    font-weight: 600;

    color: #FFF;

    text-decoration: none;

}

.navbar-cta{

    display: block;

    width: 100%;

    margin-left: 90px;

    margin-top: 15px;

    font-size: 16px;

    text-align: left;

    font-weight: 300;

    color: #FFF;

    text-decoration: none;

}

.navbar-cta2{

    display: block;

    width: 100%;

    margin-left: 50px;

    margin-top: 15px;

    font-size: 18px;

    text-align: left;

    font-weight: 600;

    color: #FFF;

    text-decoration: none;

}

.mobile-nav-text {

    display: block;

    width: 100%;

    margin-left: 50px;

    margin-top: 20px;

    font-size: 18px;

    text-align: left;

    font-weight: 600;

    color: #FFF;

    text-decoration: none;

}

.mobile-nav a:hover {

    opacity: 0.8;

    transition: 0.2s;

}

@media (min-width: 768px) {

    .mobile-nav {

    display: block;

}



.bar {

  width: 50px;

  height: 5px;

  display: inline-block;

  gap: 20px;

  position: relative; 

  border-radius: 15px;

  border: 1px solid #000000;

  overflow: hidden;

  background-color: transparent;

}



.dot {

  position: absolute;

  top: 0px;

  z-index: 10003;

  width: 0px;

  height: 5px;

  border-radius: 15px;

  background: #000000;

}





.dot:after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 0;

  border-radius: 15px;

  background: #000000;

  

}



.dot:not(.active):before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 50px;

  height: 100%;

  border-radius: 15px;

  background: #000000;

  transition: width 8s ease-out;

}



.dot.active:after {

  width: 50px;

  height: 5px;

  background: #000000;

  transition: width 8s ease-out;

}



.dot-position {

  top: 35%;

  left: 5%;

  gap: 16px;

}

.hamburger {

    display: block;

}

}section h2 {

    text-align: center;

    margin-bottom: 32px;

    text-transform: uppercase;

    color: #313131;

    font-size: 36px;

}

/* .button {

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    border: none;

    outline: none;

    background: none;

    display: inline-block;

    color: #FFF;

    font-size: 20px;

    background-color: #FF9FDB;

    padding: 12px 16px;

    border-radius: 8px;

    text-decoration: none;

    text-transform: uppercase;

    font-weight: 700;

    cursor: pointer;

} */

@media (max-width: 767px) {

    .button {

    font-size: 18px;

}

}img {

    max-width: 100%}

header {

    color: #FFF;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 99;

}

header .container {

    padding-top: 32px;

    padding-bottom: 32px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}

header .container h2 {

    color: inherit;

    text-transform: uppercase;

    font-size: 32px;

    font-weight: 900;

}

header .container h2 span {

    font-weight: 600;

}

header .container nav {

    display: -ms-grid;

    display: grid;

    grid-gap: 16px;

    -ms-grid-columns: (auto)[4];

    grid-template-columns: repeat(4,  auto);

}

@media (max-width: 767px) {

    header .container nav {

    display: block;

}

}header .container nav a {

    color: inherit;

    font-size: 20px;

    text-decoration: block;

}

header.is-scrolling {

    background-color: #000;

}

header.is-scrolling .container {

    padding-top: 16px;

    padding-bottom: 16px;

}



.font-noto_sans {

  font-family: 'Noto Sans TC', sans-serif;

}



.font-sans {

  font-family: 'Helvetica', sans-serif;

}

details > summary {

  list-style: none;

}



details summary::-webkit-details-marker {

  display:none;

}



.zindex999{

  z-index: 999;

}



.timeline-border{

    top:35%; 

    height:90%;

  }



  .timeline-border2{

    top:35%; 

    height:60%;

  }

/* 

.fade {

  animation-name: fade;

  animation-duration: 1s;

  animation-fill-mode: forwards;

}



@keyframes fade {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



.gradient-background-z-10 {

  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);

  animation-name: gradient-fill;

  animation-duration: 1s;

  animation-fill-mode: forwards;

}



@keyframes gradient-fill {

  from {

    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);

  }

  to {

    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0) 100%);

  }

} */



.text-shadow{

  text-shadow: 3px 1px 1px rgba(0, 0, 0, 0.2);

}



.decorate_line {

    height: 0.75px;

    width: 100%;

    background-color: #000;

}

/*Start*/



/*End*/

.section1-background{

  background-image: url("img/phone_02.jpg");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  position: relative;

  z-index: 500;

}



.section2-background{

  background-image: url("img/phone_06.jpg");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  position: relative;

  z-index: 500;

}



.section3-background{

  background-image: url("img/phone_08.jpg");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  position: relative;

  z-index: 500;

}

.section4-background{

  background-image: url("img/phone_09.jpg");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  position: relative;

  z-index: 500;

}

.section5-background{

  /* background-image: url("img/phone_10.jpg"); */

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  position: relative;

  height:70vh;

  z-index: 500;

}



.section6-background{

  background-image: url("img/phone_36.png");

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center;

  position:relative;

  height:100vh;

  z-index: 500;

}

.quality-education{

  border: 1px solid #B3B3B3;

}



.rectangle1{

  width:406px;

  height:0.5px;

  background:white;

}

.rectangle2{

  width:290px;

  height:0.5px;

  background:white;

}

.rectangle3{

  width:466px;

  height:0.5px;

  background:white;

}

.rectangle4{

  width:208px;

  height:0.5px;

  background:white;

}



.rectangle5{

  width:170px;

  height:0.5px;

  background:white;

}



.rectangle6{

  width:185px;

  height:0.5px;

  background:white;

}



.rectangle7{

  width:221px;

  height:0.5px;

  background:white;

}

/* slide show section */

/* Position the "next button" to the right */

.next {

  right: 0;

  border-radius: 3px 0 0 3px;

}



/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

  background-color: rgba(0,0,0,0.8);

}



/* Caption text */

.text {

  color: #f2f2f2;

  font-size: 15px;

  padding: 8px 12px;

  position: absolute;

  bottom: 8px;

  width: 100%;

  text-align: center;

}





/* The dots/bullets/indicators */

/* Add these styles to your existing CSS or create a new CSS file */





/* Arrow */



.arrow{

    background: #005E9B;

    height: 1px;

    width: 25px;

    margin: 0 auto;

    position: relative;

}

.arrow:after {

    right: -1px;

    top: -4px;

    transform: rotate(45deg);

}

.arrow:after {

    content: "";

    background: #005E9B;

    position: absolute;

    height: 1px;

    width: 9px;

}

#headerr.hidden {

  display: none;

}



.btn_text .arrow,.btn_text .arrow:after{

    transition: .2s ease-in;

}

.btn_text:hover .arrow{

    background-color: #005E9B;

    transition: .2s ease-in;

    width: 40px;

}

.btn_text:hover .arrow, .btn_text:hover .arrow:after{

    background-color: #005E9B;

    transition: .2s ease-in;

}

/*btn_text5 is btn_text*/

.btn_text5 .arrow,.btn_text .arrow:after{

    transition: .2s ease-in;

}

.btn_text5:hover .arrow{

    background-color: #fff;

    transition: .2s ease-in;

    width: 55px;

}

.btn_text5:hover .arrow, .btn_text5:hover .arrow:after{

    background-color: #fff;

    transition: .2s ease-in;

}



.arrow2{

    background: #fff;

    height: 1px;

    width: 25px;

    margin: 0 auto;

    position: relative;

}

.arrow2:after {

    right: -1px;

    top: -4px;

    transform: rotate(45deg);

}

.arrow2:after {

    content: "";

    background: #fff;

    position: absolute;

    height: 1px;

    width: 9px;

}



.btn_text2 .arrow2,.btn_text2 .arrow2:after{

    transition: .2s ease-in;

}

.btn_text2:hover .arrow2{

    background-color: #007AC0;

    transition: .2s ease-in;

    width: 40px;

}

.btn_text2:hover .arrow2, .btn_text2:hover .arrow2:after{

    background-color: #007AC0;

    transition: .2s ease-in;

}



.btn_text7 .arrow2,.btn_text7 .arrow2:after{

    transition: .2s ease-in;

}

.btn_text7:hover .arrow2{

    background-color: #fff;

    transition: .2s ease-in;

    width: 55px;

}

.btn_text7:hover .arrow2, .btn_text7:hover .arrow2:after{

    background-color: #fff;

    transition: .2s ease-in;

}



.arrow3{

    background: #2CA6E0;

    height: 1px;

    width: 25px;

    margin: 0 auto;

    position: relative;

}

.arrow3:after {

    right: -1px;

    top: -4px;

    transform: rotate(45deg);

}

.arrow3:after {

    content: "";

    background: #2CA6E0;

    position: absolute;

    height: 1px;

    width: 9px;

}



.btn_text3 .arrow3,.btn_text3 .arrow:after{

    transition: .2s ease-in;

}

.btn_text3:hover .arrow3{

    background-color: #2CA6E0;

    transition: .2s ease-in;

    width: 40px;

}

.btn_text3:hover .arrow3, .btn_text3:hover .arrow3:after{

    background-color: #2CA6E0;

    transition: .2s ease-in;

}



.arrow4{

    background: #000;

    height: 1px;

    width: 25px;

    margin: 0 auto;

    position: relative;

}

.arrow4:after {

    right: -1px;

    top: -4px;

    transform: rotate(45deg);

}

.arrow4:after {

    content: "";

    background: #000;

    position: absolute;

    height: 1px;

    width: 9px;

}



.btn_text4 .arrow4,.btn_text4 .arrow4:after{

    transition: .2s ease-in;

}

.btn_text4:hover .arrow4{

    background-color: rgb(255,255,255);

    transition: .2s ease-in;

    width: 40px;

}

.btn_text4:hover .arrow4, .btn_text4:hover .arrow4:after{

    background-color: #000000;

    transition: .2s ease-in;

}



.btn_text6 .arrow4,.btn_text6 .arrow4:after{

    transition: .2s ease-in;

}

.btn_text6:hover .arrow4{

    background-color: #fff;

    transition: .2s ease-in;

    width: 40px;

}

.btn_text6:hover .arrow4, .btn_text6:hover .arrow4:after{

    background-color: #fff;

    transition: .2s ease-in;

}



@media only screen and (max-width:500px) {

  .rectanglee1{

   position: absolute;

   right:10%; 

   top:4.2%; 

  }

  .rectanglee2{

   position: absolute;

   right:10%;

   top:19.5%; 

  }



  .rectanglee3{

   position: absolute;

   right:10%; 

   top:26.8%; 

  }

  .rectanglee4{

   position: absolute;

   right:10%; 

   top:41.7%; 

  }



  .rectanglee5{

    position:absolute;

    right:10%; 

    top:46.8%; 

  }



  .rectanglee6{

    position:absolute;

    right:10%; 

    top:64.9%; 

  }



  .rectanglee7{

    position:absolute;

    right:10%; 

    top:92.2%; 

  }





.rectangle1{

  width:181px;

  height:0.5px;

  background:white;

}

.rectangle2{

  width:120px;

  height:0.5px;

  background:white;

}

.rectangle3{

  width:210px;

  height:0.5px;

  background:white;

}

.rectangle4{

  width:60px;

  height:0.5px;

  background:white;

}

.rectangle5{

  width:208px;

  height:0.5px;

  background:white;

}



.rectangle6{

  width:200px;

  height:0.5px;

  background:white;

}



.rectangle7{

  width:182px;

  height:0.5px;

  background:white;

}



}





@media only screen and (max-width:450px) {

  .rectanglee1{

   position: absolute;

   right:10%; 

   top:4%; 

  }

  .rectanglee2{

   position: absolute;

   right:10%;

   top:19.2%; 

  }



  .rectanglee3{

   position: absolute;

   right:10%; 

   top:26.3%; 

  }

  .rectanglee4{

   position: absolute;

   right:10%; 

   top:41.3%; 

  }



  .rectanglee5{

    position:absolute;

    right:10%; 

    top:46.3%; 

  }



  .rectanglee6{

    position:absolute;

    right:10%; 

    top:64.5%; 

  }



  .rectanglee7{

    position:absolute;

    right:10%; 

    top:92.2%; 

  }





.rectangle1{

  width:131px;

  height:0.5px;

  background:white;

}

.rectangle2{

  width:80px;

  height:0.5px;

  background:white;

}

.rectangle3{

  width:159px;

  height:0.5px;

  background:white;

}

.rectangle4{

  width:32px;

  height:0.5px;

  background:white;

}

.rectangle5{

  width:156px;

  height:0.5px;

  background:white;

}



.rectangle6{

  width:149px;

  height:0.5px;

  background:white;

}



.rectangle7{

  width:135px;

  height:0.5px;

  background:white;

}



}





@media only screen and (max-width:400px) {

  .rectanglee1{

   position: absolute;

   right:10%; 

   top:4%; 

  }

  .rectanglee2{

   position: absolute;

   right:10%;

   top:19.2%; 

  }



  .rectanglee3{

   position: absolute;

   right:10%; 

   top:26.3%; 

  }

  .rectanglee4{

   position: absolute;

   right:10%; 

   top:41.3%; 

  }



  .rectanglee5{

    position:absolute;

    right:10%; 

    top:46.3%; 

  }



  .rectanglee6{

    position:absolute;

    right:10%; 

    top:64.5%; 

  }



  .rectanglee7{

    position:absolute;

    right:10%; 

    top:92.2%; 

  }





.rectangle1{

  width:114px;

  height:0.5px;

  background:white;

}

.rectangle2{

  width:65px;

  height:0.5px;

  background:white;

}

.rectangle3{

  width:140px;

  height:0.5px;

  background:white;

}

.rectangle4{

  width:15px;

  height:0.5px;

  background:white;

}

.rectangle5{

  width:137px;

  height:0.5px;

  background:white;

}



.rectangle6{

  width:130px;

  height:0.5px;

  background:white;

}



.rectangle7{

  width:118px;

  height:0.5px;

  background:white;

}



}



@media only screen and (max-width:380px) {

  .rectanglee1{

   position: absolute;

   right:10%; 

   top:4%; 

  }

  .rectanglee2{

   position: absolute;

   right:10%;

   top:19.2%; 

  }



  .rectanglee3{

   position: absolute;

   right:10%; 

   top:26.3%; 

  }

  .rectanglee4{

   position: absolute;

   right:10%; 

   top:41.3%; 

  }



  .rectanglee5{

    position:absolute;

    right:10%; 

    top:46.3%; 

  }



  .rectanglee6{

    position:absolute;

    right:10%; 

    top:64.5%; 

  }



  .rectanglee7{

    position:absolute;

    right:10%; 

    top:91.8%; 

  }





.rectangle1{

  width:102px;

  height:0.5px;

  background:white;

}

.rectangle2{

  width:55px;

  height:0.5px;

  background:white;

}

.rectangle3{

  width:125px;

  height:0.5px;

  background:white;

}

.rectangle4{

  width:15px;

  height:0.5px;

  background:white;

}

.rectangle5{

  width:125px;

  height:0.5px;

  background:white;

}



.rectangle6{

  width:118px;

  height:0.5px;

  background:white;

}



.rectangle7{

  width:105px;

  height:0.5px;

  background:white;

}



}



@media only screen and (max-width: 1024px) {



   .dot-position{

    top: 30%;

    left: 5%;

    gap: 32px;

  }

/*

.active, .dot:hover {

  background: #000000;

  opacity: 0.5;

} */



  /* .rectanglee1{

   position: absolute;

   left:-99%; 

   top:5%; 

  }

  .rectanglee2{

   position: absolute;

   left:-59.5%; 

   top:20.1%; 

  }

  .rectanglee3{

   position: absolute;

   left:-119.4%; 

   top:27.3%; 

  }

  .rectanglee4{

   position: absolute;

   left:-28.2%; 

   top:42.5%; 

  }



  .rectanglee5{

    position:absolute;

    top:44.8%; 

    right:-95%;

  }



  .rectanglee6{

    position:absolute;

    top:65.5%; 

    right:-99%;

  }



  .rectanglee7{

    position:absolute;

    top:92.9%; 

    right:-110%;

  }





  .rectangle1{

  width:400px;

  height:0.5px;

  background:white;

}

.rectangle2{

  width:250px;

  height:0.5px;

  background:white;

}

.rectangle3{

  width:475px;

  height:0.5px;

  background:white;

}

.rectangle4{

  width:145px;

  height:0.5px;

  background:white;

}

.rectangle5{

  width:170px;

  height:0.5px;

  background:white;

}



.rectangle6{

  width:185px;

  height:0.5px;

  background:white;

}



.rectangle7{

  width:230px;

  height:0.5px;

  background:white;

} */



}



/* .rectangle1{

  width:406px;

  height:0.5px;

  background:white;

}

.rectangle2{

  width:290px;

  height:0.5px;

  background:white;

}

.rectangle3{

  width:466px;

  height:0.5px;

  background:white;

}

.rectangle4{

  width:208px;

  height:0.5px;

  background:white;

}



.rectangle5{

  width:170px;

  height:0.5px;

  background:white;

}



.rectangle6{

  width:185px;

  height:0.5px;

  background:white;

}



.rectangle7{

  width:221px;

  height:0.5px;

  background:white;

} */



@media only screen and (min-width:640px) {

  .arrow3{

    background: #2CA6E0;

    height: 1px;

    width: 40px;

    margin: 0 auto;

    position: relative;

  }

  .arrow3:after {

    right: -3px;

    top: -5px;

    transform: rotate(45deg);

  }

  .arrow3:after {

    content: "";

    background: #2CA6E0;

    position: absolute;

    height: 1px;

    width: 15px;

  }



  .btn_text3 .arrow3,.btn_text3 .arrow:after{

    transition: .2s ease-in;

  }

  .btn_text3:hover .arrow3{

    background-color: #2CA6E0;

    transition: .2s ease-in;

    width: 55px;

  }

  .btn_text3:hover .arrow3, .btn_text3:hover .arrow3:after{

    background-color: #2CA6E0;

    transition: .2s ease-in;

  }



  

  .arrow4{

    background: #000;

    height: 1px;

    width: 40px;

    margin: 0 auto;

    position: relative;

  }

  .arrow4:after {

    right: -3px;

    top: -5px;

    transform: rotate(45deg);

  }

  .arrow4:after {

    content: "";

    background: #000;

    position: absolute;

    height: 1px;

    width: 15px;

  }

  .btn_text6 .arrow4,.btn_text6 .arrow4:after{

    transition: .2s ease-in;

  }

  .btn_text6:hover .arrow4{

    background-color: #fff;

    transition: .2s ease-in;

    width: 55px;

  }

  .btn_text6:hover .arrow4, .btn_text6:hover .arrow4:after{

    background-color: #fff;

    transition: .2s ease-in;

  }



  

  .arrow{

      background: #005E9B;

      height: 1px;

      width: 40px;

      margin: 0 auto;

      position: relative;

  }

  .arrow:after {

      right: -3px;

      top: -5px;

      transform: rotate(45deg);

  }

  .arrow:after {

      content: "";

      background: #005E9B;

      position: absolute;

      height: 1px;

      width: 15px;

  }

  

  .btn_text .arrow,.btn_text .arrow:after{

      transition: .2s ease-in;

  }

  .btn_text:hover .arrow{

      background-color: #005E9B;

      transition: .2s ease-in;

      width: 55px;

  }

  .btn_text:hover .arrow, .btn_text:hover .arrow:after{

      background-color: #005E9B;

      transition: .2s ease-in;

  }





  .arrow2{

      background: #fff;

      height: 1px;

      width: 40px;

      margin: 0 auto;

      position: relative;

  }

  .arrow2:after {

      right: -3px;

      top: -5px;

      transform: rotate(45deg);

  }

  .arrow2:after {

      content: "";

      background: #fff;

      position: absolute;

      height: 1px;

      width: 15px;

  }



  .btn_text2 .arrow2,.btn_text2 .arrow2:after{

      transition: .2s ease-in;

  }

  .btn_text2:hover .arrow2{

      background-color: #007AC0;

      transition: .2s ease-in;

      width: 55px;

  }

  .btn_text2:hover .arrow2, .btn_text2:hover .arrow2:after{

      background-color: #007AC0;

      transition: .2s ease-in;

  }



  .timeline-border{

    top:22%; 

    height:90%;

  }



  .timeline-border2{

    top:22%; 

    height:71%;

  }

}



   @media only screen and (min-width: 500px) {

  .timeline-border{

    top:25%; 

    height:90%;

  }



  .timeline-border2{

    top:25%; 

    height:70%;

  }

}





  @media only screen and (min-width: 640px) {

    .timeline-border{

    top:22%; 

    height:90%;

  }



  .timeline-border2{

    top:22%; 

    height:71%;

  }

  }



  @media only screen and (min-width: 768px) {

    .timeline-border{

      top:30%; 

      height:90%;

    }



    .timeline-border2{

      top:30%; 

      height:65%;

    }

  }



    @media only screen and (min-width: 968px) {

    .timeline-border{

      top:25%; 

      height:90%;

    }



    .timeline-border2{

      top:25%; 

      height:70%;

    }

  }



@media only screen and (max-width: 768px) {

  /* .dot {

  width: 50px;

  height: 5px;

  display: inline-block;

  position: relative; 

  border-radius: 15px;

  overflow: hidden;

  background-color: #2e3033;

  opacity: 0.5;

}



.active,

.dot:hover {

  background: #000000;

  opacity: 1;

}



.dot-position {

  top: 35%;

  left: 5%;

  gap: 16px;

} */



.bar {

  width: 50px;

  height: 5px;

  display: inline-block;

  gap: 20px;

  position: relative; 

  border-radius: 15px;

  border: 1px solid #000000;

  overflow: hidden;

  background-color: transparent;

}



.dot {

  position: absolute;

  top: 0px;

  z-index: 10003;

  width: 0px;

  height: 5px;

  border-radius: 15px;

  background: #000000;

}





.dot:after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 0;

  border-radius: 15px;

  background: #000000;

  

}



.dot:not(.active):before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 50px;

  height: 100%;

  border-radius: 15px;

  background: #000000;

  transition: width 8s ease-out;

}



.dot.active:after {

  width: 50px;

  height: 5px;

  background: #000000;

  transition: width 8s ease-out;

}



.dot-position {

  top: 35%;

  left: 5%;

  gap: 16px;

}





}









@media only screen and (max-width: 576px) {

 

.dot-position {

  top: 35%;

  left: 5%;

  gap: 16px;

}



  .navbar-menu a {

    font-size: 14px;

  }

}



@media only screen and (max-width: 366px) {

 

.dot-po sition {

  top: 35%;

  left: 5%;

  gap: 4px;

}



  .navbar-menu a {

    font-size: 14px;

  }

}