*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
 --first--color:#111a43;
 --secend--color:#e3e3e1;
 --third--color:#bcb8b2;
}
section {
    max-width:100%;
    height: 100vh;
    scroll-snap-align: start;
    max-width:auto;
}
body {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
}
p{
    font-size: 20px;
}
h3{
  font-size: 40px;
}
.circle-blue{
    width: 200px;
    height: 200px;
    background-color: var(--first--color);
    border-radius: 50%;
    position: absolute;
    right:22%;
    top: 170px;
    z-index: 1;
}
.circle-wihte{
    width: 400px;
    height: 400px;
    background-color: var(--secend--color);
    border-radius: 50%;
    position: absolute;
    right: 100px;
    top: -40px;
    z-index: -1;
}
.circle-wihte h1{
    color: var(--first--color);
    z-index:77;
    position: absolute;
    top: 40px;
    right: 70px;
    text-align: center;
    font-size: 250px;
    
}
.circle-wihte P{
    color: var(--first--color);
    z-index:77;
    position: absolute;
    top: 280px;
    right: 84px;
    text-align: center;
    font-size: 20px;
    letter-spacing: 5px;
}
.circle-gray{
    width: 100px;
    height: 100px;
    background-color: var(--third--color);
    border-radius: 50%;
    position: absolute;
    right:22%;
    top: 320px;
    z-index: 1;
    opacity: 80%;
}
.small-circles-rotate{
    width: 900px;
    transform: rotate(250deg);
    position: absolute;
    right: 180px;
    top: 25%;
    z-index: -2;
}
.trico{
    width: 50vh;
    position: absolute;
    left: 20%;
    top:0;
}
.text-box{
    width: 400px;
    height: 330px;
    position: absolute;
    bottom: 0px;
    right: 13%;
    border-left: 3px solid var(--first--color);
    padding: 10px;
    text-align: left;
}
.text-box h1{
    font-size: 40px;
    color: var(--first--color);
}
.text-box p{
    font-size: 20px;
    padding-bottom: 10px;
}
.text-box li{
    padding-top: 40px;
}
.text-box li a{
    text-decoration: none;
    color: var(--first--color);
}
.text-box img{
    width: 180px;
    position: absolute;
    bottom: 0;
}
.small-circles{
  width: 100vh;
  position: absolute;
  bottom: 0;
  left: 180px;
  z-index: -1;
}
@media (max-width: 768px) {
  section{
    max-width:auto;

  }
  .trico{
    width: 25vh;
    left: 0;
  }
  .circle-wihte{
    right: 20px;
    width: 200px;
    height: 200px;
  }
  .circle-wihte h1{
    font-size: 90px;
    right:55px;
  }
  .circle-wihte p{
    font-size: 10px;
    top: 150px;
    left: 70px;
  }
  .circle-blue{
    width: 100px;
    height: 100px;
    top: 110px;
    right: 150px;
  }
  .circle-gray{
    width: 50px;
    height: 50px;
    top: 150px;
    right: 120px;
  }
  .small-circles-rotate{
    width: 400px;
    right: 0;
  }
  .small-circles {
    width: 380px;
    left: 0;
    bottom: 20%;
    overflow: hidden;
  }
  .text-box{
    position: absolute;
    left: 4%;
    bottom: 15%;
  }
  }
