/*GENERAL*/

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

*{
    margin: 0;
    padding: 0;
    cursor: default;
}

body{
    font-family: 'Poppins', sans-serif;
    /*background-color: bisque;*/
    background-color:#f7e7ce;
    cursor: url('./images/dot.svg'), auto;
    
 
   
}
#background-section {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
  }

.word {
    position: absolute;
    font-size: 50px;
    font-weight: 500;
    color: rgb(113, 113, 113);
    color: rgba(0, 0, 0, 0.120); /* Use rgba for translucency */
    z-index: -1;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Smooth transition effect */
  }

html{
    scroll-behavior: smooth; 
}


    
/*********loader*********/
.loader-wrapper{
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    z-index: 999;
    background-color:  #f7e7ce;
}

.loader{
    border: 3px solid #ffffff;
    border-top: 5px solid #000000;
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.loader-image {
    width: 80px; /* Adjust the size as needed */
    height: 80px; /* Adjust the size as needed */
}

.loader:before{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hide the loader when the content is loaded */
.loaded .loader-wrapper {
    display: none;
}


/*******Scrollllll**********/
/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
::-webkit-scrollbar-track {
    background: #f7e7ce;
  }
  
  /* Handle */
::-webkit-scrollbar-thumb {
    background: #000000;
  }
  
  /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(53, 53, 53);
  }


p{
    color: rgb(85,85,85);
}

/*TRANSITION*/

a,.btn{
    transition: all 300ms ease;
}

/*DESKTOP NAVIGATION*/


nav, .nav-links{
    display: flex;
}

nav{
    justify-content: space-around;
    align-items: center;
    height: 17vh;
   
}
.nav-links{
    gap: 2rem;
    list-style: none;
    font-size: 1.5rem;
}

a{
    color: black;
    text-decoration: none;
    text-decoration-color: white;
}

a:hover{
    color: grey;
    text-decoration: underline;
    text-underline-offset: 1rem;
    text-decoration-color: rgb(181, 181, 181);
}

.logo{
    font-size: 2.2rem;
    font-weight: 500;
}
.logo:hover{
    cursor:default;
    
}

/*HAMBURGER MENU*/

#hamburger-nav{
    display: none;
}
.hamburger-menu{
    position: relative;
    display: inline-block;
}

.hamburger-icon{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 24px;
    width: 30px;
    cursor: pointer;
}

.hamburger-icon span{
    width: 100%;
    height: 2px;
    background-color: black;
    transition: all 0.3 ease-in-out;
}

.menu-links{
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    width:fit-content;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3 ease-in-out;
}

.menu-links a{
    display: block;
    padding: 10px;
    text-align: center;
    font-size: 1.5rem;
    color: black;
    text-decoration: none;
    transition: all 0.3 ease-in-out;
}

.menu-links li{
    list-style: none;
}

.menu-links.open{
    max-height: 300px;
}

.hamburger-icon.open span:first-child{
    transform: rotate(45deg) translate(10px, 5px);
}

.hamburger-icon.open span:nth-child(2){
    opacity: 0;
}
.hamburger-icon.open span:last-child{
    transform: rotate(-45deg) translate(10px, -5px);
}

.hamburger-icon span:first-child{
    transform: none;
}

.hamburger-icon span:first-child{
    opacity: 1;
}

.hamburger-icon span:first-child{
    transform: none;
}

/*SECTIONS*/

section{
   padding-top:0vh;
   height: 100vh;
   margin: 0 1rem;
   box-sizing: border-box;
   min-height: 100vh  ;
   
  
}

.section-container{
    display:flex;
}

/* Initially hide elements */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s, transform 0.8s;
 }

 /* Make elements visible when the 'visible' class is added */
 .reveal.visible {
    opacity: 1;
    transform: translateY(0);
    
 }

 .reveal-section {

    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
    transition-delay: 2.5s;
  }

  
 
.cursor, .hand{
    position: fixed;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    transition: transform .1s;
}

.cursor{
    background: black;
    top: 0;
    width: 15px;
    height: 15px;
    z-index: 999;
}

