@font-face {
    font-family: 'Poppins';
    src:   url('./fonts/Poppins-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: bold; /* Change to bold if you're using a bold font */
    font-style: normal;  /* Use 'italic' if you're including italic styles */
}
@font-face {
    font-family: 'Poppins';
    src:   url('./fonts/Poppins-Light.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: lighter; /* Change to bold if you're using a bold font */
    font-style: normal;  /* Use 'italic' if you're including italic styles */
}

body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    color: #333;
    position: relative;
    overflow: hidden;
}

/* Background SVG styling */
.background {
    position: absolute;
    top: -61%;
    left: -39%;
    width: 200%;
    height: 200%;
    background: url('./bildes/bg_objects.svg') no-repeat center center;
   /* background-size: contain;  /* Keeps the original aspect ratio */
    /*background-attachment: fixed;*/
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*text-align: center;*/
    min-height: 100vh;
    z-index: 1;
    position: relative;
}

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

.container h1 {
    font-size: 36px;
    margin-bottom: 10px;
}

.footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 13px;
    text-align: center;
    background-color: #1a1a1a;
    z-index: 1;
}

.footer img.small-logo {
    max-width: 55px;
}


/* Line styles */
.line-1, .line-2 {
    position: absolute;
    height: 20px; /* Increased height to accommodate text */
    width: 200%; /* Set the width to 100% */
    background-color: #faca9e; /* Color of the lines */
    z-index: 2; /* Ensures these lines are on top */
}

.line-1 {
    top: -25%;
    left: 0;
    background-color: #faca9e;
    transform: rotate(20deg); /* Diagonal line from top left to bottom right */
    transform-origin: bottom left; /* Set the origin for rotation */
}

.line-2 {
    top: 68%;
    right: -10px;
    transform: rotate(-5deg); /* Diagonal line from top right to bottom left */
    transform-origin: bottom right; /* Set the origin for rotation */
}

/* Text styles */
.line-text {
    position: absolute;
    top: -52.6%; /* Vertically center the text */
    left: 50%; /* Horizontally center the text */
    transform: translate(-50%, -50%); /* Adjust for the text width and height */
    color: white; /* Text color */
    font-size: 12px; /* Font size for the text */
    z-index: 3; /* Ensure the text is above the lines */
    white-space: nowrap; /* Prevent text wrapping */
    font-family: "Poppins";
    font-weight: bold;
    


    /*trying to add animation */
    

}

.line-2 .line-text {
    animation: scroll-right 160s linear infinite; 
}
.line-1 .line-text {
    animation: scroll-left 160s linear infinite; 
}

@keyframes scroll-left {
    0% {
         /* Start from the left  -50 */
         transform: translateX(-66%);
         
    }
    99.99% {
        transform: translateX(-20%); /* -4 Move to the right, ending where it started */
    }
    100% {
        transform: translateX(-66%); /* -50 Move to the right, ending where it started */

    }

}


@keyframes scroll-right {
    0% {
         /* Start from the left */
         transform: translateX(-20%);
         
    }
    99.99% {
        transform: translateX(-66%); /* Move to the right, ending where it started */
    }
    100% {
        transform: translateX(-20%); /* Move to the right, ending where it started */

    }

}

/*END trying to add animation */

/*         Main text styles           */

.container > p {
    font-family: "Poppins";
    font-weight: lighter;
    font-size: 10px;
    width:36%;
    margin:0;
}

.container p > img {
    width: 8px;
    height: auto;
    margin-top:0px;

}

.container > .company {
    font-size: 12px;
    margin:0;
}

.container > .adrese {

    margin:0;
    margin-top:10px;
}
.container > .inner_adrese {
    margin:0;
    margin-bottom:7px;
}
.container > .epasts {
    margin:0;
}
.container > .inner_epasts {
     margin:0;
    margin-bottom:7px;
}


@media (max-width: 709px) {
    /* CSS rules here will apply when the viewport width is less than 708 pixels */
    .line-1, .line-2 {
        height: 20px; /* Increased height to accommodate text */
        width: 200%; /* Set the width to 100% */
    }
    
    .line-1 {
        top: -5%;
        left: 0;
        background-color: #faca9e;
        transform: rotate(20deg); /* Diagonal line from top left to bottom right */
        transform-origin: bottom left; /* Set the origin for rotation */
    }
    
    .line-2 {
        top: 75%;
        right: -10px;
        transform: rotate(-5deg); /* Diagonal line from top right to bottom left */
        transform-origin: bottom right; /* Set the origin for rotation */
    }

}


@media (max-width: 440px) {
    /* CSS rules here will apply when the viewport width is less than 328 pixels */
    .line-1, .line-2 {
        height: 20px; /* Increased height to accommodate text */
        width: 200%; /* Set the width to 100% */
    }
    
    .line-1 {
        top: -5%;
        left: 0;
        background-color: #faca9e;
        transform: rotate(20deg); /* Diagonal line from top left to bottom right */
        transform-origin: bottom left; /* Set the origin for rotation */
    }
    
    .line-2 {
        top: 85%;
        right: -10px;
        transform: rotate(-5deg); /* Diagonal line from top right to bottom left */
        transform-origin: bottom right; /* Set the origin for rotation */
    }
    .container {
        margin-top:-10%;
    }
    .container > p {
        width:55%;
    }

}


@media (max-width: 328px) {
    /* CSS rules here will apply when the viewport width is less than 328 pixels */
    .line-1, .line-2 {
        height: 20px; /* Increased height to accommodate text */
        width: 200%; /* Set the width to 100% */
    }
    
    .line-1 {
        top: 10%;
        left: 0;
        background-color: #faca9e;
        transform: rotate(20deg); /* Diagonal line from top left to bottom right */
        transform-origin: bottom left; /* Set the origin for rotation */
    }
    
    .line-2 {
        top: 85%;
        right: -10px;
        transform: rotate(-5deg); /* Diagonal line from top right to bottom left */
        transform-origin: bottom right; /* Set the origin for rotation */
    }

    .background {
        top:-130%;
        width: 300%;
        height: 300%;
    }

}