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

*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     text-decoration: none;
     border: none;
     outline: none;
     scroll-behavior: smooth;
     font-family: 'Poppins', sans-serif;
}
 :root{
    --bg-color: #fdfdfd;
    --text-color: #333;
    --main-color: #4d54a5;
    --white-color: #fdfdfd;
    --shadow-color: rgba(0, 0, 0, .2);
    --bg1-color: #8796d2;
    --font-color: #4d54a5;
  
 }
 

html {
    font-size: 62.5%;
    overflow-x: hidden;
 }

.header {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    padding: 2rem 7%;
    background: transparent;
    display: flex;
    align-items: center;
    z-index: 100;
    transition: .5s;
     }

.header.sticky{
    background: var(--bg-color);
    box-shadow: 0 .1rem 1rem var(--shadow-color);
}
.logo{
    font-size: 2.5rem;
    color: var(--font-color);
    font-weight: 600;
    cursor: default;
    margin-right: auto;
}
/* Style the navbar */
.navbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Add some margin to the navbar links for spacing */
.navbar a {
    margin-right: 3rem;
    font-size: 1.7rem; /* Adjust the font size as needed */
}

/* Style the active link and its underline */
.navbar a.active {
    color: var(--main-color);
    font-weight: 700; /* You can increase the font weight to make it more prominent */
}

/* Adjust the underline position for the active link */
.navbar a.active::before {
    bottom: -4px;
    height: 4px;
    opacity: 1; /* Make the underline fully visible */
}

/* Add a transition for the underline effect */
.navbar a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--main-color);
    transform: scaleX(0); /* Initially, set the underline to be hidden */
    transform-origin: right;
    transition: transform 0.2s ease-in-out;
}

/* Show the underline when hovering over a link */
.navbar a:hover::before {
    transform: scaleX(1); /* Reveal the underline with a scaling effect */
    transform-origin: left;
}


section{
    min-height: 50vh;
    padding: 10rem 7% 2rem;
    display: grid;
}

.main_btn{
    margin-top: 40px;
    text-align: center;
    height: 6rem;
}

#particles-js {
    height: 82rem;
    background: linear-gradient(30deg,var(--bg1-color),var(--white-color),var(--bg1-color));
 }

section .home-img img{
    height: 500px;
    width: 460px;
    margin-top: 10px;
    position: relative;
}

.home{
    align-items: center;
    background:none;
    color: black;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%,-50%);
    max-width: 600px;
    padding: 2em 3em;
    max-height: 800px;
    transition: background-color 0.3s, color 0.3s;
}



.home .home-content{
    max-width:44rem ;
}
.home-content h3{
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}
.home-content h1{
    font-size: 5.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}
.home-content p{
    font-size: 1.7rem;
    text-align: center;
    color: var(--font-color);
}
.home-content .social-media{
    text-align: center;
}
.home-content .social-media a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    background: var(--main-color);
    border: .2rem solid var(--main-color);
    border-radius: 50%;
    box-shadow: 0 .2rem .5rem var(--shadow-color);
    font-size: 2rem;
    color: var(--white-color);
    margin: 2.5rem 1.5rem 3rem 0;
    transition: background-color 0.3s, color 0.3s; 
    
}
.home-content .social-media a:hover{
    background: var(--white-color);
    color: var(--main-color);
}

.btns{
    font-size: 2.5rem;
    padding: 15px;
    border: 2px solid var(--font-color);
    border-radius: 6px;
    color: var(--font-color);
    background: none;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.btns:hover{
    color: var(--white-color);
    background: var(--font-color);
    border-color: var(--font-color);
}

.btn{
    margin-left: 10px;
    padding: 1.5rem 1.5rem;
    background: var(--main-color);
    border-radius: .5rem;
    font-size: 2rem;
    color: var(--white-color);
    letter-spacing: .2rem;
    font-weight: 500 ;
    border: .3rem solid var(--main-color);
    transition: .5s ease;

}
.btn:hover{
    background: var(--white-color);
    color: var(--main-color);
}



span{
    color: var(--main-color);
}

.about-img img{
    height: 550px;
    width: 50vh;
    margin-top: 20px;
}
.about{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
}
.heading{
    font-size: 4.5rem;
    text-align: center;
}

.about-content h2{
    text-align: left;
    line-height: 1.2;
    margin-bottom: 9px;

}

.about-content h3{
    font-size: 2rem;
}
.about-content p{
    font-size: 1.6rem;
    margin: 2rem 0 4rem;
}
.services#services.active{
    filter: blur(20px);
    pointer-events: none;
    user-select: none;
}

.services{
    min-height: auto;
    padding-bottom: 7rem;
    position: relative;
    height: 75rem;
}

.services h2{
    margin-bottom: 5rem;
}

.services .services-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.services-container .services-box{
    flex: 1 1 30rem;
    background: var(--bg-color);
    padding: 3rem 2rem 4rem;
    border-radius: 2rem;
    box-shadow: 0 .1rem .5rem var(--shadow-color);
    text-align: center;
    border-top: .6rem solid var(--main-color);
    border-bottom: .6rem solid var(--main-color);
    transition: .5s ease;
}