.circle-blue2{
    width: 200px;
    height: 200px;
    background-color: var(--first--color);
    border-radius: 50%;
    z-index: 1;
    position: relative;
    left: 10%;
    top: -10%;
}
.circle-wihte2{
    width: 300px;
    height: 300px;
    background-color: var(--secend--color);
    border-radius: 50%;
    z-index: 1;
    position: relative;
    top: -5%;
    left: 6%;
}
.circle-gray2{
    width: 150px;
    height: 150px;
    background-color: var(--third--color);
    border-radius: 50%;
    z-index: 1;
    opacity: 80%;
    position: relative;
    left: 17%;
    top: -26%;
}
.circle-wihte2 h1{
    text-align: center;
    position: absolute;
    top: 40%;
    left: 25%;
    color: var(--first--color);
}
.small-circles2{
    width: 300px;
    z-index: -1;
}
.laser{
    width: 400px;
    position: absolute;
    bottom: -90%;
    left: 20%;
    z-index: 1;
}
.text-box-page-2{
  width: 1000px;
  height: 400px;
  position: absolute;
  top: 130%;
  right: 5%;
  margin-top:80px;
}
.title-box-img{
  width: 900px;position: absolute; top: 110%; left: 40%;
}
.title-mob{
  display: none;
}
@media (max-width: 768px) {
  .laser{
    width: 150px;
    top: 90%;
    left: 50%;
  }
  .title-box-img{
    width: 900px;
    left: 0;
    top: 90%;
  }
  .circle-wihte2{
    width: 120px;
    height: 120px;
    top: -30%;
  }
  .circle-blue2{
    width: 100px;
    height: 100px;
    top: -33%;
  }
  .circle-gray2{
    width: 50px;
    height: 50px;
    top: -43%;
    left: 30%;
  }
  .circle-wihte2 h1{
    top: 30%;
    left: 20%;
    font-size: 14px;
  }
  .text-box-page-2{
    z-index:89;
    top: 120%;
    width: 350px;
    left: 5%;
    text-align: center;
    overflow:visible;
  }
  .title-box-img{
    display: none;
  }
  .title-mob{
    width: 380px;position: absolute; top: 90%; left: 0%;
    display: block;
  }
}
.box-page-3{
    width: 90%;
    height: 80%;
    position: absolute;
    top: 210%;
    border-left: 3px solid var(--first--color);
    margin-left: 3px;   
}
.img-page-3{
    width: 100vh;
    position: absolute;
    left: 20%;
    top:40%;
}
.p-1-page3{
    width: 60%;
    height: 40%;
    position: absolute;
    top: 10%;
    left: 10%;
}
.p-2-page3{
    width: 60%;
    height: 40%;
    position: absolute;
    top: 90%;
    left: 10%;
    font-weight: 50px;
}
.title-box-img2{
  width: 1000px;
  position: absolute;
  transform: translateY(1900px);
}
.title-box-mob{
  display: none;
}
.page-3{
    position:absolute;
    top:0;
    width:100%;
}
@media (max-width: 768px){
    .page-3{
        top:100px;
        z-index:88;
    }
  .title-box-img2{
    top:175%;  
    margin-top:80px;
  }
  .p-1-page3{
    width: 400px;
    top:-30% ;
    text-align: center;
    left: -5%;
    padding:20px;
    overflow: visible;
    margin-top:180px;


  }
  .img-page-3{
    width: 400px;
    top: 55%;
    left: 0%;
    padding:20px;
    margin-top:70px;
  }
  .p-2-page3{
    width: 400px;
    top: 80%;
    left: -3%;
    overflow: visible;
    text-align: center;
    margin-top:70px;
    padding:15px;

  }
  .title-box-img2{
    display: none;
  }
  .title-box-mob{
    display: inline;
    width: 380px;
    position: absolute;
    bottom: -105%;
  }
}
.box-page-4{
    width: 60%;
    height: 100%;
    position: absolute;
    border-left: 3px solid var(--first--color);
    top: 320%;
    margin-left: 20px;
    padding: 10px;
}
.box-page-4 img{
  padding-left: 80px;
  padding-bottom:60px ;
}
.box-img-page4{
    width: 40%;
    height: 80%;
    position: absolute;
    right: 0;
    top: 315%;
    display:flex ;
    justify-content: baseline;
    align-items: center;
}
.box-img-page4 img{
    position: absolute;
}
.img-1-page4{
  width: 30vh;
    top: 13%;
    right: 40%;
}
.img-2-page4{
    width: 500px;
    top: 45%;
    right: 20%;
}
.img-3-page4{
    top: 85%;
    right: 20%;
    width: 600px;
}
.h3-1-page4, .p-1-page4 ,.h3-2-page4,.p-2-page4,.h3-3-page4,.p-3-page4{
    position: relative;
    padding-top: 30px;
}
.password-mob{
  display: none;
}
.password{
  display: inline;
  transform: translateY(1000px);
}
@media (max-width:768px){
  .img-1-page4{
    display: none;
  }
  .img-2-page4{
    display: none;
  }
  .img-3-page4{
    display: none;
  }
  .box-page-4 img{
    padding: 0;
    text-align: center;
  }
  .box-page-4{
    height: 1500px;
    width: 80%;
    overflow: visible;
    margin-top:350px;
    text-align:center;
  }
  .password{
    display: none;
  }
  .password-mob{
    display: inline;
    width: 380px;
    position:relative;
    top:1010px;
  }
  .box-img-page{
      display:none;
  }
}
.logo {
    background: #1b2a49;
    color: white;
    font-size: 48px;
    padding: 60px;
    border-radius: 50%;
    font-weight: bold;
    text-align: center;
    width: 200px;
    height: 200px;
  }

  .title {
    margin-left: 20px;
    font-size: 22px;
    font-weight: bold;
    color: #1b2a49;
  }

  .features {
    border-collapse: collapse;
    width: 40%;
    height: 50vh;
    margin-top: 20px;
  }

  .features th, .features td {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: left;
    font-size: 20px;
    vertical-align: top;
  }

  .features th {
    width: 100px;
    background: var(--first--color);
    font-weight: bold;
  }

  .badge {
    position: absolute;
    top: 40px;
    right: 40px;
    background: #e5e5e5;
    border-radius: 50%;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    color: #1b2a49;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
  }

  .image {
    margin-top: 30px;
    text-align: right;
  }

  .image img {
    max-width: 1000px;
    border-radius: 10px;
    position: absolute;
    bottom: -40%;
    right: 0 ;
  }
  .great{
    display: inline;
  }
  .great-mob{
    display: none;
    position: absolute;
  }
  @media (max-width:768px){
    .badge{
      width: 120px;
      height: 120px;
      font-weight: bolder;
      font-size: 10px;
      left: 0;
      display: none;
    }
    .features{
      width: 375px;
      overflow: scroll;
      position: relative;
      bottom: 0px;
      right: 20px;
      z-index: 16;
    }
    .image img{
      display: none;
    }
    .great{
      display:none ;
    }
    .great-mob{
      display: inline;
      width: 380px;
      left: 0;
      top: -20px;
    }
  }
  .container {
    max-width: 100%;
    max-height: 10000px;
    margin: auto;
    background: white;
    padding: 40px;
    position: relative;
  }

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
  }
