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

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    scroll-behavior: smooth;
}

:root{
    --bg-color:#e3edf7;
    --gradient-white-bg:linear-gradient(0deg,#fff 0%,#edf4fa 51%,#e5eef7 100%);
    --gradient-color-bg:linear-gradient(180deg,rgba(247,1,120,1)0%,
                                                rgba(160,8,156,1)51%,
                                                rgba(99,13,178,1)100%);
    --main-color:#e6006d;
    --font-color:#90979f;
    --hover-box-shadow:rgba(0,0,0,0.19)0px 10px 20px,
                       rgba(0,0,0,0.23)0px 6px 6px;     
    --gradient-white-bg2:linear-gradient(98deg,#e5eef7 0%,#fff 100%);                                                          
}

a{
    text-decoration: none;
    color: #000;
}

body{
    font-family: 'Poppins', sans-serif;
    background: var(--bg-color);
    overflow-x: hidden;
}

header{
    padding: 15px 8%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--gradient-white-bg);
    z-index: 100;
    transition: .3s;
}

/* Logo container */
header .logo {
    display: flex;
    align-items: center;
    font-size: 1.7rem;
    font-weight: 700;
    text-decoration: none;
    margin-right: auto;  /* Ensures the logo and text are aligned left */

}

/* Logo image styling */
.logo-img {
    width: 50px; /* Adjust the width of the logo */
    height: auto;
    margin-right: 110px; /* Space between the logo and the text */
}

/* Make sure span remains styled */
span {
    background: var(--gradient-color-bg);
    -webkit-background-clip: text;
    color: transparent;
}

span{
    background: var(--gradient-color-bg);
    -webkit-background-clip: text;
    color: transparent;
}

ul.navlist{
    display: flex;
}

.navlist li{
    margin: 0 1rem;
}

.navlist li a{
    display: inline-flex;
    font-weight: 600;
}

.navlist li a:hover,.navlist li a.active{
    background: var(--gradient-color-bg);
    -webkit-background-clip: text;
    color: transparent;
}

.right-header{
    display: flex;
    align-items: center;
    justify-content: end;
    grid-gap: .8rem;
}

.btn{
    background: var(--gradient-color-bg);
    color: #fff;
    padding: 8px 10px;
    border-radius: 5px;
    font-weight: 500;
    transition: all .3s ease;
}

.btn:hover,.btn-box .d-CV:hover{
    box-shadow: var(--hover-box-shadow);
}

.menu-icon{
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    /* background: blue; */
}

.menu-icon .bar,
.menu-icon::after,
.menu-icon::before{
    content: "";
    display: none;
    width: 100%;
    height: 4px;
    border-radius: 3px;
    background: #000;
    margin: 6px 0;
    transition: .4s;
}

.menu-icon.active::before{
    transform: rotate(-45deg) translate(-6px , 6px);
}

.menu-icon.active::after{
    transform: rotate(45deg)translate(-8px , -8px);
}

.menu-icon.active .bar{
    opacity: 0;
}

/* Container styles for content except the logo */
/* Container styles for content except the logo */
.container {
    max-width: 1100px; /* Controls the width */
    margin: 0 auto; /* Centers the container */
    padding: 60px 30px; /* Increased top padding for more space and reduced side padding for smaller screens */
    background-color: #ffffff; /* Change to white for a cleaner look */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1); /* Creates depth with shadow */
    text-align: center; /* Center all text inside */
    position: relative;

    /* Decorative Elements */
    border: 1px solid #e0e0e0; /* Light border for subtle definition */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
    margin-top: 50px;
}

/* Hover effect for the container */
.container:hover {
    transform: translateY(-2px); /* Slight lift effect on hover */
    box-shadow: 0px 15px 30px rgba(43, 198, 237, 0.899); /* Enhanced shadow on hover */
}

/* Adding a subtle pattern or gradient background */
.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.05); /* Light overlay */
    border-radius: 15px; /* Match rounded corners */
    z-index: 0; /* Place it behind the content */
}

/* Ensure text appears above the overlay */
.container > * {
    position: relative; /* Position text elements above the overlay */
    z-index: 1; /* Bring text in front */
}


