@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&display=swap');

*{
    margin: 0; padding: 0;
    box-sizing: border-box;
    outline: none; border: none;
    text-decoration: none;
    text-transform: capitalize;
    transition: all 0.2s linear;
    font-family: 'Fira Sans', Arial, Helvetica, sans-serif;
}
:root {
    --text1-color: #fff; 
    --text2-color: #14105B; 
    --btn-color: #009fb7; 
    --bg-color: #f3f7ff;
    --box-color: #eee;
    --hover-color: #26b8ac;
    --topic-color: #fb5004;
    --brand-color: #007bff;   /* rgba(0, 123, 255, 1) */
}
html{
    scroll-behavior: smooth;
    scroll-padding-top: 0.5rem;
    font-size: 66%;
}
body{
    /* background: linear-gradient(117.5deg, rgb(210, 254, 232) 50.5%, rgb(210, 250, 243) 70.5%); */
    background: var(--bg-color);
    width: 100%;
    height: 100vh;
}
h2{
    position: relative;
    font-size: 6vmin;
    letter-spacing: 3px;
    color: var(--text1-color);
    -webkit-text-stroke: 0.05vmin var(--text2-color);
}
h2::before{
    content: attr(data-text);
    position: absolute;
    width: 0;
    height: 100%;
    color: var(--hover-color);
    -webkit-text-stroke: 0.04vmin var(--text2-color);
    border-right: 2px solid var(--hover-color);
    overflow: hidden;
    animation: text-animate 8s linear infinite;
}
@keyframes text-animate
{
    0%,10%,100%
    {
        width: 0;
    }
    70%,90%
    {
        width: 100%;
        border-color: transparent;
    }
}   
h3{
    font-size: 6vmin;
    color: var(--topic-color);
}
hr{
    box-shadow: 0 0 10px -5px var(--text2-color) inset !important;
    width: 100%;
    height: 1.5px;
}
/* *****START .btn***** */
.btn{
    display: inline-block;
    padding: 0.8rem 3.8rem;
    font-size: 1.8rem;
    border: 0.1rem solid var(--btn-color);
    outline: 0;
    background: var(--btn-color);
    border-radius: 1rem;
    cursor: pointer;
    text-align: center;
    color: var(--text1-color);
}
.btn:hover{
    background: none;
    color: var(--btn-color);
}
/* *****END .btn***** */
/* *****START .underline***** */
.underline{
    width: 38vmin;
    height: 4px;
    background: #fb5004;
    margin: 5px auto;
    border-radius: 5px;
    transition: all ease-in-out 5s;
}
.underline.show{
    width: 80%;
    border: 2px solid #fc036b;
    border-radius: 50%;
    box-shadow: 0 4px 5px rgba(63, 129, 235, 1);
}
/* *****END .underline***** */
/* *****START .heading***** */
.heading{
    margin: 1rem auto;
    /* text-align: center; */
    color: var(--text2-color);
    overflow: hidden;
}
/* *****END .heading***** */
/* *****START .section-area***** */
.section-area{
    padding: 3rem 9%;
}
/* *****END .section-area***** */
/* *****START header***** */
.nav-container{
    position: relative;
    /* height: 100vh;
    width: 100%;
    box-sizing: border-box;
    top: 0; left: 0; right: 0; bottom: 0; */
}
.webtop{
    position: absolute;
    top: 0; left: 0; right: 0;
}
.top-line{
    position: fixed;
    background:rgb(255, 119, 0);
    height: 3.5px;
    width: 100%;
    z-index: 102;
    top: 0; left: 0; right: 0;
}
header{
    position: fixed;
    /* top: 0; left: 0; */
    top: 0; left: 0; bottom: 0; right: 0; 
    /* display: flex;
    align-items:center;
    justify-content: space-between;
    padding: 1rem 1.5%;
    z-index: 101;
    width: 100%; */
    /* height: 12vh; */
    z-index: 101;
    width: 100%;
    height: 12vh;
    display: flex;
    align-items:center;
}
header .header-main{
    position: relative;
    display: flex;
    align-items:center !important;
    justify-content: space-between;
    top: 0; left: 0; bottom: 0; right: 0; 
    padding: 1rem 1%;
    height: 12vh;
    width: 100%;
}
header .logo{
    display: flex;
    position: relative;
    color: var(--text1-color);
    padding: 0.4rem;
    align-items: center;
    justify-content: center;
    /* animation: background 1.8s linear infinite; */
    width: 20%;
}
header .logo .com-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-size: 4vmin; */
    width: 8.7% !important;  
    height: 100%;
    z-index: 1;
    transform: scale(1.8);
    /* background-image: radial-gradient(circle, red , orange , yellow , green , violet ); */
    /* border-radius: 50%; */
    /* overflow: hidden; */
}
header .logo .com-icon img{
    width: 100%;
    height: 100%;
    /* border-radius: 50%; */
    top: 0;
}
header .logo .com-icon img:hover{
    transform: scale(1.2);
    transition: 0.5s;
}
header .logo .com-name{
    font-size: 4vmin !important;
    color: #e8b900;
    font-weight: 800;
	letter-spacing: 3px;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    width: 100%;
    z-index: 1;
}
header .logo .com-name:hover{
    cursor: pointer;
    transition: .5s;
    /* background: -webkit-linear-gradient(transparent, transparent),
    -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%,
     rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
    background: -o-linear-gradient(transparent, transparent);
    background-clip: text;
    -webkit-text-fill-color: transparent; */
    color: var(--brand-color);
}
header .logo span{
    position: absolute;
    top: 1.5px;
    left: 0;
    width: 100%;
    height: 90%;
    display: block;
}
header .logo span::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet);
    animation: logo 3s linear infinite;
}
header .logo span:first-child{
    transform: rotate(0deg);
}
header .logo span:nth-child(2n){
    transform: rotate(180deg);
}
@keyframes logo{       
    0% {transform: scale(0); transform-origin: left;}
    50% {transform: scale(1); transform-origin: left;}
    50.1% {transform: scale(1); transform-origin: right;}
    100% {transform: scale(0); transform-origin: right;}
}
header .navbar-one{
    /* position: absolute; */
    width: 70%;
    /* z-index: 101; */
    /* display: flex;
    justify-content: space-evenly; */
}
header .navbar-one ul{
    display: flex;
    text-decoration: none;
    list-style: none;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    transform: translateX(-11%);
}
header .navbar-one ul li a{
    margin: 0 0.8rem;
    font-size: 3.4vmin;
    color: var(--text1-color);
    padding: 0.4rem ;
    font-weight: 800;
}
.blue-text {
    color: var(--text2-color) !important;
}
header .navbar-one a.active{
    color: var(--brand-color);
    text-decoration: underline;
}
header .navbar-one a:hover{
    color: var(--brand-color);
}
/* header .navbar-two{
    display: none;
} */
header .navbar-two ul{
    text-decoration: none;
    list-style: none;
}
header .search-btns{
    position: absolute;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 12vh !important;
    right: 4.5% !important;
    width: 4%;
}
header #glass-btn{
    position: absolute;
    font-size: 4.5vmin !important;
    color: var(--text1-color);
    cursor: pointer;
    display: flex !important;
    margin-top: 3.5px;
    align-items: center !important;
    justify-content: center;
}
header #glass-btn:hover{
    color: var(--brand-color) !important;
    transition: .5s;
}
header .control-btns{
    position: absolute;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 12vh !important;
    right: 0 !important;
    width: 4%;
    padding-right: 1%;
}
header #burger-btn{
    position: absolute;
    /* font-size: 4.8vmin !important; */
    font-size: 7.3vmin !important;
    color: var(--text1-color);
    cursor: pointer;
    display: flex !important;
    margin-top: 3.5px;
    align-items: center !important;
    justify-content: center;
}
header #burger-btn:hover{
    color: var(--brand-color) !important;
    transition: .5s;
}
header #cross-btn{
    font-size: 4.5vmin;
    color: var(--text2-color);
    cursor: pointer;
    display: none;
}
header #cross-btn:hover{
    color: red !important;
    transition: .5s;
}
/* *****END header***** */
/* *****START home***** */
.home .box{
    position: relative;
    height: 80vh;
    width: 100%;
    overflow: hidden;
}
.home .box .image{
    animation: scaleitem 8s ease-in-out infinite;
}
@keyframes scaleitem {
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(1.1);
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
} 
 /* @keyframes scaleitem {
    0%{ transform: scale(1);}
    10%{ transform: scale(1.05);}
    20%{ transform: scale(1.1);}
    30%{ transform: scale(1.15);}
    40%{ transform: scale(1.2);}
    50%{ transform: scale(1.15);}
    60%{ transform: scale(1.1);}
    70%{ transform: scale(1.05);}
    80%{ transform: scale(1);}
} */
.home .box .img1::before{
    content: "";
    background: linear-gradient(45deg, rgba(91, 14, 214, 0.1) 50%, rgba(29, 236, 197, 0.1) 50%);
    position: absolute;
    /* bottom: 0;
    top: 0;
    left: 0;
    right: 0; */
    height: 80vh; 
    width: 100%; 
    box-shadow: 0 0 5px 2px #363333 inset;
}
.home .box .img2::before{
    content: "";
    /* background: rgba(0, 0, 0, 0.3); */
    background: linear-gradient(178.6deg, rgb(20, 36, 50) 30.8%, rgb(154, 60, 194) 73.8%);
    filter: opacity(0.5);
    position: absolute;
    height: 80vh;
    width: 100%; 
    box-shadow: 0 0 5px 2px #363333 inset;
}
.home .box .img3::before{
    content: "";
    background: linear-gradient(45deg, rgba(29, 236, 197, 0.4) , rgba(91, 14, 214, 0.4) 100%);
    position: absolute;
    height: 80vh; 
    width: 100%; 
    box-shadow: 0 0 5px 2px #363333 inset;
}
.home .box .img1{
    background-image: url("https://mdbootstrap.com/img/Photos/Others/images/91.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    height: 80vh;
    width: 100%;
}  
.home .box .img2{
    background-image: url("../img/hero-carousel/4.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center top;
    height: 80vh;
    width: 100%;
}  
.home .box .img3{
    background-image: url("https://mdbootstrap.com/img/Photos/Others/images/90.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    height: 80vh;
    width: 100%;
}  
.home .box .content{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50% , -50%);
    color: var(--text1-color);
    text-align: center;
    width: 80%;
    height: 100%;
}
/* .home .content {
    filter: drop-shadow(0px 2px 8px #fe2441);  # 添加陰影濾鏡效果
    padding: 5px;  # 添加內邊距
    box-sizing: border-box;  # 設定框模型為邊框內計算
    text-align: center;  # 文字置中對齊
} */
.home .box .content h3{
    font-size: 6vmin;
    margin-top: 25vh;
}
.home .box .content p{
    font-size: 2rem;
    margin: 1rem 0;
}
.swiper-pagination{
    margin: 10px;
}
.swiper-pagination-bullet{
    --swiper-pagination-bullet-size: 10px;
    border: var(--brand-color) solid;
}
.swiper-pagination-bullet-active{
    background-color: var(--brand-color);
}
.swiper-button-prev{
    transform: scale(1.5);
    padding-left: 10px;
    color: var(--btn-color);
}
.swiper-button-next{
    transform: scale(1.5);
    padding-right: 10px;
    color: var(--btn-color);
}
.home .box .content h3,
.home .box .content p,
.home .box .content a{
    animation: fadeIn .5s ease-in-out .5s forwards;
    opacity: -30;
    filter: blur(70px);
    transform: translateY(-50%);
  }  
@keyframes fadeIn{
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}  
/* *****END home***** */
/* *****START partner***** */
.partner .row{
    /* display: grid;
    grid-template-columns: repeat(auto-fit,minmax(25%,1fr)); */
    gap: 2rem;
    margin: 6rem 0;
}
.partner .row .box{
    background: var(--text1-color);
    border: 1px solid #e6e6e6;
    transition: all 0.3s ease-in-out;
    border-radius: 0.8rem;
    width: 300px;
    height: 500px;
    overflow: hidden;
}
.partner .row .box:hover{
    box-shadow: 0 4px 12px 0 rgba(0,0,0,.15);
    transform: translateY(-10px);
}
.partner .row .image-box:hover img{
    transform: scale(1.15);
    /* overflow: hidden; */
}
.partner .row img{
    width: 100%;
    object-fit: cover;
    transition: transform 0.2s linear;
    cursor: pointer;
}
.partner .row h3{
    color: var(--text2-color);
    font-size: 3rem;
    margin: 1.5rem 0;
}
.partner .row p{
    color: var(--text2-color);
    font-size: 1.9rem;
    margin: 1rem 0;
}
/* *****END partner***** */
/* *****START smeloan***** */
.smeloan .row{
    /* display: grid;
    grid-template-columns: repeat(auto-fit,minmax(30%,1fr)); */
    gap: 1.5rem 0.8rem;
    margin: 6rem 0;   
}
.smeloan .row .box{
    text-align: center;
    color: var(--text2-color);
    border: 1px solid #e6e6e6;
    transition: all 0.3s ease-in-out;
    padding: 4rem;
    border-radius: 0.8rem;
    transition: box-shadow .2s ease,transform .2s ease;
    transform-box: preserve-3d;
    background: linear-gradient(200deg, #faf8ee 0% , #fbf0fb 37%, #fffdf5 75%, transparent 100%);
    height: 450px;
    margin: 10px 0;
}
.smeloan .row .box:hover{
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15);
    transform: translateY(-10px);
    cursor: pointer;
    /* background: var(--box-color); */
}
.smeloan .row .box i{
    font-size: 5rem;
}
.smeloan .row .box h3{
    font-size: 2.5rem;
    margin: 1.5rem 0;
}
.smeloan .row .box p{
    font-size: 2rem;
}
/* *****END smeloan***** */
/* *****START ploan***** */
.ploan .row{
    /* display: grid;
    grid-template-columns: repeat(auto-fit,minmax(25%,1fr)); */
    gap: 1rem;
    margin: 6rem auto;
    width: 90%; 
}
.ploan .row .box{
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    border: 1px solid #e6e6e6;
    transition: all 0.3s ease-in-out;
    border-radius: 0.8rem;
    margin: 10px 0;
}
.ploan .row .box:hover{
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15);
    transform: translateY(-10px);
}
.ploan .row .box .card{
    width: 100%;
}
.ploan .card .imgBX button{
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 18px 10px;
}
.card{
    position: relative;
    width: 300px;
    height: 400px;
    background: var(--text1-color);
    overflow: hidden;
}
input, .toggle{
    position: absolute;
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
    outline: none;
    z-index: 10;
    cursor: pointer;
}
input{
    opacity: 0;
}
.toggle{
    pointer-events: none;
    border-radius: 50%;
    color: var(--text1-color);
    background: var(--brand-color);
    transition: 0.5s;
    text-align: center;
    line-height: 50px;
    font-size: 36px;
    font-weight: 600;
    box-shadow: 0 0 0 0px #cfcc17;
}
input:checked ~ .toggle{
    box-shadow: 0 0 0 500px var(--brand-color);
    transform: rotate(360deg);
    opacity: 0.9;
    font-size: 20px;
    z-index: 1;
}
.ploan .row .box:hover .toggle{
    color: var(--brand-color);
    border: 1px var(--brand-color) solid;
    background: none;
    animation: toggle 1.5s ease-in-out;
}
@keyframes toggle {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10vh);
    }
    100% {
        transform: translateY(0);
    }
}
.ploan .row .box .toggle::after {
    content: '更多 ⬇ ';
    position: absolute;
    top: -40px;
    left: 0;
    white-space: nowrap;
    font-size: 15px;
    color: var(--brand-color);
    padding: 2px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s;
}
.ploan .row .box:hover .toggle::after {
    opacity: 1;
}
.imgBX img{
    width: 100%;
    height: 50%;
    object-fit: contain;
}
.imgBX .content{
    color: var(--text2-color);
    box-sizing: border-box;
    font-size: 1rem;
    text-align: center;
}
.imgBX, .details{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: rgb(0, 0, 0);
}
.details{
    padding: 20px;
    box-sizing: border-box;
    z-index: 11;
    pointer-events: none;
    transition: .5s;
    opacity: 0;
}
input:checked ~ .details{
    opacity: 1;
    transition-delay: .5s;
}
.details h2{
    margin-bottom: 5px;
    color: var(--text1-color);
}
.details p{
    margin: 0;
    padding: 0;
    color: var(--text1-color);
}
/* *****END ploan***** */
/* *****START team***** */
/* .team{
    width: 100%;
} */
.team .row{
   background: url(../img/background/reviews-bg.jpg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;
   position: relative;
   display: flex;
   align-items: center;
   min-height: 70vh;
   margin: 6rem auto;
} 
.team .row::before{
    content: "";
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    /* bottom: 0;
    top: 0;
    left: 0;
    right: 0; */ 
    height: 70vh; /* Add this */
    width: 100%; /* Add this */
}
.team .row .team-slider .box{
    padding: 0 3%;
}
.team .team-slider .box .content{
    background: var(--text2-color);
    box-shadow: 0 0.5 0.5 rgba(0, 0, 0, 0.6);
    text-align: center;
    padding: 4rem;
    border-radius: 1rem;
    height:30rem;
}
.team .team-slider .box .image img{
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    position: absolute;
    top: 0rem; left: 1rem;
    border: 0.3rem solid var(--btn-color);
}
.team .team-slider .box .content h3{
    font-size: 4vmin;
    color: var(--btn-color);
    margin: 0.5rem;
}
.team .team-slider .box .content p{
    color: var(--text1-color);
    font-size: 3vmin;
}
/* *****END team***** */
/* *****START blog***** */
/* .blog .row{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(25%,1fr));
    gap: 2rem;
    margin: 6rem 0;
}
.blog .row .box{
    background: var(--text1-color);
    border: 1px solid #e6e6e6;
    transition: all 0.3s ease-in-out;
    border-radius: 0.8rem;
    overflow: hidden;
}
.blog .row .box:hover{
    box-shadow: 0 4px 12px 0 rgba(0,0,0,.15);
    transform: translateY(-10px);
}
.blog .row .image-box:hover img{
    transform: scale(1.15);
}
.blog .row img{
    width: 100%;
    object-fit: cover;
    transition: transform 0.2s linear;
    cursor: pointer;
}
.blog .row h3{
    color: var(--text2-color);
    font-size: 3rem;
    margin: 1.5rem 0;
}
.blog .row p{
    color: var(--text2-color);
    font-size: 1.9rem;
    margin: 1rem 0;
} */
/* *****END blog***** */
/* *****START footer***** */
.footer{
    background: var(--text2-color);
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(20%,1fr));
    gap: 2rem;
    text-align: center;
    padding: 4rem;
}
.footer h3{
    font-size: 3.5rem;
    margin: 2rem 0;
    color: var(--text1-color);
}
.footer p{
    font-size: 1.6rem;
    margin: 1rem 0;
    color: var(--text1-color);
}
.footer i{
    font-size: 2.6rem;
    margin: 1rem 0.5rem;
    color: var(--text1-color);
}
.footer i:hover,
.footer a:hover{
    color: var(--btn-color);
}
.footer a{
    display: block;
    font-size: 2rem;
    margin: 0.5rem;
    color: var(--text1-color);
}
/* *****END footer***** */
/* start progress-bar */
.progress-area{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%; 
    z-index: 10;
}
.progress-bar{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--bg-color);
    overflow: hidden;
}
.progress-bar-inner{
    position: relative;
    width: 0%;
    padding: 0;
    margin: 0;
    background: var(--text2-color);
    color: var(--text1-color);
    font-weight: 600;
    text-align: center;
    overflow: hidden;
}
/* End progress-bar */
/* *****START whatsapp***** */
.whatsapp{
    z-index: 2;
    position: fixed;
    right: 30px;
    opacity: 0;
    bottom: -50px;
    padding: 35px;
    animation: fade-up 1s forwards;
    animation-delay: 1s;
}
@keyframes fade-up{
    100%{
    bottom:5px;
    right: 5px;
    opacity: 1;
    }
}
.whatsapp .whatsapp-btn{
    font-size: 48px;
    color: #25d366;
}
.whatsapp span{
    position: absolute;
    top: 0;
    left: 10px;
    font-weight: bold;
    color: #075e55;
    transform: rotate(20deg) translateX(10px);
    opacity: 0;
    transition: all 0.4s ease-out;
}
.whatsapp .whatsapp-btn:hover + span{
    transform: rotate(35deg) translateX(50px);
    opacity: 1;
}
/* *****END whatsapp***** */


