*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

/* :root{
   --bg-color: #2c3e50;
} */
html{
   scroll-behavior: smooth;
}

body{
   background-color: #1b1f24; /* Dark grey */
   color: #e0e0e0; /* Light grey */
   overflow-x: hidden;
}
#particles-js {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: -1; /* Behind other content */
}

#header {
   width: 100%;
   height: 100vh;
   background-image: url(home.jpg);
   background-size: cover;
   background-position: top;
   opacity: 0;  /* Start invisible */
   transform: translateY(-10px) scale(0.95); /* Start 10px below and scaled down */
   animation: fadeSlideScaleUp 1.5s ease-out forwards;
}

@keyframes fadeSlideScaleUp {
   from {
       opacity: 0;
       transform: translateY(-10px) scale(0.98); /* Small and lower */
   }
   to {
       opacity: 1;
       transform: translateY(0) scale(1); /* Normal position and size */
   }
}

.container{
   padding: 10px 10%;
}

nav{
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
}
nav img{
   height: 60px;
   /* padding-top: 0; */

}

nav ul li{
   display: inline-block;
   list-style: none;
   margin: 10px 20px;
}
nav ul li a{
   color: #fff;
   text-decoration: none;
   font-size: 18px;
   position: relative;
}
nav ul li a::after{
   content: '';
   width: 0;
   height: 3px;
   background: #0077b6;
   position: absolute;
   left: 0;
   bottom: -6px;
   transition: 0.2s;
}

nav ul li a:hover::after{
   width: 100%;
}

nav .fa-solid{
   display: none;
   }
nav span{
   color: #00a8cc;;
}


/* Header text styling */
.header-text {
   margin-top: 20%;
   font-size: 20px;
   text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
   text-align: left;
}