/* Hero section text */
.hero-info h1 {
    font-size: 3rem;
    color: #0056b3; /* Custom color for a professional look */
    font-weight: bold;
    margin-bottom: 20px;
}

.hero-info h2 {
    font-size: 1.75rem;
    color: #333; /* Darker subtitle for a clear hierarchy */
    margin-bottom: 25px;
}

/* Additional container for hero description */
.description-container {
    background-color: #ffffff; /* White background for contrast */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Padding for content spacing */
    margin: 20px auto; /* Center and space it from other elements */
    max-width: 800px; /* Control the max width */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

/* Hero description styles */
.hero-description {
    font-size: 1.2rem; /* Base font size */
    color: #555; /* Subtle color for description */
    line-height: 1.7; /* Improves readability */
    margin: 0; /* Remove bottom margin for better spacing within container */
}

/* Optional: Add a responsive design for the description container */
@media (max-width: 768px) {
    .description-container {
        padding: 15px; /* Adjust padding on smaller screens */
    }
}


/* Button styling */
.btn-box {
    display: flex; /* Flexbox for better button arrangement */
    justify-content: center; /* Center buttons */
    flex-direction: column; /* Stack buttons on smaller screens */
    gap: 10px; /* Space between buttons */
}

.btn-box a {
    text-transform: uppercase;
    background-color: #14ecfc;
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    display: inline-block;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-box a:hover {
    background-color: #0bb5d4;
    transform: translateY(-5px); /* Adds a slight hover effect */
}


/* Logo section */
.img-hero {
    margin-top: 30px;
    text-align: center;
}

.img-hero img {
    width: 250px; /* Resized logo */
    border-radius: 50%;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); /* Adds a shadow to the logo */
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 40px 20px; /* Adjust padding for smaller screens */
    }

    .hero-info h1 {
        font-size: 2.5rem; /* Slightly smaller heading */
    }

    .hero-info h2 {
        font-size: 1.5rem; /* Slightly smaller subtitle */
    }

    .hero-description {
        font-size: 1rem; /* Smaller description text */
    }


}


/* Button container styles */
.btn-box {
    display: flex; /* Places buttons side by side */
    justify-content: space-between; /* Distribute space between buttons */
    margin-top: 20px; /* Space from top */
    padding: 0 15px; /* Add padding to the left and right of the container */
    flex-wrap: wrap; /* Allows buttons to wrap on very small screens */
}

/* Button styling */
.btn {
    background-color: #ff3b3b; /* Red color for buttons */
    color: white;
    padding: 12px 0; /* Comfortable padding */
    border-radius: 25px;
    flex: 1; /* Allows buttons to grow and shrink */
    margin: 5px; /* Adds space between buttons */
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
}

/* Button hover effect */
.btn:hover {
    background-color: #ff1a1a; /* Darker red on hover */
    transform: translateY(-3px); /* Slight lift effect on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
    .btn-box {
        flex-direction: column; /* Stack buttons vertically on small screens */
        margin-left: 75px; /* Space from the left */
        margin-right: 15px; /* Space from the right */
    }
    
    .btn {
        width: 100%; /* Full width for buttons on small screens */
        margin: 2px 0; /* Vertical margin between buttons */
    }
}

@media (max-width: 460px) {
    .btn-box {
        margin-left: 60px; /* Space from the left on very small screens */
        margin-right: 30px; /* Space from the right on very small screens */
        flex-direction: column; /* Stack buttons vertically on small screens */
    }
    
    .btn {
        width: 100%; /* Full width for buttons on small screens */
        margin: 2px 0; /* Vertical margin between buttons */
    }
}

/* Social Media Section */
.social-media {
    margin-top: 30px; /* Space above the social media icons */
}

.bg-icon {
    display: inline-block; /* Aligns icons horizontally */
    margin: 0 15px; /* Space between each icon */
    position: relative; /* Positioning for hover effect */
    transition: transform 0.3s ease; /* Smooth transition */
}