.hand{
    max-width: 0;
    top: 50%;
    width: 75px;
    height: 75px;
    z-index: 9999;
    display: grid;
    place-content: center;
    transform: rotate(45deg);
    opacity: 0;
}




/*PROFILE SECTION***/

#profile{
    display: flex;
    justify-content: center;
    height: 100vh;
    background-color: f7e7ce;
    overflow: visible;

}


.section__pic-container{
    display: flex;
    height: 400px;
    width: 400px;
    margin: auto 0;
}

.section__text{
    align-self: center;
    text-align: center;
}

.section__text p{
    font-weight: 600;
}

.section__text__p1{
    text-align: center;
    
}


.section__text__p2{
    font-size: 1.75rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.sub-title{
    font-size: 3rem;
    text-align: center;
}

.main-title{
    position:relative;
    font-size: 9rem;
    text-align: center;
    white-space: nowrap; 
    overflow: hidden;
    cursor: default;
   
    transform: scale(1);
    animation: float 3s ease-in-out infinite;
}

@keyframes float{
    0%{
        transform: translateY(0);
    }

    50%{
        transform: translateY(-8px);
    }

    100%{
        transform: translateY(0);
    }
}



.title{
    font-size: 3rem;
    text-align: center;
    animation: floatUpDown 3s infinite alternate ease-in-out;
}

  
  @keyframes floatUpDown {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-10px);
    }
  }


#socials-container{
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    gap: 1rem;
}



/******ICONSSS******/

.icon{
    cursor: pointer;
    height: 2rem;
    
}



/****BUTTONS*****/

.btn-container{
    display: flex;
    justify-content: center;
    gap: 1rem;
    z-index: 999;
   
}
.btn{
    font-weight: 600;
    transition: all 300ms ease;
    padding: 1rem;
    width: 8rem;
    border-radius: 2rem;
}
.btn-color-1,
.btn-color-2{
    border: rgb(53, 53, 53) 0.1rem solid;
}

.btn-color-1:hover,
.btn-color-2:hover{
    cursor: pointer;
}
.btn-color-1,
.btn-color-2:hover{
    background: rgb(53, 53, 53);
    color: white;
}
.btn-color-1:hover{
    background: rgb(0, 0, 0);

}

.btn-color-2{
    background: none;
}

.btn-color-2:hover{
    border: rgb(255, 255, 255)0.1rem solid;
}

.btn-container{
    gap: 1rem;
}


/******Floating Arrow********/
.floating-image {
    position: absolute; /* Use absolute positioning for the image */
    top: 120%; /* Adjust the top position */
    left: 50%; /* Adjust the left position */
    transform: translate(-50%, -50%); 
  }

.floating-image img{
    
 max-width: 100px;
 height: auto;
 /*display: block;*/
 margin: 0 auto;
 animation: float 1s ease-in-out infinite;
}
/***ABOUT SECTION****/

#about{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0 10rem;
    text-align: center;
    /* Initially hide the about me section */
    transition: opacity 0.5s ease; /* Add transition effect */
}
.about-containers{
    gap: 2rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
    
}
.about-details-container{
    justify-content: center;
    flex-direction: column;
    min-height: 300px;
    
}
.about-containers, .about-details-container{
    display: flex;
}
.about-pic{
    border-radius: 0rem;
}


.details-container{
    padding: 1.5rem;
    flex: 1;
    background: white;
    border-radius: 2rem;
    border: rgb(53, 53, 53) 0.1rem solid;
    border-color: rgb(163, 163, 163);
    text-align: center;
}

.section-container{
    gap: 4rem;
    height: 80%;
}
.section__pic-container{
    height: 500px;
    width: 500px;
    margin: auto;
}

.text-container-1{
    font-weight:600;
    font-size: 4rem;
    margin-bottom: 20px;
    text-align: left;
}

.text-container{
    text-align: justify;
    line-height: 2;
    flex-shrink: 0;
}




/*******EXPERIENCE SECTION******/

