@media (min-width: 1000px){
    :root {
        --fs-700 : 6.25rem;
        --fs-600 : 5rem;
        --fs-500 : 2.5rem;
        --fs-400 : 1.25rem;
        --fs-300 : 1.125rem;
        --fs-200 : 1rem;
        --fs-100 : 0.875rem;
    }
}


@media (min-width: 992px) and (max-width : 1000px) {
    :root {
        --fs-700 : 2.5rem;
        --fs-600 : 2.188rem;
        --fs-500 : 1.25rem;
        --fs-400 : 1.125rem;
        --fs-300 : 0.75rem;
        --fs-200 : 0.5rem;
        --fs-100 : 0.5rem;    
    }
}
@media (min-width: 0px) and (max-width : 992px) {
    :root {
        --fs-700 : 1.25rem;
        --fs-600 : 1rem;
        --fs-500 : 0.875rem;
        --fs-400 : 0.5rem;
        --fs-300 : 0.5rem;
        --fs-200 : 0.5rem;
        --fs-100 : 0.5rem;    
    }
}
    
h1 {
    font-size: var(--fs-700);
}
h2 {
    font-size: var(--fs-600);

}
h3 {
    font-size: var(--fs-500);
}
h4 {
    font-size: var(--fs-400);
}
h5 {
    font-size: var(--fs-300);
}
h6 {
    font-size: var(--fs-200);
}
p {
    font-size: var(--fs-100);
}

/* Header */
.nav-link {
    font-size: 1rem;
}

.hero-section{
    background: rgb(14,21,52);
    background: linear-gradient(180deg, rgba(14,21,52,1) 0%, rgba(29,40,58,1) 24%, rgba(71,86,126,1) 62%, rgba(72,126,147,1) 89%, rgba(100,235,253,1) 100%);
    position: relative;
}
.hero-section .svg-bg {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
}

.hero-content {
    margin-top: 150px;
}

.hero .hero-content .hero-button {
    text-decoration: none;
    width: 486px;
    height: 48px;
}


@media (min-width: 1200px) {
    .hero-content .img-hero-1 {
        margin-top: -75px;
    }
    
    .hero-content .img-hero-2 {
        margin-top: 97px;
    }
    
}

@media (max-width : 800px ) {
    .hero-content .heading {
        text-align: center;
    }

    .hero-content .img-hero-1 {
        margin-top: -20px;
        max-width: 80%;
    }
    
    .hero-content .img-hero-2 {
        margin-top: 60px;
        max-width: 80%;
    }
    .about-ThaiRIS-heading, .about-RIS-section, .comming-section {
        text-align: center;
    }
    .hero .hero-content .hero-button {
        width: 100px;
        height: 48px;
    }
    .hero-content {
        margin-top: 50px;
    }

}

/*RIS-section*/