/* Icon styling */
.bg-icon a {
    color: #555; /* Default icon color */
    font-size: 2rem; /* Increase icon size */
    text-decoration: none; /* Remove underline */
    padding: 10px; /* Adds clickable area */
    border-radius: 50%; /* Circular background effect */
    background-color: #f5f5f5; /* Light background for contrast */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}

/* Icon hover effect */
.bg-icon a:hover {
    background-color: #14ecfc; /* Change background on hover */
    transform: translateY(-5px); /* Slight lift effect on hover */
}

/* Decorative span under icons */
.bg-icon span {
    display: block;
    margin-top: 5px; /* Space above the decorative line */
    height: 3px; /* Line height */
    width: 25px; /* Line width */
    background-color: #14ecfc; /* Decorative line color */
    transition: width 0.3s ease; /* Smooth transition for width */
}

.bg-icon a:hover + span {
    width: 40px; /* Increase line width on icon hover */
}

/* Platforms Section Styles */
.platforms {
    text-align: center; /* Center the section text */
    margin: 40px 0; /* Add space above and below the section */
    overflow: hidden; /* Hides overflowing elements */
    position: relative; /* Allows absolute positioning of child elements */
    border-radius: 35px; /* More rounded corners for the section */
    padding: 20px 0; /* Add padding to create space inside the section */
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Soft gradient background for a modern look */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
}

/* Heading Styles */
.platforms h2 {
    font-size: 2.5rem; /* Increase heading size */
    margin-bottom: 40px; /* Space below the heading */
    color: #333; /* Darker color for better readability */
    font-weight: bold; /* Bold font for emphasis */
}

/* Platform Icons Container */
.platform-icons {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center icons horizontally */
    animation: moveWave 10s linear infinite; /* Continuous wave-like movement */
    margin-bottom: 30px; /* Add space below the platform icons */
}

/* Individual Platform Icon */
.platform-icon {
    margin: 0 15px; /* Space between icons */
}

/* Icon Image Styles */
.platform-icon img {
    width: 80px; /* Set a fixed width */
    height: 80px; /* Set a fixed height */
    object-fit: contain; /* Maintain aspect ratio */
    border-radius: 50%; /* Perfect circular border for icons */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Soft shadow for added depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
}

/* Keyframes for wave-like movement */
@keyframes moveWave {
    0% {
        transform: translateX(-100%) translateY(0); /* Start from left, no vertical movement */
    }
    25% {
        transform: translateX(25%) translateY(-10px); /* Move right and up */
    }
    50% {
        transform: translateX(50%) translateY(0); /* Move right and down to the original position */
    }
    75% {
        transform: translateX(75%) translateY(10px); /* Move right and down */
    }
    100% {
        transform: translateX(100%) translateY(0); /* Move to the right outside the viewport */
    }
}

/* Media query for responsive adjustments */
@media (max-width: 768px) {
    .platform-icons {
        animation: moveWave 12s linear infinite; /* Adjust speed for smaller screens */
    }

    /* Adjust image size for smaller screens */
    .platform-icon img {
        width: 70px; /* Smaller size for mobile devices */
        height: 70px; /* Ensure equal height for mobile */
    }
}

/* Apply in seconds text */
.apply-now {
    font-size: 2rem; /* Increase font size */
    font-weight: bold; /* Make it bold for emphasis */
    color: #14ecfc; /* Apply a beautiful color */
    text-align: center; /* Center the text */
    letter-spacing: 1px; /* Slight letter spacing for readability */
    margin-bottom: 10px; /* Add a little space below */
}

/* Requirements text */
/* Requirements text */
.requirements {
    font-size: 1.5rem; /* Increase font size */
    color: #333; /* Neutral, readable color */
    text-align: center; /* Center the text */
    margin-top: 0; /* Keep the paragraphs closer */
    line-height: 1.4; /* Slightly increase line height for more spacing */
    font-weight: 450; /* Normal weight for readability */
    
   
}

/* Telegram support container */
.telegram-support {
    position: fixed;
    bottom: 10px; /* Adjusted to lift it slightly */
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
}

/* Text next to Telegram button */
.contact-us-text {
    margin-right: 12px;
    font-size: 18px;
    font-weight: bold;
    color: #6a1b9a; /* Beautiful purple */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Circular dotted effect around the button */
.circle-effect {
    width: 72px; /* Adjusted to better fit the button */
    height: 72px; /* Adjusted size */
    border: 4px dotted #001011; /* Use preferred blue color */
    border-radius: 50%;
    position: absolute;
    bottom: -5px; /* Adjusted for perfect alignment */
    right: -5px; /* Adjusted to fit neatly around the button */
    animation: rotateCircle 4s linear infinite, blinkEffect 1.5s infinite ease-in-out; /* Rotate and blink effect */
}

/* Telegram button styling */
.telegram-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative;
}

/* Hover effect */
.telegram-button:hover {
    background-color: white;
    transform: scale(1.1);
}

/* Telegram icon styling */
.telegram-button img {
    width: 57px;
    height: 57px;
}

/* Tooltip label for the button */
.tooltip {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Show tooltip when hovering on button */
.telegram-button:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Circular rotation effect */
@keyframes rotateCircle {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Blinking effect for the dotted border */
@keyframes blinkEffect {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}



/* ==================== About section css code ============================ */
/* General styling */

/* General Styling */
.container {
    text-align: center;
    padding: 70px 20px;
    background-color: #f4faff;
    max-width: 1200px;
    margin: 0 auto;
}
.section-title {
    font-size: 3rem;  /* Adjusted font size as per your request */
    font-weight: bold;  /* Bold font for impact */
    color: #0056b3;  /* Custom blue color for a professional look */
    text-transform: uppercase;  /* Uppercase for emphasis */
    letter-spacing: 0.7px;  /* Spacing for a modern feel */
    text-align: center;  /* Center the heading */
    margin-bottom: 30px;  /* Space below the title */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);  /* Soft shadow for depth */
    position: relative;  /* Positioning for the underline */
    transition: all 0.3s ease-in-out;  /* Smooth transition effect */
}


.section-title::after {
    content: '';
    display: block;
    width: 100px;  /* Width of the underline */
    height: 5px;  /* Thickness of the underline */
    background-color: #e63946;  /* Red underline for contrast */
    margin: 20px auto 0;  /* Center the underline */
    border-radius: 2px;  /* Slight rounding of the underline */
    transition: width 0.4s ease-in-out;  /* Smooth transition for the underline */
}

.section-title:hover::after {
    width: 120px;  /* Expand underline on hover */
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2.5rem;  /* Resize for smaller screens */
    }

    .section-title::after {
        width: 60px;  /* Smaller underline for mobile */
    }

    .section-title:hover::after {
        width: 80px;  /* Adjust hover width for mobile */
    }
}

.section-subtitle {
    font-size: 18px;
    margin-bottom: 40px;
    color: #555;
}

/* Step Container */
.steps {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 60px;
}

.step {
    width: 23%;
    padding: 40px 20px;
    border: 2px solid #ddd;
    border-radius: 15px;
    background-color: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.step:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    border-color: #14ecfc;
}

/* Icon Styling */
.icon-wrapper {
    display: inline-block;
    background-color: #14ecfc;
    border-radius: 50%;
    padding: 25px;
    margin-bottom: 20px;
    transition: background-color 0.3s ease;
}

.step-icon {
    font-size: 50px;
    color: white;
}

/* Step Titles and Descriptions */
.step h3 {
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.step p {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* CTA Button */
.cta {
    margin-top: 50px;
}

.cta h4 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
}

.cta-button {
    padding: 15px 50px;
    background-color: #e63946;  /* Red button color */
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
    background-color: #d62828; /* Darker red on hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.cta-button1 {
    padding: 15px 50px;
    background-color: #14ecfc;  /* Red button color */
    color: black;
    text-decoration: none;
    border-radius: 30px;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.cta-button1:hover {
    background-color: #14ecfc; /* Darker red on hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .step {
        width: 45%;
    }
}

@media (max-width: 768px) {
    .step {
        width: 100%;
    }

    .steps {
        flex-direction: column;
        gap: 30px;
    }

    .cta h4 {
        font-size: 24px;
    }

    .cta-button {
        padding: 12px 30px;
        font-size: 18px;
    }
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .step {
        width: 45%;
    }
}

@media (max-width: 768px) {
    .step {
        width: 100%;
    }

    .steps {
        flex-direction: column;
        gap: 30px;
    }

    .cta h4 {
        font-size: 24px;
    }

    .cta-button1 {
        padding: 12px 30px;
        font-size: 18px;
    }
}




.virtual-card-section {
    padding: 60px 20px;  /* Padding around the section */
    background-color: #f9f9f9;  /* Light background color */
    text-align: center;  /* Center text for a cohesive look */
}

.app-screenshot {
    width: 100%;  /* Full width of the container */
    max-width: 500px;  /* Limit max width */
    border-radius: 36px;  /* Rounded corners for the screenshot */
    margin-bottom: 40px;  /* Space below the image */
}

.card-features {
    display: flex;  /* Flexbox for a responsive layout */
    flex-wrap: wrap;  /* Wrap items on smaller screens */
    justify-content: center;  /* Center items horizontally */
}

.feature-item {
    flex: 1 1 250px;  /* Responsive flex items with a base width */
    margin: 20px;  /* Margin around each feature */
    text-align: left;  /* Align text left */
    background: white;  /* White background for features */
    border-radius: 10px;  /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* Soft shadow for depth */
    padding: 20px;  /* Padding inside each feature */
    transition: transform 0.3s;  /* Transition for hover effect */
}

.feature-item:hover {
    transform: translateY(-5px);  /* Slight lift on hover */
}

.feature-icon {
    width: 40px;  /* Fixed width for icons */
    height: auto;  /* Auto height to maintain aspect ratio */
    margin-bottom: 10px;  /* Space between icon and text */
}

h3 {
    font-size: 1.2rem;  /* Font size for feature titles */
    color: #333;  /* Dark text color */
}



/* ==================== Services section css code ============================ */
.fillter-buttons{
    text-align: center;
    padding: .5rem;
    margin-bottom: 2rem;
}

.fillter-buttons button{
    background: var(--gradient-white-bg2);
    padding: 12px 15px;
    border-radius: 5px;
    border: none;
    font-weight: 500;
    color: #000;
    box-shadow: rgba(60,64,67,0.3)0px 1px 2px 0,
    rgba(60,64,67,0.15)0px 2px 6px 2px;
    margin-right: .5rem;
    cursor: pointer;
    transition: all .3s ease;
}

.fillter-buttons button:hover,button.mixitup-control-active{
    background: var(--gradient-color-bg);
    color: #fff;
}

.portfolio-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));  /* Responsive grid layout */
    gap: 1rem;  /* Space between grid items */
    padding: 1rem;  /* Add padding to the gallery */
}

