.nav_shadow {

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

}



.nav_shadow:after {

  z-index: -1;

  content: "";

  position: absolute;

  -webkit-box-shadow: 0 0 3vw rgba(0, 0, 0, 0.15);

  -moz-box-shadow: 0 0 3vw rgba(0, 0, 0, 0.15);

  box-shadow: 0 0 3vw rgba(0, 0, 0, 0.15);

  height: 80%;

  left: 5%;

  right: 5%;

  width: 90%;

  bottom: 0px;

  -webkit-border-radius: 0 0 100% 100%;

  -moz-border-radius: 0 0 100% 100%;

  border-radius: 0 0 100% 100%;

}



.text-nav {

  font-size: 1.0416666666667vw;

}



.position-relative {

  position: relative;

}



.text-shadow {

  text-shadow: 5px 4px 4px rgba(0, 0, 0, 0.2);

}



.text-container {

  position: absolute;

  width: 80%;

  bottom: 5%;

  right: 5%;

  transform: translate(-5%, -20%);

}



.decorate_line {

  height: 0.75px;

  width: 100%;

  background-color: #ffffff;

}





.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 */

.dot-position {

  top: 35%;

  left: 5%;

}



.dot {

  width: 12px;

  height: 12px;

  display: inline-block;

  position: relative;

}



.dot::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: #ffffff;

  opacity: 1;

  border-radius: 50%;

  transition: all 0.3s ease;

}



.dot::after {

  content: "";

  position: absolute;

  /* top: 7px;

    left: 7px; */

  top: 50%;

  left: 50%;

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

  width: 0px;

  height: 0px;

  background-color: white;

  border-radius: 50%;

  transition: all 0.3s ease;

}



.dot:hover::before,

.dot.active::before {

  opacity: 0.5;

}



.dot:hover::after,

.dot.active::after {

  top: 50%;

  left: 50%;

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

  width: 100%;

  height: 100%;

  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.5));

}



/* end of slide show section */



.gradient-background {

  background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 36.82%);

}



/* Arrow */



.arrow {

  background: #005E9B;

  height: 1px;

  width: 4.375vw;

  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;

  bottom: 0px;

}



#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: 5.25vw;

}



.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: 4.375vw;

  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: 5.25vw;

}



.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: 5.25vw;

}



.btn_text7:hover .arrow2,

.btn_text7:hover .arrow2:after {

  background-color: #fff;

  transition: .2s ease-in;

}



.arrow3 {

  background: #2CA6E0;

  height: 1px;

  width: 4.375vw;

  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: 5.25vw;

}



.btn_text3:hover .arrow3,

.btn_text3:hover .arrow3:after {

  background-color: #2CA6E0;

  transition: .2s ease-in;

}



.arrow4 {

  background: #000;

  height: 1px;

  width: 4.375vw;

  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_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: 5.25vw;

}



.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: 5.25vw;

}



.btn_text6:hover .arrow4,

.btn_text6:hover .arrow4:after {

  background-color: #fff;

  transition: .2s ease-in;

}



