/* Import Montserrat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');



body, html {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
}


/* Global Reset and Box Sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
    width: 100%;
}

/* Global Styles */
body {
    font-family: 'Montserrat', sans-serif;
    background: #000;
    color: #fff;
}

/* Container holding both sides */
.page {
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    width: 100%;
}

/* Left side: 60% width for the form */
.left-side {
    flex: 0 0 60%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

/* Right side: 40% width for the image */
.right-side {
    flex: 0 0 40%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligns image to the left */
    padding: 40px;
    margin-left: -100px;
}

.right-side img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border: 4px solid #0a7d58;
    border-radius: 0%;
}

/* Form Styling */
form {
    width: 100%;
    max-width: 500px;
    background-color: #111;  /* Slightly lighter black for contrast */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

form h1 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #0a7d58;
}

form label {
    display: block;
    margin: 15px 0 5px;
    font-weight: 600;
    color: #fff;
}

form input[type="text"],
form select,
form input[type="file"] {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1.5px solid #333;
    font-size: 16px;
    transition: border-color 0.3s;
    background-color: #222;
    color: #fff;
}

form input[type="text"]:focus,
form select:focus {
    border-color: #0a7d58;
    outline: none;
}

/* Custom styling for file input (CV) */
.cv {
    background-color: #222;
    color: #fff;
    border: 2px dashed #333;
    padding: 8px;
}

/* Submit Button Styling */
button[type="submit"] {
    background-color: #0a7d58;
    color: #fff;
    font-size: 18px;
    padding: 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    margin-top: 20px;
    transition: background-color 0.3s;
}

button[type="submit"]:hover {
    background-color: #066b49;
}

/* Mobile Optimized Styles */
@media (max-width: 768px) {
    .page {
        flex-direction: column;
    }
    
    .left-side,
    .right-side {
        flex: 0 0 100%;
        width: 100%;
        padding: 20px;
    }
    
    /* Order the content for mobile, form on top */
    .left-side {
        order: 1;
    }
    
    .right-side {
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
    }
    
    

    .right-side {
        flex: 0 0 100%;
        width: 100%;
        padding: 20px;
        margin-left: 00px;
    }

    
    /* Scale image for mobile */
    .right-side img {
        width: 100%;
        max-width: 300px;
        height: auto;
    }
    
    form {
        max-width: 100%;
        padding: 20px;
    }
    
    form h1 {
        font-size: 24px;
    }
    
    form label,
    form input[type="text"],
    form select,
    form input[type="file"],
    button[type="submit"] {
        font-size: 16px;
    }
}



/* ===============================header========================= */



.header {
    position: relative;
    width: 100%;
    height: 80vh; /* Adjusted height */
    overflow: hidden;
    position: relative;
}



header {
    position: relative;
    z-index: 1;
    color: white;
    padding: 100px 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


body, html {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior:smooth ;
    animation: slideIn 1.5s ease-out;
    transition: 2s;
    }
    
    
    

.header-image{
    width: 100%;
    height: 80vh;
    position: absolute;
    top: 0;
    left: 0;

    object-fit: cover;
    z-index: -1;
    filter: brightness(0.7);
}


header nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    font-size: 18px;
    font-weight: 800;
    position: fixed;
   top: 0px;
   right: 0px;
background-color: rgba(240, 248, 255, 0.227);
border-bottom:2px solid white ;
}


header nav  .left img{
    width: 90px;
    height:auto;
    margin-left: 100px;
}




header nav  .right ul {
    text-decoration: none;
    list-style: none;
    }
    
header nav  .right ul {
text-decoration: none;
list-style: none;
}



header nav  .right a{
    padding: 10px 15px;
    border-radius: 10px;
    background-color: #ffffff;
    color:#118062;
    text-decoration: none;
    font-weight:900;
    margin-right: 50px;
display: flex;
flex-direction: row;
gap: 10px;
}


header nav  .right a img{
    width: 30px;
    height: auto"

}




header nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0px;
    transition: 2s;
    margin-left: 30px;
}

header nav ul li {
    padding: 0px 8px;
}




