* {
    box-sizing: border-box;
}

/* Global styles */
.web {
    font-family: "Nunito", serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
}

.mainweb1 {
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    position: relative;
}

.main-image {
    border-radius: 30px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    filter: brightness(30%);
}

.headline {
    background: #ffffff;
    position: absolute;
    top: 15vh;
    padding: 30px;
    border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: black;
    text-align: center;
    z-index: 9;
    width: 80%;
}

.headline p{
    background: #000;
    border-radius: 20px;
    padding: 10px;
    color: white;
}

.headline img {
    width: 150px;
    max-width: 150px;
    margin-bottom: 20px;
}

.headline h1 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.headline h2 {
    font-size: 1.2rem;
}

/* Headline1 */
.headline1 {
    padding: 20px;
    color: rgb(2, 2, 2);
    text-align: center;
    margin: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.headline1 span {
    color: blue;
}

.headline1 p{
    font-size: larger;
}
.headline-title svg {
    fill: #050505;
}
/* Content */
.content {
    text-align: center;
    width: 100%;
    /* font-size: 15px ; */
}

/* Parent Container */
.headline2 {
    padding: 20px;
}

/* Title Styling */
.headline-title h2 {
    font-size: 2rem;
    color: #333;
}

.headline-title svg {
    color: #007bff;
}

/* Content Section */
.content1 p {
    font-size: 1rem;
    color: #555;
    text-align: justify;
    margin-bottom: 20px;
}

/* Flex Container for Service Cards */
.content1line {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    /* Enable wrapping for smaller screens */
    justify-content: center;
}

.content1 p {
    font-size: larger;
}


/* ====================================web cards========================== */
/* Individual Service Cards */
.dev {
    margin-bottom: 2vh;
    background: #f9f9f9;
    border-radius: 10px;
    padding: 20px;
    width: 45%;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    display: flex;
    align-items: center;
}

.dev:hover {
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 12px;
}
/* Common Styles for All Inner Dev Cards */
.inner-dev {
    height: 100%;
    position: relative;
    padding: 20px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.253);
    color: #fff;
}

.inner-dev::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(29, 29, 29, 0.76);
    z-index: 0;
}
[data-bg="php"] {
    background-image: url('https://img.freepik.com/premium-photo/php-programming-language-developing-programming-coding-technologiescyber-space-concept_1085052-1643.jpg');
}

[data-bg="java"] {
    background-image: url('https://c8.alamy.com/comp/2HFHKF8/java-programming-language-and-web-development-concept-on-virtual-screen-2HFHKF8.jpg');
}

[data-bg="django"] {
    background-image: url('https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/291435166/original/da728a25128f53354aa31845c782a46f7cd75b9e/develop-website-with-django-python-full-stack-developer-93a9.png');
}

[data-bg="opensource"] {
    background-image: url("https://img.freepik.com/premium-photo/open-source-background_2227-1479.jpg");
}

[data-bg="wordpress"] {
    background-image: url("https://cdn.pixabay.com/photo/2015/01/05/11/02/wordpress-589121_640.jpg");
}

[data-bg="shopify"] {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRRrmY0938pajCTl4Hdo4OL7SMAOjF7Bj8bBA&s");
}

[data-bg="magento"] {
    background-image: url("https://scriptbaker.com/hubfs/magento-banner-img.webp");
}

[data-bg="joomla"] {
    background-image: url("https://www.expertosdecomputadoras.com/wp-content/uploads/2011/11/como%20mostrar%20una%20fuente%20xml%20como%20un%20elemento%20de%20menu%20en%20joomla.png");
}

[data-bg="react"] {
    background-image: url("https://miro.medium.com/v2/resize:fit:612/1*ch9YznwxmrH971Aeyw261w.png");
}

[data-bg="node"] {
    background-image: url(" https://cdn.prod.website-files.com/6479ca284dcf63f53705bc0b/66cd82ffe458eca5c231ab0e_node.jpg");
}

[data-bg="angular"] {
    background-image: url(" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYrjkPeRkL_Q3RThOD5F8Kow8fEKHJMcnwuA&s");
}

[data-bg="vue"] {
    background-image: url(" https://wallpaperbat.com/img/9750743-vuejs-wallpaper.jpg");
}

/* Icons and Headers */
.dev-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.dev-header img,
.dev-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.dev-header,
.dev-content {
    position: relative;
    z-index: 1;
    /* Places content above the overlay */
}

/* Content within Cards */

.dev-content p {
    font-size: 1rem;
    color: #ffffff;
    line-height: 1.5;
    letter-spacing: 0px;
}
/* ======================/web cards====================== */

