* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --main-font: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    --accent-color: #9dff00;
    --section-margin: 6rem;
}

body {
    font-family: var(--main-font);
    min-height: 100vh;
    overflow-x: hidden;
    background-image: url(../assets/images/jpg/8b87d3212e5207e16ae07d982fc2ea7b.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1 {
    font-size: 3vw;
    text-align: center;
    margin-bottom: 5%;
    margin-top: 5%;
    color: #FFF;
}

img {
    max-width: 100%;
}

.logo {
    z-index: 1;
    width: 20%;
}

header {
    background-color: #dae4ff;
    padding: 1% 0 3% 0;
}

header a {
    width: 19%;
}

.header-contacts {
    font-size: 1vw;
    cursor: pointer;
    display: flex;
    transition: color 0.3s;
    margin-left: 83%;
    margin-top: -3%;
    margin-bottom: 3%;
}

.header-contacts:hover {
    color: var(--accent-color);
}

.copy-feedback {
    font-size: 0.8em;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.burger {
    position: absolute;
    display: none;
    cursor: pointer;
    z-index: 1000;
}

.burger-line {
    width: 30px;
    height: 3px;
    background-color: #ffffff;
    margin: 5px 0;
    transition: all 0.3s ease;
}

.navbar {
    justify-items: center;
    align-items: center;
    margin-top: -5%;
}

.navbar ul {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    list-style: none;
    
}

.navbar a {
    color: #1a1818;
    font-size: 1.5vw;
    text-decoration: none;
    transition: color 0.3s;
}

.navbar a:hover {
    color: var(--accent-color);
}

.section-about-company {
    position: relative;
    margin-top: var(--section-margin);
}

.company, .company2, .project, .projects, .friend, .services, .contacts-cont, .sertificat, .Company-derector, .company-str, .form-question {
    font-size: 3vw;
    text-align: center;
    margin-bottom: 5%;
    margin-top: 5%;
    color: #FFF;
}

.company-first{
    background-color: #FFF;
    width: 75%;
    border-radius: 1vw;
    padding: 50px 0 50px 0;
}

.company-second{
    background-color: #FFF;
    margin-left: 20%;
    width: 80%;
    border-radius: 1vw;
    padding: 50px 0 50px 0;
}

.company-info{
    font-size: 1.5vw;
    max-width: 100%;
    width: 33%;
    margin-top: -28%;
    margin-bottom: 2%;
    margin-left: 15%;
    line-height: 1.5;
}

.company-info2{
    max-width: 100%;
    font-size: 1.5vw;
    width: 33%;
    margin-left: 45%;
    margin-top: -28%;
    line-height: 1.5;
    margin-bottom: 2%;
}

.infoP {
    margin-top: 10%;
    margin-left: 15%;
    font-size: 1.5vw;
    border-radius: 1vw;
    text-decoration: underline;
    list-style: none;
    color: rgb(0, 0, 0);
}

.infoP:hover {
    color: #9dff00;
    transition: color 0.5s;
    font-size: 1.5vw;
}

.infoP2 {

    margin-left: 45%;
    margin-top: 35%;
    font-size: 1.5vw;
    border-radius: 1vw;
    text-decoration: underline;
    list-style: none;
    color: rgb(0, 0, 0);
}

.infoP2:hover {
    color: #9dff00;
    transition: color 0.5s;
    font-size: 1.5vw;
}

.Company-img1{
    width: 40%;
    margin-left: 55%;
    margin-top: 4%;
    border-radius: 1vw;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.Company-img2{
    width: 40%;
    margin-left: 2%;
    margin-top: 4%;
    border-radius: 1vw;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.line {
    width: 100%; 
    height: 0.1%; 
    background-color: #ffffff; 
    position: absolute;
    margin-top: 2%;
    z-index: 1;
}

.friend {
    margin-top: 100px;
}

.friend-box {
    max-width: 100%;
    margin-left: 15%;
    width: 20%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-items: center;
    gap: 50%;
    padding: 1% 1% 1% 1%;
}


.friend-box-color {
    position: static;
    background-color: #FFF;
    max-width: 60%;
    margin-left: 20%;
    height: 24%;
    border-radius: 2vw;
}

.section-box-project {
    margin-left: 20%;
    max-width: 60%;
    background-color: white;
    padding: 2% 0;
    border-radius: 5vw;
    margin-top: 5%;

}

.container1 {
    max-width: 60%;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.container-img1,
.container-img2,
.container-img3 {
    width: 100%;
    height: auto;
    max-height: 80%;
    object-fit: cover;
    border-radius: 1vw;
}

.container1 p {
    font-size: 1.5vw;
    line-height: 1.6;
    color: #000000;
    margin: 1rem 0;
}

.container-infoP {
    font-size: 1vw;
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 1vw;
    transition: background-color 0.3s;
}

.container-infoP:hover {
    background-color: #0056b3;
}

footer {
    background-color: #b9b9b9;
    padding: 2rem;
    margin-top: var(--section-margin);
    position: relative;
    z-index: 1;
}

.logo-container {
    width: 80%;
}
.footer-menu, .contacts, .map {
    margin-top: 10%;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 80%;
    margin: 0 auto;
    font-size: 1vw;
}

.footer-bottom {
    text-align: center;
    font-size: 1vw;
}

.map iFrame {
    margin-top: 10%;
    width: 100%;
    height: 70%;
}

.success-message {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 15px;
    margin: 20px 0;
    border-radius: 1vw;
    position: relative;
    margin-top: 10%;
    text-align: center;
}

.error-message {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 15px;
    margin: 20px 0;
    border-radius: 1vw;
}

label {
    font-size: 1vw;
    color: #FFF;
    display: block;
    margin: 10px 0 5px;
    margin-left: 25%;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="question"]
textarea {
    width: 50%;
    padding: 1%;
    margin-bottom: 2%;
    border: 1px solid #ccc;
    border-radius: 0.5vw;
    position: relative;
    margin-left: 25%;
}

.button-form-input {
    font-size: 1vw;
    background-color: #28a745;
    color: white;
    padding: 0.5%;
    border: none;
    border-radius: 1vw;
    cursor: pointer;
    width: 50%;
    margin-top: 3%;
    margin-left: 25%;

}

button:hover {
    background-color: #218838;
}

.text-question {
    margin-left: 25%;
    width: 50%;
    border-radius: 0.5vw;
    height: 10%;
}

.left-text-company-algin {
    font-size: 1.5vw;
    text-align: left;
    margin-left: 5%;
}

.left-text-company-algin-box {
    width: 60%;
    background-color: #FFF;
    border-radius: 5vw;
    padding: 3% 3% 3% 3%;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 10%;
}

.right-text-company-algin {
    font-size: 1.5vw;
    text-align: right;
    margin-right: 3%;
}

.right-text-company-algin-box {
    width: 60%;
    height: 30%;
    background-color: #FFF;
    padding: 3% 3% 3% 3%;
    border-radius: 5vw;
    margin-left: 27%;
}

.left-line-company {
    max-width: 100%;
    width: 60%; 
    height: 5%; 
    background-color: #2e97ec; 
    position: absolute;
    z-index: 1;
    border-radius: 5vw;
    margin-left: 10%;
    margin-top: 11%;
    
}

.left-line-company2 {
    max-width: 100%;
    width: 60%; 
    height: 5%; 
    background-color: #2e97ec; 
    position: absolute;
    z-index: 1;
    border-radius: 5vw;
    margin-left: 10%;
    margin-top: 18%;
    
}

.right-line-company {
    max-width: 100%;
    width: 60%; 
    height: 5%; 
    background-color: #2e97ec; 
    position: absolute;
    z-index: 1;
    border-radius: 5vw;
    margin-left: 27%;
    margin-top: 11%;
    
} 

.right-line-company2 {
    max-width: 100%;
    width: 60%; 
    height: 5%; 
    background-color: #2e97ec; 
    position: absolute;
    z-index: 1;
    border-radius: 5vw;
    margin-left: 27%;
    margin-top: 15%;
    
} 

.container-member {
    background-color: white;
    padding: 1%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    max-width: 80%;
    margin: 0 auto;
    border-radius: 1vw;
}

.team-member {
    padding: 1.5vw;
    border: 1px solid #e0e0e0;
    border-radius: 1vw;
    text-align: center;
    transition: transform 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
}

.team-member h2 {
    font-size: 1.5vw;
    margin-bottom: 1%;
    color: #000000;
}

.team-member p {
    color: #000000;
    font-size: 0.8vw;
}

.sertificat-box {
    max-width: 80%;
    width: 60%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1%;
    margin-left: 20%;
    align-content: center;
}

.contact p {
    font-size: 1.5vw;
    margin-left: 20%;
    max-width: 65%;
    color: #FFF;
}

.map-section {
    margin-top: 5%;
    margin-left: 20%;
}

.services-box {
    background: white;
    padding: 30px;
    max-width: 70%;
    margin: 20px auto;
    display: flex;
    border-radius: 1vw;
}

.services-text-left {
    width: 48%;
    float: left;
    padding-right: 4%;
    color: #000000;
    font-family: var(--main-font);
    font-size: 1.5vw;
}

.services-text-right {
    width: 48%;
    float: right;
    padding-left: 4%;
    color: #000000;
    font-family: var(--main-font);
    font-size: 1.5vw;
}

.line-one {
    clear: both;
    color: #000000;
    width: 1%;
    height: 100%;
    z-index: 999;
    position: absolute;
}

.line-two {
    clear: both;
    height: 2px;
    background: #ddd;
    margin: 40px 0;
    border: 0;
}

.services-text-right {
    list-style: none;
    padding-left: 25px;
}

.services-text-compl-work {
    list-style: none;
    padding-left: 25px;
    font-family: var(--main-font);
    font-size: 1.5vw;
    color: #FFF;
}

.services-text-right li,
.services-text-compl-work li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 25px;
}

.services-text-right li::before,
.services-text-compl-work li::before {
    content: "▹";
    color: #0077cc;
    position: absolute;
    left: 0;
}

.services-text-compl-work {
    clear: both;
    padding-top: 20px;
    column-count: 2;
    column-gap: 40px;
}

.services-text-compl-work > li {
    break-inside: avoid;
}

.projects-box p {
    font-family: var(--main-font);
    font-size: 1.5vw;
    text-align: center;
    color: #FFF;
    padding: 0 10%; 
}

.projects-box img {
    max-width: 100%;
    width: 20%;
    margin-left: 8%;
    margin-top: 3%;
    margin-bottom: 2%;
}

.project-name {
    font-size: 1.8vw;
    color: #dadada;
    text-align: center;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
  }
  
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
  }
  
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
  }
  
.animate {
animation-duration: 1s;
animation-fill-mode: both;
  }
  
.fadeInUp { animation-name: fadeInUp; }
.slideInLeft { animation-name: slideInLeft; }
.slideInRight { animation-name: slideInRight; }
  
  /* Изначально скрываем элементы */
[data-animation] {
    opacity: 0;
}

/* --- 1200px и меньше: планшеты, небольшие ноутбуки --- */
@media (max-width: 1200px) {
    .logo { width: 20%;}
    .navbar ul { gap: 1.5rem;}
    .company-info{ font-size: 2vw; margin-left: 10%; margin-top: -45%; }
    .company-info2 { font-size: 2vw; margin-left: 55%; margin-top: -40%;}
    .infoP { margin-top: 35%; margin-left: 10%; font-size: 1.5vw;}
    .infoP2 { margin-top: 35%; margin-left: 55%; font-size: 1.5vw;}
    .Company-img1 { width: 50%; margin-top: 7%; margin-left: 45%;}
    .Company-img2 { width: 50%; margin-top: 5%; margin-left: 2%;}
    .container1 p { font-size: 2vw;}
    .container-infoP {font-size: 1.5vw;}
    .logo-container { width: 50%;}
    .footer-menu, .contacts{margin-top: 1%;}
    .map iFrame {margin-top: 1%; width: 100%; height: 100%;}
    .footer-container { 
        font-size: 1.5vw; display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
        max-width: 100%;}
    .footer-bottom {font-size: 1.5vw;margin-top: 2%;}
    .block-company p {font-size: 2vw;}
    .left-line-company {margin-top: 18%;}
    .left-line-company2 {margin-top: 26%;}
    .right-line-company {margin-top: 16%;}
    .right-line-company2 {margin-top: 21%;}
    .team-member h2{font-size: 2vw;}
    .team-member p{font-size: 1.2vw;}
    .friend-box-color {height: 22%;}
    .map-section iFrame {width: 30%; height: 100%;}
  }
  
  /* --- 768px и меньше: планшеты, крупные смартфоны --- */
@media (max-width: 768px) {
    .logo { width: 38%; height: auto;  }
    header {padding: 1% 0 5% 0;}
    .header-contacts { display: none; }
    .burger { display: block; margin-left: 90%;}
    .burger.active .burger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .burger.active .burger-line:nth-child(2) {
        opacity: 0;
    }
    .burger.active .burger-line:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    .navbar ul.active {
        right: 0;
    }
    .navbar ul {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70vw;
        height: 100vh;
        background: rgba(0,0,0,0.9);
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
        padding: 20px;
        transition: right 0.5s;
        z-index: 999;
    }
    .navbar ul.active { right: 0; }
    .navbar a { font-size: 5vw; color: #FFF;}
    .Company, .Company2, .project, .friend, .services, .contacts-cont, .sertificat, .Company-derector, .company-str, .form-question, .projects{ font-size: 5vw; margin-top: 15%; margin-bottom: 10%; }
    .company-info, .company-info2 {
        position: static;
        width: 92%;
        margin: 2% auto;
        font-size: 3vw;
    }
    .Company-img1, .Company-img2 {
        position: static;
        width: 90%;
        margin: 2% auto;
        font-size: 3vw;
        margin-left: 2%;
    }
    .company-first{
        width: 95%;
        height: 82%;
        margin-left: 1%;
        border-radius: 2vw;
    }
    .company-second {
        width: 95%;
        height: 85%;
        margin-left: 1%;
        border-radius: 2vw;
    }
    .infoP {margin-top: 0%; font-size: 3vw; margin-left: 4%;}
    .infoP2 {margin-top: 0%; margin-left: 4%; font-size: 3vw;}
    .section-box-project{
        max-width: 95%;
        margin-left: 1%;
        border-radius: 3vw;
    }
    .friend-box-color {max-width: 60%; margin-left: 20%; height: 18%;}
    .friend-box img {width: 100%;}
    .container1 { flex-direction: column; gap: 1rem; }
    .project-card p {font-size: 3vw;}
    .container-infoP {font-size: 3vw;}
    .logo-container { width: 90%;}
    .footer-container { 
        font-size: 2.2vw; display: grid;
        grid-template-columns: repeat(auto-fit, minmax(25px, 1fr));
        gap: 2rem;
        max-width: 100%;}
    .footer-bottom {font-size: 2vw; margin-top: 5%;}
    .block-company p {font-size: 3vw;}
    .left-text-company-algin-box {width: 95%; margin-left: 0%;}
    .right-text-company-algin-box {width: 95%; margin-left: 5%;}
    .left-line-company {margin-top: 21%;}
    .left-line-company2 {margin-top: 30%;}
    .right-line-company {margin-top: 21%;}
    .right-line-company2 {margin-top: 29%;}
    .team-member h2 { font-size: 3vw; }
    .team-member p { font-size: 2vw; }
    .container-member { grid-template-columns: 1fr; padding: 5%; }
    .project-name {font-size: 3vw;}
    .projects-box p {font-size: 2vw;}
    .projects-box img {width: 24%; }
    .contact p {font-size: 3vw;}
    .sertificat-box { grid-template-columns: repeat(2, 1fr); }
    .map-section { width: 100%; margin-left: 20%; }
    .services-box { flex-direction: column; padding: 20px; max-width: 95%; }
    .services-text-left, .services-text-right { width: 100% !important; float: none; padding: 0 !important; margin-bottom: 25px; font-size: 3vw; }
    .services-text-compl-work { column-count: 1; font-size: 3vw;}
    label, input, textarea, .button-form-input, .text-question {
        font-size: 2vw !important;
        width: 90% !important;
        margin-left: 5% !important;
    }
  }
  
  /* --- 576px и меньше: смартфоны --- */
@media (max-width: 576px) {
    .logo { width: 50%; margin-left: 0; }
    header {padding: 1% 0 5% 0;}
    .burger {margin-top: -4%;}
    .Company, .projects, .Company2, .project, .friend, .services, .contacts-cont, .sertificat, .Company-derector, .company-str, .form-question { font-size: 7vw; }
    .company-info, .company-info2, .Company-img1, .Company-img2, .infoP, .infoP2 { width: 90%; margin-left: 5%; margin-top: 3%; font-size: 4vw; }
    .company-first, .company-second { width: 100%; margin-left: 0; border-radius: 4vw; }
    .section-box-project, .friend-box-color { max-width: 80%; margin-left: 10%; border-radius: 5vw; }
    .footer-container { font-size: 2vw; }
    .team-member h2 { font-size: 4vw; }
    .team-member p { font-size: 2vw; }
    .sertificat-box { grid-template-columns: 1fr; margin-top: 10%; }
    .container1 p, .container-infoP { font-size: 4vw; }
    .logo-container {width: 100%;}
    .friend-box-color {max-width: 100%; width: 100%; margin-left: 0; border-radius: 0;}
    .friend-box img {margin-left: 0%;  width: 100%;}
    label, input, textarea, .button-form-input, .text-question {
        font-size: 3vw !important;
        width: 90% !important;
        margin-left: 5% !important;
    }
    .block-company p {font-size: 4vw;}
    .left-text-company-algin-box {width: 100%; margin-left: 0%;}
    .right-text-company-algin-box {width: 100%; margin-left: 0%;}
    .left-line-company {display: none;}
    .left-line-company2 {display: none;}
    .right-line-company {display: none;}
    .right-line-company2 {display: none;}
    .project-name {font-size: 4vw;}
    .projects-box p {font-size: 3vw;}
    .projects-box img {width: 50%; margin-left: 25%; }
    .projects-box {padding: 5px 5px 5px 5px;}
    .map iframe {width: 100%; height: 70%;}
    .services-text-left {font-size: 4vw;}
    .services-text-right {font-size: 4vw;}
    .services-text-compl-work {font-size: 4vw;}
    .map-section { width: 80%; margin-left: 20%; }
  }

  /* --- 375px смартфоны --- */
@media (max-width: 376px) {
    .Company, .projects, .Company2, .project, .friend, .services, .contacts-cont, .sertificat, .Company-derector, .company-str, .form-question { font-size: 9vw; margin-top: 7%; margin-bottom: 7%; }
    .burger {margin-top: -6%;}
    header {padding: 1% 0 4% 0;}
    .map p {display: none;}
    .map iframe {display: none;}
    .footer-bottom {margin-top: 0; margin-bottom: 0; margin-left: 0;}
    .left-text-company-algin-box {width: 100%; margin-left: 0%;}
    .right-text-company-algin-box {width: 100%; margin-left: 0%;}
    .block-company p {font-size: 4.5vw;}
    .team-member h2 { font-size: 5vw; }
    .team-member p { font-size: 3vw; }
    .logo-container {display: none;}
    .footer-container { margin-left: 0; font-size: 3vw; display: flex;}
    .footer-bottom {font-size: 3vw; margin-top: 5%;}
    .project-name {font-size: 5vw;}
    .projects-box p {font-size: 4vw;}
}
  
.login-container {
    max-width: 500px;
    margin: 10% auto;
    padding: 2rem;
    background-color: white;
    border-radius: 1vw;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.login-container h1 {
    color: #000;
    margin-bottom: 2rem;
    text-align: center;
}

.login-form input {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    border: 1px solid #ccc;
    border-radius: 0.5vw;
    margin-left: 0;
}

.login-form button {
    width: 100%;
    padding: 1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 0.5vw;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-form button:hover {
    background-color: #0056b3;
}

.admin-error-message {
    color: #721c24;
    margin-bottom: 1rem;
    text-align: center;
}

.admin-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: white;
    border-radius: 1vw;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.admin-header h1 {
    color: #000;
    margin: 0;
}

.logout-btn {
    padding: 0.5rem 1rem;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 0.5vw;
    cursor: pointer;
    transition: background-color 0.3s;
}

.logout-btn:hover {
    background-color: #c82333;
}

.admin-tabs {
    display: flex;
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
}

.admin-tab {
    padding: 0.8rem 1.5rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
}

.admin-tab.active {
    border-bottom: 3px solid #007bff;
    font-weight: bold;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.form-group {
    margin-bottom: 1.5rem; 
    margin-left: 0;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #000;
    margin-left: 0;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 0.5vw;
    font-size: 1rem;
    margin-left: 0;
}

.form-group textarea {
    min-height: 150px;
}

.save-btn {
    padding: 0.8rem 1.5rem;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 0.5vw;
    cursor: pointer;
    transition: background-color 0.3s;
}

.save-btn:hover {
    background-color: #218838;
}

.project-item {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5vw;
}

.project-images {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.project-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 0.5vw;
}

.add-project-btn {
    margin-top: 1rem;
    padding: 0.8rem 1.5rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 0.5vw;
    cursor: pointer;
    transition: background-color 0.3s;
}

.add-project-btn:hover {
    background-color: #0056b3;
}

.remove-project-btn {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 0.5vw;
    cursor: pointer;
    transition: background-color 0.3s;
}

.remove-project-btn:hover {
    background-color: #c82333;
}

.file-input {
    margin-top: 1rem;
}

.projects-box img {
    max-width: 100%;
    width: 20%;
    margin-left: 8%;
    margin-top: 3%;
    margin-bottom: 2%;
}

.projects-box-add img {
    max-width: 100%;
    width: 20%;
    margin-left: 8%;
    margin-top: 3%;
    margin-bottom: 2%;
}

.projects-box-img {
    max-width: 100%;
    width: 20%;
    margin-left: 8%;
    margin-top: 3%;
    margin-bottom: 2%;
    border-radius: 1vw;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.projects-box-img:hover {
    transform: scale(1.05);
}

.project-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 0.5vw;
    margin-right: 10px;
    margin-bottom: 10px;
}

.image-preview-container img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}