header nav ul .main-header:hover {
    border-radius: 10px;
    transition: .3s;
    padding: 5px 8px;
    font-size: 30px;
    color:aqua;
}
header nav ul .main-header  a:hover {
    border-radius: 10px;
    transition: .3s;
    padding: 5px 8px;
    font-size: 30px;
    color:#118062;
}






nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

nav ul li i {
    font-size: 44px;
    margin-top: -10px;
}


header nav .menu i {
    display: flex;
    justify-content: flex-end;
    transition: 2s;
    margin-top: -80px;
    font-size: 44px;
}

.header header .icons{
    position: fixed;
    right: 20px;
    top: 120px;
    display: flex;
flex-direction: column;
gap: 25px;
}

.header header .icons a{
text-decoration: none; 
}

.header header .icons a i{
color: white;
font-size: 25px;
}


.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 35%;
    background-color: #ffffff98;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    min-width: 100px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 999;
    padding-left: 10px;
}

.dropdown-menu li {
    padding: 8px 20px;
}

.dropdown-menu li a {
    color:darkslategrey;
    text-decoration: none;
    display: block;
}

.dropdown.active .dropdown-menu {
    display: block;
}


.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dropdown-icon {
    font-size: 0.7em;
    transition: transform 0.3s ease;
}

/* Rotate icon when dropdown is active */
.dropdown.active .dropdown-icon {
    transform: rotate(180deg);
}






@media(min-width:300px) and (max-width:480px){

    
    .header {
        position: relative;
        height: 25vh; /* Adjusted height */
        overflow: hidden;
        position: relative;
    }

    .header-image{
        width: 100%;
        height: 25vh; /* Adjusted height */  
    }


    
    header {
        position: relative;
        z-index: 1;
        color: white;
        padding: 10px 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    


    header h1 {
        padding: 10px;
        color: white;
        margin-top: 100px;
        text-align: center;
        font-size: 15px;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
        border-radius: 20px;
        transition: 1s;
    }

    
  
    

    header nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding: 10px 10px;
        font-size: 4px;
        font-weight: 800;
        position: fixed;
       top: 0px;
       right: 0px;
    background-color: rgba(240, 248, 255, 0.227);
    border-bottom:2px solid white ;
    }
    
    
    header nav  .left img{
        width: 30px;
        height:auto;
        margin-left: 5px}
    
    
    
    
    header nav  .right ul {
        text-decoration: none;
        list-style: none;
        }
        
    header nav  .right ul {
    text-decoration: none;
    list-style: none;
    }
    
    
    
    header nav  .right a{
        padding: 2px 5px;
        border-radius: 2px;
        background-color: #ffffff;
        color:#118062;
        text-decoration: none;
        font-weight:900;
        margin-right: 0px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    font-size: 6px;
    }
    
    
    header nav  .right a img{
        width: 10px;
        height: auto"
    
    }
    
    /* ------------------------------------------------------- */
    
    
    header nav  ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 0px;
        transition: 2s;
        margin-left: 0px;
    }


  


    
    header nav li {
        padding: 0px 0px;
        font-size:  5px;
    }
    
    
    
    
    header nav ul .main-header:hover {
        border-radius: 10px;
        transition: .3s;
        padding: 5px 8px;
        font-size: 30px;
        color:aqua;
    }
    header nav ul .main-header  a:hover {
        border-radius: 10px;
        transition: .3s;
        padding: 5px 8px;
        font-size: 10px;
        color:#118062;
    }
    
    
    header nav center{
        display: flex;
        gap: 3px;
    }
    
    
    
    
    
    nav ul li {
        display: inline;
        margin-right: 0px;

    }
    
    nav ul li a {
        color: white;
        text-decoration: none;
        font-size: 5px;
    }
    
    nav ul li i {
        font-size: 24px;
        margin-top: -10px;
    }
    
    
    header nav .menu i {
        display: flex;
        justify-content: flex-end;
        transition: 2s;
        margin-top: -80px;
        font-size: 44px;
    }
    
    .header header .icons{
        position: fixed;
        right: 10px;
        top: 80px;
        display: flex;
    flex-direction: column;
    gap: 5px;
    }
    
    .header header .icons a{
    text-decoration: none; 
    }
    
    .header header .icons a i{
    color: white;
    font-size: 15px;
    }
    
    
    .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 35%;
        background-color: #ffffff98;
        list-style: none;
        padding: 10px 0;
        margin: 0;
        min-width: 100px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 999;
        padding-left: 10px;
    }
    
    .dropdown-menu li {
        padding: 8px 20px;
    }
    
    .dropdown-menu li a {
        color:darkslategrey;
        text-decoration: none;
        display: block;
    }
    
    .dropdown.active .dropdown-menu {
        display: block;
    }
    
    
    .dropdown-toggle {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .dropdown-icon {
        font-size: 0.7em;
        transition: transform 0.3s ease;
    }
    
    /* Rotate icon when dropdown is active */
    .dropdown.active .dropdown-icon {
        transform: rotate(180deg);
    }
}
    


