* {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        line-height: 2em;
    }
    body { font-family: Verdana, Geneva, Tahoma, sans-serif;
            margin: 0; }
      nav { position: fixed; 
            width: 100%; 
            top: 0; 
            left: 0;
            background: #fdfdfd; 
            padding: 0.4em 0; 
            text-align: center; 
            transition: max-height 0.3s ease;
            overflow: hidden;}

    nav a { color: #080808; 
            text-decoration: none; 
            margin: 1em;
            font-weight: bold; }
    nav a:hover { text-decoration: underline; 
                color: #e40303; }
     .logo { display: inline-block; 
                margin-right: 20em;
             }
    .logo img { height: 80px; 
                vertical-align: left; 
                margin-right: 10px; 
            }
    
    .intro {
                margin-left: 0.5em;
                padding-top: 5em;
                text-align: left;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 50px;
        
        }
    
    .title {
        margin-top: 0.5em;
        text-align: center;
        text-shadow: #707070 1px 1px 4px;
        font-size: 2.5em;
    }

    .intro-image img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 15px 15px 25px rgba(0,0,0,0.3);
        }
    .intro-image1 img {
            margin: 1em auto;
            max-width: 100%;
            height: auto;
            border-radius: 10px;
        }
    .home h1 { font-size: 3.5em; 
                margin-bottom: 0.5em; 
                line-height: 1.6em;
                 }
   
    .brand-name {   color: #e40303; 
                    line-height: 1em;
                    font-weight: bold; 
                    text-align: center;
                }

     .mission-vision {
                margin-top: 5em;
                padding: 1em;
                background-color: #faf4f4;
                margin-top: 10px;
        }
     .mission-vision-text{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 3em;
        width: 100%;
        }
     .mission, .vision, .values{
            background-color: #f1efef;
            padding: 1em;
            margin: 1em auto;
            width: 100%;
            height: 18em;
            border-radius: 10px;
            box-sizing: border-box;
            box-shadow: 10px 10px 20px rgba(0,0,0,0.3);
        }
    .mission h2, .vision h2, .values h2{
            margin-bottom: 0.5em;
            padding: 0.5em;
            background: linear-gradient(90deg, #ff8c00, #e40303);
            text-align: center;
            color: white;
            border-radius: 10em;   
        }
    .mission p, .vision p, .values p {
            font-size: 1.1em;
        }
    .about {
            padding: 2em;
            background: linear-gradient(90deg, #c7c6c646, #f5d6d6);
            text-align: left;
            font-size: 0.9em;
            line-height: 1.5em;
        }
     .about-text {
            width: 100%;
            line-height: 2em;
            font-size: 1.2em;
        }

    h1, h2 { color: #222; }

    .services-title { 
        font-size: 2em;
        margin: 1em; 
        text-align: center; }

    .services-text { 
        max-width: 100%; 
        font-size: 0.8em; 
        color: #333; 
        display: flex;
        align-items: center;   
        justify-content: space-between;  
        margin: 2em;
        gap: 50px;
        text-align: left;
    }
    .fashion, .design-print, .weblab {
        max-width: 100%;
        height: 38em;
        border-radius: 10px;
        box-shadow: 20px 20px 30px rgba(0,0,0,0.3);
        box-sizing: border-box;
    }
    .fashion img, .design-print img, .weblab img {
        width: 100%;
        height: 20em;
        border-radius: 10px 10px 0 0; 
    }
    .fashion h2, .design-print h2, .weblab h2, p {
        padding: 0 1em;
    }
    .fashion p, .design-print p, .weblab p {
       font-size: 1.1em;
    }
    .work-together {
        width: 100%;
        text-align: center;
        font-size: 2em;
        background: linear-gradient(90deg, #e40303, #ff8c00);
        color: white;
    }
    .contact { padding: 2em; 
                background: #f7f7f7; 
                text-align: left; 
                font-size: 1em; 
                line-height: 2em; 
                display: flex; 
                align-items: center; 
                justify-content: space-between; 
                gap: 50px; }


    .contact-form input, .contact-form textarea { width: 100%; 
                                                    padding: 8px; 
                                                    margin-top: 5px;
                                                    border: 1px solid #fcd9d9; 
                                                    border-radius: 4px;
                                                    box-shadow: 2px 2px 4px rgba(250, 210, 210, 0.575);
                                                }

    .contact-form button { 
                                background: #ff1313;
                                color: #fcf9f9;
                                margin-top: 15px; 
                            padding: 10px 20px; 
                        border: none; 
                        border-radius: 4px;} 
    
    footer { background: #222; 
            color: #fff; 
            text-align: center; 
            padding: 1em 0; }

    /* ...existing code... */


/* Responsive Design: Media Query for All Screens */
@media (max-width: 380px) {
    .logo {
            display: block;
            margin: 0 auto 1em auto;
        }
        .home {
            margin-top: 2em;
            padding-top: 3em;
            width: 100%;
        }
        .intro {
            flex-direction: column;
        }
        .mission-vision-text {
            flex-direction: column;
        }
        .services-text {
            flex-direction: column;
        }
        .fashion, .design-print, .weblab {
            margin-bottom: .05em;
        }
    
}
@media (max-width: 430px) {
      .logo {
            display: block;
            margin: 0 auto 1em auto;
        }
        .home {
            margin-top: 2em;
            padding-top: 3em;
            width: 100%;
        }
        .intro {
            flex-direction: column;
        }
        .mission-vision-text {
            flex-direction: column;
        }
        .services-text {
            flex-direction: column;
        }
        .fashion, .design-print, .weblab {
            margin-bottom: .05em;
        }
     
}
@media (max-width: 768px) {
    .logo {
            display: block;
            margin: 0 auto 1em auto;
        }
        .home {
            margin-top: 2em;
            padding-top: 3em;
            width: 100%;
        }
        .intro {
            flex-direction: column;
        }
        .mission-vision-text {
            flex-direction: column;
        }
        .services-text {
            flex-direction: column;
        }
        .fashion, .design-print, .weblab {
            margin-bottom: .05em;
        }
}