/* Home Page */
.image-container img {
    width: 100%;
    height: fit-content;
    display: block;
    
}



.image-container {
    position: relative;
    
}





.image-container .photo{
   

    position: absolute;
    top: 10%;
    left: 10%;
    width: calc(35% - 20px);
    height: calc(45vh - 20px);
    border-radius: 4%;
    
   
}

/*LOAding*/

/* Loading container and text */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #ffd700; /* Gold color for the text */
    font-size: 32px;
    font-weight: bold;
    position: absolute;
    top: 10%;
    right: 25%;
  }

  /* Loading bar styles */
  .loading-bar {
    position: relative;
    width: 400px;
    height: 40px;
    margin-top: 20px;
    background-color: white; /* Background for the bar */
    border: 4px solid #ffd700; /* Gold border */
    border-radius: 5px;
    overflow: hidden;
  }

  /* Inner animated progress bar */
  .loading-bar-inner {
    position: absolute;
    height: 100%;
    background-color: #7f00f7; /* Gold progress */
    width: 0;
    animation: progress-animation 2s infinite; /* Smooth looping animation */
  }

  /* Keyframes for the animation */
  @keyframes progress-animation {
    0% {
      width: 0;
    }
    50% {
      width: 60%; /* Partial fill to mimic the image */
    }
    100% {
      width: 0;
    }
  }

 


.banner-text{
    position: absolute;
    top: 25%;
    right: 0%;
    transform: translate(-50%, -50%);
   
}

.banner-text h1{
    font-size: 5pc;
    font-family: shrinkhand;
    color: #ffffff;
    
}

.stacked-windows{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 30%;
    right: 5%;
   
}

.stacked-windows img{
    width: 45vw;
}
.content-window{
    position: absolute; /* Place text on top of the image */
    top: 50%; /* Center text vertically */
    left:50%; /* Center text horizontally */
    transform: translate(-50%, -50%); /* Adjust to perfectly center */
    text-align: center; /* Center align the text and buttons */
    color: rgb(0, 0, 0); /* Ensure the text is readable on the image */
    font-family: Arial, sans-serif;
    z-index: 2; /* Ensure it layers above the image */
    
  
}

.content-window h4 {
    font-size: 3rem; /* Adjust heading size */
    margin-bottom: 10px; /* Space below the heading */
}




.stacked-windows .btn {
    padding: 15px 30px;
    margin-top: 100px;
    font-size: 16px;
    font-weight: bold;
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: rgb(255, 196, 0);
    text-decoration: none;
  
    
}



.stacked-windows .btn {
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: rgb(240, 205, 6);
    text-decoration: none;
    
    
}


.stacked-windows .btn-see-more {
    background-color: #e0e0e0;
    

}

.stacked-windows .btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}


.stacked-windows .buttons {
    margin-top: 40px;
    gap: 20px;
}


.image-container .mouse{
    position: absolute;
    bottom: 0%;
    left: 2%;
    width: 50%;
   

}

.banner {
    position: relative;
}



.banner .overlay .buttons {
    display: flex;
    gap: 30px;
    justify-content: flex-end;
}

.banner .overlay .btn {
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    background-color: white;
    color: black;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.banner .overlay .btn:hover {
    background-color: #ccc;
}


.developerss {
    font-size: 50px;
    text-align: center;
    font-weight: bold;
    background-color: black;
    color: white;
    padding: 2%;
    font-family: shrinkhand;
   
}

/* Project Showcase Section */
.project-showcase {
    background-color: rgb(136, 78, 252);
    color: rgb(255, 255, 255);
    padding: 50px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
   
}

.project-showcase .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 1200px;
}

.project-showcase .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
    width: 100%;
}

.project-showcase .text-content {
    text-align: left;
}

.project-showcase .text-content h1 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
}

.project-showcase .text-content h3 {
    font-size: 18px;
    font-style: italic;
    margin-bottom: 20px;
}