@media(min-width:481px) and (max-width:769px){
 
    
    .header {
        position: relative;
        height: 55vh; /* Adjusted height */
        overflow: hidden;
        position: relative;
    }

    .header-image{
        width: 100%;
        height: 55vh; /* Adjusted height */  
    }


    
    header {
        position: relative;
        z-index: 1;
        color: white;
        padding: 10px 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    

    header h1 {
        padding: 10px;
        color: white;
        margin-top: 150px;
        text-align: center;
        font-size: 20px;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
        border-radius: 20px;
        transition: 1s;
    }
    

    header nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding: 10px 10px;
        font-size: 4px;
        font-weight: 800;
        position: fixed;
       top: 0%;
       right: 0px;
    background-color: rgba(240, 248, 255, 0.227);
    border-bottom:2px solid white ;
    }
    
    
    header nav  .left img{
        width: 80px;
        height:auto;
        margin-left: 5px}
    
    
    
    
    header nav  .right ul {
        text-decoration: none;
        list-style: none;
        }
        
    header nav  .right ul {
    text-decoration: none;
    list-style: none;
    }
    
    
    
    header nav  .right a{
        padding: 2px 5px;
        border-radius: 2px;
        background-color: #ffffff;
        color:#118062;
        text-decoration: none;
        font-weight:900;
        font-size: 10px;
        margin-right: 0px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    }
    
    
    header nav  .right a img{
        width: 20px;
        height: auto"
    
    }
    
    /* ------------------------------------------------------- */
    
    
    header nav  ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 1px;
        transition: 2s;
        margin-left: 0px;
    }
    
    header nav ul li {
        padding: 0px 0px;
    }
    
    
    
    
    header nav ul .main-header:hover {
        border-radius: 10px;
        transition: .3s;
        padding: 5px 8px;
        font-size: 30px;
        color:aqua;
    }
    header nav ul .main-header  a:hover {
        border-radius: 10px;
        transition: .3s;
        padding: 5px 8px;
        font-size: 10px;
        color:#118062;
    }
    
    
    header nav center{
        display: flex;
        gap: 3px;
    }
    
    
    
    
    
    nav ul li {
        display: inline;
        margin-right: 10px;

    }
    
    nav ul li a {
        color: white;
        text-decoration: none;
        font-size: 10px;

    }
    
    nav ul li i {
        font-size: 24px;
        margin-top: -10px;
    }
    
    
    header nav .menu i {
        display: flex;
        justify-content: flex-end;
        transition: 2s;
        margin-top: -80px;
        font-size: 44px;
    }
    
    .header header .icons{
        position: fixed;
        right: 20px;
        top: 120px;
        display: flex;
    flex-direction: column;
    gap: 25px;
    }
    
    .header header .icons a{
    text-decoration: none; 
    }
    
    .header header .icons a i{
    color: white;
    font-size: 25px;
    }
    
    
    .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 35%;
        background-color: #ffffff98;
        list-style: none;
        padding: 10px 0;
        margin: 0;
        min-width: 100px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 999;
        padding-left: 10px;
    }
    
    .dropdown-menu li {
        padding: 8px 20px;
    }
    
    .dropdown-menu li a {
        color:darkslategrey;
        text-decoration: none;
        display: block;
    }
    
    .dropdown.active .dropdown-menu {
        display: block;
    }
    
    
    .dropdown-toggle {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .dropdown-icon {
        font-size: 0.7em;
        transition: transform 0.3s ease;
    }
    
    /* Rotate icon when dropdown is active */
    .dropdown.active .dropdown-icon {
        transform: rotate(180deg);
    }
}


