@import "./reset.css";

.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
}

.navbar .navitems{
    display: flex;
    gap: 3.6rem;
    justify-content: center;
    align-items: center;
}

.navbar .navitems .nav-dropdown{
    display: flex;
    gap: 1rem;
    align-items: center;
    cursor: pointer;
}

.navbar .btn-group{
    display: flex;
    align-items: center;
    gap: 2.4rem;
}



.herosection{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.herosection .content-group{
    position: relative;
}

.herosection .content-group .asthetics-img-fan{
    position: absolute;
    left: -3.5rem;
    top: 4rem;
    z-index: -1;
}

.herosection .quick-testimonial{
    display: flex;
    align-items: center;
    margin-bottom: 1.6rem;
}

.herosection .quick-testimonial {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.herosection .quick-testimonial .quick-testimonial-group{
    height: 4rem;
    width:auto;
}

.herosection .quick-testimonial .star-group{
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.herosection .companies-container {
    width: 90%;
    height: fit-content;
    overflow: hidden;
}

.herosection .companies-container .companies-wrapper {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: fit-content;
    flex-wrap: nowrap;
    animation: slide 50s linear infinite;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}


@keyframes slide{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-50%);

    }
}


.features-section .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.features-section .features-cards-container{
    display: flex;
    flex-wrap: wrap;
    gap: 3.2rem;
}

.features-section .features-cards-container .feature-card{
    padding: 1.6rem;
    width: 31.5%;
} 


.tailored-resume-section{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tailored-resume-section .tailored-resume-cards-container{
    display: flex;
    justify-content: center;
    gap: 3rem;
    width: 100%;
}

.tailored-resume-section .tailored-resume-cards-container .tailored-resume-card{
    padding: 4.8rem 6.4rem 0 6.4rem;
    width: 52.8rem;
    border-radius: 0.8rem;
    height: fit-content;
}

.tailored-resume-section .tailored-resume-cards-container .job-entry-card{
    background-color: var(--primary-darkblue);
}

.tailored-resume-section .tailored-resume-cards-container .job-switch-card{
    background-color: var(--cream-color);
}

.tailored-resume-section .tailored-resume-cards-container .tailored-resume-card .card-heading-group{
 position: relative;
 margin-bottom: 3.6rem;
}

.tailored-resume-section .tailored-resume-cards-container .tailored-resume-card .card-heading-group .subtitle-card{
    position: absolute;
    top: 3.2rem;
    left: 8rem;
    padding: 0.8rem 2.4rem;
    border-radius: 2.4rem;
    background-color: var(--background);
    transform: rotate(-3deg);
}

.tailored-resume-section .tailored-resume-cards-container .tailored-resume-card .features-description{
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
}

.tailored-resume-section .tailored-resume-cards-container .tailored-resume-card .features-description .tailored-resume-feature{
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.tailored-resume-section .tailored-resume-cards-container .tailored-resume-card .job-entry-card-image{
    display: block;
    margin: auto;
}

.tailored-resume-section .tailored-resume-cards-container .tailored-resume-card .job-switch-card-image{
    display: block;
    margin: auto;
}

.resume-prep-wrapper{
    background: linear-gradient(180deg, #111829 , rgb(18, 18, 18, 0.1));
    padding: 7.2rem 3.6rem;
    border-radius: 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.resume-prep-wrapper .resume-prep-steps{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.resume-prep-wrapper .resume-prep-steps .prep-step{
    width: 26%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.resume-prep-wrapper .resume-prep-steps .prep-step .numbering{
    position: relative;
    top: 4rem;
}


.testimonials-section .testimonial-header{
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 1rem;
}

.testimonials-section .testimonial-container{
    width: 100%;
    overflow: visible;
}

.testimonials-section .testimonial-container .testimonial-wrapper{
    width: 100%;
    display: flex;
    gap: 3rem;
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
  z-index: 10;
}

.testimonials-section .testimonial-container .testimonial-wrapper .testimonial{
    width: 48rem;
    padding: 3.2rem;
    background-color: var(--primary-darkblue);
    border-radius: 0.4rem;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 20;
    overflow: visible; 
}

.testimonials-section .testimonial-container .testimonial-wrapper .testimonial .tesimonial-quote-decor{ 
    position: absolute;
    top: -3rem;
    right: 2rem;
    z-index: 30;
    display: none;
}

.testimonials-section .testimonial-container .testimonial-wrapper .profile{
   display: flex;
   align-items: center;
   gap: 1rem;
}

.testimonials-section .testimonial-container .testimonial-wrapper .profile .avatar{
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 4.8rem;
 }

 .testimonials-section .testimonial-container .testimonial-wrapper .profile .avatar .avatar-testimonial{
    width: 100%;
    height: 100%;
 }

 .testimonials-section .testimonial-container .testimonial-wrapper .profile .profile-details{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
 }


 .fix-resume-section{
    display: flex;
    flex-direction: column;
    align-items: center;
 }

 .fix-resume-section .old-resume-input{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.6rem;
    border: 1px dashed #94969C;
    border-radius: 0.8rem;
    width: 70%;
 }


.features-specs-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6.4rem;
}

.features-specs-section .feature-spec-tab{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.features-specs-section .feature-spec-tab:nth-child(odd){
    flex-direction: row-reverse;
}

.features-specs-section .feature-spec-tab .feature-spec-point{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 2rem;
}

.build-resume-card{
    display: flex;
    background: var(--primary-darkblue);
    border-radius: 1.2rem;
}

.build-resume-card .build-resume-card-content{
    padding: 6.4rem;
}

.build-resume-card .build-resume-card-image-wrapper{
    width: 54.8rem;
    height: auto;
    display: flex;
    align-items: end;
}

.build-resume-card .build-resume-card-image-wrapper img{
    width: 54.8rem;
    height: fit-content;
}


.blogs-section .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.blogs-section .blogs-cards-container{
    display: flex;
    flex-wrap: wrap;
    gap: 3.2rem;
}

.blogs-section .blogs-cards-container .blog-card{
    padding: 1.6rem;
    width: 31.5%;
} 

.blogs-section .blogs-cards-container .blog-card .blog-image-wrapper{
    width: 100%;
} 

.blogs-section .blogs-cards-container .blog-card .blog-image-wrapper img{
    width: 100%;
    height: fit-content;
} 

.footer{
    display: flex;
    flex-direction: column;
    padding: 9.6rem 12rem 4.8rem 12rem;
}

.footer .footer-top{
    display: flex;
    justify-content: space-between;
    margin-bottom: 6.4rem;
}

.footer .footer-top .left{
    width: 20%;
}

.footer .footer-top .right{
    display: flex;
    justify-content: space-between;
    width: 50%;
}

.footer .footer-top .right .footer-nav-group{
    display: flex;
    flex-direction: column;
}

.footer .footer-top .right .footer-nav-group .footer-nav-link{
    color: var(--text-light-white);
    font-weight: 400;
    margin-bottom: 1.2rem;
}

.footer .footer-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2.4rem;
    border-top: 1px solid #454A56;
}

.footer .footer-bottom .social-media-group{
    display: flex;
    align-items: center;
    gap: 3rem;
}