@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    border: none;
    font-family: "Poppins", sans-serif;
    scroll-behavior: smooth;

}
:root{
    --text-color:white;
    --snd-bf-color:#262B40;
    --main-color:#59B2F4;

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

section{
    min-height: 100vh;
    padding: 10rem 9% 2rem;
}
body{
    background:linear-gradient(45deg,black,black,black);
    color: var(--text-color);
}
.header{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}
.logo{
    font-size:2.9rem;
    
    margin-left: 1rem;
    color: var(--text-color);
    font-weight: bolder;
    cursor: default;
    transition: 0.5s;
}
.logo:hover{
    color: orangered;
}
.header{
    backdrop-filter: blur(10px);
    border-radius: 0px 0px 3,0px 30px;
    box-shadow: 0px 0px 5px gray;
    height: 7rem;
}
.navbar a{
    font-size: 1.9rem;
    color: var(--text-color);
    margin:3rem 4rem 0rem 4rem;
    font-weight: 700;
    transition:all 0.5s;

}
.navbar a:hover,.navbar a.active{
    color:orangered ;
}
#menuicon{
    color: var(--text-color);
    font-weight: bolder;
    font-size: 2.5rem;
    display: none;
}
.home{
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-content h3{
    font-size: 3.2rem;
}
.home-content h3:nth-of-type(2){
    margin-bottom: 2rem;
}
span{
    color: orangered;
}
.home-content h1{
    font-weight: bolder;
    font-size: 4.5rem;
}


.img{
    width:25vw ;
    margin-left: 8rem;
    animation: floatimage 5s ease-in-out infinite;
    border-radius: 100%;
    box-shadow: 0 0 20px orangered,0 0 40px orangered,0 0 80px orangered;
    transition: 0.5s linear;
}
.img:hover{
    box-shadow: none;
}
@keyframes floatimage{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-4.4rem);
    }
    100%{
        transform: translateY(0);
    }

}
.home-content p{
    font-size: 1.5rem;
    text-align: justify;
}
.social-meadia a{
    font-size: 2.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    margin: 3rem 2rem 5rem 3rem;
    transition: 0.5s;
    background-color: transparent;
    color: orangered;
}
.social-meadia .fb:hover{
    color: blue;
}
.social-meadia .twt:hover{
    color: blue;
}
.social-meadia .git:hover{
    color:white ;
}
.social-meadia .lkdin:hover{
    color: blue;
}
.social-meadia .ig:hover{
    color: deeppink;
}
.btn{
    font-size: 2rem;
    display: inline-block;
    border: 3px solid orangered;
    cursor: pointer;
    font-weight: bolder;
    padding: 1vw;
    border-radius: 10px;
    transition: 0.5s;
    box-shadow: 0px 0px 20px orangered;
}
.btn:hover{
    background-color: orangered;
    box-shadow: none;
}
.about{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    background-color: rgb(20, 17, 17);
    border-radius: 40px;
    margin: 0rem 1rem 1rem 1rem;
    box-shadow: 0px 0px 20px black;
}
.abtimg{
    width: 30vw;
    border: 5px solid #222;
    border-radius: 30px;
    animation: neon-glow 2s infinite;
}
@keyframes neon-glow{
    0%{
        border-color: #ff007f;
        box-shadow: 0 0 10px #ff007f,0px 0px 20px #ff007f,0px 0px 30px #ff007f;
    }
    25%{
        border-color:cyan ;
        box-shadow: 0 0 10px #59B2F4,0px 0px 20px #59B2F4,0px 0px 30px #59B2F4;
    }
    50%{
        border-color:orangered ;
        box-shadow: 0 0 10px orangered,0px 0px 20px orangered,0px 0px 30px orangered;
    }
    75%{
        border-color:#7fff00 ;
        box-shadow: 0 0 10px #7fff00,0px 0px 20px #7fff00,0px 0px 30px #7fff00;
    }
    100%{
        border-color:#007fff ;
        box-shadow: 0 0 10px #007fff,0px 0px 20px #007fff,0px 0px 30px #007fff;
    }
}
.about-container{
    margin-left: 2rem;
}
.about-container .heading{
    font-size: 5rem;
}
.about-container h3{
    font-size: 3rem;
}
.about-container p{
    font-size: 1.5rem;
    margin: 1rem 3rem 3rem 0rem;
    

}
.about-container a{
    color: white;
    
}
#read-more{
    display: none;
    transition: all 0.5s;
}


/*  Services page css */
.services-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5rem;

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

}
.services h3{
    font-size: 3rem;

}
.services p{
    font-size: 1.5rem;
    margin-bottom: 2rem;

}
.services i{
    font-size: 5rem;
    color: orangered;

}

.services-container .services-box{
    flex: 1 1 30rem;
    text-align: center;
    width: 30vw;
    height: 50vh;
    padding: 3rem 2rem 4rem;
    border-radius: 2rem;
    /* animation: services-animation 3s infinite ; */
    background-color: rgb(66, 66, 66);
    transition: all 0.5s;
}
 @property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.services-container #container-1::after,