@media(min-width:769px) and (max-width:1024px){      
 
    
    .header {
        position: relative;
        height:95vh; /* Adjusted height */
        overflow: hidden;
        position: relative;
    }

    .header-image{
        width: 100%;
        height: 52vh; /* Adjusted height */  
    }


    
    header {
        position: relative;
        z-index: 1;
        color: white;
        padding: 10px 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    

    
    header nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding: 10px 10px;
        font-size: 4px;
        font-weight: 800;
        position: fixed;
       top: 0%;
       right: 0px;
    background-color: rgba(240, 248, 255, 0.227);
    border-bottom:2px solid white ;
    }
    
    
    header nav  .left img{
        width: 80px;
        height:auto;
        margin-left: 5px}
    
    
    
    
    header nav  .right ul {
        text-decoration: none;
        list-style: none;
        }
        
    header nav  .right ul {
    text-decoration: none;
    list-style: none;
    }
    
    
    
    header nav  .right a{
        padding: 2px 5px;
        border-radius: 2px;
        background-color: #ffffff;
        color:#118062;
        text-decoration: none;
        font-weight:900;
        margin-right: 0px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    }
    
    
    header nav  .right a img{
        width: 20px;
        height: auto"
    
    }
    
    /* ------------------------------------------------------- */
    
    
    header nav  ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 1px;
        transition: 2s;
        margin-left: 0px;
    }
    
    header nav ul li {
        padding: 0px 0px;
    }
    
    
    
    
    header nav ul .main-header:hover {
        border-radius: 10px;
        transition: .3s;
        padding: 5px 8px;
        font-size: 30px;
        color:aqua;
    }
    header nav ul .main-header  a:hover {
        border-radius: 10px;
        transition: .3s;
        padding: 5px 8px;
        font-size: 10px;
        color:#118062;
    }
    
    
    header nav center{
        display: flex;
        gap: 3px;
    }
    
    
    
    
    
    nav ul li {
        display: inline;
        margin-right: 10px;

    }
    
    nav ul li a {
        color: white;
        text-decoration: none;
        font-size: 14px;

    }
    
    nav ul li i {
        font-size: 24px;
        margin-top: -10px;
    }
    
    
    header nav .menu i {
        display: flex;
        justify-content: flex-end;
        transition: 2s;
        margin-top: -80px;
        font-size: 44px;
    }
    
    .header header .icons{
        position: fixed;
        right: 10px;
        top: 120px;
        display: flex;
    flex-direction: column;
    gap: 25px;
    }
    
    .header header .icons a{
    text-decoration: none; 
    }
    
    .header header .icons a i{
    color: white;
    font-size: 15px;
    }
    
    
    .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 35%;
        background-color: #ffffff98;
        list-style: none;
        padding: 10px 0;
        margin: 0;
        min-width: 100px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 999;
        padding-left: 10px;
    }
    
    .dropdown-menu li {
        padding: 8px 20px;
    }
    
    .dropdown-menu li a {
        color:darkslategrey;
        text-decoration: none;
        display: block;
    }
    
    .dropdown.active .dropdown-menu {
        display: block;
    }
    
    
    .dropdown-toggle {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .dropdown-icon {
        font-size: 0.7em;
        transition: transform 0.3s ease;
    }
    
    /* Rotate icon when dropdown is active */
    .dropdown.active .dropdown-icon {
        transform: rotate(180deg);
    }
    
    
    /* /* =================== */

}


/*================================footer================================*/


