@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap');

html {
    scroll-behavior: smooth;
  }

body{
    font-family: 'IBM Plex Sans Thai', sans-serif;
}

header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    padding: 20px 20px;
    background-color: transparent;
    transition: 0.2s;
}

header.scrolling{
    background-color: #000000c5;
}

.header-container{
    max-width: 1700px;
    width: 100%;
    margin: 0 auto;
}

header .logo img{
    width: 90px;
    transition: 0.2s;
}

header.scrolling .logo img{
    width: 70px;
}

header .menu{
    margin-left: auto;
    display: flex;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    gap: 40px;
    align-items: center;
}

header .menu .menu-item .menu-link{
    color: #fff !important;
    font-weight: 500;
    font-size: 18px;
    text-decoration: none !important;
    position: relative;
    background-color: transparent;
    outline: none !important;
    border: 0;
    transition: 0.2s;
}

header.scrolling  .menu .menu-item .menu-link{
    font-size: 16px;
}

header .menu .menu-item .menu-link::after{
    content: "";
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 2px;
    background: rgb(56,182,255) !important;
    background: linear-gradient(270deg, rgba(56,182,255,0) 0%, rgba(56,182,255,1) 50%, rgba(56,182,255,0) 100%);
    opacity: 0;
    transition: 0.15s;
    border: 0 !important;
    left: -50%;
}

header  .dropdown-menu.show{
    top: 25px !important;
    display: grid;
    gap: 4px;
    background-color: transparent;
    border: 0;
    z-index: 3;
}

header  .dropdown-menu .dropdown-item{
    background-color: #000000a9;
    color: #fff;
    padding: 0.50rem 1.5rem;
    transition: 0.2s;
    position: relative;
}

header  .dropdown-menu .dropdown-item::after{
    content: "";
    position: absolute;
    bottom: 0px;
    width: 2px;
    height: 94%;
    background: rgb(56,182,255);
    opacity: 0;
    transition: 0.15s;
    border: 0 !important;
    left: 0;
    top: 20px;
}

header  .dropdown-menu .dropdown-item:hover{
    background-color: #000;
}

header  .dropdown-menu .dropdown-item:hover::after{
    opacity: 1;
    top: 2px;
}

header .menu .menu-item .menu-link:hover::after{
    opacity: 1;
    left: 0;
}

header .menu .menu-item .menu-link.active{
    background: linear-gradient(168deg, rgba(6,82,233,1) 0%, rgba(56,182,255,1) 50%);
    padding: 5px 30px;
    border-radius: 50px;
    box-shadow: 0 3px 5px #01243873;

}


.mobile-overlay{
    opacity: 0;
    z-index: -1;
    background-color: #0000007c;
    transition: 0.2s;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.2s;
}

.mobile-side{
    position: fixed;
    top: 0;
    left: -200%;
    padding: 15px;
    opacity: 0;
    z-index: -1;
    background-color: #fff;
    width: 50%;
    height: 100%;
    transition: 0.2s;
}

.mobile-side.active{
    left: 0%;
    opacity: 1;
    z-index: 10;
}

.mobile-overlay.active{
    opacity: 1;
    z-index: 9;
}

.main-slide .slick-dots{
    display: flex;
    align-items: center;
    padding-left: 0;
    padding-bottom: 0;
    position: absolute;
    bottom: 21%;
    left: 50%;
    transform: translate(-50% , -50%);
    list-style: none;
    gap: 16px;
}

.mobile-side .logo{
    text-align: center;
}

.mobile-side .menu{
    padding-left: 0;
    list-style: none;
    margin-top: 2.5rem;
}

.mobile-side .menu .menu-item {
    margin-bottom: 1rem;
}

.mobile-side .menu .menu-item a{
    color: #272727;
    font-weight: 500;
}

.mobile-side .menu .active {
    color: #38b6ff !important;
}

.main-slide .slick-dots li button{
    color: transparent;
    border-radius: 50px;
    width: 20px;
    height: 20px;
    border: 2px solid #77CDFF;
    box-shadow: 0 0 4px #77CDFF;
    background-color: transparent;
}

.main-slide .slick-dots li.slick-active button{
    background-color: #38b6ff;
}

.slide-section{
    position: relative;
}