.services-container .services-box:hover{
    box-shadow: 0 1rem 2rem var(--shadow-color);
    transform: scale(1.03);

}
.services-box i{
    font-size: 7rem;
    color: var(--main-color);
}

.services-box h3{
    font-size: 2.6rem;
    transition: .5s ease;
}

.services-box h3:hover{
    color: var(--main-color);

}


.services-box p{
    font-size: 1.6rem;
    margin: 1rem 0 3rem 0;
}

.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}


#popup1,
#popup2,
#popup3 {
    position: fixed;
    margin-top: 3rem;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    padding: 50px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.30);
    background: var(--bg-color);
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
    height: 70rem;
    width: 70rem;
    text-align: center;
    color: black;
}

#popup1 i,
#popup2 i,
#popup3 i {
    font-size: 80px;
    color: var(--main-color);
    transition: .5s ease;
}

#popup1 i:hover,
#popup2 i:hover,
#popup3 i:hover {
    transform: scale(1.08);
}

#popup1 h1,
#popup2 h1,
#popup3 h1 {
    font-size: 40px;
}

#popup1 h3,
#popup2 h3,
#popup3 h3 {
    padding-left: 50px;
    padding-right: 50px;
    font-size: 15px;
    font-family: 'Source Serif 4', serif;
}

#popup1 h4,
#popup2 h4,
#popup3 h4 {
    font-size: 20px;
    color: var(--bg1-color);
    text-align: left;
    border-bottom: 2px solid var(--bg1-color);
}

#popup1 p,
#popup2 p,
#popup3 p {
    margin-left: 12px;
    text-align: left;
    font-size: medium;
}

#popup1 ol,
#popup2 ol,
#popup3 ol {
    margin-left: 12px;
    text-align: left;
    font-size: medium;
}

#popup1.active,
#popup2.active,
#popup3.active {
    top: 50%;
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
}


.portfolio{
    padding-bottom: 10rem;
}

.portfolio h2 {
   margin-bottom: 4rem;
}

.portfolio .portfolio-container{
    display: grid;
   grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 2.5rem;
}

.portfolio-container .portfolio-box{
    position: relative;
    display: flex;
    border-radius: 2rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
    overflow: hidden;

}

 .portfolio-box img{
    width: 100%;
    transition: .5s ease;
 }

 .portfolio-box:hover img{
    transform: scale(1.1);
 }


 .portfolio-box .portfolio-layer{
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, .1), var(--bg1-color), var(--main-color));
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 0 4rem;
    opacity: 0;
    transition: .5s ease;
 }

 .portfolio-box:hover .portfolio-layer{
    opacity: 1;
 }



 .portfolio-layer h4 {
    font-size: 3rem;
 }

 .portfolio-layer p{
    font-size: 1.6rem;
    margin: .3rem 0 1rem;

 }

 .portfolio-layer a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 5rem;
    background: var(--white-color);
    border-radius: 50%;
 }

 #portfolio_popup1,
 #portfolio_popup2,
 #portfolio_popup3,
 #portfolio_popup4,
 #portfolio_popup5,
 #portfolio_popup6 {
     position: fixed;
     transform: translate(-50%, -50%);
     margin-left: 61.5rem;
     margin-top: 1rem;
     margin-right: 300px;
     height: 83%;
     width: 98%;
     padding: 50px;
     box-shadow: 0 5px 30px rgba(0, 0, 0, 0.30);
     background: var(--bg-color);
     visibility: hidden;
     opacity: 0;
     transition: 0.5s;
     text-align: center;
     color: black;
 }
 
 #portfolio_popup1 i,
 #portfolio_popup2 i,
 #portfolio_popup3 i,
 #portfolio_popup4 i,
 #portfolio_popup5 i,
 #portfolio_popup6 i {
     font-size: 80px;
     color: var(--main-color);
     transition: .5s ease;
 }
 
 #portfolio_popup1 i:hover,
 #portfolio_popup2 i:hover,
 #portfolio_popup3 i:hover,
 #portfolio_popup4 i:hover,
 #portfolio_popup5 i:hover,
 #portfolio_popup6 i:hover {
     transform: scale(1.08);
 }
 
 #portfolio_popup1 h1,
 #portfolio_popup2 h1,
 #portfolio_popup3 h1,
 #portfolio_popup4 h1,
 #portfolio_popup5 h1,
 #portfolio_popup6 h1 {
     font-size: 40px;
 }
 
 #portfolio_popup1 h3,
 #portfolio_popup2 h3,
 #portfolio_popup3 h3,
 #portfolio_popup4 h3,
 #portfolio_popup5 h3,
 #portfolio_popup6 h3 {
     padding-left: 50px;
     padding-right: 50px;
     font-size: 15px;
     font-family: 'Source Serif 4', serif;
 }
 
 #portfolio_popup1 h4,
 #portfolio_popup2 h4,
 #portfolio_popup3 h4,
 #portfolio_popup4 h4,
 #portfolio_popup5 h4,
 #portfolio_popup6 h4 {
     font-size: 20px;
     color: var(--bg1-color);
     text-align: left;
     border-bottom: 2px solid var(--bg1-color);
 }
 
 #portfolio_popup1 p,
 #portfolio_popup2 p,
 #portfolio_popup3 p,
 #portfolio_popup4 p,
 #portfolio_popup5 p,
 #portfolio_popup6 p {
     margin-left: 12px;
     text-align: left;
     font-size: medium;
 }
 
 #portfolio_popup1 ol,
 #portfolio_popup2 ol,
 #portfolio_popup3 ol,
 #portfolio_popup4 ol,
 #portfolio_popup5 ol,
 #portfolio_popup6 ol {
     margin-left: 12px;
     text-align: left;
     font-size: medium;
 }
 
 #portfolio_popup1.active,
 #portfolio_popup2.active,
 #portfolio_popup3.active,
 #portfolio_popup4.active,
 #portfolio_popup5.active,
 #portfolio_popup6.active {
     top: 50%;
     visibility: visible;
     opacity: 1;
     transition: 0.5s;
 }

 .Cross {
    font-size: 35px;
    cursor: pointer;
    color: var(--text-color);
}