.vector .circle-1 {
    border-radius: 50%;
    border: 2px solid black;
    background-color: #21305a;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  }
  
  .vector .circle-2 {
    border-radius: 50%;
    background-color: #21305a;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 50px 0.1px #64ebfd46;
  }
  
  .vector img {
    max-width: 135%;
    max-height: 135%;
    margin-top: -50px;
  }

  .circle-3 {
    transform: translate(-28%, 10%);
    margin-top: -7rem;
    width: 27rem;
    height: 27rem;
    border-radius: 50%;
    z-index: 2;
}

@media (max-width: 575.98px) {
    .circle-1 {
      width: 14rem;
      height: 14rem;
    }
    .circle-2 {
      width: 10rem;
      height: 10rem;
    }
    .vector img {
      max-width: 135%;
      max-height: 135%;
      margin-top: -20px;
    }
    .circle-3 {
        transform: translate(-28%, 10%);
        margin-top: -5rem;
        width: 10rem;
        height: 10rem;
    }
  }
  
@media (min-width: 576px) and (max-width: 767.98px) {
    .circle-1 {
      width: 20rem;
      height: 20rem;
    }
    .circle-2 {
      width: 15rem;
      height: 15rem;
    }
    .vector img {
      max-width: 135%;
      max-height: 135%;
      margin-top: -30px;
    }
    .circle-3 {
        transform: translate(-28%, 10%);
        margin-top: -5rem;
        width: 15rem;
        height: 15rem;
    }
  }
  
@media (min-width: 768px) and (max-width: 1599.98px) {
    .circle-1 {
      width: 25rem;
      height: 25rem;
    }
    .circle-2 {
      width: 20rem;
      height: 20rem;
    }
    .vector img {
      max-width: 135%;
      max-height: 135%;
      margin-top: -40px;
    }
    .circle-3 {
        transform: translate(-28%, 10%);
        margin-top: -5rem;
        width: 20rem;
        height: 20rem;
    }
  }

  
@media (min-width: 1600px) {
    .circle-1 {
      width: 39.375rem;
      height: 39.375rem;
    }
    .circle-2 {
      width: 31.25rem;
      height: 31.25rem;
    }
    .vector img {
      max-width: 135%;
      max-height: 135%;
      margin-top: -50px;
    }
    .circle-3 {
        transform: translate(-28%, 10%);
        margin-top: -5rem;
        width: 25rem;
        height: 25rem;
    }
  }
 
/* About ThaiRIS */

.about-ThaiRIS-section .card-text h4{
    font-size: 26px;
    font-weight: 600;
    line-height: 40px;
}


.about-ThaiRIS-section a{
    text-decoration: none;
}

/* Integrate Viewer Section*/
.integrate-viewer-section .card {
    font-size: 26px;
    width: 304px;
}


/*Workflow section*/

.workflow-section .card{
    border-radius: 20px;
}

/*Carousel section*/
.carousel-section .card {
    max-width: none;
    border-radius: 20px;
    background-color: #fff;
}

.carousel-section .card img{
    border-radius: 20px;
}



.owl-dots {
    text-align: center;
}

.owl-theme .owl-dots .owl-dot.active span {
    background: #0E1534 !important;
}

/*table section*/
@media (min-width: 100px) and (max-width: 576px) {
    .table-section p, .table-section th, .table-section td{
        font-size: 8px !important;
    }
    
  }

.table-section .table-head {
    background-color: #3E4B6F;
}
.table-section table {
    font-size: 12px;
    border: 5px #0E1534;
}

.table-section .head-bg {
    border-radius: 10px;
}

.table-section .head-bg p{
    font-size: 12px;
}


.table-section .table {
    border: 1px solid #0E1534;
    border-radius: 15px;
    overflow: hidden;
}

/* Version-section */

.version-section {
    background-color: #979dad41;
}

.version-section .version-head h5 {
    color: #0E1534;
    font-size: 20px;
    font-weight: 600;
}

.version-section .card{
    border-radius: 15px;
}

.version-section .card .line {
    border-bottom: 1px solid #979DAD;
    border-bottom-width: 0.5px;
    width: 95%;
}
.version-section button, 
.version-section .btn-check:checked+.btn, 
.version-section .btn.active, 
.version-section .btn.show, 
.version-section .btn:first-child:active, 
.version-section :not(.btn-check)+.btn:active
,.btn-link {
    text-decoration: none;
    color: #979DAD !important;
    font-weight: 500;
}

.version-section .card .card-body p {
    font-size: 12px;
}

/*comming section*/
.comming-section .container .background {
    border-radius: 25px;
    background-color: #979dad82;
}
.comming-section .container .card {
    border-radius: 25px;
}

.comming-section .text-container h4 {
    color: #21305a;
    font-weight: 600;
    font-size: 20px;
}

/*footer section*/

.footer-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgb(3,5,18);
    background: linear-gradient(0deg, rgba(3,5,18,1) 0%, rgba(29,40,58,1) 30%, rgba(71,86,126,1) 70%, rgba(72,126,147,1) 95%, rgba(100,235,253,1) 100%);
    position: relative;
}