body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: rgb(232,125,13);
    background: linear-gradient(198deg, rgba(232,125,13,1) 0%, rgba(36,93,56,1) 52%, #1e152f 100%); 
    font-family: 'JetBrains Mono', Arial, Verdana, sans-serif;
}

.circle-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    position: relative;
    width: 85%;
    height: 100vh;
    box-sizing: border-box;
}

.circle {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 10px;
    cursor: pointer;
    opacity: 0;
    animation: fadeIn 1s ease forwards;
    background: rgb(232,125,13);
    background: linear-gradient(18deg, rgba(232,125,13,1) 0%, rgba(36,93,56,1) 52%, rgba(30,21,47,1) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-size: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for both scaling and box shadow */
}

.circle:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Add a shadow for better visual feedback */
}

.circle a {
    text-decoration: none;
    color: #000;
    display: block;
    text-align: center;
    font-size: 40px;
}


/*Blog*/
.circle:nth-child(1) {left: 7%; top: 20%; animation-delay: 0.3s; width: 200px; height: 200px;}
/*About ?*/
.circle:nth-child(2) {left: 80%; top: 10%; animation-delay: 0.5s; width: 130px; height: 130px;}
/*Services*/
.circle:nth-child(3) {left: 30%; top: 50%; animation-delay: 0.7s; width: 160px; height: 160px;}
/*Contact*/
.circle:nth-child(4) {left: 70%; top: 70%; animation-delay: 0.9s; width: 150px; height: 150px;}
/*Portfolio*/
.circle:nth-child(5) {left: 10%; top: 72%; animation-delay: 1s; width: 140px; height: 140px;}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .circle {
        width: 100px;
        height: 100px;
        font-size: 16px;
    }
    .circle:nth-child(1) {width: 140px; height: 140px;}
    .circle:nth-child(2) {width: 100px; height: 100px;}
    .circle:nth-child(3) {width: 120px; height: 120px;}
    .circle:nth-child(4) {width: 110px; height: 110px;}
    .circle:nth-child(5) {width: 100px; height: 100px;}
}