/* Main heading with typewriter effect */
.header-text h1 {
   /* font-size: 50px; */
   font-size: clamp(16px, 3vw, 50px);
   margin-top: 20px;
   overflow: hidden;
   white-space: nowrap;
   animation: typewriter 3s steps(20) 1s both;
   border-right: 2px solid transparent;
   animation: typewriter 3s steps(10000) 1s both, smoothBlink 1s ease-in-out 3s;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Keep the original span color */
.header-text h1 span {
   color: #ff004f;
}

.header-text h4{
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Fade-in effect for the paragraph */
.fade-in {
   opacity: 0;
   animation: fadeIn 2s ease-in-out forwards;
}

/* Slide-up effect for the subheading */
.slide-up {
   transform: translateY(20px);
   opacity: 0;
   animation: slideUp 2s ease-in-out 1.5s forwards;
}

/* Keyframes for fade-in */
@keyframes fadeIn {
   0% { opacity: 0; }
   100% { opacity: 1; }
}

/* Keyframes for slide-up */
@keyframes slideUp {
   0% { opacity: 0; transform: translateY(-20px); }
   100% { opacity: 1; transform: translateY(20); }
}

/* Typewriter effect */
@keyframes typewriter {
   from { width: 0; }
   to { width: 100%; }
}

/* Smooth blinking cursor */
@keyframes smoothBlink {
   0% { border-color: #00a8cc; }
   50% { border-color: transparent; }
   100% { border-color: #00a8cc; }
}


.custom-shape-divider-bottom-1740669785 {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   overflow: hidden;
   line-height: 0;
   
}

.custom-shape-divider-bottom-1740669785 svg {
   position: relative;
   display: block;
   width: calc(146% + 1.3px);
   height: 65px;
}

.custom-shape-divider-bottom-1740669785 .shape-fill {
   fill: #2c3e50;
   
}

/*--------about-------------*/

#about{
   padding: 80px 0;
   color: #e0e0e0;
   background-color: #2c3e50; /* Steel blue-grey */
   opacity: 0;
   transform: translateY(50px);
   transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

#about.show {
   opacity: 1;
   transform: translateY(0);
}
.row{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
.about-col-1{
    flex-basis: 35%}
.about-col-1 img{
   display: none;
    border-radius: 15px;
    

}


.about-col-2{
   flex-basis: 60%;
}
.sub-title{
   font-size: 50px;
   font-weight: 600;
   color: #ddd;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


/* Staggered Animation for Text and Image */
.about-col-1 img, .about-col-2 {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.about-col-1 img.show, .about-col-2.show {
   opacity: 1;
   transform: translateY(0);
}


hr{
   width: 20%;
   border: 0.1px solid #ddd;
}
.tab-titles{
   display: flex;
   margin: 20px 0 40px;
   opacity: 0;
   transform: translateX(-30px);
   transition: opacity 1s ease-out, transform 1s ease-out;
}
.tab-titles.show {
   opacity: 1;
   transform: translateX(0);
}

.tab-links{
   margin-right: 50px;
   font-size: 18px;
   cursor: pointer;
   position: relative;
}
.tab-links::after{
   content: '';
   width: 0;
   height: 3px;
   background: #0077b6;
   position: absolute;
   left: 0;
   bottom: -8px;
   transition: 0.2s;
}
.tab-links.active-link::after{
   width: 50%;
}
.tab-contents ul li{
   list-style: none;
   margin: 10px 0;
}
.tab-contents ul li span{
   color: #00a8cc;
   font-size: 14px;
}
.tab-contents{
   display: none;
}
.tab-contents.active-tab{
   display: block;
}

.custom-shape-divider-bottom-1740687386 {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   overflow: hidden;
   line-height: 0;
   transform: rotate(180deg);
}

.custom-shape-divider-bottom-1740687386 svg {
   position: relative;
   display: block;
   width: calc(100% + 1.3px);
   height: 65px;
}

.custom-shape-divider-bottom-1740687386 .shape-fill {
   fill: #1b2838;
}


/*--------services-------------*/
#service{
   padding: 40px 0;
   opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
/* Show services when scrolled into view */
#service.show {
   opacity: 1;
   transform: translateY(0);
}

.services-list{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-gap: 40px;
   margin-top: 50px;
}

.services-list div{
    background: #1b2838;
    padding: 40px;
    font-size: 13px;
    font-weight: 400;
    border-radius: 10px;
    transition: background 0.3s, transform 0.3s;
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.2); /* Light glow effect */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* When a card becomes visible */
.services-list div.show {
   opacity: 1;
   transform: translateY(0);
}

.services-list div.show:hover{
   background: #0077b6; /* Blue */
   box-shadow: 0px 0px 25px rgba(0, 168, 204, 0.5); /* Soft blue glow */
   transform: translateY(-15px); 
   transition: 0.3s linear;
   
}

.services-list div h2{
   font-size: 30px;
   font-weight: 500;
   margin-bottom: 15px;
}
.services-list div i{
   font-size: 50px;
   margin-bottom:  30px;
}
/* .services-list div p{
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
} */


.services-list div button {
   margin-top: 1em;
   border: none;
   background: none;
   cursor: pointer;
   --primary-color: #ffffff;
   --hovered-color: #ddd;
   position: relative;
   display: flex;
   font-weight: 600;
   font-size: 20px;
   gap: 0.5rem;
   align-items: center;
 }
 
 .services-list div button p {
   margin: 0;
   position: relative;
   font-size: 20px;
   color: var(--primary-color);
 }
 
 .services-list div button::after {
   position: absolute;
   content: "";
   width: 0;
   left: 0;
   bottom: -7px;
   background: var(--hovered-color);
   height: 2px;
   transition: 0.3s ease-out;
 }
 
 .services-list div button p::before {
   position: absolute;
   /*   box-sizing: border-box; */
   content: "";
   width: 0%;
   inset: 0;
   color: var(--hovered-color);
   overflow: hidden;
   transition: 0.3s ease-out;
 }
 
 .services-list div button:hover::after {
   width: 100%;
 }
 
 .services-list div button:hover p::before {
   width: 100%;
 }
 
 .services-list div button:hover svg {
   transform: translateX(4px);
   color: var(--hovered-color);
 }
 
 .services-list div button svg {
   color: var(--primary-color);
   transition: 0.2s;
   position: relative;
   width: 15px;
   transition-delay: 0.2s;
 }



/*--------portfolio-------------*/

#portfolio{
   padding: 50px 0;
   opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    background-color: #2c3e50; /* Steel blue-grey */
} 

/* Show portfolio when in view */
#portfolio.show {
   opacity: 1;
   transform: translateY(0);
}

.work-list{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-gap: 40px;
   margin-top: 50px;

}

.work{
    background: rgba(255, 255, 255, 0.1); /* Slight transparency to blend with dark theme */
    padding: 20px;
    /* opacity: 0.02; */
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2); /* Light glow effect */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.work.show {
   opacity: 1;
   transform: translateY(0);
}
.work img{
   width:  100%;
   border-radius: 10px;
   display: block;
   transition: transform 0.5s;
}
.layer{
   width: 100%;
   height: 0;
   background: linear-gradient(rgba(0, 0, 0, 0.7), #0077b6);
   border-radius: 10px;
   position: absolute;
   left: 0;
   bottom: 0;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding: 0 40px;
   text-align: center;
   font-size: 14px;
   transition: height 0.5s;
   /* opacity: 0.5; */
}
.layer h3{
   font-weight: 500px;
   margin-bottom: 20px;
}
/* .layer a{
   margin-top: 30px;
   color: #ff004f;
   font-size: 18px;
   line-height: 60px;
   background: #fff;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   text-align: center;
} */
.work:hover img{
   transform: scale(1.1);

} 
.work:hover {
   transform: translateY(-5px);
   box-shadow: 0px 8px 20px rgba(255, 255, 255, 0.4); /* Stronger glow on hover */
}

.work:hover .layer{
   height: 100%;
}
.btn{
   display: block;
   margin: 50px auto;
   width: fit-content;
   border: 1px solid #0077b6;
   padding: 14px 50px;
   border-radius: 6px;
   text-decoration: none;
   color: #fff;
   transition: background 0.5s;
}

.btn:hover{
   background: #0077b6;
}

.custom-shape-divider-top-1740690256 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   overflow: hidden;
   line-height: 0;
}

.custom-shape-divider-top-1740690256 svg {
   position: relative;
   display: block;
   width: calc(100% + 1.3px);
   height: 34px;
}

.custom-shape-divider-top-1740690256 .shape-fill {
   fill: #1b1f24;
}

/*----------contact--------*/
#contact {
   padding: 50px 0;
   opacity: 0;
   transform: translateY(50px);
   transition: opacity 1s ease-out, transform 1s ease-out;
}
/* When the section comes into view */
#contact.show {
   opacity: 1;
   transform: translateY(0);
}

.contact-left{
   flex-basis: 35%;

}
.contact-right{
   flex-basis: 65%;
}
/* Animate form & contact details */
.contact-left, .contact-right {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 1s ease-out, transform 1s ease-out;
}
/* Show elements when in view */
.contact-left.show, .contact-right.show {
   opacity: 1;
   transform: translateY(0);
}
.contact-left a{
   margin-top: 20px ;
   text-decoration: none;
   color: white;
}
.contact-left a i{
   color: #00a8cc; /* Bright blue */
   margin-right: 15px;
   font-size: 25px;
}

.contact-left #tel i{
   color: #0077b6;
   margin-right: 15px;
   font-size: 25px;
   margin-top: 30px;
}