.img-page6{
    width:60vh;
    position: relative;
    left: 17%;
    bottom: 10px;
}
.text-1-page6{
    width: 50%;
}
.text-2-page6{
    width: 20%;
    position: absolute;
    right: 20%;
    top: 40%;
}
.icon-page6 img{
    width: 200px;
}  
.size{
    position: absolute;
    top: 30%;
    left: 10%;
}
.shape{
    position: absolute;
    bottom:-10%;
    left: 30%;
    width: 4000px;
}
.stretching{
    position: absolute;
    left: 60%;
    top: 80%;
}
.page6{
    position:relative;
}
.psd{
  display: inline;
}
.psd-mob{
  display: none;
}
@media (max-width:768px){
  .text-1-page6{
    width: 380px;
    text-align: center;
    overflow: scroll;
    padding-right:20px;
    right: 10px;
    position: relative;
  }
  .img-page6{
    width: 300px;
    left: 0;
  }
  .icon-page6 img{
    width: 100px;
    bottom: 0;
  }
  .text-2-page6 p{
    width: 200px;
    position: absolute;
    bottom: 10%;
    left: 0;
    display: none;
  }
  .size{
    top: 50%;
    left: 0;
  }
  .stretching{
    left: 70%;
  }
  .page6{
 margin-top:110px;
  }
  .psd{
    display: none; 
  }
  .psd-mob{
    display: inline;
    width: 360px;
  }
}

