/* Main Containers */


    /* Centers in Window */

    .skills-main-wrapper {
        display: flex;
        justify-content: center;   /* Centers horizontally */
        align-items: center;       /* Centers vertically */
        min-height: 100vh;
        overflow-x: hidden;
    }


    /* Shows Content */
    .main-container {
        display: block;
    }


/* Header */
   
    .skills-main .skills-label h6 {
        position: relative;
        font-size: 35px;
    }

    .skills-main .skills-label {
        position: relative;
        grid-column: 1;
        grid-row: 1;
        left: 45px;
        top: 5px;
    }


/* Main Skills Items */

    .skills-main {
        display: grid;
        grid-template-columns: auto; /* Three columns*/
        grid-template-rows: auto auto;
        align-items: center; /* Align items vertically */
        justify-content: center; /* Center everything horizontally */
        row-gap: 10px; /* Space between columns */
        column-gap: 20px;
        padding: 50px;
        padding-bottom: 0px;
        width: min(100%);        
        height: fit-content;
        margin: auto;
        position: relative;
        top: 0px;
    }

    .card-wrapper {
            position: relative;
            grid-column: 1;
            grid-row: 2;
            top: -135px;
            display: flex;
            width: 1120px;  /* Set the width of the carousel */
            height: 970px; /* Adjust height as needed */
            align-items: center;
            z-index: 2;
            right: -15px;
    }

    .card {
        flex: 0 0 auto; /* Prevent shrinking */
        background: linear-gradient(
            45deg,
            rgba(156, 165, 178, 0.15) 0%,
            rgba(156, 165, 178, 0.10) 15%,
            rgba(156, 165, 178, 0.08) 31%,
            rgba(156, 165, 178, 0.15) 43%,
            rgba(156, 165, 178, 0.10) 72%,
            #9ca5b240 97%
        );
        border: .5px solid #9ca5b2;         
        border-radius: 30px; /* 30px corner radius */
        width: 1100px; /* Adjust width as needed */
        height: 850px; /* Adjust height as needed */
        position: relative;
        box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, .2);
    }
    
    .svg-background {
        z-index: -1;
        width: 1100px !important;  /* Adjust as needed */
        height: 850px !important; /* Adjust as needed */
        position: absolute;
        border-radius: 30px; /* Ensure the correct rounded corners */
    }
    
    .responsive-svg {
        width: 100%;
        height: 100%;
        border-radius: 30px; /* Apply the same rounded corners */
    }


/* Skills Top Content */

    .skill-id-icon {
        height: 35px;
        width: auto;
        position: relative;
        z-index: 2;
        filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
    }

    /* Target the HTML icon */
    .skill-id-icon[alt="Html"] {
        left: -1px;
    }

    /* Target the CSS icon */
    .skill-id-icon[alt="CSS"] {
        left: -1px;
    }

    .skill-id {
        display: flex;
        flex-direction: column; /* Stack skill items vertically */
        align-items: flex-start; /* Align to the left */
        gap: 15px; /* Space between each skill item */
        position: relative;
    }

    .skill-item {
        display: flex;
        flex-direction: row; /* Place icon and text side by side */
        align-items: center; /* Align items in the middle */
        gap: 10px; /* Space between icon and text */
    }

    .top-progress {
        display: flex;
        justify-content: center; /* Centers the flex container */
        align-items: center; /* Aligns items vertically */
        gap: 80px; /* Space between left and right */
        padding-top: 70px;
    }

    .left-side, .right-side {
        display: flex;
        flex-direction: column;
        gap: 20px; /* Space between skill items and progress bar */
        width: 425px;
    }

    .skill-item h7 {
        font-size: 21px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
    }

    .progress-bar {
        height: 0px;
        padding: 1%;
        margin-right: 1%;
        top: -5px;
        border: 1px solid white;
        border-radius: 13px;
                box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
        -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
        width: 371px;
        background-image: none;
        left: 45px;
        position: relative;
        filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
    }

    .progress-bar .bar.bar-animation {
        width: 0;
        
        -webkit-transition: width 3s ease-in-out;
           -moz-transition: width 3s ease-in-out;
             -o-transition: width 3s ease-in-out;
                transition: width 3s ease-in-out;
                background-image: linear-gradient(to bottom,#ffffff 0,#ffffff 100%);
                height: 9px;
                border-radius: 13px;
                left: -5px;
                top: -4.5px;
                position: relative;
                box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.158); /* Adjust values as needed */
      }

      .progress-text {
        left: 350px;
        position: relative;
        bottom: 20px;
        opacity: 90%;
      }
    