#container-1::before {
    position: absolute;
    content: "";
    height: 51vh;
    width: 25.5vw;
    top: 168rem;
    left: 13.2rem;
    background-image: conic-gradient(from var(--angle), transparent, transparent, transparent, deeppink, orangered, cyan, yellowgreen, white);
    border-radius: 20px;
    z-index: -1;
    animation: spin 5s linear infinite;
}

#container-1::before {
    filter: blur(1.5rem);
    opacity: 0.5;
}
.services-container #container-2::after,
#container-2::before {
    position: absolute;
    content: "";
    height: 51vh;
    width: 25.5vw;
    top: 168rem;
    left:56.2rem;
    background-image: conic-gradient(from var(--angle), transparent, transparent, transparent, deeppink, orangered, cyan, yellowgreen, white);
    border-radius: 20px;
    z-index: -1;
    animation: spin 5s linear infinite;
}

.services-container #container-3::after,
#container-3::before {
    position: absolute;
    content: "";
    height: 51vh;
    width: 25.5vw;
    
    top: 168rem;
    right:13.2rem;
    background-image: conic-gradient(from var(--angle), transparent, transparent, transparent, deeppink, orangered, cyan, yellowgreen, white);
    border-radius: 20px;
    z-index: -1;
    animation: spin 5s linear infinite;
}

#container-1::before {
    filter: blur(2rem);
   
}
#container-2::before {
    filter: blur(2rem);
   
}
#container-3::before {
    filter: blur(2rem);
    
}

@keyframes spin {
    0% {
        --angle: 0deg;
    }
    100% {
        --angle: 360deg;
    }
} 
.services-container .services-box:hover{
    background-color: rgb(5, 5, 5);
}
.services-box a{
    color: white;
}
@keyframes services-animation {
    0%{
        border:4px solid orangered;
    }
    25%{
        border:4px solid orange;
    }
    50%{
        border:4px solid yellowgreen;
    }
    75%{
        border:4px solid red;
    }
    100%{
        border:4px solid cyan
    }
    
}


/* portfolio */
.portfolio-box video{
    width: 40vw;
    border-radius: 20px;
    box-shadow: 0px 0px 10px orangered;
    animation: neon-glow 2s infinite;

}
.portfolio h1{
 font-size: 5rem;
 margin-bottom: 5rem;
}
.portfolio-container{
    display: flex;
    flex-direction: row;
    gap: 4rem;
    flex-wrap:nowrap;
}
.portfolio-box h4{
    font-size: 2.5rem;
    margin:2rem 0rem 2rem 0rem ;

}
.portfolio-box p{
    font-size: 1.4rem;
    text-align: justify;
    margin:2rem 1rem 2rem 0rem ;

}

.portfolio-box a,#click{
    font-size: 1.5rem;
    color: white;
    display: inline-flex;
    font-weight: bolder;
    transition: all 0.5s;
    margin: 1rem 0rem 0rem 0rem;

}

.portfolio-box a:hover{
    color: orangered;
}

/* contact page */
.contact-section {
    background-color: rgb(19, 18, 18);
    display: flex;
    justify-content: center;
    border-radius: 30px;
    margin:0rem 2rem 0rem 2rem;
}

.contact-container {
    max-width:30vw;
    width: 100%;
    background-color: rgba(7, 7, 7, 0.884);
    padding: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    text-align: center;
    
}

.contact-container h2 {
    font-size: 4rem;
    color:white;
    margin-bottom: 10px;
}