/* *****START animation part1 hidden-left***** */
.hidden-left{
    opacity: 0;
    filter: blur(50px);
    transform: translateX(-50%);
    transition: all 1s linear;
}
.hidden-left.show{
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}
/* *****END animation part1 hidden-left***** */
/* *****START animation part2 hidden-right***** */
.hidden-right{
    opacity: 0;
    filter: blur(50px);
    transform: translateX(50%);
    transition: all 1s linear;
}
.hidden-right.show{
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}
/* *****START animation part2 hidden-right***** */
/* *****START animation part3 hidden-up***** */
.hidden-up{
    opacity: 0;
    filter: blur(50px);
    transform: translateY(100%);
    transition: all 1s linear;
}
.hidden-up.show{
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}
/* *****END animation part3 hidden-up***** */
/* *****START animation part4 hidden-down***** */
.hidden-down{
    opacity: 0;
    filter: blur(50px);
    transform: translateY(-100%);
    transition: all 1s linear;
}
.hidden-down.show{
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}
/* *****END animation part4 hidden-down***** */
/* *****START animation part5 hidden-rotate***** */
.hidden-rotate{
    opacity: 0;
    filter: blur(100px);
    transform: rotate(180deg);
    transition: all 2s linear;
}
.hidden-rotate.show{
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}
/* *****END animation part5 hidden-rotate***** */
/* *****START animation fly-time***** */
.fly-time:nth-child(1) {
    transition-delay: 100ms;
}
.fly-time:nth-child(2) {
    transition-delay: 400ms;
}
.fly-time:nth-child(3) {
    transition-delay: 700ms;
}
.fly-time:nth-child(4) {
    transition-delay: 100ms;
}
.fly-time:nth-child(5) {
    transition-delay: 400ms;
}
.fly-time:nth-child(6) {
    transition-delay: 700ms;
}
/* *****End animation fly-time***** */