.contact-left #tel:hover{
   cursor: pointer;
}
.social-icons{
   margin-top: 30px;
}

.social-icons a{
   text-decoration: none;
   font-size: 30px;
   margin-right: 15px;
   color: #ababab;
   display: inline-block;
   transition: transform 0.5s;
}
.social-icons a:hover{
   color: #00a8cc; /* Bright blue */
   transform: translateY(-5px );
}
.btn.btn2{
   display: inline-block;
   background: #0077b6;
}

.btn.btn2:hover{
   background-color: #00a8cc;
}

.contact-right form{
   width: 100% ;
}
/* Form input & textarea styling */
.contact-right input, .contact-right textarea {
   transition: box-shadow 0.3s ease-in-out;
}
form input, form textarea{
    width: 100%;
    border: 0;
    outline: none;
    background: #262626;
    padding: 15px;
    margin: 15px 0;
    color: #fff;
    font-size: 18px;
    border-radius: 6px;
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.15); /* Light glow effect */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
/* Glow effect on focus */
.contact-right input:focus, .contact-right textarea:focus {
   box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
   outline: none;
   border: 1px solid #ff004f;
}
form .btn2{
   padding: 14px 60px;
   font-size: 18px;
   margin-top: 20px;
   cursor: pointer; 
}


/* FOOTER */
.copyright{
   width: 100%;
   background: #1b2838;
   font-weight: 600;
   margin-top: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   letter-spacing: 1px;
   
}
.copyright p{
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   font-size: clamp(9px, 2.5vw, 13px);
}


/* Default: Elements start hidden */
#about, #service, #portfolio, #contact,
.about-col-1 img, .about-col-2, .tab-titles,
.services-list div, .work, .contact-left, .contact-right {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Show animation when elements enter viewport */
#about.show, #service.show, #portfolio.show, #contact.show,
.about-col-1 img.show, .about-col-2.show, .tab-titles.show,
.services-list div.show, .work.show, .contact-left.show, .contact-right.show {
    opacity: 1;
    transform: translateY(0);
}