.project-showcase .text-content p {
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 1.6;
}

.project-showcase .buttons {
    display: flex;
    gap: 20px;
}

.project-showcase .btn {
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: white;
    text-decoration: none;
    
}

.project-showcase .btn-see-more {
    background-color: #e0e0e0;
    

}

.project-showcase .btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}


/* General Styling */
.developersss {
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    background-color: black;
    color: white;
    padding: 2%;
}

.developer-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Developer Card */
.developer-card {
    text-align: center;
    color: #fff;
    font-weight: bold;
    background-color: #000;
    padding: 10px;
}

/* Border Animation Container */
.circle-border {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rotate-border 3s linear infinite;

    /* Glow Effect */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* Inner Circle */
.circle {
    width: 40px;
    height: 40px;
    background-color: #000; /* Inner circle stays static */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Text color */
    font-size: 16px;
    font-weight: bold;
    position: relative;
    z-index: 1; /* Ensure it stays above the rotating border */
}

/* Animation for Rotating Border */
@keyframes rotate-border {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Developer Name */
.developer-card p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
}

/* Developer Name Styling */
.developer-card p {
    margin-top: 30px; /* Adds space to prevent overlap with the circle */
    font-size: 14px;
    line-height: 1.5;
}

/* Cards Section */
.card-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
}

.card {
    width: 220px;
    height: 320px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    opacity: 0.8;
    transition: transform 0.1s ease, opacity 0.3s ease;
    animation: autoScale 8s infinite;
}

.image-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
    opacity: 1;
}

@keyframes autoScale {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    33% {
        transform: scale(1.1);
        opacity: 1;
    }

    66% {
        transform: scale(1);
        opacity: 0.8;
    }
}

.card:nth-child(1) {
    animation-delay: 0s;
}

.card:nth-child(2) {
    animation-delay: 3s;
}

.card:nth-child(3) {
    animation-delay: 6s;
}

/* Modal Styles */
.modal-section2 {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.modal-contents {
    display: block;
    max-width: 90%;
    max-height: 80%;
    margin: auto;
    border-radius: 10px;
}

/* Close Button */
.close {
    color: #fff;
    font-size: 36px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 25px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #ccc;
    text-decoration: none;
    cursor: pointer;
}

/* Disable scrolling on the body */
.no-scroll {
    overflow: hidden;
    height: 100vh; /* Prevents page height from affecting behavior */
}

/* Project Showcase Section */
.projecttoowan-showcase {
    background-color: #333535;
    color: rgb(243, 236, 236);
    padding: 50px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container Layout */
.projecttoowan-showcase .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 1200px;
}

/* Content Layout - Side by side layout with text and images */
.projecttoowan-showcase .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    width: 100%;
}

/**/
/* style.css */

/* 3D carousel container */
.carousel-container {
    position: relative;
    width: 100px;
    height: 500px;
    margin: 100px auto;
    perspective: 3000px;
    /* Creates a 3D space */
}

/* The carousel images container */
.carousel-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    animation: rotateCarousel 20s infinite linear;
    /* Rotate animation */
}

/* Style for each image */
.carousel-images img {
    position: absolute;
    width: 290px;
    /* Size of each image */
    height: 390px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    /* Change cursor to indicate clickable image */
    transition: transform 0.3s ease-in-out;
}

/* Define the 3D rotation animation */
@keyframes rotateCarousel {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
        /* Rotate full 360 degrees around Y axis */
    }
}

/* Optional: Hover effect to slow down rotation */
.carousel-container:hover .carousel-images {
    animation-play-state: paused;
}

/* Modal (popup) styles */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Position it fixed in the viewport */
    z-index: 1000;
    /* Make sure it's on top */
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    /* Semi-transparent background */
    justify-content: center;
    align-items: center;
}

/* Modal content (image inside modal) */
.modal-content {
    max-width: 90%;
    max-height: 80%;
    border-radius: 10px;
}

/* Close button style */
.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
}