/* The common cross styling for all portfolio popups */
#portfolio_popup1 .Cross,
#portfolio_popup2 .Cross,
#portfolio_popup3 .Cross,
#portfolio_popup4 .Cross,
#portfolio_popup5 .Cross,
#portfolio_popup6 .Cross {
    font-size: 35px;
    cursor: pointer;
    color: var(--text-color);
    margin-left: 110rem;
}

.portfolio_div{
    display: flex;
    padding: 20px;
}

.portfolio_content{
    padding: 2px;
    margin: auto;
}

.portfolio_content a{
    color: var(--text-color);
}

.portfolio_content a:hover{
    color: var(--font-color);
}

.portfolio_image img{
    margin: 10rem 2rem;
    height: 22rem;
    width: 44rem;
}

.contact h2 {
    margin-bottom: 3rem;
 }

.contact form{
    max-width: 70rem;
     margin: 1rem auto;
    text-align: center;
    margin-bottom: 3rem;
}

.contact form .input-box{
    display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
.contact form .input-box input,
.contact form textarea{
   width: 100%;
    padding: 1.5rem;
    font-size: 1.6rem;
    color: var(--text-color);
   background: var(--bg-color);
   border-radius: .8rem;
    margin: .7rem 0;
   box-shadow: 0 .1rem .5rem var(--shadow-color);

}

.contact form .input-box input{
    width: 49%;
}

.contact form textarea{
    resize: none;
}
.contact form .btn{
    margin-top: 2rem;
    cursor: pointer;
}
.validation-message {
    color: red;
    font-size: 12px;
    margin-top: 4px;
}


@media (min-width: 768px) and (max-width: 1023px){

    .header {
        padding: 2rem 3%;
    }

    section{
         padding: 10rem 3% 2rem;

    }


    .home .profession-container .profession-box{
         right: -22rem;

    }

    .home .profession-container .overlay{
        right: -15rem;
    }

    .btns {
        font-size: 1.8rem; 
        padding: 12px 24px;
    }

    .portfolio .portfolio-container {
        grid-template-columns: repeat(2, 1fr); 
        gap: 2rem; 
    }
}

@media (max-width: 767px) {
    section {
        padding: 5rem 3%;
    }

    .home .home-content h3 {
        font-size: 2.5rem;
    }

    .home .home-content h1 {
        font-size: 4rem;
    }

    .home .home-content p {
        font-size: 1.4rem;
    }

    .home .home-content {
        max-width: 100%; 
        text-align: center;
    }

    .home .profession-container .profession-box {
        display: none;
    }

    .home .profession-container .overlay {
        display: none; 
    }

    .home-img img {
        display: block; 
        margin: 2rem auto; 
    }

    .btns {
        font-size: 1.6rem; 
        padding: 10px 20px; 
    }

    

    .portfolio{
        margin-top: 30rem;
    }

    .portfolio .portfolio-container {
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    .portfolio-box {
        margin-bottom: 2rem;
    }

    
}

.footer {
    background-color: #f7f7f7;
    padding: 1rem 0; 
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1); 
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 2rem;
}

.footer-copyright {
    flex: 1;
}

.footer-copyright a {
    font-size: 1.4rem;
    text-decoration: none;
    color: #4d54a5;
}

.footer-social {
    flex: 1;
    display: flex;
    justify-content: center;
}

.footer-social a {
    margin: 0 1rem; 
    text-decoration: none;
    color: #4d54a5;
    font-size: 2rem;
    transition: transform 0.2s;
}

.footer-social a:hover {
    transform: scale(1.1);
}

.footer-email {
    flex: 1;
    text-align: right;
    font-size: 1.4rem;
}

.footer-email a {
    text-decoration: none;
    color: #4d54a5;
}

.footer-email a:hover {
    text-decoration: underline;
}