* {
    font-family: 'Poppins', sans-serif;
}

body{
    overflow-x: hidden;
}

span {
    font-family: 'Nunito', sans-serif;
}

/* -----------------------------------------ANIMATION------------------------------------------- */
.ltr111.animated,
.rtl111.animated,
.ttb111.animated,
.btt111.animated,
.ltr.animated,
.rtl.animated,
.ttb.animated,
.btt.animated,
.zmt.animated,
.mtl.animated,
.mtr.animated{
    display: inline-block;
    opacity: 0;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
.mtl.animated,
.mtr.animated {
    animation-delay: .6s;
}
.ltr.animated, .ltr111.animated{
    animation-name: slideFromLeft;
}
.rtl.animated, .rtl111.animated {
    animation-name: slideFromRight;
}
.ttb.animated, .ttb111.animated {
    animation-name: slideFromTop;
}
.btt.animated, .btt111.animated {
    animation-name: slideFromBottom;
}
.zmt.animated {
    animation-name: zoomOut;
}
.mtl.animated {
    animation-name: slideFromMidL;
}
.mtr.animated {
    animation-name: slideFromMidR;
}
.pxe.animated{
    animation: pixelEffect 2s linear forwards;
}
.pxe2.animated{
    animation: pixelEffect2 2s linear forwards; 
}
.pxe3.animated{
    animation: pixelEffect3 2s linear forwards; 
}
.pxe4.animated{
    animation: pixelEffect4 2s linear forwards;
}
.pxe5.animated{
    animation: pixelEffect5 2s linear forwards; 
}
.pxe6.animated{
    animation: pixelEffect6 2s linear forwards; 
}
.fade-in.animated {
    animation: fadeIn 2s ease forwards;
    opacity: 0; 
}
@keyframes slideFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideFromTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes zoomOut {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes slideFromMidL {
    from {
        transform: translateX(50%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideFromMidR {
    from {
        transform: translateX(-50%);
        opacity: 0;
    }

    to {
        transform: translateX(0%);
        opacity: 1;
    }
}
@keyframes pixelEffect{
    0% {
        clip-path: polygon(0 0, 0 100%, 0 100%, 0 0); /* Hide image initially */
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* Fully display image */
    }
}
@keyframes pixelEffect2 {
    0% {
        transform: rotateY(0deg) rotateX(0deg); /* Start at initial rotation */
    }
    100% {
        transform: rotateY(360deg) rotateX(360deg); /* Rotate cube in 3D space */
    }
}
@keyframes pixelEffect3 {
    0% {
        transform: rotate(0deg) translateX(0px);
    }
    50% {
        transform: rotate(360deg) translateX(100px);
    }
    100% {
        transform: rotate(720deg) translateX(0px);
    }
}
@keyframes pixelEffect4 {
    0% {
        transform: translate(100%, -100%); 
        opacity: 0; 
    }
    100% {
        transform: translate(0, 0); 
        opacity: 1; 
    }
}
@keyframes pixelEffect5 {
    0% {
        transform: translate(-100%, -100%); 
        opacity: 0; 
    }
    100% {
        transform: translate(0, 0); 
        opacity: 1; 
    }
}
@keyframes pixelEffect6 {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* -----------------------------------LOGO------------------------------------ */
.logo {
    top: .5%;
}

#logo {
    width: 12%;
    opacity: 0;
}

/* -----------------------------------SECTION 1------------------------------------ */
.sec1 {
    top: 3.7%;
}

#section1_text1 {
    margin: 0;
    color: white;
    font-size: 2.8vw;
    width: 60%;
    margin: 0 auto;
}

span {
    color: #60c67c;
    font-size: 4vw;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    width: 60%;
    margin: 0 auto;
    line-height: 1.2;
}

#section1_text2 {
    padding: 2vh 0;
    color: white;
    font-size: 1vw;
    width: 60%;
    margin: 0 auto;
    line-height: 2.1;
}

/* -----------------------------------SECTION 2------------------------------------ */
.title2 {
    top: 19.5%;
    margin-left: 25vw;
}

.title2 span {
    display: inline;
    font-size: 3.2vw;
}

.white {
    color: white;
    margin: 0 auto;
}

.sec2 {
    top: 21.2%;
    margin-left: 14vw;
    width: 68%;
}

#section2_frame {
    opacity: 0;
    width: 55%;
}

.subtext2 {
    top: 22.2%;
    margin-left: 5.5vw;
}

.mid2 {
    font-size: 2.8vw;
}

.small2 {
    font-size: 2.2vw;
}

.w2 {
    width: 55%;
}

.text2 {
    top: 21.9%;
    margin-left: 56vw;
}

#section2_text2 {
    padding: 2vh 0;
    color: white;
    font-size: 1vw;
    width: 90%;
    margin: 0 auto;
    line-height: 2.5;
}

/* -----------------------------------SECTION 3------------------------------------ */
.title3 {
    top: 29%;
}

.title3 span {
    display: inline;
    font-size: 3.2vw;
}

.sec3 {
    top: 31%;
}

.sec3 .bd {
    border-color: #60c67c;
    border-width: 2px;
    border-style: solid;
    border-radius: 5vw;
    padding-top: 1.2vw;
    opacity: 0;
} 
#section3_pic1 {
    padding-top: 1.5vh;
    width: 85%;
}