/* Skills Bottom Content */

    .bottom-progress {
        display: flex;
        place-content: center;
        padding-top: 120px;      
        padding-bottom: 70px;
    }

    
    .skill-charts {
        display: flex;
        align-self: center;
        justify-content: center; /* Centers items horizontally */
        position: relative;
        gap: 80px;
    }

    .chart {
        position: relative;
        width: 140px;
        height: 140px;
        text-align: center;  
        display: flex;
        justify-content: center; /* Center horizontally */
        align-items: center; 
    }
    

    .chart canvas {
        position:absolute;
        top:0;
        left:0;
        border: 1px solid white;  /* 1px white stroke */
        border-radius: 50%;       /* Keep it circular */
        box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
    }

    .chart::before {
        content: '';
        position: absolute;
        top: 8.25px;  /* Adjust the size to position it smaller and inside */
        left: 8.25px; /* Same as top for centering */
        width: calc(100% - 15px); /* Decrease width by 6px to make it smaller */
        height: calc(100% - 15px); /* Decrease height by 6px to make it smaller */
        border-radius: 50%;
        border: 1px solid white; /* Inner 1px white stroke */
        box-sizing: border-box; /* Prevents the border from affecting the circle size */
        box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25)
        }
    
    .chart-label {
        font-size: 21px;
        font-weight: 400;
        display: block;
        margin-top: 200px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
        align-self: center;
    }
    
    .chart-icon {
        position: absolute;
        top: calc(50% - 10px);
        left: 50%;
        transform: translate(-50%, -50%); /* Centers the image */
        width: 55px; /* Adjust size as needed */
        height: 55px;
        pointer-events: none; /* Prevents interaction blocking */
        filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
    }

    .chart-percent {
        position: absolute; /* Keep absolute positioning inside the chart */
        color: white;
        z-index: 10;
        top: 100px;
        opacity: 90%;
    }

    .chart-item {
        display: flex;               /* Use flex to center the content */
        justify-content: center;     /* Centers the content horizontally */
        align-items: center;         /* Centers the content vertically */
        position: relative;
    }


    /* Responsivity for Tablet */

    @media (min-width: 750px) and (max-width: 1110px) {

        .card-wrapper {
            width: 700px;
            height: 1400px;
            top: -70px;
            right: 0px;
        }

        .card {
            width: 700px;
            height: 1400px;
        }

        .svg-background {
            width: 700px !important;
            height: 1400px !important;
        }
        
        .responsive-svg {
            width: 100%;
            height: 100%;
        }

        .top-progress {
            flex-direction: column;
        }


        .right-side {
            top: -60px;
            position: relative;
        }

        .skill-charts {
            flex-wrap: wrap;
        }

        .chart-item {
            flex: 1 1 35%; /* Takes up 45% of the width (2 per row) */
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }        

        .bottom-progress {
            padding-top: 10px;
        }

        .skill-charts {
            column-gap: 10px;
            row-gap: 70px;
        }


    }

    /* Responsivity for Mobile */

    @media (max-width: 750px) {

        .card-wrapper {
            width: 300px;
            height: 1650px;
            top: -115px;
            right: 0px;
        }

        .card {
            width: 300px;
            height: 1650px;
        }

        .svg-background {
            width: 300px !important;
            height: 1650px !important;
        }
        
        .responsive-svg {
            width: 100%;
            height: 100%;
        }

        .skill-id-icon {
            height: 25px;
            width: auto;
        }

        .skill-id {
            left: 10px;
        }

        .skill-item h7 {
            font-size: 18px;
        }

        .skills-label h6 {
            font-size: 30px !important;
            top: -50px !important;
        }

        .top-progress {
            flex-direction: column;
            top: -30px !important;
            position: relative;
        }

        .left-side, .right-side {
            width: 280px;
        }

        .progress-bar {
            top: 5px;
            width: 200px;
            left: auto;
            align-self: center;
        }

        .progress-text {
            left: 180px;
            position: relative;
            bottom: 20px;
            opacity: 90%;
          }

        .right-side {
            top: -60px;
            position: relative;
        }

        .skill-charts {
            flex-wrap: wrap;
        }

        .chart-item {
            flex: 1 1 35%; /* Takes up 45% of the width (2 per row) */
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }        

        .bottom-progress {
            padding-top: 10px;
        }

        .skill-charts {
            column-gap: 10px;
            row-gap: 70px;
        }

        .bottom-progress {
            display: flex;
            place-content: center;
            padding-top: 5px;      
            padding-bottom: 70px;
        }
    
        .skill-charts {
            display: flex;
            align-self: center;
            justify-content: center; /* Centers items horizontally */
            position: relative;
            gap: 80px;
        }
        
        .chart-label {
            font-size: 18px;
        }
    


    }