.footer {
    background-image: linear-gradient(150deg, black 20%, #118062 70%);
    color: #fff;
    padding: 40px 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    font-family: 'Arial', sans-serif;
}

.footer .column1,
.footer .column2,
.footer .column3,
.footer .column4 {
    flex: 1 1 180px;
    min-width: 180px;
}
.footer .column3{
    margin-left: 50px;
}



.footer img {
    width: 150px;
    margin-bottom: 20px;
    margin-top: 40px;
}
.footer h1 {
    font-size: 26px;
    margin-bottom: 5px;
    position: relative;
    color:#00d199;
}

.footer hr {
    border: none;
    background-image: linear-gradient(150deg, white 20%, #118062 70%);;
    height: 4px;
    background-color: #ffffff;
    width: 80px;
    margin: 0 0 15px 0; /* top right bottom left */
    border-radius: 10px;
}

.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer ul li {
    margin: 10px 0;
    display: flex;
    align-items: center;
    font-size: 15px;
}

.footer ul li i {
    margin-right: 10px;
    color: #ffffff; /* icon color */
    font-size: 18px;
}

.footer ul a {
    text-decoration: none;
    color: #fff;
    transition: color 0.3s ease;
}

.footer ul a:hover {
    color: #000000;
}

.footer .icons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.footer .social-icon {
    font-size: 20px;
    color: #fff;
    transition: transform 0.3s ease, color 0.3s ease;
}

.footer .social-icon:hover {
    transform: scale(1.2);
    color: #000000;
}
@media (max-width: 768px) {
    .footer {
        padding: 20px;
        gap: 10px;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .footer .column1,
    .footer .column2,
    .footer .column3,
    .footer .column4 {
        flex: 0 0 25%; /* 4 columns per row */
        min-width: 160px; /* Prevent content from squishing */
    }


    .footer .column3{
        margin-left: 20px;
    }

    .footer .column4 {
        margin-left: -40px;
    }


    .footer img {
        width: 100px;
        margin: 20px 0;
    }

    .footer hr {
        border: none;
        background-image: linear-gradient(150deg, white 20%, #118062 70%);
        height: 2px;
        width: 30px;
        margin: 0 0 15px 0;
        border-radius: 10px;
    }

    .footer h1 {
        font-size: 12px;
        margin-bottom: 5px;
        color: #00d199;
    }

    .footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer ul li {
        margin: 10px 0;
        display: flex;
        align-items: center;
        font-size: 10px;
    }

    .footer ul li i {
        margin-right: 8px;
        color: #ffffff;
        font-size: 12px;
    }

    .footer ul a {
        text-decoration: none;
        color: #fff;
        transition: color 0.3s ease;
    }

    .footer .icons {
        display: flex;
        gap: 10px;
        margin-top: 10px;
    }

    .footer .social-icon {
        font-size: 14px;
        color: #fff;
        transition: transform 0.3s ease, color 0.3s ease;
    }

    .footer .social-icon:hover {
        transform: scale(1.2);
        color: #000000;
    }

    /* Optional: hide scroll bar for cleaner look */
    .footer::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 480px) {
    .footer {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;  /* Don't wrap, keep all columns in one row */
        overflow-x: auto;   /* Add horizontal scroll if needed */
        gap: 10px;
    }

    .footer .column1,
    .footer .column2,
    .footer .column3,
    .footer .column4 {
        flex: 0 0 20%; /* Two columns per row minimum */
        min-width: 100px; /* Keep readable layout */
    }


    .footer .column3{
        margin-left: 20px;
    }

    .footer .column4 {
        margin-left: -40px;
    }



    .footer img {
        width: 50px;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .footer hr {
        border: none;
        background-image: linear-gradient(150deg, white 20%, #118062 70%);
        height: 2px;
        width: 30px;
        margin: 0 0 15px 0;
        border-radius: 10px;
    }

    .footer h1 {
        font-size: 10px;
        margin-bottom: 5px;
        color: #00d199;
    }

    .footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer ul li {
        margin: 2px 0;
        display: flex;
        align-items: center;
        font-size: 6px;
    }

    .footer ul li i {
        margin-right: 10px;
        color: #ffffff;
        font-size: 8px;
    }

    .footer ul a {
        text-decoration: none;
        color: #fff;
        transition: color 0.3s ease;
    }

    .footer .icons {
        display: flex;
        gap: 10px;
        margin-top: 10px;
    }

    .footer .social-icon {
        font-size: 10px;
        color: #fff;
        transition: transform 0.3s ease, color 0.3s ease;
    }

    .footer .social-icon:hover {
        transform: scale(1.2);
        color: #000000;
    }
}