/* Apply styles to the section */
  #experience {
    background-color: #F7E7CE; /* Champagne background */
    color: #000; /* Black text */
    padding: 80px 0;
    text-align: center;
    margin: 0 5rem;
  }
  
  .exp {
    max-width: 1700px;
    margin: 0 auto;
  }
  .experience-details-container{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
  
  /* Style the titles and subtitles */
  .section__text__p1, .title, .experience-sub-title {
    
    margin-bottom: 20px;
  }
  
  
  .experience-sub-title {
    font-size: 30px;
    border-bottom: 1px solid #cecece
  }
  
  /* Style the article containers */
  .article-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Style the individual articles */
  article {
    width: 180px;
    margin: 10px;
    padding: 15px;
    background-color: #fff; /* White background */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease-in-out;
  }
  
  /* Hover effect for the articles */
  article:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  }
  
  /* Style the icons */
  .icon {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
  }
  
  /* Align icons next to the h3 */
  article img {
    display: inline-block;
    margin-right: 10px;
  }

/*****Projects****/

#projects {
    position: relative;
}

.color-container{
    border-color: rgb(53, 53, 53);
    background: rgb(253, 253, 253);
}

.project-img{
    border-radius: 2rem;
    width: 90%;
    height: 90%;
}

.project-title{
    margin: 1rem;
    color: black;
}

.project-btn{
    color: black;
    border-color: rgb(163, 163, 163);
}


/***************TIMELINE****************************/

.title-container{
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 0px;
    background-color: #f7e7ce;
}

.timeline{
   width: 80%;
   height: auto;
   max-width: 800px;
   margin: 0 auto;
   position: relative; 
}

.timeline ul{
    list-style: none;
}

.timeline ul li{
    padding: 20px;
    background-color: #fff;
    color: black;
    border-radius: 10px;
    margin-bottom: 20px;
   
}

.timeline ul li:last-child{
    margin-bottom: 0;
}

.timeline-content h1{
    font-size: 40px;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 10px;
}

.timeline-content p{
    font-size: 15px;
    line-height: 30px;
    font-weight: 300;
    
}

.timeline-content .date{
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.hidden-image {
    position: absolute;
    top: -100%; /* Initial position above the timeline content */
    left: 0;
    width: 100%;
    transition: top 0.3s ease; /* Adjust the duration and timing function as needed */
}

.timeline ul li:hover .hidden-image {
    top: 0; /* Move the image down to reveal it */
}



/********CERTIFICATION SECTION********/
#Certificates{
    position: relative;
    margin: 0 10rem;
}
.certs{
    background-color: f7e7ce;
    /*background:linear-gradient(45deg, white, white);*/
    padding: 15px 9%;
    padding-bottom: 50px;
 
    
}

.certs .title{
    text-align: center;
    padding-bottom: 15px;
    color:fff;

}

.certs .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap:15px;
    
}
.certs .box-container .box{
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background: #fff;
    text-align: center;
    padding: 30px 20px;
}

.certs .box-container .box img{
    height: 100px;
}

.certs .box-container .box h3{
    color: #444;
    font-size: 22px;
    padding: 10px 0;
}

.certs .box-container .box p{
    color: #777;
    font-size: 15px;
    line-height: 1.8;
}

.certs .box-container .box .btn{
    margin-top: 2px;
    display: inline-block;
    background: #333;
    color: #fff;
    font-size: 17px;
    border-radius: 5px;
    padding: 8px 25px;
    cursor: pointer;
}
.certs .box-container .box .btn:hover{
    letter-spacing: 2px;
    background-color: #000000;
    
}

.certs .box-container .box:hover{
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
    transform: scale(1.03);
    
}

/******CONTACT******/
#contact{
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 70vh;
    
}

.contact-info-upper-container{
    display: flex;
    justify-content: center;
    border-radius: 2rem;
    border: rgb(53, 53, 53) 0.1rem solid;
    border-color: rgb(163, 163, 163);
    background: (250, 250, 250);
    margin: 2rem auto;
    padding: 0.5rem;
}

.contact-info-container{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem;
}

.contact-info-container p{
    font-size: larger;
}

.contact-icon{
    cursor: default;
}

.email-icon{
    height: 2.5rem;
}



/*********Upwards Arrow***********/

.arrow{
    position: relative;
    height: 200px;
}

