/*Desktops*/
@media (min-width:1200px) and (max-width: 1919px) {
 
    section{
        padding:  3% 8% 6% 8%;
    }
    .hero-section{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 2rem;
        align-items: center;
    }
    .hero-section-data{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem;
        width: 40vw;
    } 
    .hero-section h1{
        font-size: 2.4rem;
        font-weight: 800;
        font-kerning: auto;
    }
     .hero-section h2{
        font-size: 1.3rem;
        font-weight: 500;
    }
     .hero-section h3{
        font-size: 1.1rem;
        font-weight: 400;
    }
    .hero-links{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.5rem;
    }
    .hero-links a{      
        text-decoration: none;
        padding: 1rem 0.8rem;
        border-radius: 2.8rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .link-to-action a{
        padding:  1rem 1.2rem;
        background-color: var(--primary);
        color: var(--white);
    }
    .link-to-projects a{
        padding:  0.8rem 1rem;
        background-color: transparent;
        color: var(--primary);
        border: 2px solid var(--primary);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.3rem;
    }
    .hero-section img{
        width: 32vw;
        object-fit: cover;
        object-position: center;
        border: none;
        mix-blend-mode: multiply;
        filter: brightness(1.2);
    }



    /*About*/
    .about{
        padding: 10%;
    }
    .about-info{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 6%;
        
    }
    .about-info-data{
        width: 55vw;
    }
    .about-info-data ::details{
        border-radius: 3px;
        border: 3px solid white;
        padding: 0.22rem;
    }
    .about-info p{
        font-size: larger;
    }
    .about-intrapersonal-skills{
        box-shadow:8px 8px 12px #a3b1c6;
        background-color: var(--white);
        border-radius: 8px;
        height: 30%
    }
    .about-intrapersonal-skills .about-cards .about-card img{
     height: 3rem;
     width: 3rem;
     object-fit: cover;
     background-position: center;
     border-radius: 50%;
    }
    .about-intrapersonal-skills h4{
        text-align: center;
        margin: 2rem 0rem;
        border-bottom: 1px solid lightgray;
    }
    .about-cards{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin: 3rem 2rem ; 
        
    }
    .about-card{
        padding: 1% 5%;
    }
    .skills-container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
    .skills-card{
        background-color: var(--white);
        box-shadow: 8px 8px 12px #a3b1c6;
        padding: 5%;
        border-radius: 5px;
    }
    .open-skills{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 0.5rem;
        margin-top: 0.8rem;
    }
    .open-skill{
        background-color: var(--secondary);
        padding: 0.3rem 0.8rem;
        border-radius: 1.5rem;
        font-weight: 400;
        font-size: 0.9rem;
    }

    /*Stack and Tools*/
    .tools-container{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 0.5rem;
        margin-top: 0.8rem;
    }
    .tools{
        background-color: var(--primary);
        padding: 0.5rem 0.8rem;
        border-radius: 1.5rem;
        font-weight: 400;
        font-size: 0.9rem;
       color: var(--white);    
    }

    /**services*/
    .solid-text{
        height: auto;
        font-size: 2.5rem;
        font-weight: 800;
    }
    .services-cards{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
       margin-top: 2rem;
    }
    .services-cards div{
         box-shadow:  8px 8px 12px #a3b1c6;
         padding: 8%;
         border-radius: 8px;
    }
    .services-cards .fa{
        height: 4rem;
        width: 4rem;
        border-radius: 4rem;
        padding: 0.5rem;
        background-color: var(--secondary);
        margin-bottom: 0.8rem;
    }
    .services-cards h3{
        margin-bottom: 0.8rem;
    }


    /**Projects*/
    .projects-top{
        margin: 1rem 0rem;
    }
    .project-cards{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-top: 3rem;
    }
    .project-card{
        border-radius: 8px;
        box-shadow: 8px 8px 12px #a3b1c6; 
        background-color: var(--white);  
    }
    .project-card img{
        height: 45vh;
        width: 100%;
        border-radius: 8px;
        padding: 0;
        margin: 0;
    }
    .project-card-info{
        padding: 5%;
    }
    .project-card-info div{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 0.8rem 0rem;
    }
    .details-badge{
        padding: 0.4rem;
        background-color: var(--secondary);
        font-size: smaller;
        font-weight: 500;
        border-radius: 0.2rem;
        box-shadow: 2px 2px 4px #a3b1c6;
    }

    /*Testimonial*/
    .testimonials-cards{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
        margin-top: 4rem;
    }
    .testimonial-card{
        padding: 8%;
        border-radius: 8px;
        box-shadow: 8px 8px 12px #a3b1c6; 
        background-color: var(--white);  
    }
    .review-top{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 2rem;
    }
    .testimonial-card img{
        height:5.5em;
        width: 5.5rem;
        border-radius: 50%;
        object-fit: cover;
        object-position: center ;
    }
    .review-details{
        margin: 0.8rem 0rem;
    }
    .testimonial-card .name{
        font-size: large;
        font-weight: 600;
    }
    .testimonial-card .company{
        font-weight: 600;
        font-size: smaller;
        opacity: 0.5;
        margin: 0.2rem 0rem;
    }
    .icon-stars{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.3rem;
        margin-top: 1.5rem;
        font-size: 0.8rem;
    }
    .icon-stars .fa{
        color: orange;
        border: none;
    }

    /**Blogs*/
    .blogs-top{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }
    .blog-cards{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        font-size: large;
        gap: 1.8rem;
    }
    .blog-card {
        border-bottom: 1px solid var(--darkpurple);
        border-radius: 8px;
        background-color: var(--white);
    }
    .blog-card img{
        padding: 0;
        margin: 0;
        border-radius: 8px;
    }
    .blog-details{
        padding: 4% 5%;
    }
    .blog-card p{
        font-weight: 600;
    }
    .blog-details-info{
       margin-top: 2rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .blog-details-info a{
        font-weight: 600;
        font-size: medium;
    }
    blog-details-info .fa{
        background-color: var(--secondary);
        padding: 0.8rem;
        border-radius: 50%;
    }


    /*CTA*/
    .cta div article{
        padding: 5%;
        background-color: var(--secondary);
        border: 8px;
        box-shadow: 2px 2px 8px #a3b1c6;
    }
    .cta-links{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }
    .cta div article{
        display: flex;
        flex-direction:row;
        justify-content: space-between;
        gap: 3rem ;
        margin: 2%;
        border-radius: 8px;
    }
    .cta div article h3{
        font-weight: 700;
        font-size: x-large;
    }
    .cta-links{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 2rem;
        margin-top: 0.8rem;
    }
    .cta main div a{
        text-decoration: none;
    }
    .cta main div .link-to-action{
        padding:  1rem 1.8rem;
        background-color: var(--primary);
        color: var(--white);
        border-radius: 5rem;
        font-weight: 600;
    }
    .cta main div .link-to-project{
        font-weight: bolder;
        text-decoration: underline;
        font-size: 1.0rem;
    }
    .cta aside{
        height: 30vh;
        padding: 0rem 0.8rem;
        border-radius: 8px;
    }
    .cta article aside img{
        height: 35vh;
        width: 25vw;
        border-radius: 8px;
        object-fit: cover;
        background-position: center;
    }


    /*Contact*/
    .Contact article{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 6rem;
        margin-bottom: 5%;
    }
     .Contact article main{
        width: 35vw;
     }
    .Contact article main .contact-form{
        box-shadow: 8px 8px 12px #a3b1c6;
        background-color: white;
        padding: 2rem;
        border-radius: 8px;
        width: 100%;
    }
    .Contact article main .contact-form form div{
           width: 100%;
    }
     .Contact article main .contact-form form div input{
           width: 98%;
           height: 2.8rem;
           border: 1px solid rgb(206, 205, 205);
           outline: none;
           margin-top: 0.5rem;
           border-radius: 3px;
           font-size: 1.0rem;
           padding-left: 0.5rem;
    }
    .Contact button{
        padding: 1rem 3.5rem;
        border-radius: 3px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: var(--primary);
        border: none;
        color: white;
        font-weight: 400;
        font-size: medium;
        margin-top: 1rem;
        width: 100%;
    }
    .Contact aside{
        width: 40vw;
    }
    .Contact aside form p{
        font-weight: 500;
        font-size: medium;
        margin-top: 2rem;

    }
    .Contact aside form input{
            width: 100%;
           height: 2.8rem;
           border: 1px solid rgb(206, 205, 205);
           outline: none;
           margin-top: 0.5rem;
           border-radius: 3px;
           font-size: 1.0rem;
           padding-left: 0.5rem;   
    }
    .socials-follow{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    /*Footer-Info*/
    .site-footer{
        background-color: var(--darkpurple);
        color: var(--white);
    }
    .footer-info{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
        padding: 8%;
        border-bottom: 1px solid var(--white);
    }
    .footer-info > div{
        border-bottom: 1px solid var(--white);
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }
    .footer-quick-nav div{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1rem;
        color: white;
    }
    .footer-quick-nav div a{
        color: var(--white);

    }
    .footer-more .footer-det{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1rem;
    }
    .footer-more a{
        color: var(--white);
    }
    .socials-grid-footer{
        margin-top: 3rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 1.5rem;
        flex-wrap: wrap;
    }
    .footer-info h4{
        margin-bottom: 0.8rem;
    }
    .wrap{
        text-align: center;
        font-size: smaller;
    }
     /**PROJECTS PAGE*/
    .projects-info-top{
        margin: 0%;
        padding: 2% 8% 0% 8%;
        
    }
    .projects-info-top-card{
        font-weight: bolder;
        object-fit:fill;
        padding: 5% 8%;
        border-radius: 5px;
        line-height: 2rem;
        box-shadow: 8px 8px 22px #a3b1c6;
        background-image: linear-gradient(
            to left,
            rgba(79, 40, 93, 0.539),
            rgba(255, 255, 255, 0.788)
        ),
        url('../images/projects\ background.jpg');
        object-fit:cover;
        background-position: bottom;
    }
    .projects-info-top h2{
        font-weight: 600;

    }


           /**BLOGS pAGES*/

    .blogs-info-top{
        margin: 0%;
        padding: 2% 8%;
    }
    .blogs-info-top-card{
        font-weight: bolder;
        object-fit:fill;
        padding: 5% 8%;
        border-radius: 5px;
        line-height: 2rem;
        box-shadow: 8px 8px 22px #a3b1c6;
        background-image: linear-gradient(
            to left,
            rgba(79, 40, 93, 0.539),
            rgb(255, 255, 255)
        ),
        url('../images/projects\ background.jpg');
        object-fit:cover;
        background-position: bottom;
    }


}
















/*Extra Large Screens.*/
@media (min-width: 1920px) {
      section{
        padding:  3% 6% 6% 8%;
    }
    .section-header {
        text-align: center;
        padding: 1rem ;
        background-image: 
            linear-gradient(to bottom,
                rgb(255, 255, 255),

                rgba(214, 212, 215, 0.22)
            )
        ;
        border-radius: 4rem;
        font-weight: 600;
        margin-bottom: 3rem;
        box-shadow: 8px 8px 12px #CCCDFF;
        font-size: large;
        width: 10%;
        border: 1px solid gainsboro;
    }
    .hero-section{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 2rem;
        align-items: center;
    }
    .hero-section-data{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2rem;
        width: 40vw;
    } 
    .hero-section h1{
        font-size: 2.4rem;
        font-weight: 800;
        font-kerning: auto;
    }
     .hero-section h2{
        font-size: 1.3rem;
        font-weight: 500;
    }
     .hero-section h3{
        font-size: 1.1rem;
        font-weight: 400;
    }
    .hero-links{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.5rem;
    }
   .link-to-projects a{
        padding:  0.8rem 1rem;
        background-color: transparent;
        color: var(--primary);
        border: 2px solid var(--primary);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.3rem;
    }
    .link-to-action a{
        padding:  1rem 1.2rem;
        background-color: var(--primary);
        color: var(--white);
    }
    .link-to-projects a{
        padding:  0.8rem 1rem;
        background-color: transparent;
        color: var(--primary);
        border: 2px solid var(--primary)
    }
    .hero-section img{
        width: 32vw;
        object-fit: cover;
        object-position: center;
        border: none;
        mix-blend-mode: multiply;
        filter: brightness(1.2);
    }



    /*About*/
    .about{
        padding: 10%;
    }
    .about-info{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 6%;
    }
     .about-info-data{
        width: 55vw;
    }
    .about-info-data ::details{
        border-radius: 3px;
        border: 3px solid white;
        padding: 0.22rem;
    }
    .about-info p{
        font-size: larger;
    }
    .about-intrapersonal-skills{
        box-shadow:8px 8px 12px #a3b1c6;
        background-color: var(--white);
        border-radius: 8px;
        height: 30%
    }
    .about-intrapersonal-skills .about-cards .about-card img{
     height: 3rem;
     width: 3rem;
     object-fit: cover;
     background-position: center;
     border-radius: 50%;
    }
    .about-intrapersonal-skills h4{
        text-align: center;
        margin: 2rem 0rem;
        border-bottom: 1px solid lightgray;
    }
    .about-cards{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin: 3rem 2rem ; 
        
    }
    .about-card{
        padding: 1% 5%;
    }
    .skills-container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
    .skills-card{
        background-color: var(--white);
        box-shadow: 8px 8px 12px #a3b1c6;
        padding: 5%;
        border-radius: 5px;
    }
    .open-skills{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 0.5rem;
        margin-top: 0.8rem;
    }
    .open-skill{
        background-color: var(--secondary);
        padding: 0.3rem 0.8rem;
        border-radius: 1.5rem;
        font-weight: 400;
        font-size: 0.9rem;
    }

    /*Stack and Tools*/
    .tools-container{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 0.5rem;
        margin-top: 0.8rem;
    }
    .tools{
        background-color: var(--primary);
        padding: 0.6rem 0.9rem;
        border-radius: 1.5rem;
        font-weight: 400;
        font-size: 0.9rem;
       color: #fff;    
    }

    /**services*/
    .solid-text{
        height: auto;
        font-size: 2.5rem;
        font-weight: 800;
    }
    .services-cards{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
       margin-top: 2rem;
    }
    .services-cards div{
         box-shadow:  8px 8px 12px #a3b1c6;
         padding: 8%;
         border-radius: 8px;
    }
    .services-cards .fa{
        height: 4rem;
        width: 4rem;
        border-radius: 4rem;
        padding: 0.5rem;
        background-color: var(--secondary);
        margin-bottom: 0.8rem;
    }
    .services-cards h3{
        margin-bottom: 0.8rem;
    }


    /**Projects*/
    .projects-top{
        margin: 1rem 0rem;
    }
    .project-cards{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-top: 3rem;
    }
    .project-card{
        border-radius: 8px;
        box-shadow: 8px 8px 12px #a3b1c6; 
        background-color: var(--white);  
    }
    .project-card img{
        height: 45vh;
        width: 100%;
        border-radius: 8px;
        padding: 0;
        margin: 0;
    }
    .project-card-info{
        padding: 5%;
    }
    .project-card-info div{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 0.8rem 0rem;
    }
    .details-badge{
        padding: 0.4rem;
        background-color: var(--secondary);
        font-size: smaller;
        font-weight: 500;
        border-radius: 0.2rem;
        box-shadow: 2px 2px 4px #a3b1c6;
    }

    /*Testimonial*/
    .testimonials-cards{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
        margin-top: 4rem;
    }
    .testimonial-card{
        padding: 8%;
        border-radius: 8px;
        box-shadow: 8px 8px 12px #a3b1c6; 
        background-color: var(--white);  
    }
    .review-top{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 2rem;
    }
       .testimonial-card img{
        height:5.5em;
        width: 5.5rem;
        border-radius: 50%;
        object-fit: cover;
        object-position: center ;
    }
    .review-details{
        margin: 0.8rem 0rem;
    }
    .testimonial-card .name{
        font-size: large;
        font-weight: 600;
    }
    .testimonial-card .company{
        font-weight: 600;
        font-size: smaller;
        opacity: 0.5;
        margin: 0.2rem 0rem;
    }
     .icon-stars{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.3rem;
        margin-top: 1.5rem;
        font-size: 0.8rem;
    }
    .icon-stars .fa{
        color: orange;
        border: none;
    }


    /**Blogs*/
    .blogs-top{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }
    .blog-cards{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        font-size: large;
        gap: 1.8rem;
    }
    .blog-card {
        border-bottom: 1px solid var(--darkpurple);
        border-radius: 8px;
        background-color: var(--white);
    }
    .blog-card img{
        padding: 0;
        margin: 0;
        border-radius: 8px;
    }
    .blog-details{
        padding: 4% 5%;
    }
    .blog-card p{
        font-weight: 600;
    }
    .blog-details-info{
       margin-top: 2rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .blog-details-info a{
        font-weight: 600;
        font-size: medium;
    }
    blog-details-info .fa{
        background-color: var(--secondary);
        padding: 0.8rem;
        border-radius: 50%;
    }


    /*CTA*/
    .cta div article{
        padding: 5%;
        background-color: var(--secondary);
        border: 8px;
        box-shadow: 2px 2px 8px #a3b1c6;
    }
    .cta-links{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }
    .cta div article{
        display: flex;
        flex-direction:row;
        justify-content: space-between;
        gap: 3rem ;
        margin: 2%;
        border-radius: 8px;
    }
    .cta div article h3{
        font-weight: 700;
        font-size: x-large;
    }
    .cta-links{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 2rem;
        margin-top: 0.8rem;
    }
    .cta main div a{
        text-decoration: none;
    }
    .cta main div .link-to-action{
        padding:  1rem 1.8rem;
        background-color: var(--primary);
        color: var(--white);
        border-radius: 5rem;
        font-weight: 600;
    }
    .cta main div .link-to-project{
        font-weight: bolder;
        text-decoration: underline;
        font-size: 1.0rem;
    }
    .cta aside{
        height: 30vh;
        padding: 0rem 0.8rem;
        border-radius: 8px;
    }
    .cta article aside img{
        height: 35vh;
        width: 25vw;
        border-radius: 8px;
        object-fit: cover;
        background-position: center;
    }


    /*Contact*/
    .Contact article{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 6rem;
        margin-bottom: 5%;
    }
     .Contact article main{
        width: 35vw;
     }
    .Contact article main .contact-form{
        box-shadow: 8px 8px 12px #a3b1c6;
        background-color: white;
        padding: 2rem;
        border-radius: 8px;
        width: 100%;
    }
    .Contact article main .contact-form form div{
           width: 100%;
    }
     .Contact article main .contact-form form div input{
           width: 98%;
           height: 2.8rem;
           border: 1px solid rgb(206, 205, 205);
           outline: none;
           margin-top: 0.5rem;
           border-radius: 3px;
           font-size: 1.0rem;
           padding-left: 0.5rem;
    }
    .Contact button{
        padding: 1rem 3.5rem;
        border-radius: 3px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: var(--primary);
        border: none;
        color: white;
        font-weight: 400;
        font-size: medium;
        margin-top: 1rem;
        width: 100%;
    }
    .Contact aside{
        width: 40vw;
    }
    .Contact aside form p{
        font-weight: 500;
        font-size: medium;
        margin-top: 2rem;

    }
    .Contact aside form input{
            width: 100%;
           height: 2.8rem;
           border: 1px solid rgb(206, 205, 205);
           outline: none;
           margin-top: 0.5rem;
           border-radius: 3px;
           font-size: 1.0rem;
           padding-left: 0.5rem;   
    }
    .socials-follow{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    /*Footer-Info*/
    .site-footer{
        background-color: var(--darkpurple);
        color: var(--white);
    }
    .footer-info{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
        padding: 8%;
        border-bottom: 1px solid var(--white);
    }
    .footer-info > div{
        border-bottom: 1px solid var(--white);
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }
    .footer-quick-nav div{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1rem;
        color: white;
    }
    .footer-quick-nav div a{
        color: var(--white);

    }
    .footer-more .footer-det{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1rem;
    }
    .footer-more a{
        color: var(--white);
    }
    .socials-grid-footer{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 1.5rem;
        flex-wrap: wrap;
    }
    .footer-info h4{
        margin-bottom: 0.8rem;
    }
    .wrap{
        text-align: center;
        font-size: smaller;
    }
    
     /**PROJECTS PAGE*/
    .projects-info-top{
        margin: 0%;
        padding: 2% 8% 0% 8%;
    }
   .projects-info-top-card{
        font-weight: bolder;
        object-fit:fill;
        padding: 5% 8%;
        border-radius: 5px;
        line-height: 2rem;
        box-shadow: 8px 8px 22px #a3b1c6;
        background-image: linear-gradient(
            to left,
            rgba(79, 40, 93, 0.539),
            rgba(255, 255, 255, 0.988)
        ),
        url('../images/projects\ background.jpg');
        object-fit:cover;
        background-position: bottom;
    }
    .projects-info-top h2{
        font-weight: 600;

    }


           /**BLOGS pAGES*/

    .blogs-info-top{
        margin: 0%;
        padding: 2% 8%;
    }
    .blogs-info-top-card{
        font-weight: bolder;
        object-fit:fill;
        padding: 5% 8%;
        border-radius: 5px;
        line-height: 2rem;
        box-shadow: 8px 8px 22px #a3b1c6;
        background-image: linear-gradient(
            to left,
            rgba(79, 40, 93, 0.539),
            rgb(255, 255, 255)
        ),
        url('../images/projects\ background.jpg');
        object-fit:cover;
        background-position: bottom;
    }

}