@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

*{
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

img{
    width: 125px;
}

.navigation ul{
    list-style-type: none;
    display: flex;
    gap: 2rem;
}

.navigation a{
    color: #eeeeee;
    text-decoration: none;
    font-size: large;
}

.navigation a:hover{
    color: rgb(155, 56, 248);
    text-decoration: none;

}


body{
    background-color: #222831;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem auto;
    max-width: 1200px;
}

hr{
    opacity: 30%;
}

 h1{
    color: #eeeeee;
    font-size: large;
    text-align: center;
    list-style-type: none;
    list-style-type: none;
    display: flex;
    gap: 2rem;
}


p{
    color: #eeeeee;
    display: flex;
}



h2{
    color: #eeeeee;
    text-align: center;
}

.About-company{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5rem auto;
    max-width: 1200px;
    gap: 10rem;

}

.hero{
    list-style-type: none;
    display: flex;
    width: 150;
    align-items: flex-end;
    margin: 5rem auto;
    max-width: 1200px;
    color: rgb(155, 56, 248);
    text-decoration: none;
    display: flex;
    align-items: center;
    margin: 5rem auto;
    max-width: 1200px;
    list-style-type: none;
    display: flex;
    gap: 2rem;
    display: flex;
    align-items: center;
    margin: 5rem auto;
    max-width: 1200px;
    color: #eeeeee;
    text-decoration: none;
    font-size: medium;
    text-align: center;
}


.navigation2 ul{
    list-style-type: none;
    text-decoration: none;
    color: darkslateblue;
    text-decoration: none;
}


.hero a:hover{
    list-style-type: none;
    text-decoration: none;
    color: #eeeeee;
}

.hero h1{
    font-size: xx-large;
}

.hzimage{
    width: 250px;
}

.navigation2 a{
    list-style-type: none;
    text-decoration: none;
    color: darkslateblue;
    text-decoration: none;
}

.hzarrow {
    width: 150px;
    text-align: start;
    gap: 2rem;
    display: flex;
    max-width: 1200px;
    align-items: flex-start;
    background-position: right; 
    right: -65px;    
    position: relative;
    top: -20px;   
    margin-left: 50px; 
    top: -85px; 
    margin-left: 8px;
}





.about-us{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem auto;
    max-width: 1200px;
    flex-direction: column;
}


.textcounter{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem auto;
    max-width: 1200px;
}

.aboutcompanyP{
    justify-content: space-between;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem auto;
    max-width: 1200px;
}

.aboutName{
    color: #eeeeee;
    justify-content: space-between;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem auto;
    max-width: 1200px;
    position: relative;
    top: -100px;
}

.aboutMe{
    color: darkslateblue;
    justify-content: space-between;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem auto;
    max-width: 1200px;
    position: relative;
    top: -100px;
}



section {
    text-align: center;
    padding: 30px;
 
    color: #eeeeee;
 
  }



  
  .copyright {
    font-size: 14px;
    opacity: 0.8;
    margin-top: 10px;
    color: #eeeeee;
  }
    
.ContactName{
    color: darkslateblue;
    justify-content: space-between;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem auto;
    max-width: 1200px;
    position: relative;
    top: -100px;
   position: relative;
   transform: none;
}



.contactP{
    display: flex;

    align-items: center;

    max-width: 1200px;
    color: #eeeeee;
    text-align: center;
    color: darkslateblue;

}

.hzcompany-gmail.com{
    color: #eeeeee;
    text-align: center;
    align-items: flex-end;
}


footer{

        text-align: center;
        padding: 30px;
     
        color: #eeeeee;
       
}

p{
    text-align: center;
    align-items: center;
    justify-content: space-between;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem auto;
    max-width: 1000px;
}


@media (max-width: 768px) {


    header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15px;
        margin: 10px auto;
        max-width: 100%;
    }

   
    img[width="125px"] {
        width: 100px !important;
        height: auto;
    }

 
    .navigation ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 0;
        margin-top: 15px;
    }

    .navigation a {
        font-size: 14px;
        padding: 6px 12px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 20px;
    }


    hr {
        width: 90%;
        margin: 15px auto;
        border: 0.5px solid rgba(238, 238, 238, 0.2);
    }


    .About-company {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 30px auto;
        padding: 20px;
        max-width: 95%;
        gap: 20px;
        position: relative;
    }


    .hzarrow {
        width: 70px !important;
        height: auto !important;

        position: absolute !important;
        left: 50%;
        top: 0;
        transform: translateX(-50%) translateY(-60%);

        opacity: 0.25 !important;
        z-index: -1 !important;
        pointer-events: none;
    }


    .hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 40px auto;
        padding: 20px;
        max-width: 95%;
    }

    .hero h1 {
        font-size: 22px;
        margin-bottom: 20px;
        line-height: 1.3;
    }

    .hero ul {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0;
        margin: 20px 0;
        width: 100%;
    }

    .hero a {
        font-size: 15px;
        padding: 10px 15px;
        background: rgba(155, 56, 248, 0.1);
        border-radius: 8px;
        margin: 0 10px;
    }


    .hzimage {
        width: 180px !important;
        height: auto;
        margin: 20px auto;
        border-radius: 10px;
    }


    .navigation2 ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0;
        margin: 20px 0;
    }

    .navigation2 a {
        font-size: 14px;
        padding: 8px 15px;
        background: rgba(155, 56, 248, 0.15);
        border-radius: 8px;
    }


    .about-us {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 40px auto;
        padding: 20px;
        max-width: 95%;
        text-align: center;
    }

    h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .textcounter {
      display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
   
    }


    .aboutcompanyP {

        padding: 0 ;
        color: #cccccc;
    }

    .aboutName {
        font-size: 16px;
        font-weight: bold;
        margin: 15px 0;
        color: #eeeeee;
        position: static !important;
        top: 0 !important;
    }

    .aboutMe {
        font-size: 15px;
        font-weight: bold;
        margin: -20px 0;
        color: rgb(155, 56, 248);
        position: static !important;
        
    }


        section {
        padding: 25px 20px;
        margin: 40px auto;
        max-width: 95%;
        text-align: center;
    }

    .ContactName {
        font-size: 18px;
        font-weight: bold;
        margin: 20px 0;
        color: rgb(155, 56, 248);
        position: static !important;
        top: 0 !important;
    }

    .contactP {
        font-size: 14px;
        line-height: 1.6;
        margin: 15px 0;
        padding: 0 10px;
        color: #eeeeee;
        display: block !important;
        text-align: center;
    }

    .hzcompany-gmail.com {
        font-size: 15px;
        font-weight: bold;
        color: rgb(155, 56, 248);
        margin: 10px 0;
        display: inline-block;
        padding: 8px 15px;
        background: rgba(155, 56, 248, 0.1);
        border-radius: 8px;
    }


    footer {
        padding: 25px 20px;
        margin-top: 40px;
        text-align: center;
    }

    .copyright {
        font-size: 12px;
        margin-top: 15px;
        color: #aaaaaa;
    }

 
    @media (max-width: 480px) {

        .hzarrow {
            width: 55px !important;
            transform: translateX(-50%) translateY(-60%);
            opacity: 0.22 !important;
        }

        .aboutcompanyP,
        .contactP {
            font-size: 13px;
        }

        .ContactName {
            font-size: 16px;
        }

        .hzimage {
            width: 150px !important;
        }
    }

  
    @media (min-width: 481px) and (max-width: 768px) {

        .hzarrow {
            width: 80px !important;
            opacity: 0.22 !important;
        }

        .About-company {
            gap: 25px;
        }

        .hero h1 {
            font-size: 24px;
        }
    }

}