.results{
    width: 100%;
    border-bottom: 4px solid black;
    border-left: 4px solid black;
    position:relative;
    bottom:30px;
}
.results img{
    width: 30vh;
    margin: 80px;
}
.results-2 img{
    width: 30vh;
    margin: 40px;
}
.results b{
    position: relative;
    left: -19%;
    bottom: 50px;
    color: var(--third--color);
}
.results p{
    position: relative;
    text-align: center;
    bottom: 30px;
    color: var(--third--color);
}
.results-2 b{
    position: relative;
    left: -17%;
    bottom: 25px;
    color: var(--third--color);
}
/*.results-2 p{
    width: 1400px;
    color: var(--third--color);
}*/
.text-box-page7{
    position: absolute;
    right: 10%;
    bottom: 15%;
    width: 700px;
}
.makhfi{
    display:none;
}
.text-box-page7 h3{
    padding-bottom: 30px;
    transform: translateX(-30px);
}
.result-ob{
  display: inline;
}
.result-mob{
  display: none;
}
@media (max-width:768px){
    .makhfi{
            align-items: center;
            display:block;
                    left: 1px;
        position: relative;
        z-index:15;
    }
  .results {
    width: 100%;
    height: 80%;
    z-index: 100;
  }
  .results img{
    width: 150px;
    overflow: scroll;
    margin: 0;
    position: relative;
    left: 30px;
  }
  .results p{
    top: 1px;
  }
  .results-2 img{
    width: 100px;
  }
  .results-2 p{
    text-align: center;
    padding:10px;
    width:350px;
  }
  .text-box-page7{
    width: 400px;
    text-align: center;
    bottom: -55%;
    left: 10px;
    z-index: 1000;
  }
  .results-2{
    width: 400px;
  }
  .result-ob{
    display: none;
  }
  .result-mob{
    display: inline;
    width: 360px;
    margin-bottom:80px;
  }
}
.container {
    top: 1200px;
    max-width: 100%;
    margin: auto;
    padding: 20px;
    background-color: white;
  }
  .header {
    background-color: #e5e8ea;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 20px;
    border-left: 5px solid #1f2e5e;
    margin-bottom: 20px;
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .table-section {
    flex: 1 1 55%;
    position: relative;
    top: 0px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }
  th, td {
    border: 1px solid #888;
    padding: 10px;
    text-align: left;
    vertical-align: top;
    font-size: 20px;
  }
  th {
    background-color: #1f2e5e;
    color: white;
    font-weight: normal;
  }
  .image-section {
    flex: 1 1 40%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .image-section img {
    max-width: 50%;
    height: auto;
  }
  .dealer-stamp {
    border: 1px solid #ccc;
    height: 80px;
    margin-top: 20px;
  }
  @media (max-width: 768px) {
    .header{
      position: relative;
      top: 600px;
      margin-top: 90px;
    }
    .content {
      flex-direction: column;
      padding-top: 100px;
      position: relative;
      top: 600px;
    }
    .image-section {
      margin-top: 20px;
    }
  }
  .footer-container {
    position: relative;
    top: 1100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
    border-top: 1px solid #ccc;
    font-size: 14px;
  }

  .left, .right {
    flex: 1 1 300px;
    margin: 10px;
  }

  .left .logo9 {
    font-size: 28px;
    font-weight: bold;
    color: #1a1a75;
  }

  .left .subtitle {
    font-style: italic;
    color: #555;
    margin-bottom: 10px;
  }

  .social-icons {
    margin: 15px 0;
  }

  .social-icons img {
    width: 30px;
    margin-right: 10px;
  }

  .qr-section {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
  }

  .qr-section img {
    width: 100px;
  }

  .company-info {
    font-size: 13px;
    margin-top: 10px;
  }

  .right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
  }

  .right img {
    max-width: 150px;
    margin-bottom: 20px;
  }

  .dealer-stamp {
    border: 1px solid #999;
    padding: 30px;
    width: 100%;
    max-width: 250px;
    text-align: center;
    color: #444;
    font-style: italic;
  }

  @media (max-width: 768px) {
    .right {
      align-items: flex-start;
    }

    .dealer-stamp {
      margin-top: 20px;
    }
    .footer-container{
      position: relative;
      top: 3400px;
    }
    .image-section {
    position: relative;
    top: 50px;
    }
    .container{
      position: relative;
      top: 2000px;
    }
  }
  .page9{
    height: auto;
  }
    @media (max-width:768px){
    p{
      font-size: 15px;
    }
  }
    .company-info a{
    text-decoration: none ;
    color:var(--first--color);
  }
    .button-86 {
    all: unset;
    width: 100px;
    height: 30px;
    font-size: 16px;
    background: transparent;
    border: none;
    position: relative;
    color: #f0f0f0;
    cursor: pointer;
    z-index: 1;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    top: 30px;
    left: 30px;
  }
  
  .button-86::after,
  .button-86::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -99999;
    transition: all .4s;
  }
  
  .button-86::before {
    transform: translate(0%, 0%);
    width: 100%;
    height: 100%;
    background: var(--first--color);
    border-radius: 10px;
  }
  
  .button-86::after {
    transform: translate(10px, 10px);
    width: 35px;
    height: 35px;
    background: var(--third--color);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 50px;
  }
  
  .button-86:hover::before {
    transform: translate(5%, 20%);
    width: 110%;
    height: 110%;
  }
  
  .button-86:hover::after {
    border-radius: 10px;
    transform: translate(0, 0);
    width: 100%;
    height: 100%;
  }
  
  .button-86:active::after {
    transition: 0s;
    transform: translate(0, 5%);
  }
    .button-86 a{
    text-decoration: none;
    color: var(--secend--color);
  }
    @media (max-width: 768px){
        .button-86{
            position:relative;
            left:55%;
            top:65%;
            z-index:900;
        }
    }