.slide-section .hr-fade{
    width: 100%;
    height: 2px;
    background: rgb(56,182,255);
    background: linear-gradient(270deg, rgba(56,182,255,0) 0%, rgba(56,182,255,1) 50%, rgba(56,182,255,0) 100%);
    position: absolute;
    bottom: 22%;
    left: 50%;
    max-width: 1300px;
    transform: translate(-50% , -50%);
}

.slick-arrow{
    position: absolute;
    top: 50%;
    transform: translate(-50% , -50%);
    background-color: transparent;
    border: 0;
    padding: 0;
    outline: none !important;
    font-size: 50px;
}

section{
    padding: 0;
}

.slide-item{
    background-image: url(http://localhost:8000/frontend/imgs/banner-1.jpg);
    width: 100%;
    height: 923px;
    background-position: center;
    position: relative;
}

.container{
    max-width: 1300px;
}

.slide-item .slide-content{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.center-element{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; 
}

.slide-item .slide-content .slide-title{
    font-size: 80px;
    color: #fff;
    font-weight: 300;
}

.slide-item .slide-content .slide-description{
    color: #fff;
    font-weight: 300;
    font-size: 30px;
}

.slide-item .slide-content .slide-buttons{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 3rem;
}

.slide-item .slide-content .read-more{
    font-size: 25px;
    color: #fff !important;
    background-color: #38b6ff;
    border-radius: 50px;
    text-decoration: none !important;
    height: 58px;
    width: 338px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-item .slide-content .view-example{
    font-size: 25px;
    color: #fff !important;
    background-color: transparent;
    border-radius: 50px;
    text-decoration: none !important;
    height: 58px;
    width: 338px;
    display: flex;
    align-items: center;
    border: 2px solid #38b6ff;
    justify-content: center;
    transition: 0.2s;
}

.slide-item .slide-content .view-example:hover{
    background-color: #38b6ff;
}

.our-service{
    position: absolute;
    top: 90%;
    max-width: 1300px;
    width: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
}

.our-service-item{
    height: 157px;
    width: 32%;
    color: #fff;
    background-color: #00000031;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    gap: 30px;
    font-weight: 500;
    letter-spacing: 3px;
    transition: 0.2s;
    cursor: pointer;
}

.our-service-item:hover{
    background-color: #000000b9;
}

.solution-section{
    height: 100%;
    background-size: cover;
    background-image: url(../imgs/banner-solution.jpg);
    width: 100%;
    padding: 60px 20px;
}

.service-section{
    height: 923px;
    background-size: cover;
    background-image: url(../imgs/service.jpg);
    background-repeat: no-repeat;
    background-position: center;
}

.solution-title{
    font-size: 50px;
    color: #fff;
    letter-spacing: 10px;
    font-weight: 600;
    margin-bottom: 2.5rem;
    text-align: center;
}

.solution-description{
    font-size: 34px;
    color: #272727;
    font-weight: 600;
    margin-bottom: 3.5rem;
    text-align: center;
}


.solution-item{
    max-width: 740px;
    width: 100%;
    padding: 20px 40px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
    margin-bottom: 2rem;
    height: 140px;
}

.solution-item img{
    width: 86px;
}

.solution-item h3{
    font-size: 34px;
    font-weight: 700;
}

.solution-item h6{
    font-size: 18px;
    color: #5C5C5C;
}

.articles-section{
    width: 100%;
    padding: 200px 20px;
    background-image: url(../imgs/banner-articles.jpg);
    background-size: cover;
    background-position: center;
    height: 923px;
}

.article-section{
    padding: 70px 20px;
}

.title{
    color: #fff;
    font-size: 30px;
    text-align: center;
}

.article-item .article-text{
    background-color: #fff;
    padding: 15px;
}

.article-item{
    padding: 0 20px;
}

.article-item .article-text .article-title{
    color: #38B6FF;
    font-size: 18px;
}


.article-item .article-text .article-detail{
    color: #414141;
    font-weight: 300;
    margin-bottom: 0;
    text-decoration: none !important;
}

.articles-slide  .slick-dots{
    display: flex;
    align-items: center;
    padding-left: 0;
    padding-bottom: 0;
    list-style: none;
    gap: 16px;
    justify-content: center;
    margin-top: 4rem;
}

.articles-slide .slick-dots li button{
    color: transparent;
    border-radius: 50px;
    width: 20px;
    height: 20px;
    border: 2px solid #77CDFF;
    box-shadow: 0 0 4px #77CDFF;
    background-color: transparent;
}

.articles-slide .slick-dots li.slick-active button{
    background-color: #38b6ff;
}

.articles-section .view-all{
    position: absolute;
    bottom: -7px;
    right: 20px;
    background-color: transparent;
    border: 1px solid #38B6FF;
    color: #38B6FF;
    padding: 7px 30px;
    text-decoration: none !important;
    transition: 0.2s;
}

.articles-section .view-all:hover{
    background-color: #38B6FF;
    color: #fff;
}

.clients-section{
    width: 100%;
    padding: 100px 20px;
    padding-top:150px ;
    background-color: #fff;
    height: 923px;
}

.created-for{
    font-size: 18px;
    color: #00C2FF;
}

.clients-group{
    display: flex;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    align-items: center;
    justify-content: space-between;
}

.client-item{
    width: 23%;
    margin-bottom: 2.3rem;
}

.client-item img{
    border-radius: 10px;
}

.clients-section .view-all{
    background-color: #38B6FF;
    color: #fff;
    padding: 7px 30px;
    text-decoration: none !important;
    transition: 0.2s;
}

.contact-section{
    background-color: #000;
    width: 100%;
    padding: 100px 20px;
    padding-top:150px ;
    height: 923px;
}

.contact-section h4{
    font-size: 20;
    font-weight: 300;
    letter-spacing: 5px;
    color: #fff;
    margin-bottom: 2rem;
}

.contact-section .contact-input{
    background-color: transparent;
    outline: none !important;
    border: 1px solid #38B6FF;
    color: #fff;
    letter-spacing: 5px;
    width: 100%;
    margin-bottom: 25px;
    padding: 13px 20px;

}

.contact-section .contact-input::placeholder{
    color: #fff;
}

.contact-title{
    font-size: 30px;
    font-weight: 700;
    color: #38B6FF !important;
    text-align: center;
}

.contact-section form button[type=submit]{
    background-color: #38B6FF;
    color: #fff;
    padding: 13px 20px;
    width: 100%;
    border: 0;
    outline: none !important;
}

.contact-info{
    color: #fff;
}

.address{
    font-size: 18px;
}

.gap-1{
    gap: 1rem;
}

.gap-2{
    gap: 2rem;
}

footer{
    height: 133px;
    text-align: center;
    width: 100%;
    font-size: 25px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(253deg, rgba(6,82,233,1) 0%, rgba(56,182,255,1) 50%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


.pagination{
    gap: 15px;
}



.pagination .page-item .page-link{
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    border-radius: 50px;
    border: 1px solid;
    background-color: transparent;
    color: #0652e9;
    transition: 0.2s;
}

.pagination .page-item.active .page-link{
    border: 1px solid #0652e9;
    background-color: #0652e9;
    color: #fff;
}

.pagination .page-item .page-link:hover{
    border: 1px solid #0652e9;
    background-color: #0652e9;
    color: #fff;
}

.select-package{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.select-package h6{
    letter-spacing: 5px;
    font-weight: 600;
    color: #00C2FF;
    font-size: 18px;
    text-align: center;
}

.select-package h3{
   color: #fff;
   font-weight: 700;
   font-size: 60px;
}

.package-selection{
    max-width: 270px;
}

.package-selection a{
    background-color: #00000083;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: #fff;
    transition: 0.2s;
    text-decoration: none !important;
    margin-bottom: 15px;
    border: 1px solid #00000083;
}

.package-selection a:hover{
    background-color: #00C2FF;
    color: #fff;
    border: 1px solid #00C2FF;
}

.package-detail{
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    background-image: url(../imgs/package-detail-bg.jpg);
    padding: 100px 20px;
}

.package-title{
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 2.5rem;
}

.package-title span{
    color: #00C2FF;
}

.package-price{
    background-color: #00C2FF;
    color: #fff;
    padding: 7px 40px;
    font-size: 25px;
}

.package-price small{
    font-size: 16px;
}