.floating-arrow {
    position: absolute; /* Use absolute positioning for the image */
    bottom: 50%; /* Adjust the top position */
    left: 50%; /* Adjust the left position */
    transform: translate(-50%, -50%); 
  }

.floating-arrow img{
    
 max-width: 100px;
 height: auto;
 /*display: block;*/
 margin: 0 auto;
 animation: float 1s ease-in-out infinite;
 cursor: pointer;
}




/******FOOTER SECTION*******/

footer{
    height: 26vh;
    margin: 0 1rem;
    border-top: 1px solid black;
 
}

footer p{
    text-align: center;
}



/*************MEDIA QUERIES****************/

@media (max-width:3000px){
    #profile{
        height: 83vh;
        margin-bottom: 6rem;
    }

    .about-containers{
        flex-wrap: wrap;
    }



    #contact{
       margin-bottom: 0px;
    }

    section, .section-container{
        height: fit-content;
    }
    .about-pic{
        border-radius: 10px;
    }
    
    
    
}


@media (min-width: 768px){
    .timeline::before{
        content: '';
        position: absolute;
        height: 100%;
        width: 2px;
        left: 50%;
        transform: translateX(-50%);
        background-color: gray;
    }

    .timeline ul li{
        width: 50%;
        margin-bottom: 50px;
        position: relative;
    }

    .timeline ul li:nth-child(odd){
        float: left;
        clear: right;
        transform: translateX(-80px);
        border-radius: 20px 0px 20px 20px;
    }

    .timeline ul li:nth-child(even){
        float: right;
        clear: left;
        transform: translateX(80px);
        border-radius: 0px 20px 20px 20px;
    } 

    .timeline ul li::after{
        content: '';
        position: absolute;
        height: 20px;
        width: 20px;
        background-color: gray;
        border-radius: 50%;
        top: 0;
    }

    .timeline ul li:nth-child(odd)::after{
        transform: translate(50%, -50%);
        right: -40px;
    }

    .timeline ul li:nth-child(even)::after{
        transform: translate(50%, -50%);
        left: -60px;
    }

    .timeline ul li:hover:after{
        background-color: rgb(0, 0, 0);
    }

    .timeline-content .date{
        position: absolute;
        top: -20px;
    }
    .timeline-content {
        position: relative;
    }
    
    
}

@media (max-width:1200px){
    .floating-image {
        position: absolute; /* Use absolute positioning for the image */
        top: 100%; /* Adjust the top position */
        left: 50%; /* Adjust the left position */
        transform: translate(-50%, -50%); 
      }

    .text-container-1{
        font-weight:600;
        font-size: 3rem;
        margin-bottom: 20px;
    }
    

    .main-title{
        font-size: 5rem;
        text-align: center;
    }
    #desktop-nav{
        display: none;
    }

    #about{
        margin: 0 4rem;
    }

    #hamburger-nav{
        display:flex;
    }

    #experience, .experience-details-container{
        margin-top: 9rem;
    }

    #profile, .section-container{
        display: block;
    }

    .section__text{
        padding-top: 200px;
    }

    section, .section-container{
        height: fit-content;
    }

    section{
        margin: 0 5%;
       
    }

    .section__pic-container{
        width: auto;
        height: 50vw;
        justify-content: center;
        margin-bottom: 2rem;
    }

    .about-containers{
        margin-top: 0;
    }

    .about-pic{
        border-radius: 10px;
    }

    
}

