@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;500&display=swap');

html::-webkit-scrollbar{
    width: 7px;
    background-color: unset;
}

html::-webkit-scrollbar-thumb{
    background-color: gray;
    border-radius: 1rem;
}

*{
    scroll-behavior: smooth;
    box-sizing: border-box;
}

.hero_image{
    box-shadow: inset 0 0 0 9px rgb(255 255 255 / 30%);
    order: 1;
    animation: profile_animate 8s ease-in-out infinite 1s;
}

.logo,
.menu,
.mobile-menu {
    font-family: 'Poppins', sans-serif;
}
.hero-content,
.about-content,
/* .project-content, */
.contact-box{
    font-family: 'Mulish', sans-serif;
}

@keyframes profile_animate {
    0% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
    }
    100% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    }
}
@media screen and (max-width: 1600px){
    .container {
        margin-top: 0;
    }
}
@media screen and (max-width: 950px) {
    .menu {
        display: none;
    }
    .bar {
        display: block;
    }
    .work {
      display: none;
    }
    .home {
        flex-direction: column-reverse;
        gap: 3rem;
        height: auto;
    }
    .home-skills {
        left: auto;
    }
    .home-page {
        height: auto;
        padding: 8rem 0;
    }
    .intro {
        text-align: center;
        margin-bottom: 10rem;
    }
    .social,
    .home-image {
        justify-content: center;
    }
    .about {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
    }
    .skills {
        flex-direction: column;
        gap: 7px;
    }
    .tech {
        display: none;
    }
    .tech-title {
        padding-bottom: 5px;
        border-bottom: 2px solid rgb(88, 88, 88);
    }
    .box-parent {
        display: flex;
        justify-content: center;
    }
    .box {
        flex-direction: column;
        width: 570px;
    }
    .box-title {
       width: 90%;
       margin: 0 auto;
    }
    .box .image {
        width: 100%;
        height: auto;
    }
    .box .info {
        width: 60%;
    }
    .contact {
        margin-left: 4rem;
    }
    .contact-page {
        height: auto;
        padding: 8rem 0;
    }
}

@media screen and (max-width: 677px) {
    .contact-info {
        flex-direction: column;
    }
    .payment-info {
        /* flex-direction: column; */
        align-items: center;
        justify-content: center;
    }
}
@media screen and (max-width: 630px){
    .skills-box {
        display: grid;
        grid-template-columns: auto auto;
        margin-top: 1.5rem;
        padding: 0 1rem;
    }
    .html,
    .php {
        justify-content: space-between;
    }
    .intro {
        margin-bottom: 18rem;
    }
    .box {
        width: 80%;
    }
    .box .info {
        width: 100%;
    }
}
@media screen and (max-width: 565px) {
    .right {
        flex-direction: column;
        gap: 1rem;
    }
    .rights {
        text-align: center;
    }
    .about-details {
        width: 90%;
    }
}

@media screen and (max-width: 515px) {
    .home-img{
        width: 280px;
        height: 280px;
    }
    .hero-title {
        font-size: 3rem;
    }
    .contact {
        text-align: center;
        margin-left: 0;
    }
    .location {
        flex-direction: column;
    }
    .contact-page {
        justify-content: center;
        padding: 4rem 0;
    }
    .contact-main {
        justify-content: center;
        align-items: center;
    }
    .nav-bar {
        padding: 0 1.5rem;
    }
    .close {
        right: 1.5rem;
    }
    .wave {
        width: 3rem;
    }
}

@media screen and (max-width: 460px) {
    .about-image{
        width: 90%;
        height: auto;
    }
    .container {
        padding: 0;
        width: 90%;
    }
    .skills{
        margin-bottom: 190px;
    }
}

@media screen and (max-width: 434px) {
    .box,
    .box-title,
    .contact {
        width: 90%;
    }
    .box-title {
        text-align: center;
    }
}
@media screen and (max-width: 400px) {
    .hero-title {
        font-size: 2.5rem;
    }

}