@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Style+Script&display=swap');
*{
    margin:0px;
    padding: 0px;
    box-sizing:border-box;
}
/* Header styling */
ul li{
    list-style-type: none;
}
.nav-baar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    box-shadow: 8px 7px 16px 5px rgb(0 0 0 / 10%);
}
.logo{
    display:flex;
    align-items:center;
}
.logo img{
    width:100px;
    height:60px;
}
ul{
    display: flex;
    gap: 30px;
    padding: 10px;
}
button{
    padding: 10px 20px;
    border-radius: 10px;
    color: rgb(76, 128, 250);
    background-color: rgba(167, 255, 255, 0.911);
    border: none;
}
.logo p{
    font-family:"Style Script", cursive;
    font-size:30px;
    font-weight:500;
    color:#333;
}

/* Main Body styling */
.main-section{
    width: 1300px;
    height: 600px;
    margin: 30px auto;
    display: flex;
    /* border: 1px solid black; */
    padding: 20px;
}

.text-content{
    width: 50%;
    height: 100%;
    /* border: 1px solid black; */
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5%;
}
.text-content h2{
    font-size:64px;
    color:#2d3748;
    margin-bottom:20px;
}
.text-content span{
    color:#1ea7fd;
}
.text-content p{
    font-size:18px;
    color:#718096;
}
.text-content button{
    margin-top:35px;
    padding:18px 42px;
    background:#1ea7fd;
    color:white;
    border:none;
    border-radius:12px;
    font-size:18px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.4s ease;
    width: 400px;
}

.text-content button:hover{
    transform: scale(1.2) rotate(-5deg);
}
.img-content{
    width: 50%;
    height: 100%;
    /* border: 1px solid black; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.orbit{
    width: 500px;
    height: 500px;
    position: relative;
}

.main-orbit{
    width: 400px;
    height: 400px;
    position: absolute;
    animation: orbitMove 4s linear forwards 3;
}

.main-orbit img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes orbitMove{

    0%{
        transform: translate(0,0) scale(1,1);
    }

    25%{
        transform: translate(140px,0) scale(1,1);
    }

    50%{
        transform: translate(140px,140px) scale(1,1);
    }

    75%{
        transform: translate(0,140px) scale(1,1);
    }

    90%{
        transform: translate(0,0) scale(1,1);
    }

    95%{
        transform: translate(0,0) scale(0.6,1.2);
    }

    100%{
        transform: translate(0,0) scale(1,1);
    }
}