#section3_pic2 {
    width: 90%;
}

#section3_pic3 {
    padding: 1.5vh 0;
    width: 100%;
}

#section3_pic4 {
    width:75%;
}

#section3_pic5 {
    width: 85%;
}

#section3_pic6 {
    width: 85%;
}

#section3_subtext3 {
    margin-top: 4vh 0;
    font-size: 1.3vw;
    line-height: 1.5;
}

#section3_text3 {
    padding-top: 2vh;
    color: white;
    font-size: 1vw;
    line-height: 1.6;
}

.service_item1 {
    margin-left: 10vw;
    margin-right: 1vw;
}

.service_item2 {
    margin-left: 1vw;
    margin-right: 1vw;
}

.service_item3 {
    margin-left: 1vw;
}

/* -----------------------------------SECTION 4------------------------------------ */
.title4 {
    top: 48.7%;
}
.title4 span {
    display: inline;
    font-size: 3.2vw;
}
.sec4{
    top: 50.6%;
}
.package_item1{
    margin-left: 10vw;
    margin-right: 1vw;
}
.package_item2{
    margin-left: 1vw;
    margin-right: 1vw;
}
.package_item3{
    margin-left: 1vw;
    margin-right: 10vw;
}
.frame4{
    background-image: url('../image/desktop/section4/rectangle.png'); 
    background-size: cover; 
    background-position: center;
    border-radius: 15px;
}
.section4_icon {
    float: left;
    padding: 2vh 0;
    margin-left: 1.5vw;
    width: 16%;
}
.section4_text{
    margin-top: 4vh;
    display: inline-block;
    color: white;
    font-size: 1vw;
    margin-left: .7vw;
}
#package_item1, #section4_icon1{
    animation-delay: 0s;
}
#package_item4, #section4_icon4{
    animation-delay: 0.5s;
}
#package_item7, #section4_icon7{
    animation-delay: 1s;
}
#package_item8, #section4_icon8{
    animation-delay: 1.5s;
}
#package_item9, #section4_icon9{
    animation-delay: 2s;
}
#package_item6, #section4_icon6{
    animation-delay: 2.5s;
}
#package_item3, #section4_icon3{
    animation-delay: 3s;
}
#package_item2, #section4_icon2{
    animation-delay: 3.5s;
}
#package_item5, #section4_icon5{
    animation-delay: 4s;
}
/* -----------------------------------SECTION 5------------------------------------ */
.title5 {
    top:59.4%;
    margin-left: 20vw;
    width: 30%;
}
.title5 span {
    display: inline;
    font-size: 3.2vw;
}
#section5_text5 {
    padding-top:.5vh;
    color: white;
    font-size: 1vw;
    line-height: 2.1;
}
.stat_container{
    top: 59.4%;
    left: 55%;
}
.stat_item{
    display: inline-block;
    border-color: white;
    border-width: 1px;
    border-style: solid;
    padding-top: 1vh;
    margin: 1vh 0.5vw;
    height: 15vh;
    width: 32%;
    text-align: center;
}
.stat_item span span{
    display: inline;
}
.big{
    width: 67%;
}
.stat_align{
    text-align: center;
}
.item_text{
    margin: 0;
    font-size: 3.5vw;
}
.item_text2{
    margin: 0;
    color: white;
    font-size: 1.5vw;
}
/* -----------------------------------SECTION 6------------------------------------ */
.title6 {
    top: 82.5%;
}
.title6 span {
    display: inline;
    font-size: 3.2vw;
}
.subtext6 {
    top: 85%;
}
#section6_subtext6, #section6_subtext6_2{
    display: block;
    color: white;
    font-size: 1vw;
    width: 60%;
    margin: 0 auto;
    line-height: 2.1;
}