.portfolio-img img {
    display: block;
    width: 100%;  /* Full width for responsive images */
    height: auto;  /* Maintain aspect ratio */
    transition: .3s;  /* Smooth transition for hover effects */
    border-radius: 10px;  /* Rounded corners for images */
}

.portfolio-box {
    display: flex;
    flex-direction: column;  /* Stack items vertically for smaller screens */
    justify-content: space-between;  /* Space items evenly */
    align-items: center;  /* Center items horizontally */
    gap: 0.5rem;  /* Space between items */
    padding: 1rem;  /* Increased padding for better spacing */
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;  /* Shadow effect */
    background: var(--gradient-white-bg2);  /* Background color */
    border-radius: 10px;  /* Rounded corners */
    transition: all 0.3s ease;  /* Smooth transition for hover effects */
}

.portfolio-img {
    display: flex;  /* Center content inside */
    justify-content: center;  /* Center image */
    align-items: center;  /* Center image vertically */
    width: 100%;  /* Ensure it takes full width of the parent */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .portfolio-box {
        flex-direction: column;  /* Stack items vertically */
        align-items: center;  /* Center items */
    }

    .portfolio-img {
        width: 100%;  /* Full width for smaller screens */
    }

    .portfolio-img img {
        height: 200px;  /* Adjust height for better visuals on small screens */
    }
}