.contact-container p {
    color: white;
    margin-bottom: 2rem;
    font-size: 1.3em;

}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form label {
    font-weight: bold;
    color: white;
    margin-bottom: 5px;
    font-size: 1.5rem;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid orangered;
    border-radius: 5px;
    font-size: 1.4rem;
    outline: none;
    color: white;
    background-color: transparent;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form button {
    padding: 1.5rem;
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.5em;
    font-weight: bolder;
    transition: background-color 0.3s;
}

.contact-form button:hover {
    background-color: orangered;
}


  .footer  {
    background-color: #000;
    padding: 40px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .footer #copy{
    font-size: 1.5rem;

  }

  /* Glowing Borders */
  .footer::before,
  .footer::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(255,165,0,0) 0%, orangered 50%, rgba(255,165,0,0) 100%);
    top: 0;
    animation: border-glow 3s linear infinite;
  }
  .footer::after {
    top: auto;
    bottom: 0;
    animation: border-glow 3s linear infinite reverse;
  }

  /* Navigation Links */
  .footer .nav-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
  }

  .footer a {
    color: orangered;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bolder;

    position: relative;
    transition: color 0.3s ease;
  }

  .footer a:hover {
    color: #fff;
    text-decoration: underline;
  }

  /* Animated Social Icons */
  .footer .social-icons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
  }

  .footer .social-icons a {
    font-size: 1.8rem;
    color: orangered;
    transition: transform 0.3s ease, color 0.3s ease;
  }

  .footer .social-icons a:hover {
    color: #fff;
    transform: scale(0.9) rotate(10deg);
  }

  /* Glow Animation */
  @keyframes border-glow {
    0%, 100% {
      transform: translateX(-100%);
    }
    50% {
      transform: translateX(100%);
    }
  }

  /* Text Glow */
  .footer h2 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: orangered;
    animation: glow-text 2s ease-in-out infinite alternate;
  }

  @keyframes glow-text {
    0% { text-shadow: 0 0 10px orangered, 0 0 20px orangered; }
    100% { text-shadow: 0 0 20px #fff, 0 0 30px orangered, 0 0 40px orangered; }
  }


  /* Skills */
/* Skills Section Styles */
#skills {
    background-color: #000; /* Black background */
    padding: 50px 20px;
    color: #fff; /* White text */
    text-align: center;
  }
  
  .skills-heading {
    font-size: 5rem;
    margin-bottom: 30px;
    color: orangered;
    font-family: 'Arial', sans-serif;
  }
  
  .skills-heading span {
    color: #fff;
    border-bottom: 3px solid orangered;
  }
  
  .skills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }
  
  .skills_container {
    background: #1a1a1a; /* Dark gray for contrast */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(255, 69, 0, 0.2); /* Orangered shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .skills_container:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 12px rgba(249, 89, 30, 0.4);
  }
  
  .skills_container h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: orangered;
    font-family: 'Verdana', sans-serif;
  }
  
  .skills_container p {
    font-size: 1.7rem;
    margin: 8px 0;
    color: #ddd;
    font-family: 'Roboto', sans-serif;
  }
  
  .skills_container p::before {
    margin-right: 10px;
    color: orangered;
  }
  .img_container{
    margin-top: 10rem;
  }
  .skills_img{
    width: 12rem;
    margin: 2rem;
    border-radius: 20px;
    box-shadow: 0px 0px 10px cyan;
    padding: 10px;
    transition: all 0.5s;
  }
  .skills_img:hover{
    transform: scale(1.2,1.2);
  }
  
/* meadia queries */
@media (max-width:1200px) {
    html{
        font-size: 55%;
    }
    
}
@media (max-width:991px)  {
    .header{
        padding: 2rem 3%;

    }
    section{
        padding: 10rem 3%;

    }
    .services{
        padding: 7rem;

    }
    .portfolio{
        padding-bottom:7rem ;

    }

    
}
/* for mobile screen */
@media (max-width:768px){ 
    #menuicon{
        display: block;
        position: absolute;
        right: 4%;
        font-size: 4rem;
        transition: transform 0.3s ease;
    }
    .home{
        flex-direction: column;
        margin-top: 5rem;
    }
    .home-content h3{
        font-size: 3.2rem;

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

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

    }
     #homeimg{
        
        /* display: none; */
        width: 60vw;
        margin: 10rem 0.5rem 0rem 0rem;

    }


    /* services */
    .services h2{
        text-align: center;
        /* margin: 0rem 0rem 0rem 2rem; */
    }
    .services-container .services-box{
        height: 80vh;
        width: 80vw;
        /* border: none; */

    }
     #container-1::after,
    #container-1::before, #container-2::after,
    #container-2::before,#container-3::after,
    #container-3::before{
        display: none; 
        
    }
    

    
    .services h3{
        font-size: 4rem;
    
    }
    .services p{
        font-size: 2.5rem;
        margin-top: 1rem;
    
    }
    
    /* about */
    .about{
        display: flex;
        flex-direction: column;
        text-align: justify;
    }
    .abtimg{
        width: 70vw;
    }
    .about-container p{
        font-size: 2.3rem;
    }


    /* portfolio */
    .portfolio p{
        font-size: 2.3rem;
    }
    .portfolio h1{
        text-align: center;
        
    }
    .portfolio-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }
    .portfolio-box video{
        width: 80vw;
        margin: 3rem 0rem 3rem 3rem;
        
    }
    .portfolio-box h4{
        font-size: 4rem;
    }

    /* navbar */
    nav {
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        width: 100%;
        background-color: rgba(18, 16, 16, 0.737);
        border: 2px solid orangered;
        margin-right: 2rem; 
        border-radius: 20px;
      
        padding: 2rem;
     
    }
    
    .navbar a {
        font-size: 2.5rem;
    }
    
    nav.show {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 7rem;
        font-size: 1.5rem;
        right: 2px;
        left: 2px;
        transition: all 0.5s;
    }
    
    
    
    .navbar.show #menuicon {
        transform: rotate(90deg);
    }
    
    /* contact */
    .contact-container {
        padding: 20px;
        max-width: 100%;
    }

    .contact-container h2 {
        font-size: 6rem;
    }

    .contact-container p {
        font-size: 2.3rem;
    }

    .contact-form label {
        font-size: 2.2rem;
    }

    .contact-form input, .contact-form textarea {
        font-size: 2rem;
        padding: 8px;
        outline: none;
    }

    .contact-form button {
        padding: 10px;
        font-size: 2.5rem;
    }
    /* skills */
    .container{
        margin: 0rem 2rem 0rem 2rem;
        padding: 1rem;
       
    }

}