/* ======================hire Content====================== */
/* General container styling */
.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Styling for the main hirethought section */
.hirethought {
    width: 70%;
    margin-top: 5vh;
    text-align: center;
    padding: 30px 20px;
    position: relative;
    z-index: 1;
    background: rgba(179, 179, 179, 0.6); /* Transparent background for better readability */
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(8, 8, 8, 0.8);
}

.hirethought h2 {
    margin: 0;
    font-size: 2rem; /* Adaptive font size */
    color: #000;
}

.hirethought p {
    font-size: 1.2rem;
    line-height: 1.5;
    color: #333; /* Darker text for better visibility */
    margin-top: 10px;
}

/* Styling for the call-to-action hire section */
.hire {
    margin: auto;
    position: relative;
    top: -10px; /* Adjust to create enough space between hirethought and hire */
    text-align: center;
    z-index: 2;
    background: #ffffff;
    padding: 4vh 3vh;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(8, 8, 8, 0.8);
}

.hire h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #007BFF; /* Highlighted text color */
}

/* Styling for the hire button */
.raise {
    background-color: #007BFF;
    color: white;
    padding: 12px 30px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.raise:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(8, 8, 8, 0.8);
}



/* ======================/hire Content====================== */
/* ======================performance section====================== */

.performance{
    margin-top: 10vh;
}
.perform{
    font-size: 0.9rem;
    text-align: center;
}
.perform p{
    font-size: 1.2rem;
}
.perform-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Ensure spacing between cards */
    gap: 20px; /* Adds spacing between cards */
    padding: 20px;
    width: 100%;
}

.perform-card {
    flex: 1 1 calc(25% - 20px); /* 4 in a row, accounting for gap */
    box-sizing: border-box;
    padding: 20px;
    background: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.perform-card h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.perform-card p {
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
}
/* ======================/performance section====================== */

/* Responsive Design */
@media (max-width: 768px) {
    .dev {
        width: 100%;
        /* Single column on tablets */
    }
    .hirethought {
        width: 90%;
        padding: 20px;
    }

    .hirethought h2 {
        font-size: 1.6rem;
    }

    .hirethought p {
        font-size: 1rem;
    }

    .hire {
        padding: 3vh 2vh;
    }

    .hire h2 {
        font-size: 1.5rem;
    }

    .raise {
        font-size: 0.9rem;
        padding: 10px 25px;
    }
}

@media (max-width: 480px) {
    body {
        background-color: lightblue;
    }
    .mainweb1 {
        width: 100%;
        height: 63vh;
        display: flex;
        align-items: start;
        padding: 0;
        position: relative;
    }

    .main-image {
        display: none;
    }

    .web {
        padding: 0px;
    }

    .headline {
        width: 100%;
        position: relative;
        top: -1px;
        background-image: url("https://img.freepik.com/premium-photo/hacker-hand-stealing-data-from-laptop-top-down_260672-516.jpg?semt=ais_hybrid");
        background-size: cover;
        background-position: center;
        text-align: center;
        padding: 20px;
        color: #ffffff;
    }

    .headline img {
        width: 100px;
        margin-bottom: 10px;
    }
    .headline1,
    .headline h1 {
        font-size: 1.7rem;
        margin: 0px;
        margin-bottom: 10px;
        text-align: center;
    }

    .headline p {
        font-size: larger;
        margin: 0;
    }

    .headline1 {
        padding: 0;
        width: 100%;
    }

    .headline1 h2 {
        font-size: 1.3rem;
    }

    .headline-title h2{
        font-size: 1.5rem;
    }

    .headline2{
        padding: 0px;
    }

    .content {
        font-size: medium;
        text-align: left;
    }

    .content1 p {
        font-size: 1.2rem;
    }

    .dev{
        padding: 0px;
    }

    .dev-header {
        font-size: medium;
    }

    .dev-content h3 {
        font-size: 1.2rem;
    }

    .dev-content p {
        font-size: 0.9rem;
    }
    .hirethought {
        width: 95%;
        padding: 15px;
    }

    .hirethought h2 {
        font-size: 1.4rem;
    }

    .hirethought p {
        font-size: 0.9rem;
    }

    .hire {
        margin-top: 15px;
        padding: 2vh;
    }

    .hire h2 {
        font-size: 1.3rem;
    }

    .raise {
        font-size: 0.8rem;
        padding: 8px 20px;
    }
    .perform-card img{
        width: 130px;
    }
}


/* ================================================================ */