.circle {
    width: 250px;  /* Increased size */
    height: 250px;  /* Increased size */
    border-radius: 50%;  /* Creates a circle */
    background: rgba(255, 255, 255, 0.9);  /* Light background for contrast */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);  /* Shadow for depth */
    position: relative;  /* Positioning for hover effects */
    overflow: hidden;  /* Ensures child elements are contained */
}

.circle img {
    width: 80%;  /* Responsive image size */
    height: auto;  /* Maintain aspect ratio */
    border-radius: 50%;  /* Round the image corners */
    transition: transform 0.3s ease;  /* Smooth scaling on hover */
}

.circle:hover img {
    transform: scale(1.1);  /* Slightly enlarge the image on hover */
}



.portfolio-content{
    width: 100%;
    padding-left: .5rem;
    padding-bottom: .5rem;
}

.portfolio-img{
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.portfolio-box:hover img{
    transform: scale(1.1);
}

.portfolio-content a.readMore{
    padding: 8px 12px;
    font-size: .8rem;
}

.portfolio-content p{
    font-size: .9rem;
    color: var(--font-color);
    margin: .5rem 0 1rem 0;
}


/* ==================== Blog section css code ============================ */

.blog-box{
    padding: .5rem !important;
}

.blog{
    position: relative;
}

.cards{
    padding: 1rem .1rem;
}

.card{
    background: var(--gradient-white-bg2);
    box-shadow: rgba(0,0,0,0.18)0px 2px 4px;
    padding: 1rem;
    border-radius: 10px;
}

.card-top{
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
    display: block;
}

.card:hover img{
    transform: scale(1.1);
}

.card-info{
    padding-bottom: .5rem;
}

.card-info h2{
    font-size: 1.2rem;
    margin-top: 1rem;
}

.data{
    display: block;
    margin: .2rem 0;
}

.card .excerpt{
    color: var(--font-color);
    margin-bottom: 1.5rem;
}

.swiper-pagination{
    position: relative !important;
    margin-top: 3rem;
}

.swiper-pagination-bullet{
    height: 10px !important;
    width: 30px !important;
    border-radius: 25px !important;
    background: var(--gradient-color-bg) !important;
}

.blog .showcase img{
    position: absolute;
    width: 90px;
    height: 90px;
}

.blog .showcase .circle{
    filter: blur(3px);
}

.blog .showcase .ring{
    top: 0;
    left: -1%;
}

.blog .showcase .half-ring{
    top: 10%;
    right: 10%;
}

.blog .showcase .second-circle{
    top: 30%;
    left: 2%;
    filter: blur(1px);
}


/* ==================== Contact section css code ============================ */

.contactSkills{
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.contact-info,.skills{
    width: 100%;
    background: var(--gradient-white-bg2);
    box-shadow: rgba(0,0,0,0.18)0px 2px 4px;
    padding: 1rem;
    border-radius: 10px;
}


.contact-info input,
.contact-info form textarea{
    width: 100%;
}

.contact-info form input,
.contact-info form textarea{
    /* width: 100%; */
    padding: .8rem;
    border: 2px solid #e8e1e1;
    margin: .5rem 0;
    background: #e8f1f9;
    border-radius: 5px;
    outline: none;
    transition: .3s;
}

.contact-info form .input-box{
    display: flex;
    justify-content: space-between;
}

.input-box input{
    width: 49%;
}

form input:focus,form textarea:focus{
    filter: brightness(100%);
    background: #d2e9ff;
    border: 2px solid #f8caca;
}

form textarea{
    resize: none;
}

form .btn{
    padding: 15px 20px;
    cursor: pointer;
    border: none;
}

/* ==================== Skills section css code ============================ */

.skillBox{
    padding: 0 1rem 1rem;
}

.skillBox .main-text{
    margin-bottom: 1rem;
}

.skill-wrap{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(150px , auto));
    justify-content: center;
    grid-gap: 2.5rem;
}

.skill{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.outer-circle{
    width: 170px;
    height: 170px;
    position: relative;
    margin-bottom: 1rem;
    padding: 20px;
    border-radius: 50%;
    box-shadow: rgba(50,50,93,0.25)0px 6px 12px -2px,
    rgba(0,0,0,0.3)0px 3px 7px -3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner-circle{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    box-shadow: rgba(204,219,232)3px 3px 6px 0px inset,
    rgba(255,255,255,0.5)-3px -3px 6px 1px inset;
}

.outer-circle svg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.outer-circle svg circle{
    fill: none;
    stroke-width: 15px;
    stroke: url(#GradientColor);
    stroke-linecap: round;
    stroke-dasharray: 465;
    stroke-dashoffset: 464; 
}

.outer-circle h2.counter{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    font-size: .9rem;
    font-weight: 400;
}

h2.counter span{
    font-size: 1.7rem;
}

.sk-title{
    font-size: 1rem;
    font-weight: 500;
}

/*======================= footer ============================ */
footer{
    text-align: center;
    margin: 0 8%;
    padding: 2rem 0;
    border-top: 2px solid #e8e1e1;
}


#progress{
    position: fixed;
    /* background: #194eb9; */
    z-index: 1000;
    bottom: 60px;
    right: 10px;
    width: 50px;
    height: 50px;
    display: none;
    place-items: center;
    border-radius: 50%;
    color: #1d002c;
    cursor: pointer;
    box-shadow: rgba(50,50,93,0.25)0px 50px 100px -20px,
    rgba(0,0,0,0.3)0px 30px 60px -30px,
    rgba(10,37,64,0.35)0px -2px 6px 0px inset;
}


#progress-value{
    display: grid;
    height: calc(100% - 12px);
    width: calc(100% - 12px);
    background: var(--gradient-color-bg);
    border-radius: 50%;
    color: #fff;
    place-items: center;
    font-size: 25px;
}



















/*======================= @keyframes ============================ */

@keyframes moveText{
    0%,10%,100%{
        background-position: -24rem 0;
    }

    65%,85%{
        background-position: 0rem 0;
    }
}

@keyframes moveCursorText{
    0%,10%,100%{
        width: 0;
    }

    65%,78%,85%{
        width: 100%;
        opacity: 1;
    }

    75%,85%{
        opacity: 0;
    }
}

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

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

@keyframes progress{
   to{
    stroke-dashoffset: var(--target);
   }
}

@keyframes floatImage{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-22px);
    }
    100%{
        transform: translateY(0);
    }
}




