@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Exo+2:ital,wght@0,100..900;1,100..900&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
body {
    padding: 0;
    margin: 0;
}

/* Loader wrapper */
.loader-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 9999;
}

/* Lioft Name Animation */
/* Loader wrapper */
.loader-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 9999;
}

/* Lioft Logo Animation */
.lioft-loader {
    width: 150px; /* Adjust size */
    height: auto;
    animation: fadeZoom 1.5s infinite alternate;
}

/* Zoom + Fade effect */
@keyframes fadeZoom {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.2); opacity: 0.7; }
}

/* Hide loader when loaded */
.loaded .loader-wrapper {
    display: none;
}



.navbar {
    padding: 0;
    background: #000;
}

.navbar #logo {
    width: 26%;
}

.nav-link {
    color: #fff;
    font-weight: 500;
    transition: all .6s;
}

.navbar-nav .nav-item+.nav-item {
    margin-left: 50px;
}

a.nav-link {
    font-size: 18px;
}

a.nav-link:hover {
    color: #fff;
    transition: all .6s;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: #fff;
}

a.nav-link.btn-login {
    background: linear-gradient(45deg, #c34ffc, #4eb5f8);
    color: #fff;
    padding: 8px 17px !important;
    border: none;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: 1px 0 5px #00000045;
    transition: ease-in .6s;
}

a.nav-link.btn-login:hover {
    box-shadow: 1px 0px 30px #32f6e4;
    transition: ease-in .6s;
}

a.dropdown-item {
    font-weight: 500;
}

.dropdown-menu {
    padding: 0;
    overflow: hidden;
    margin-top: 8px;
}

.nav-link:focus,
.nav-link:hover {
    color: #fff
}

.dropdown-menu li+li {
    border-top: 1px solid #00000045;
}

.dropdown-menu li a {
    padding: 12px 23px !important;
}

a.dropdown-item {
    padding: 12px 23px;
}

.dropdown-menu li a:hover {
    background: linear-gradient(45deg, #b25dfb, #7494f9);
    color: #fff;
    transition: all .6s;
    /* transform: scale(1.1); */
}

.item {
    width: 100vW;
    height: 90vh;
    overflow: hidden;
}

.item-content {
    position: absolute;
    top: 0%;
    left: 0%;
    margin: 0 auto;
    color: #fff;
    transform: translate(9em, 7em);
}

.item-content h3 {
    font-size: 45px;
    font-weight: 700;
}

.item-content #tx-clip {
    letter-spacing: 1.8px;
    color: transparent;
    background: linear-gradient(45deg, #3adcbf, #fa9f82);
    background-clip: text;
}

.item-content p {
    font-size: 25px;
}

.btn-read {
    background: linear-gradient(45deg, #b25dfb, #7494f9);
    color: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 1px 0 20px #00000045;
    padding: 8px 25px;
    transition: all .6s;
    font-weight: 700;
    cursor: pointer;
}

.btn-read:hover {
    box-shadow: 1px 0 28px #3adcbf;
    transition: all .6s;

}

.item-content #tx-clip1 {
    letter-spacing: 1.8px;
    color: transparent;
    background: linear-gradient(263deg, #fa4ebb, #5aa1f1, #3adcbf, #fa9f82);
    background-clip: text;
}

#tx-clip2 {
    background: linear-gradient(45deg, #fc9a8c, #67adfe, #ba5fea, #3addbd);
    color: transparent;
    background-clip: text;
}

.owl-theme .owl-dots .owl-dot span {
    display: none;
}

.second {
    text-align: center;
    transition: opacity 0.5s ease-in-out;
}

.second-head {
    color: transparent;
    background: linear-gradient(180deg, #67adfe, #ba5fea, #3addbd);
    background-clip: text;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.box {
    background: #fff;
    color: #000;
    box-shadow: 1px 0 20px #00000045;
    padding: 50px 15px;
    border-radius: 15px;
    overflow: hidden !important;
    cursor: pointer;
    transition: all .4s;
}

.box-img i {
    font-size: 36px !important;
}

.box-content {
    padding: 14px 15px;
}

.box-content h4 {
    font-weight: 700;
}

.box-content p {
    font-weight: 500;
}

.box:hover {
    background: linear-gradient(45deg, #b958fc, #689ef9);
    color: #fff;
    box-shadow: 1px 0 20px #32fbdb;
    transition: all .4s;
}

#our-services {
    background: url(../images/6402687_3274764.jpg) no-repeat;
    background-position: center;
    background-size: cover;

}

.service h1 {

    color: transparent;
    background: linear-gradient(180deg, #67adfe, #ba5fea, #3addbd);
    background-clip: text;
    font-weight: 700;

}

.os-box {
    background: #fff;
    padding: 60px 20px;
    border-radius: 16px;
    box-shadow: 1px 0 20px #00000045;
    overflow: hidden;
    position: relative;
    transition: all .6s;
    cursor: pointer;

}

img#os-v {
    filter: drop-shadow(2px 4px 0px black);
    margin-bottom: 20px;
    z-index: 999;
}

.os-text {
    padding: 0 15px;
    z-index: 999;
}

.os-text h3 {
    font-weight: 700;
}

.os-text p {
    margin-bottom: 25px;
    font-weight: 500;

}

.btn-know {
    background: linear-gradient(45deg, #b25dfb, #7494f9);
    color: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 1px 0 20px #00000045;
    padding: 8px 25px;
    transition: ease .6s;
    font-weight: 700;
    cursor: pointer;
}

.hv-circle {
    background: linear-gradient(1800deg, #b25dfb, #7494f9);
    width: 27em;
    height: 26em;
    position: absolute;
    top: 24em;
    right: -0.5em;
    border-radius: 10em;
    box-shadow: 1px 0 20px #00000045;
    transition: ease .6s;

}

.os-box:hover .hv-circle {
    top: 0em;
    border-radius: 0em;
    transition: ease .6s;
    opacity: 10%;
}

.os-box:hover .btn-know {
    background: #000;
    color: #fff;
    border: 1px solid #67adfe, 1px solid #b25dfb;
    transition: ease .6s;
}

.reviews {
    text-align: center;
}

.rw-box {
    background: #fff;
    padding: 4em 20em;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: linear-gradient(177deg, #ba57fc, #6a9cf9);
    border-radius: 100%;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    color: transparent;
    background: linear-gradient(177deg, #ba57fc, #6a9cf9);
    background-clip: text;
    font-weight: 700;
}

.rw-content p {
    font-weight: 500;
}

.rw-content h4 {
    font-weight: 700;
    font-size: 16px;
}

.cont-content h1 {
    background: linear-gradient(180deg, #67adfe, #ba5fea, #3addbd);
    color: transparent;
    background-clip: text;
    font-weight: 900;
}

.cont-content p {
    font-weight: 500;
}

.cont-content {
    padding: 20px 48px;
}

#name {
    padding: 10px 50px;
    border-radius: 6px;
    border: 2px solid #f5a185;
    font-weight: 500;
    color: #5ba9f8;
}

#email-el {
    padding: 10px 50px;
    border-radius: 6px;
    border: 2px solid #f5a185;
    font-weight: 500;
    color: #5ba9f8;
    margin-top: 20px;
}

#organize {
    margin-top: 20px;
    padding: 10px 50px;
    border-radius: 6px;
    border: 2px solid #f5a185;
    font-weight: 500;
    color: #5ba9f8;
}

#msg-el {
    margin-top: 20px;
    padding: 10px 50px;
    border-radius: 6px;
    border: 2px solid #f5a185;
    font-weight: 500;
    color: #5ba9f8;
}

#submit-el {
    background: #fff;
    color: #b25dfb;
    border: 1px solid #5ba9f8;
    border-radius: 6px;
    font-weight: 700;
    padding: 10px 30px;
    box-shadow: 1px 0 20px #00000045;
    cursor: pointer;
    margin-top: 20px;
    position: relative;
    transition: all .6s;
}

#submit-el:hover{
    background: linear-gradient(60deg, #ba57fc, #6a9cf9);
    color: #fff;
    transition: all .6s;
    box-shadow: 1px 0 20px #32fbdb;
}

.contact{
    background: url(../images/sl_122221_47450_06.jpg) no-repeat;
    background-size: cover;
    
}

.cont-box{
    background: #ffffff73;
    border-radius: 10px;
    box-shadow: 1px 0 20px #00000045;
    padding: 30px 60px;
    
}

.cont-form{
    padding: 20px 48px;
}

/* Footer */
footer {
    background-color: #000;
    /* margin-top: 95px; */
    position: relative;
    color: #fff;
}

.support {
    padding: 43px 0;
}

.support ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.support ul li {
    padding: 5px 0;
}

footer .support ul li a {
    text-decoration: none;
    color: #838282;
}

.social ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 5px 0;
}

.social ul li {
    margin-right: 24px;
}

.social {
    padding: 43px 0;
}

.social .fa-facebook:before {
    content: "\f09a";
    display: block;
    font-size: 36px;
    color: #0008ff;
}

.social .fa-instagram:before {
    content: "\f16d";
    display: block;
    font-size: 36px;
    color: #ff006a;
}

.social .fa-twitter:before {
    content: "\f099";
    display: block;
    font-size: 36px;
    color: #3b71fe;
}

.social .fa-youtube:before {
    content: "\f167";
    display: block;
    font-size: 36px;
    color: #ff0000;
}

ul.rights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    border-top: 1px solid #ababab;
    padding-top: 10px;
    padding-bottom: 20px;
}

.rights li+li {
    margin-left: 49em;
}

ul.rights li {
    position: relative;
    display: inline-block;
    color: #ababab
}

i.fa.fa-envelope {
    margin-right: 10px;
}

footer #logo {
    width: 20%;
}

/* end */


@media screen and (min-width:250px) and (max-width: 500px) {
    *{
        box-sizing: border-box;
    }

    .item-content {
        top: 5%;
        transform: none;
        text-align: center;
    }

    .item-content p {
      font-size: 10px;
    }

    .item{
  height: 20vh;
  width: 100vw;
    }

    .item-content h3{
        font-size: 22px;
    }

    .rw-box{
        padding: 8px 25px;
    }

    .cont-box{
        flex-direction: column;
    }
    
    #name {
        padding: 10px 50px;
        border-radius: 6px;
        border: 2px solid #f5a185;
        font-weight: 500;
        color: #5ba9f8;
    }
    
    #email-el {
        padding: 10px 50px;
        border-radius: 6px;
        border: 2px solid #f5a185;
        font-weight: 500;
        color: #5ba9f8;
        margin-top: 20px;
    }
    
    #organize {
        margin-top: 20px;
        padding: 10px 50px;
        border-radius: 6px;
        border: 2px solid #f5a185;
        font-weight: 500;
        color: #5ba9f8;
    }
    
    #msg-el {
        margin-top: 20px;
        padding: 8px 10px;
        border-radius: 6px;
        border: 2px solid #f5a185;
        font-weight: 500;
        color: #5ba9f8;
    }

    .cont-form{
        padding: none;
    }

    .cont-box{
        padding: 0 !important;
    }

    footer{
        text-align: center;
    }

    footer li{
        font-weight: 500;
        
    }

    .rights{
        flex-direction: column;
    }

    .social ul{
        justify-content: center;
    }

    footer #logo{