/* Images Layout */
.projecttoowan-showcase .images {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* Main Image */
.projecttoowan-showcase .main-image {
    width: 300px;
    height: 380px;
    object-fit: cover;
    z-index: 2;
    transform: translateY(-30px);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Side Images */
.projecttoowan-showcase .side-image {
    width: 200px;
    height: 300px;
    object-fit: cover;
    position: absolute;
    z-index: 1;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    opacity: 0.8;
}

/* Left-side image */
.projecttoowan-showcase .left {
    left: -50px;
    transform: rotate(-10deg);
}

/* Right-side image */
.projecttoowan-showcase .right {
    right: -50px;
    transform: rotate(10deg);
}

/* Hover effect for side images */
.projecttoowan-showcase .side-image:hover {
    transform: scale(1.05) rotate(0deg);
    opacity: 1;
}

/* Text Content */
.projecttoowan-showcase .text-content {
    text-align: left;
    
}

.projecttoowan-showcase .text-content h1 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
}

.projecttoowan-showcase .text-content h3 {
    font-size: 18px;
    font-style: italic;
    margin-bottom: 20px;
}

.projecttoowan-showcase .text-content p {
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Buttons Section */
.projecttoowan-showcase .buttons {
    display: flex;
    gap: 20px;
}

/* Buttons Styling */
.projecttoowan-showcase .btn {
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: white;
}

.projecttoowan-showcase .btn-see-more {
    background-color: #e0e0e0;
}

.projecttoowan-showcase .btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}


/**************************************************************************************************


/
/* Media Queries for different screen sizes */

@media (max-width: 575.98px) {
    /* Styles for extra small devices */
 

.image-container .photo{
   


    top: 10%;
    left: 6%;
    width: calc(40% - 20px);
    height: calc(25vh - 20px);
   
}

/*LOAding*/

/* Loading container and text */
.loading-container {
   
    font-size: 20px;
   
    top: 5%;
    right: 20%;
  }

  /* Loading bar styles */
  .loading-bar {
  
    width: 200px;
    height: 20px;
    
  }
 

.banner-text{
    position: absolute;
    top: 35%;
    left:63%;
   
   
}

.banner-text h1{
    font-size: 1rem;
    font-family: shrinkhand;
    color: #ffffff;
    width: 100%;
}

.stacked-windows{
   
    top: 35%;
    right: 5%;
   
}

.stacked-windows img{
    width: 50vw;
}
.content-window{
    position: absolute; /* Place text on top of the image */
    top: 50%; /* Center text vertically */
    left:50%; /* Center text horizontally */
    transform: translate(-50%, -50%); /* Adjust to perfectly center */
    text-align: center; /* Center align the text and buttons */
    color: rgb(0, 0, 0); /* Ensure the text is readable on the image */
    font-family: Arial, sans-serif;
    z-index: 2; /* Ensure it layers above the image */
    
  
}

.content-window h4 {
    font-size: 1rem; /* Adjust heading size */
    margin-bottom: 10px; /* Space below the heading */
}




.stacked-windows .btn {
    padding: 5px 7px;
    margin-top: 5px;
    font-size: 10px;
    font-weight: bold;
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: rgb(255, 196, 0);
    text-decoration: none;
  
    
}





.stacked-windows .btn-see-more {
    background-color: #e0e0e0;

    

}

.stacked-windows .btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}


.stacked-windows .buttons {
    margin-top: 10px;
    gap: 20px;
}


.image-container .mouse{
    position: absolute;
    bottom: 0%;
    left: 5%;
    width: 20%;
   

}



/*2nd*/


.developerss {
    font-size: 30px;
    
   
}

/* Project Showcase Section */



.project-showcase .content {
   
    grid-template-columns: 1fr;
    
}

/* Cards Section */
.card-container {
    display: flex;
    flex-direction: row; /* Change to row to make elements align horizontally */
    flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
    align-items: flex-start; /* Align items to the start of the container */
    justify-content: center; /* Center the items horizontally */
    gap: 30px;
    margin-top: 50px;
}

.card {
    width: 250px;
    height: 320px;
   
}




/* General Styling */
.developersss {
    font-size: 15px;
    text-align: center;
    font-weight: bold;
    background-color: black;
    color: white;
    padding: 2%;
}


/* Developer Name */
.developer-card p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
}