@media (max-width:768px){

    .main-title{
        font-size: 5rem;
        text-align: center;
    }

    .sub-title{
        font-size: 2rem;
    }

    #contact, footer{
        height: 40vh;
    }

    #profile{
        height: 50vh;
        margin-bottom: 0;
    }

    #about{
        margin: 0 3rem;
        margin-bottom: 3rem;
    }
    
    #experience{
        margin-bottom: 3rem;
        margin-top: 9rem;
    }

    article{
        font-size: 1rem;
    }

    footer nav{
        height: fit-content;
        margin-bottom: 2rem;
    }

    .about-containers, .contact-info-upper-containers, .btn-container{
        flex-wrap: wrap;
    }

    .contact-info-container{
        margin: 0;
    }

    .contact-info-container p, .nav-links li a{
        font-size: 1rem;
    }
    .experience-sub-title{
        font-size: 1.5rem;
    }
    .logo{
        font-size: 1.5rem;
    }

    .nav-links{
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .section__pic-container{
        width: auto;
        height: 70vw;
        justify-content: center;
        border-radius: 5px;
        margin-bottom: 2rem;
    }

    .section__text__p2{
        font-size: 1.25rem;
    }

    .title{
        font-size: 3rem;
    }

    .text-container-1{
        font-size: 2rem;
    }

    .text-container{
        text-align: justify;
        font-size: 17px;
    }
    .floating-image {
        position: absolute; /* Use absolute positioning for the image */
        top: 90%; /* Adjust the top position */
        left: 50%; /* Adjust the left position */
        transform: translate(-50%, -50%); 
    }

    .about-pic{
        border-radius: 10px;
    }

}


@media (max-width:425px){

    .main-title{
        font-size: 2.5rem;
        text-align: center;
    }

    .sub-title{
        font-size: 2rem;
    }

    #contact, footer{
        height: 40vh;
    }

    #profile{
        height: 30vh;
        margin-bottom: 0;
    }

    #about{
        margin: 0 2rem;
    }

    #experience{
        margin: 0 2rem;
        margin-top: 9rem;
    }

    #Certificates{
        margin: 0 1rem;
    }


    article{
        font-size: 1rem;
    }

    footer nav{
        height: fit-content;
        margin-bottom: 2rem;
    }

    .about-containers, .contact-info-upper-containers, .btn-container{
        flex-wrap: wrap;
    }

    .contact-info-container{
        margin: 0;
    }

    .contact-info-container p, .nav-links li a{
        font-size: 1rem;
    }
    .experience-sub-title{
        font-size: 1.5rem;
    }
    .logo{
        font-size: 1.5rem;
    }

    .nav-links{
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .section__pic-container{
        width: auto;
        height: 100vw;
        justify-content: center;
        margin-bottom: 2rem;
    }

    .section__text__p2{
        font-size: 1.25rem;
    }

    .title{
        font-size: 2.5rem;
    }

    .text-container-1{
        font-size: 1.5rem;
    }

    .text-container{
        text-align: justify;
        font-size: small;
    }

    .floating-image {
        position: absolute; /* Use absolute positioning for the image */
        top: 80%; /* Adjust the top position */
        left: 50%; /* Adjust the left position */
        transform: translate(-50%, -50%); 
      }

      .about-pic{
        border-radius: 10px;
    }
}

@media (max-width:375px){

    .main-title{
        font-size: 2.5rem;
        text-align: center;
    }

    .sub-title{
        font-size: 2rem;
    }

    #contact, footer{
        height: 40vh;
    }

    #profile{
        height: 30vh;
        margin-bottom: 0;
    }

    #about{
        margin: 0 2rem;
    }

    #experience{
        margin: 0 2rem;
        margin-top: 9rem;
    }

    #Certificates{
        margin: 0 1rem;
    }


    article{
        font-size: 1rem;
    }

    footer nav{
        height: fit-content;
        margin-bottom: 2rem;
    }

    .about-containers, .contact-info-upper-containers, .btn-container{
        flex-wrap: wrap;
    }

    .contact-info-container{
        margin: 0;
    }

    .contact-info-container p, .nav-links li a{
        font-size: 1rem;
    }
    .experience-sub-title{
        font-size: 1.5rem;
    }
    .logo{
        font-size: 1.5rem;
    }

    .nav-links{
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .section__pic-container{
        width: auto;
        height: 100vw;
        justify-content: center;
        margin-bottom: 2rem;
    }

    .section__text__p2{
        font-size: 1.25rem;
    }

    .title{
        font-size: 2.5rem;
    }

    .text-container-1{
        font-size: 1.5rem;
    }

    .text-container{
        text-align: justify;
        font-size: small;
    }

    .floating-image {
        position: absolute; /* Use absolute positioning for the image */
        top: 80%; /* Adjust the top position */
        left: 50%; /* Adjust the left position */
        transform: translate(-50%, -50%); 
      }

      .about-pic{
        border-radius: 10px;
    }
}