@media(min-width: 992px) {



  .arrow,

  .arrow2,

  .arrow3,

  .arrow4 {

    width: 2.5vw;

  }



  .btn_text:hover .arrow,

  .btn_text7:hover .arrow2,

  .btn_text3:hover .arrow3,

  .btn_text4:hover .arrow4,

  .btn_text6:hover .arrow4 {

    width: 3vw;

  }

}



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

  .margin-excellence {

    margin-top: -384px;

  }



  .position-zrs {

    right: 115px;

  }



  .text-section-aiot {

    font-size: 24px;

  }



  .margin-section-about-quotes {

    margin-top: -720px

  }



  .margin-left-arrow {

    margin-left: 128px;

    margin-top: -100px;

  }



  .section-arrow {

    margin-top: -430px;

  }



  .text-arrow {

    font-size: 16px

  }



  .top-arrow {

    top: -475px;

  }



  .arrow-stroke {

    display: block;

  }



  .arrow-stroke2 {

    display: none;

  }



  .margin-text-arrow {

    margin-left: 60px;

  }



  .photo-about {

    max-width: 800px;

  }



  .text-be-excellence {

    font-size: 72px

  }



  .margin-photo-about1 {

    margin-top: 64px;

  }



  .margin-text-about {

    margin-top: 40px;

  }



  .product-section1-margin {

    margin-top: 128px;

  }



  .padding-x-product-section {

    padding-right: 256px;

    padding-left: 256px;

  }



  .padding-x-product2-section2 {

    padding-right: 384px;

    padding-left: 384px;

  }



  .height-product2-section3 {

    height: 70rem;

  }



  .left-product2-section3 {

    left: -160px;

  }



  .margin-product2-section5 {

    margin-top: 240px;

  }



  .line1 {

    position: absolute;

    width: 500px;

    top: 3.5rem;

    left: 16rem;

  }



  .line2 {

    position: absolute;

    width: 357px;

    top: 4.5rem;

    left: 16rem;

  }



  .line3 {

    position: absolute;

    width: 195px;

    top: 3.5rem;

    right: 25rem;

  }



  .line4 {

    position: absolute;

    width: 337px;

    top: -15px;

    right: 25rem;

  }



  .left-product3-section4 {

    left: -160px;

  }



  .height-product3-section5 {

    height: 100vh;

  }



  .width-side3 {

    width: 800px;

  }



  .rectanglee1 {

    position: absolute;

    left: -103%;

    top: 5.1%;

  }



  .rectanglee2 {

    position: absolute;

    left: -60%;

    top: 20.4%;

  }



  .rectanglee3 {

    position: absolute;

    left: -125%;

    top: 27.5%;

  }



  .rectanglee4 {

    position: absolute;

    left: -28.2%;

    top: 42.7%;

  }



  .rectanglee5 {

    position: absolute;

    top: 45.1%;

    right: -88%;

  }



  .rectanglee6 {

    position: absolute;

    top: 65.7%;

    right: -92%;

  }



  .rectanglee7 {

    position: absolute;

    top: 93.1%;

    right: -105%;

  }



  .rectangle1 {

    width: 470px;

    height: 0.5px;

    background: white;

  }



  .rectangle2 {

    width: 270px;

    height: 0.5px;

    background: white;

  }



  .rectangle3 {

    width: 570px;

    height: 0.5px;

    background: white;

  }



  .rectangle4 {

    width: 130px;

    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;

  }

}



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

  .dot-position {

    top: 35%;

    left: 5%;

  }



  .dot {

    width: 12px;

    height: 12px;

    display: inline-block;

    position: relative;

  }



  .dot::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #ffffff;

    opacity: 1;

    border-radius: 50%;

    transition: all 0.3s ease;

  }



  .dot::after {

    content: "";

    position: absolute;

    /* top: 7px;

    left: 7px; */

    top: 50%;

    left: 50%;

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

    width: 0px;

    height: 0px;

    background-color: white;

    border-radius: 50%;

    transition: all 0.3s ease;

  }



  .dot:hover::before,

  .dot.active::before {

    opacity: 0.5;

  }



  .dot:hover::after,

  .dot.active::after {

    top: 50%;

    left: 50%;

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

    width: 100%;

    height: 100%;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.5));

  }



  .width-side3 {

    width: 800px;

  }



  .rectanglee1 {

    position: absolute;

    left: -101%;

    top: 5.1%;

  }



  .rectanglee2 {

    position: absolute;

    left: -60%;

    top: 20.3%;

  }



  .rectanglee3 {

    position: absolute;

    left: -122%;

    top: 27.4%;

  }



  .rectanglee4 {

    position: absolute;

    left: -28.2%;

    top: 42.6%;

  }



  .rectanglee5 {

    position: absolute;

    top: 45.1%;

    right: -90%;

  }



  .rectanglee6 {

    position: absolute;

    top: 65.7%;

    right: -94.2%;

  }



  .rectanglee7 {

    position: absolute;

    top: 93.1%;

    right: -107%;

  }



  .rectangle1 {

    width: 470px;

    height: 0.5px;

    background: white;

  }



  .rectangle2 {

    width: 300px;

    height: 0.5px;

    background: white;

  }



  .rectangle3 {

    width: 560px;

    height: 0.5px;

    background: white;

  }



  .rectangle4 {

    width: 170px;

    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;

  }

}





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

  .margin-excellence {

    margin-top: -384px;

  }



  .position-zrs {

    right: 115px;

  }



  .text-section-aiot {

    font-size: 24px;

  }



  .margin-section-about-quotes {

    margin-top: -720px

  }



  .margin-left-arrow {

    margin-left: 128px;

    margin-top: -100px;

  }



  .section-arrow {

    margin-top: -430px;

  }



  .text-arrow {

    font-size: 16px

  }



  .top-arrow {

    top: -475px;

  }



  .arrow-stroke {

    display: block;

  }



  .arrow-stroke2 {

    display: none;

  }



  .margin-text-arrow {

    margin-left: 60px;

  }



  .photo-about {

    max-width: 800px;

  }



  .text-be-excellence {

    font-size: 72px

  }



  .margin-photo-about1 {

    margin-top: 64px;

  }



  .margin-text-about {

    margin-top: 40px;

  }



  .product-section1-margin {

    margin-top: 128px;

  }



  .padding-x-product-section {

    padding-right: 256px;

    padding-left: 256px;

  }



  .padding-x-product2-section2 {

    padding-right: 384px;

    padding-left: 384px;

  }



  .height-product2-section3 {

    height: 100vh;

  }



  .margin-product2-section5 {

    margin-top: 240px;

  }



  .line1 {

    position: absolute;

    width: 517px;

    top: 3.5rem;

    left: 16rem;

  }



  .line2 {

    position: absolute;

    width: 357px;

    top: 4.5rem;

    left: 16rem;

  }



  .line3 {

    position: absolute;

    width: 195px;

    top: 3.5rem;

    right: 25rem;

  }



  .line4 {

    position: absolute;

    width: 337px;

    top: -15px;

    right: 25rem;

  }







  .width-side3 {

    width: 800px;

  }



  .rectanglee1 {

    position: absolute;

    left: -103%;

    top: 5.1%;

  }



  .rectanglee2 {

    position: absolute;

    left: -60%;

    top: 20.4%;

  }



  .rectanglee3 {

    position: absolute;

    left: -125%;

    top: 27.5%;

  }



  .rectanglee4 {

    position: absolute;

    left: -28.2%;

    top: 42.7%;

  }



  .rectanglee5 {

    position: absolute;

    top: 45.1%;

    right: -88%;

  }



  .rectanglee6 {

    position: absolute;

    top: 65.7%;

    right: -92%;

  }



  .rectanglee7 {

    position: absolute;

    top: 93.1%;

    right: -105%;

  }



  .rectangle1 {

    width: 470px;

    height: 0.5px;

    background: white;

  }



  .rectangle2 {

    width: 270px;

    height: 0.5px;

    background: white;

  }



  .rectangle3 {

    width: 570px;

    height: 0.5px;

    background: white;

  }



  .rectangle4 {

    width: 130px;

    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;

  }

}



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

  .margin-excellence {

    margin-top: -280px;

  }



  .margin-section-about-quotes {

    margin-top: -500px

  }



  .text-arrow {

    font-size: 14px;

  }



  .section-arrow {

    margin-top: -360px;

  }



  .margin-left-arrow {

    margin-left: 90px;

  }



  .top-arrow {

    top: -370px;

  }



  .arrow-stroke {

    display: none;

  }



  .arrow-stroke2 {

    display: block;

  }



  .margin-text-arrow {

    margin-left: 60px;

  }



  .photo-about {

    max-width: 500px;

  }



  .text-be-excellence {

    font-size: 60px

  }



  .margin-photo-about1 {

    margin-top: 0px;

  }



  .margin-text-about {

    margin-top: 0px;

  }



  .product-section1-margin {

    margin-top: 128px;

  }



  .padding-x-product2-section2 {

    padding-right: 200px;

    padding-left: 200px;

  }



  .height-product2-section3 {

    height: 100vh;

  }



  .margin-product2-section5 {

    margin-top: 100px;

  }



  .line1 {

    position: absolute;

    width: 500px;

    top: 3.5rem;

    left: 14rem;

  }



  .line2 {

    position: absolute;

    width: 357px;

    top: 4.5rem;

    left: 16rem;

  }



  .line3 {

    position: absolute;

    width: 195px;

    top: 3.5rem;

    right: 20rem;



  }



  .line4 {

    position: absolute;

    width: 337px;

    top: -15px;

    right: 20rem;

  }



  .width-side3 {

    width: 600px;

  }



  .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;

  }

}



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

  .text-container {

    position: absolute;

    width: 80%;

    bottom: 15%;

    right: 5%;

    transform: translate(-5%, -20%);

  }



  .dot-position {

    top: 35%;

    left: 5%;

    gap: 32px;

  }



  .dot {

    cursor: pointer;

    height: 15px;

    width: 15px;

    margin: 0 2px;

    background-color: #ffffff;

    border-radius: 50%;

    display: inline-block;

    transition: background-color 0.6s ease;

  }



  .active,

  .dot:hover {

    background: #ffffff;

    opacity: 0.5;

  }



  .rectanglee1 {

    position: absolute;

    left: -95%;

    top: 4.6%;

  }



  .rectanglee2 {

    position: absolute;

    left: -56.5%;

    top: 19.8%;

  }



  .rectanglee3 {

    position: absolute;

    left: -112.4%;

    top: 27%;

  }



  .rectanglee4 {

    position: absolute;

    left: -28.2%;

    top: 42.2%;

  }



  .rectanglee5 {

    position: absolute;

    top: 44.6%;

    right: -103%;

  }



  .rectanglee6 {

    position: absolute;

    top: 65.1%;

    right: -107%;

  }



  .rectanglee7 {

    position: absolute;

    top: 92.6%;

    right: -118%;

  }



  .rectangle1 {

    width: 250px;

    height: 0.5px;

    background: white;

  }



  .rectangle2 {

    width: 130px;

    height: 0.5px;

    background: white;

  }



  .rectangle3 {

    width: 290px;

    height: 0.5px;

    background: white;

  }



  .rectangle4 {

    width: 50px;

    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;

  }

}



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



  .rectanglee1 {

    position: absolute;

    left: -90%;

    top: 4.3%;

  }



  .rectanglee2 {

    position: absolute;

    left: -54.5%;

    top: 19.5%;

  }



  .rectanglee3 {

    position: absolute;

    left: -107.4%;

    top: 26.7%;

  }



  .rectanglee4 {

    position: absolute;

    left: -28.2%;

    top: 41.9%;

  }



  .rectanglee5 {

    position: absolute;

    top: 44.3%;

    right: -110%;

  }



  .rectanglee6 {

    position: absolute;

    top: 64.9%;

    right: -114%;

  }



  .rectanglee7 {

    position: absolute;

    top: 92.3%;

    right: -124%;

  }





  .rectangle1 {

    width: 195px;

    height: 0.5px;

    background: white;

  }



  .rectangle2 {

    width: 95px;

    height: 0.5px;

    background: white;

  }



  .rectangle3 {

    width: 235px;

    height: 0.5px;

    background: white;

  }



  .rectangle4 {

    width: 50px;

    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;

  }

}



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

  .text-container {

    position: absolute;

    width: 70%;

    bottom: 10%;

    right: 5%;

    transform: translate(-5%, -20%);

  }



  .dot-position {

    top: 30%;

    left: 5%;

    gap: 32px;

  }



  .dot {

    cursor: pointer;

    height: 10px;

    width: 10px;

    margin: 0 2px;

    background-color: #ffffff;

    border-radius: 50%;

    display: inline-block;

    transition: background-color 0.6s ease;

  }



  .active,

  .dot:hover {

    background: #ffffff;

    opacity: 0.5;

  }



  .navbar-menu a {

    font-size: 14px;

  }





  .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;

  }

}







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

  .dot-position {

    top: 35%;

    left: 5%;

    gap: 16px;

  }



  .dot {

    cursor: pointer;

    height: 7px;

    width: 7px;

    margin: 0 2px;

    background-color: #ffffff;

    border-radius: 50%;

    display: inline-block;

    transition: background-color 0.6s ease;

  }



  .active,

  .dot:hover {

    background: #ffffff;

    opacity: 0.5;

  }



  .navbar-menu a {

    font-size: 14px;

  }

}



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

  .dot-position {

    top: 30%;

    left: 5%;

  }



  .navbar-menu a {

    font-size: 14px;

  }

}