/* Developer Name Styling */
.developer-card p {
    margin-top: 30px; /* Adds space to prevent overlap with the circle */
    font-size: 10px;
    line-height: 1.5;
}

.projecttoowan-showcase .content {
    display: grid;
    grid-template-columns: 1fr ;
    gap: 40px;
    align-items: center;
    width: 100%;
}

    /* Modal Styles */
    .modal-section2 {
        display: none;
        position: fixed;
        z-index: 10;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        justify-content: center;
        align-items: center;
    }
    
    .modal-contents {
        display: block;
        max-width: 90%;
        max-height: 80%;
        margin: auto;
        border-radius: 10px;
    }
      
    /* Modal (popup) styles */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Position it fixed in the viewport */
        z-index: 1000;
        /* Make sure it's on top */
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        /* Semi-transparent background */
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    
    /* Modal content (image inside modal) */
    .modal-content {
        max-width: 30%;
        max-height: 80%;
        border-radius: 10px;
    }
    





  }
  
  /* Small devices (phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Styles for small devices */    
      
  
    

    .image-container .photo{
   


        top: 10%;
        left: 6%;
        width: calc(45% - 20px);
        height: calc(30vh - 20px);
       
    }
    
    /*LOAding*/
    
    /* Loading container and text */
    .loading-container {
       
        font-size: 20px;
       
        top: 5%;
        right: 25%;
      }
    
      /* Loading bar styles */
      .loading-bar {
      
        width: 200px;
        height: 20px;
        
      }
     
    
    .banner-text{
        position: absolute;
        top: 30%;
        left:65%;
       
       
    }
   
.banner-text h1{
    font-size: 2rem;
    font-family: shrinkhand;
    color: #ffffff;
    width:20rem;
}

    .stacked-windows{
       
        top: 35%;
        right: 5%;
       
    }
    
        .stacked-windows img{
            width: 50vw;
        }
        .content-window{
            margin-top: 20px;
            position: absolute; /* Place text on top of the image */
            top: 50%; /* Center text vertically */
            left:50%; /* Center text horizontally */
            transform: translate(-50%, -50%); /* Adjust to perfectly center */
            text-align: center; /* Center align the text and buttons */
            color: rgb(0, 0, 0); /* Ensure the text is readable on the image */
            font-family: Arial, sans-serif;
            z-index: 2; /* Ensure it layers above the image */
            
        
        }

        .content-window h4 {
            font-size: 1.60rem; /* Adjust heading size */
            margin-bottom: 10px; /* Space below the heading */
        }




        .stacked-windows .btn {
            padding: 5px 7px;
            margin-top: 5px;
            font-size: 10px;
            font-weight: bold;
            color: black;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
            background-color: rgb(255, 196, 0);
            text-decoration: none;
        
            
        }





        .stacked-windows .btn-see-more {
            background-color: #e0e0e0;

            

        }

        .stacked-windows .btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }


        .stacked-windows .buttons {
            margin-top: 10px;
            gap: 20px;
        }


        .image-container .mouse{
            position: absolute;
            bottom: 0%;
            left: 5%;
            width: 25%;
        

        }



        /*2nd*/


        .developerss {
            font-size: 30px;
            
        
        }

        /* Project Showcase Section */



        .project-showcase .content {
        
            grid-template-columns: 1fr;
            
        }

        /* Cards Section */
        .card-container {
            display: flex;
            flex-direction: row; /* Change to row to make elements align horizontally */
            flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
            align-items: flex-start; /* Align items to the start of the container */
            justify-content: center; /* Center the items horizontally */
            gap: 30px;
            margin-top: 50px;
        }

        .card {
            width: 50vw;
            height: 320px;
        
        }




        /* General Styling */
        .developersss {
            font-size: 15px;
            text-align: center;
            font-weight: bold;
            background-color: black;
            color: white;
            padding: 2%;
        }


        /* Developer Name */
        .developer-card p {
            margin-top: 10px;
            font-size: 14px;
            line-height: 1.5;
        }

        /* Developer Name Styling */
        .developer-card p {
            margin-top: 30px; /* Adds space to prevent overlap with the circle */
            font-size: 10px;
            line-height: 1.5;
        }

        .projecttoowan-showcase .content {
            display: grid;
            grid-template-columns: 1fr ;
            gap: 40px;
            align-items: center;
            width: 100%;
        }

      /* Modal Styles */