width: 45%;
    }

    .hv-circle{
        right: -2.6em;
    }

    .navbar-toggler-icon {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        vertical-align: middle;
        background-image: url(../images/icons8-hamburger-button-50.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
}

.navabar{
    padding: 8px 0;
}

.navbar-nav .nav-item+.nav-item {
    margin-left: 0;
}

a.nav-link.btn-login {
    width: 40%;
    text-align: center;
}

.dropdown-menu{
    width: 52%;
}

}

@media screen and (min-width:600px) and (max-width:1300px) { 
        *{
            box-sizing: border-box;
        }
    
        .item-content {
            top: 5%;
            transform: none;
            text-align: center;
        }
    
        .item-content p {
          font-size: 10px;
        }
    
        .item{
      height: 20vh;
      width: 100vw;
        }
    
        .item-content h3{
            font-size: 22px;
        }
    
        .rw-box{
            padding: 8px 25px;
        }
    
        .cont-box{
            flex-direction: column;
        }
        
        #name {
            padding: 10px 50px;
            border-radius: 6px;
            border: 2px solid #f5a185;
            font-weight: 500;
            color: #5ba9f8;
        }
        
        #email-el {
            padding: 10px 50px;
            border-radius: 6px;
            border: 2px solid #f5a185;
            font-weight: 500;
            color: #5ba9f8;
            margin-top: 20px;
        }
        
        #organize {
            margin-top: 20px;
            padding: 10px 50px;
            border-radius: 6px;
            border: 2px solid #f5a185;
            font-weight: 500;
            color: #5ba9f8;
        }
        
        #msg-el {
            margin-top: 20px;
            padding: 8px 10px;
            border-radius: 6px;
            border: 2px solid #f5a185;
            font-weight: 500;
            color: #5ba9f8;
        }
    
        .cont-form{
            padding: none;
        }
    
        .cont-box{
            padding: 0 !important;
        }
    
        footer{
            text-align: center;
        }
    
        footer li{
            font-weight: 500;
            
        }
    
        .rights{
            flex-direction: column;
        }
    
        .social ul{
            justify-content: center;
        }
    
        footer #logo{
    width: 45%;
        }
    
        .hv-circle{
            right: -2.6em;
        }
    
        .navbar-toggler-icon {
            display: inline-block;
            width: 1.5em;
            height: 1.5em;
            vertical-align: middle;
            background-image: url(../images/icons8-hamburger-button-50.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
    }
    
    .navabar{
        padding: 8px 0;
    }
    
    .navbar-nav .nav-item+.nav-item {
        margin-left: 0;
    }
    
    a.nav-link.btn-login {
        width: 40%;
        text-align: center;
    }
    
    .dropdown-menu{
        width: 52%;
    }
    
    }