/*======================= BrakPoints ============================ */

@media(max-width:1200px){
    html{
        font-size: 95%;
    }
}

@media(max-width:991px){
    header,section,footer{
        padding-left: 3%;
        padding-right: 3%;
    }
    .home,.portfolio-box{
        flex-direction: column-reverse;
    }
    .about,.contactSkills{
        flex-direction: column;
    }
    .about .about-img .aboutHero{
        width: 100%;
    }
    .proposal img{
        width: 52vw;
    }
    .portfolio-img img{
        width: 100%;
        height: 100%;
    }
    .portfolio-gallery{
        grid-template-columns: repeat(auto-fill,minmax(250px , 1fr));
    }
    .img-hero{
        margin-top: 3rem;
    }
}

@media(max-width:768px){
    .proposal{
        display: none;
    }
    .menu-icon .bar,.menu-icon::after,.menu-icon::before{
        display: block;
    }
    ul.navlist{
        position: absolute;
        top: -1000px;
        transition: all .3s ease;
        width: 100%;
        text-align: center;
        display: block;
        background: var(--gradient-white-bg);
        left: 0;
        border-top: 2px solid rgba(248, 202, 202, .7);
    }
    ul.navlist a{
        font-size: 1.5rem;
        margin: 1rem 0;
    }
    .navlist.active{
        top: 100%;
    }
    .overlay{
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        position: fixed;
        background: rgba(0,0,0,0.5);
        z-index: 8;
        opacity: 0;
        transform: .3s;
        pointer-events: none;
    }
    body.open .overlay{
        opacity: 1;
        pointer-events: auto;
    }
    .btn{
        padding: 10px;
    }
    .home{
        grid-gap: 0;
    }
    .fillter-buttons button{
        padding: 10px;
        font-size: .8rem;
    }
}

@media(max-width:530px){
    html{
        font-size: 80%;
    }
    section{
        padding: 50px 3%;
    }
    .contact-info form .input-box{
        display: block;
    }
    .input-box input {
        width: 100%;
    }
    .rotate-text{
        display: none;
    }
    .img-hero img{
        width: 100%;
    }
    .text-animate{
        width: 23.8rem;
    }
    .btn-box{
        width: 266px;
        margin-bottom: 3rem;
    }
    .about-btn button{
        padding: 10px 15px;
    }
    .fillter-buttons{
        display: grid;
        grid-gap: 1rem;
    }
    .fillter-buttons button{
        width: 100%;
        padding: 13px;
    }
}