.modal-section2 {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.modal-contents {
    display: block;
    max-width: 90%;
    max-height: 80%;
    margin: auto;
    border-radius: 10px;
}
  
/* Modal (popup) styles */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Position it fixed in the viewport */
    z-index: 1000;
    /* Make sure it's on top */
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    /* Semi-transparent background */
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Modal content (image inside modal) */
.modal-content {
    max-width: 30%;
    max-height: 80%;
    border-radius: 10px;
}



        }
        
  /* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
            /* Styles for medium devices */
           
    

    .image-container .photo{
        top: 10%;
        left: 6%;
        width: calc(45% - 20px);
        height: calc(35vh - 20px);
    }
    
    /* Loading container and text */
    .loading-container {
       
        font-size: 20px;
       
        top: 5%;
        right: 25%;
      }
    
      /* Loading bar styles */
      .loading-bar {
      
        width: 200px;
        height: 20px;
        
      }
     
    
    .banner-text{
        position: absolute;
        top: 30%;
        left:65%;
       
       
    }
   
.banner-text h1{
    font-size: 2.50rem;
    font-family: shrinkhand;
    color: #ffffff;
    width:25rem;
}

    .stacked-windows{
       
        top: 35%;
        right: 5%;
       
    }
    
            .stacked-windows img{
                width: 50vw;
            }
            .content-window{
                margin-top: 20px;
                position: absolute; /* Place text on top of the image */
                top: 50%; /* Center text vertically */
                left:50%; /* Center text horizontally */
                transform: translate(-50%, -50%); /* Adjust to perfectly center */
                text-align: center; /* Center align the text and buttons */
                color: rgb(0, 0, 0); /* Ensure the text is readable on the image */
                font-family: Arial, sans-serif;
                z-index: 2; /* Ensure it layers above the image */
                
            
            }
    
            .content-window h4 {
                font-size: 1.60rem; /* Adjust heading size */
                margin-bottom: 10px; /* Space below the heading */
            }
    
    
    
    
            .stacked-windows .btn {
                padding: 5px 7px;
                margin-top: 5px;
                font-size: 10px;
                font-weight: bold;
                color: black;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                transition: transform 0.3s, box-shadow 0.3s;
                background-color: rgb(255, 196, 0);
                text-decoration: none;
            
                
            }
    
    
    
    
    
            .stacked-windows .btn-see-more {
                background-color: #e0e0e0;
    
                
    
            }
    
            .stacked-windows .btn:hover {
                transform: scale(1.05);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            }
    
    
            .stacked-windows .buttons {
                margin-top: 10px;
                gap: 20px;
            }
    
    
            .image-container .mouse{
                position: absolute;
                bottom: 0%;
                left: 5%;
                width: 30%;
            
    
            }
    
    
    
            /*2nd*/
    
    
            .developerss {
                font-size: 30px;
                
            
            }
    
            /* Project Showcase Section */
    
    
    
            .project-showcase .content {
            
                grid-template-columns: 1fr;
                
            }
    
            /* Cards Section */
            .card-container {
                display: flex;
                flex-direction: row; /* Change to row to make elements align horizontally */
                flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
                align-items: flex-start; /* Align items to the start of the container */
                justify-content: center; /* Center the items horizontally */
                gap: 30px;
                margin-top: 50px;
            }
    
            .card {
                width: 50vw;
                height: 320px;
            
            }
    
    
    
    
            /* General Styling */
            .developersss {
                font-size: 15px;
                text-align: center;
                font-weight: bold;
                background-color: black;
                color: white;
                padding: 2%;
            }
    
    
            /* Developer Name */
            .developer-card p {
                margin-top: 10px;
                font-size: 14px;
                line-height: 1.5;
            }
    
            /* Developer Name Styling */
            .developer-card p {
                margin-top: 30px; /* Adds space to prevent overlap with the circle */
                font-size: 10px;
                line-height: 1.5;
            }
    
            .projecttoowan-showcase .content {
                display: grid;
                grid-template-columns: 1fr ;
                gap: 40px;
                align-items: center;
                width: 100%;
            }
     

  }
  
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) and (max-width: 1199.98px) {
    /* Styles for large devices */
    .image-container .photo{
        top: 10%;
        left: 6%;
        width: calc(45% - 20px);
        height: calc(40vh - 20px);
    }
    
    /* Loading container and text */
    .loading-container {
       
        font-size: 20px;
       
        top: 5%;
        right: 25%;
      }
    
      /* Loading bar styles */
      .loading-bar {
      
        width: 200px;
        height: 20px;
        
      }
     
    
    .banner-text{
        position: absolute;
        top: 30%;
        left:65%;
       
       
    }
   
.banner-text h1{
    font-size: 3rem;
    font-family: shrinkhand;
    color: #ffffff;
    width:30rem;
}

    .stacked-windows{
       
        top: 35%;
        right: 5%;
       
    }

    .stacked-windows img{
        width: 50vw;
    }
    .content-window{
        margin-top: 20px;
        position: absolute; /* Place text on top of the image */
        top: 50%; /* Center text vertically */
        left:50%; /* Center text horizontally */
        transform: translate(-50%, -50%); /* Adjust to perfectly center */
        text-align: center; /* Center align the text and buttons */
        color: rgb(0, 0, 0); /* Ensure the text is readable on the image */
        font-family: Arial, sans-serif;
        z-index: 2; /* Ensure it layers above the image */
        
    
    }

    .content-window h4 {
        font-size: 1.60rem; /* Adjust heading size */
        margin-bottom: 10px; /* Space below the heading */
    }




    .stacked-windows .btn {
        padding: 15px 10px;
        margin-top: 5px;
        font-size: 15px;
        font-weight: bold;
        color: black;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: transform 0.3s, box-shadow 0.3s;
        background-color: rgb(255, 196, 0);
        text-decoration: none;
    
        
    }





    .stacked-windows .btn-see-more {
        background-color: #e0e0e0;

        

    }

    .stacked-windows .btn:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }


    .stacked-windows .buttons {
        margin-top: 20px;
        gap: 20px;
    }


    .image-container .mouse{
        position: absolute;
        bottom: 0%;
        left: 5%;
        width: 35%;
    

    }



    /*2nd*/


    .developerss {
        font-size: 30px;
        
    
    }

    /* Project Showcase Section */



    .project-showcase .content {
    
        grid-template-columns: 1fr 1fr;
        
    }

    /* Cards Section */
    .card-container {
        display: flex;
        flex-direction: row; /* Change to row to make elements align horizontally */
        flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
        align-items: flex-start; /* Align items to the start of the container */
        justify-content: center; /* Center the items horizontally */
        gap: 20px;
        margin-top: 50px;
    }

    .card {
        width: 15vw;
        height: 20vh;
    
    }
    

    /* General Styling */
    .developersss {
        font-size: 15px;
        text-align: center;
        font-weight: bold;
        background-color: black;
        color: white;
        padding: 2%;
    }


    /* Developer Name */
    .developer-card p {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.5;
    }

    /* Developer Name Styling */
    .developer-card p {
        margin-top: 30px; /* Adds space to prevent overlap with the circle */
        font-size: 10px;
        line-height: 1.5;
    }

    .projecttoowan-showcase .content {
        display: grid;
        grid-template-columns: 1fr 1fr ;
        gap: 30px;
        align-items: center;
        width: 100%;
    }

  }
  
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) and (max-width: 1399.98px) {
    /* Styles for extra large devices */
    .image-container .photo{
        top: 10%;
        left: 6%;
        width: calc(45% - 20px);
        height: calc(45vh - 20px);
    }
    
    /* Loading container and text */
    .loading-container {
       
        font-size: 20px;
       
        top: 5%;
        right: 25%;
      }
    
      /* Loading bar styles */
      .loading-bar {
      
        width: 200px;
        height: 20px;
        
      }
     
    
    .banner-text{
        position: absolute;
        top: 30%;
        left:65%;
       
       
    }
   
.banner-text h1{
    font-size: 3rem;
    font-family: shrinkhand;
    color: #ffffff;
    width:30rem;
}

    .stacked-windows{
       
        top: 35%;
        right: 5%;
       
    }

    .stacked-windows img{
        width: 50vw;
    }
    .content-window{
        margin-top: 20px;
        position: absolute; /* Place text on top of the image */
        top: 50%; /* Center text vertically */
        left:50%; /* Center text horizontally */
        transform: translate(-50%, -50%); /* Adjust to perfectly center */
        text-align: center; /* Center align the text and buttons */
        color: rgb(0, 0, 0); /* Ensure the text is readable on the image */
        font-family: Arial, sans-serif;
        z-index: 2; /* Ensure it layers above the image */
        
    
    }

    .content-window h4 {
        font-size: 1.60rem; /* Adjust heading size */
        margin-bottom: 10px; /* Space below the heading */
    }




    .stacked-windows .btn {
        padding: 5px 7px;
        margin-top: 5px;
        font-size: 10px;
        font-weight: bold;
        color: black;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: transform 0.3s, box-shadow 0.3s;
        background-color: rgb(255, 196, 0);
        text-decoration: none;
    
        
    }





    .stacked-windows .btn-see-more {
        background-color: #e0e0e0;

        

    }

    .stacked-windows .btn:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }


    .stacked-windows .buttons {
        margin-top: 10px;
        gap: 20px;
    }


    .image-container .mouse{
        position: absolute;
        bottom: 0%;
        left: 5%;
        width: 40%;
    

    }



    /*2nd*/


    .developerss {
        font-size: 30px;
        
    
    }

    /* Project Showcase Section */



    .project-showcase .content {
    
        grid-template-columns: 1fr 1fr;
        
    }

    /* Cards Section */
    .card-container {
        display: flex;
        flex-direction: row; /* Change to row to make elements align horizontally */
        flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
        align-items: flex-start; /* Align items to the start of the container */
        justify-content: center; /* Center the items horizontally */
        gap: 20px;
        margin-top: 50px;
    }

    .card {
        width: 15vw;
        height: 20vh;
    
    }
    

    /* General Styling */
    .developersss {
        font-size: 15px;
        text-align: center;
        font-weight: bold;
        background-color: black;
        color: white;
        padding: 2%;
    }


    /* Developer Name */
    .developer-card p {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.5;
    }

    /* Developer Name Styling */
    .developer-card p {
        margin-top: 30px; /* Adds space to prevent overlap with the circle */
        font-size: 10px;
        line-height: 1.5;
    }

    .projecttoowan-showcase .content {
        display: grid;
        grid-template-columns: 1fr 1fr ;
        gap: 30px;
        align-items: center;
        width: 100%;
    }
  }
  
  
    
   
    


/*g----------------------------------------------------------*/