/* table test */
table, th, td {
    border:1px solid black;
  }
/* table test */

















/* ***************START width>=1025px*************** */
@media (min-width:1025px) {
    /* header .logo{
        font-size: 3.8vmin;
    } */
    /* header .logo .com-icon{
        width: 8%; 
    } */
    header #glass-btn.show-glass{
        display: none !important;
    }
    header #burger-btn.hide-burger{
        display: none !important;
    }
    header #cross-btn{
        display: none;
    }
    header #cross-btn.show-cross{
        display: block !important;
        font-size: 6.5vmin;
        margin-top: 3.5px;
    }
    .change-headermain{
        /* width: 100%;
        height: 12vh;
        transition: all 0.5s ease-in-out;
        border: 3px lightgrey solid;
	    outline: 1px rgba(255,255,255,1) solid; */
        /* background: linear-gradient(to left, #a5fecb, #65c7f7, #20bdff, #7056f4, #5433ff) !important; */
        height: 12vh !important;
        background: linear-gradient(to left, #a5fecb, #65c7f7, #20bdff, #7056f4, #5433ff 20%,
        transparent 20%, transparent 100%) !important;
        filter: opacity(0.95);
    }
    header .navbar-one.active-navbar-one{
        display: none;
    }
    /* .navbar-two .nav-link {
        margin-left: calc(100% - 90%);
    } */
    header .navbar-two{
        border: 3px lightgrey inset !important;
	    outline: 1px rgba(255,255,255,1) inset !important;
        display: none;
    }
    header .navbar-two ul{
        flex-direction: column;
        width: 100%;
        padding: 10% 0;
    }
    header .navbar-two ul li{
        display: flex;
        position: relative !important;
        width: 100%;
        justify-content: space-between;
        align-items: center !important;
    }
    header .navbar-two ul li a{
        margin-left: calc(100% - 90%);
       font-size: 3.8vmin;
        color: var(--text2-color);
        font-weight: 900;
	    letter-spacing: 3px;
        padding: 13px 0; 
        width: 100%;    
    }
    header .navbar-two.active-navbar-two{
        position: absolute;
        top: 12vh;  right: 0; bottom: 0;
        /* left: 0; */
        /* text-align: center; */
        width: 20%;
        height: 88vh;
        background: linear-gradient(179.98deg, rgba(104, 213, 255, 1) 0.12%, rgba(45, 179, 222, 1) 18.53%, #799de0 61.88%,#4f83e4 93.88%);
        filter: opacity(0.95);
        /* animation: leftmove 0.5s ease-in-out; */
        animation: rightmove 0.5s ease-in-out;
        display: block;
    }
    /* @keyframes leftmove {
        from {left: -100%;}
        to {left: 0;}
    } */
    /* @keyframes rightmove {
        from{transform: translate(100%, 0);}
          to{transform: translate(-80%, 0);}
    } */
     @keyframes rightmove {
        from {right: -100%;}
        to {right: 0;}
    }
    .navbar-two .fa-chevron-right {
        color: var(--text2-color);     
        margin-right: calc(100% - 90%);
        font-size: 4vmin;
        cursor: pointer;
    }
    .navbar-two li:hover .fa-chevron-right{
        color: var(--text1-color);
    }
    .navbar-two .fa-chevron-right:hover {     
        color: #E0BC00 !important;
    }
    header .navbar-two ul li a.active{
        color: var(--text1-color);
        text-decoration: underline;
    }
    .navbar-two .fa-chevron-right.active{
        color: var(--text1-color);
    }
    .navbar-two .fa-chevron-right.active:hover{
        color: #E0BC00;
    }
    header .navbar-two ul li a:hover{
        color: var(--text1-color);
    }
    header .navbar-two ul li:hover{
        background: linear-gradient(65.5deg, rgba(23,205,205,1) -15.1%, rgba(23,25,95,1) 71.5%);
        transition: 0.5s ease-out;
    }
    header .navbar-two ul li a:hover::before {
        content: ""; 
        position: absolute; 
        left: 0; 
        bottom: -3px;
        width: 0; 
        height: 3px;  
        background-color: var(--text1-color); 
        border-radius: 3px;
        box-shadow: inset 0 -2px 4px rgba(48, 48, 48, 0.15);
        animation: fill 1s ease-in-out forwards;
      }
    @keyframes fill {
        from{ width: 0%; opacity: 0;}
        to{ width: 100%; opacity: 1;}
    }
    /* header .navbar-two ul li a:hover::after {
        content: ""; 
        position: absolute; 
        left: 0; 
        bottom: -20px; 
        opacity: 0; 
        transition: opacity 1s ease-in-out; 
      } 
      header .navbar-two ul li a:hover::after{
        opacity: 1;
      }      */
    .navbar-two hr{ 
        position: absolute;
        height: 0.5px;
        width: 80%;
        border-radius: 100%;
        background: rgb(82, 82, 82);
        bottom: -1.5px;
        left: calc(100% - 90%);
        right: calc(100% - 90%);
        transition: background 0.1s ease-in-out;
    }
    .navbar-two li:hover hr{
        /* background: transparent; */
        display: none;
    }
    /* Start text-animation */
    .partner .heading h2{
        left: 40%;
        width: 25%;
    }
    .about .heading h2{
        left: 30%;
        width: 50%;
    }
    .smeloan .heading h2{
        left: 39%;
        width: 30%;
    }
    .ploan .heading h2{
        left: 40%;
        width: 28%;
    }
    .team .heading h2{
        left: 43%;
        width: 18%;
    }
    .blog .heading h2{
        left: 43%;
        width: 18%;
    }
    .contact .heading h2{
        left: 43%;
        width: 18%;
    }
    /* End text-animation */
}
/* ***************End width>=1025px*************** */