.form-container {
    left: 50%;
    top: 84.5%;
    transform: translateX(-50%);
    width: 90%;
    padding-top: 9vh;
    text-align: center; /* Center align the form elements */
}

.form-container input {
    display: inline-block;
    height: 8vh;
    font-weight: bold;
    color: grey;
    font-size: 1vw;
    width: 32%;
    padding: 20px;
    border: 1.5px solid grey;
    border-radius: 10px;
    box-sizing: border-box;
    margin: 1vh .8vw;
    background: transparent;
}
.form-container input::placeholder{
    font-size: .8vw;
}

.form-container input:focus {
   outline: 2px solid #60C782;
}

#btn {
    background-image: url(../image/desktop/section6/btn.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    margin: 0 auto;
    margin-top: 5vh;
    width: 60%;
    height: 8vh;
    animation: pulse 0.8s infinite;
    animation-timing-function: linear;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* -----------------------------------SECTION 7------------------------------------ */
.title7{
    top: 96.7%;
}
#section7_text7{
    display: block;
    color: white;
    font-size: 1vw;
    font-weight: bold;
    width: 80%;
    margin: 0 auto;
    padding-bottom: 1vh;
}
#section7_subtext7{
    display: block;
    color: white;
    font-size: .8vw;
    width: 80%;
    margin: 0 auto;
}

/* -----------------------------------SECTION 8------------------------------------ */
.title8 {
    top: 99.1%;
    left: 42%;
}
.title8 span {
    display: inline;
    font-size: 1.2vw;
}
.whatsapp
{
    top: 99%;
    left: 53%;
    animation-delay: 0s;
}
.whatsapp img{
    width: 40%;
    max-width: 599px;
}
.telegram
{
    top: 99%;
    left: 56.5%;
    animation-delay: 0.5s;
}
.telegram img{
    width: 40%;
    max-width: 599px;
}
.line
{
    top: 99%;
    left:60%;
    animation-delay: 1s;
}
.line img{
    width: 40%;
    max-width: 599px;
}

/* -----------------------------------RESPONSIVE------------------------------------ */

@media only screen and (min-width:750px){
    #btn {
        width: 40%;
        height: 10vh;
    }
    .title8, .whatsapp, .telegram, .line{
        top: 98.9%;
    }
    .whatsapp img, .telegram img, .line img{
        width: 26%;
    }
}
@media only screen and (min-width:950px){
    #btn {
        width: 40%;
        height: 10vh;
    }
    .title8{
        top: 98.95%;
    }
    .whatsapp, .telegram, .line{
        top: 98.95%;
    }
    .whatsapp img, .telegram img, .line img{
        width: 35%;
    }
}
@media only screen and (min-width:1150px){
    #btn {
        width: 42%;
        height: 10vh;
    }
    .title8{
        top: 99.1%;
    }
    .whatsapp, .telegram, .line{
        top: 99%;
    }
    .whatsapp img, .telegram img, .line img{
        width: 39%;
    }
    
}
@media only screen and (min-width:1400px){
    #btn {
        width: 40%;
        height: 9vh;
    }
    .title8{
        top: 99.1%;
    }
    .whatsapp, .telegram, .line{
        top: 99%;
    }
    .whatsapp img, .telegram img, .line img{
        width: 50%;
    }
    
}
@media only screen and (min-width:1962px){
    #btn {
        width: 35%;
        height: 8.5vh;
    }
    .title8{
        top: 99.1%;
    }
    
    .whatsapp, .telegram, .line{
        top: 99.1%;
    }
    .whatsapp img, .telegram img, .line img{
        width: 80%;
    }
}
@media only screen and (min-width:2944px){
    #btn {
        width: 35%;
        height: 8.5vh;
    }
    .title8{
        top: 99.2%;
    }
    .whatsapp img, .telegram img, .line img{
        width: 100%;
    }
}