/* ***************Start width<=1024px*************** */
@media(max-width:1024px){
    /* body{
        overflow:auto;
    } */
    header{
        height: 10vh;
        display: flex;
        align-items: center !important;
    }
    header .header-main{
        height: 10vh;
        display: flex !important;
        align-items: center !important;
        padding: 1rem 1.5%;
    }
    header .logo{
        width: 76%;
    }
    header .logo.show-logo{
        display: flex !important;
        width: 85%;
    }
    header .logo .com-icon{
        width: 8.5% !important; 
    }
    header .logo .com-icon.comicon-big{
        width: 9.5% !important;
    }
    header .logo .com-name{
        font-size: 6.5vmin !important;
    }
    header .logo .com-name.comname-big{
        font-size: 8vmin !important;
    }
    header .search-btns{
        position: absolute;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 12vh !important;
        right: 12% !important;
        width: 12%;
        height: 5vh !important;
    }
    header #glass-btn{
        font-size: 6.3vmin !important;
    }
    header #glass-btn.show-glass{
        display: none !important;
    }
    header .control-btns{
        position: absolute;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 12%;
        height: 5vh !important;
        padding-right: 1.5%;
        /* border-radius: 50% 0; */
        transition: all 0.5s ease-in-out;
    }
    header .control-btns.ctrl-btns{ 
        height: 5vh !important;
        background: transparent !important;
        align-items: center !important; 
        justify-content: center !important;
    }
    header #burger-btn{
        display: block;
        /* font-size: 7.5vmin !important; */
        font-size: 10.5vmin !important;
        /* margin-right: 10px; */
    }
    header #burger-btn.hide-burger{
        display: none !important;
    }
    header #cross-btn{
        display: none !important;
    }
    header #cross-btn.show-cross{
        display: block !important;
        font-size: 8.7vmin !important;
        margin-top: 3.5px !important;
        margin-right: 15px !important;
    }
    /* .hide-scrollbar {
        overflow: hidden;
    } */
    .change-header{
        height: 13vh !important;
        transition: all 0.8s ease-in-out;
        background: linear-gradient(to left, #a5fecb, #65c7f7, #20bdff, #7056f4, #5433ff) !important;
        filter: opacity(0.99); 
        display: flex !important;
        align-items: center !important;
    }
    .change-headermain{
        height: 13vh !important;
        transition: all 0.8s ease-in-out;
        background: linear-gradient(to left, #a5fecb, #65c7f7, #20bdff, #7056f4, #5433ff) !important;
        filter: opacity(0.99); 
        display: flex !important;
        align-items: center !important;
    }
    header .navbar-one{
        display: none !important;
    }
    header .navbar-two{
        position: absolute;
        bottom: 0; left: 0; top: 13vh; right: 0;
        text-align: center;
        width: 100%;
        height: 87vh;
        background: linear-gradient(179.98deg, rgba(104, 213, 255, 1) 0.12%, rgba(45, 179, 222, 1) 18.53%, #799de0 61.88%,#4f83e4 93.88%);
        filter: opacity(0.99) !important;
        display: none;
        overflow: auto;
    }
    header .navbar-two.active-navbar-two{
        position: absolute;
        animation: upmove 0.5s ease-in-out;
        top: 13vh; left: 0; right: 0; bottom: 0;
        display: block;
        width: 100%;
    }
    @keyframes upmove {
        from {top: 100vh;}
        to {top: 13vh;}
    }
    header .navbar-two{
        border: 3px lightgrey inset !important;
	    outline: 1px rgba(255,255,255,1) inset !important;
    }
    header .navbar-two ul{
        flex-direction: column;
        width: 100%;
        padding: 5% 0 10%;
    }
    header .navbar-two ul li{
        display: flex;
        position: relative !important;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 0;
    }
    header .navbar-two ul li a{
        display: block;
        font-size: 7vmin !important;
        color: var(--text2-color);
        font-weight: 900;
	    letter-spacing: 3px;
        margin: 0;
        padding: 21px 0 !important;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .header .navbar-two ul li a{
        margin-left: calc(100% - 90%);
    }
    header .navbar-two ul li a.active{
        color: var(--text1-color);
        text-decoration: underline;
    }
    header .navbar-two ul li a:hover{
        color: var(--text1-color);
    }
    header .navbar-two ul li:hover{
        background: linear-gradient(65.5deg, rgba(23,205,205,1) -15.1%, rgba(23,25,95,1) 71.5%);
        transition: 0.5s ease-out;
    }   
    header .navbar-two ul li a:hover::before {
        content: ""; 
        position: absolute ; 
        left: 0 ; 
        bottom: -3px;
        width: 0; 
        height: 3px;  
        background-color: var(--text1-color); 
        border-radius: 3px;
        box-shadow: inset 0 -2px 4px rgba(48, 48, 48, 0.15);
        animation: fill 1s ease-in-out forwards;
      }
    @keyframes fill {
        from{ width: 0%; opacity: 0;}
        to{ width: 100%; opacity: 1;}
    }
    .navbar-two .fa-chevron-right {
        color: var(--text2-color);     
        margin-right: calc(100% - 90%);
        font-size: 8vmin;
        cursor: pointer;
    }
    .navbar-two .fa-chevron-right:hover {     
        color: #e0bc00 !important;
    }
    .navbar-two li:hover .fa-chevron-right{
        color: var(--text1-color);
    }
    .navbar-two .fa-chevron-right.active{
        color: var(--text1-color);
    }
    .navbar-two .fa-chevron-right.active:hover{
        color: #e0bc00;
    }
    .navbar-two hr{ 
        position: absolute;
        height: 0.5px;
        width: 80%;
        border-radius: 100%;
        background: rgb(82, 82, 82);
        bottom: -1.5px;
        left: calc(100% - 90%);
        right: calc(100% - 90%);
        transition: background 0.1s ease-in-out;
    }
    .navbar-two li:hover hr{
        display: none;
    }
    .home .box{
        position: relative;
        height: 60vh !important;
    }
    .home .box .image{
        height: 60vh !important;
        background-size: 100% 100%;
        object-fit: contain;
    }
    .home .box .image img{
        height: 60vh !important;
    }
    .home .box::before{
        height: 60vh !important; 
    }
    .home .box .content{
        position: absolute;
        top: 40%; left: 50%;
        transform: translate(-50% , -50%);
        color: var(--text1-color);
        text-align: center;
        width: 90%;
        height: 100%;
    }
    .home .swiper-button-next , .swiper-button-prev{
        display: none;
    }
    .partner .row{
        grid-template-columns: repeat(auto-fit,minmax(80%,1fr));
        width: 100%;
    }
    .smeloan .row{
        grid-template-columns: repeat(auto-fit,minmax(80%,1fr));
    }
    .ploan .row{   
        grid-template-columns: repeat(auto-fit,minmax(45%,1fr));
        width: 100%;
    }
    .ploan .row .box .card{
        width: 100%;
    }
    .blog .row{
        grid-template-columns: repeat(auto-fit,minmax(80%,1fr));
    }
    .footer{
        grid-template-columns: repeat(auto-fit,minmax(40%,1fr));
    }
    /* Start text-animation */
    h2{
        letter-spacing: 1px;
    }
    .partner .heading h2{
        left: 27%;
    }
    .about .heading h2{
        left: 0;
    }
    .smeloan .heading h2{
        left: 25%;
    }
    .ploan .heading h2{
        left: 27%;
    }
    .team .heading h2{
        left: 36%;
    }
    .blog .heading h2{
        left: 36%;
    }
    .contact .heading h2{
        left: 36%;
    }
    /* End text-animation */
}
/* ***************End width<=1024px*************** */

/* ***************Start width<=550px*************** */
@media(max-width:550px){
    .ploan .row{   
        grid-template-columns: repeat(auto-fit,minmax(100%,1fr));
    }
    .ploan .row .box .content
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }
    .ploan .row .box .content h3
    {
        font-size: 2rem;
    }
    .ploan .row .box .content p
    {
        font-size: 1.5rem;
    }
}
/* ***************End width<=550px*************** */