/* styles.css */
body {
    font-family: "Raleway", serif;
    font-size: 16px;
    /* font-family: Arial, Helvetica, sans-serif; */
    margin: 0;
    padding: 0;
    max-width: 100%;
    background-color: rgb(251, 251, 251);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top:90px;
    max-width:100%;
    overflow-x: hidden;
    scroll-snap-type: none;
}

.preloader-bg{
    position:fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    background: #fff;
    transition:all 1s;
}


.preloader {
    position: fixed;
    width: 200px;
    height: 200px;
    z-index: 9999;
    background-image: url('../images/loader.png');
    background-size:cover;
    animation: spin 1.5s ease-in-out infinite;
}

@keyframes spin{
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}


h1{
    font-family: "Raleway", serif;
}

h3{
    font-family: "Goldman", serif;
}

a{
    font-family: "Raleway", serif;
}

.raleway-unifikator {
    font-family: "Raleway", serif;
    font-optical-sizing: auto;
    font-weight:weight;
    font-style:normal;
}

.goldman-regular {
    font-family: "Goldman", serif;
    font-weight: 400;
    font-style: normal;
  }
  
.goldman-bold {
    font-family: "Goldman", serif;
    font-weight: 700;
    font-style: normal;
}

.hidden{
    opacity:0;
    /* scale:50%; */
    transform:translateY(50px);
    transition: all 1s;

}

.show{
    opacity:100%;
    /* scale:100%; */
    transform:translateY(0px);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 100px 15px;
    padding-top:30px;
    background-color: #ffffff;
    height:50px;
    transition: padding-bottom 0.3s ease-in-out;
    position:fixed;
    width:89.4%;
    top:0;
    z-index:9997;
    transition: background-color 0.4s ease-in-out;
}

header .logo img {
    height: 50px;
}

.nav-item{
    position: relative;
    /* max-width:100px; */
    padding-left: 30px;
    padding-right: 30px;
    text-align:center;
    width:max-content;
}

.nav-item li a{
    color: #15355E;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

.nav-item-a{
    position: relative;
    /* max-width:100px; */
    padding-left: 15px;
    padding-right: 15px;
    text-align:center;
    width:max-content;
}

.nav-item-a li a{
    color: #15355E;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

nav {
    height:30px;
    display: flex;
    justify-content:center;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content:center;
    padding: 0;
    margin:0;
}

nav ul li {
    /* margin-left: 20px; */
    margin-bottom: 10px;
}

nav ul li a {
    color: #15355E;
    text-decoration: none;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-weight: 600;
}

.phone-btn{
    visibility:hidden;
    display:none;
}

.uk-drop{
    display:none;
}

.dropdown{
    position: absolute;
    width:150vw;
    /* top: 130%;*/
    left: 65%;
    transform: translateX(-50%);
    background: white;
    list-style:none;
    padding:0px;
    margin:0;
    opacity:0;
    visibility:hidden;
    z-index:1000;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, background-color 0.4s ease-in-out;
}

.dropdown li{
    padding:0px;
    width:max-content;
}

.dropdown li a{
    color: #15355E;
    top:10px;
    text-decoration:none;
    display:block;
    background-color: transparent;
    padding-top: 0px;
}

.nav-item:hover .dropdown{
    opacity:1;
    visibility:visible;
}

.header-no-transp{
    background-color: #fff!important;
}

.header-no-transp .dropdown{
    background-color: #fff!important;
}
/* .nav-item:hover ~ header, */
/*header:has(.nav-item:hover) {  Modern browsers */
/*    padding-bottom: 60px; /* Expands smoothly */
/* } */


.btn {
    position:relative;
    margin:auto;
    padding: 12px 20px;
    background-color: #190d771c;
    color: #fff!important;
    text-decoration:none!important;
    width:300px;
    text-decoration: none;
    font-size: 12px;
    font-weight:700;
    border-radius:5px;
    border-style: solid;
    border-color: #ffffffb2;
    border-width: 1px;
    top:75px;
}

.btn:hover {
    background-color: #190d77;
    border-style: solid;
    border-color: #ffffff;
    transition:0.5s;
}

.slider-content .btn {
    position:relative;
    top:0;
    left:0;
}

.reverse{
    flex-direction: row-reverse;
}

:root{
    --bg-image:url('../images/hero1.jpg');
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from{
        opacity: 0;
        transform: translateX(-100px) translateY(20px);
    }
    to {
        opacity: 100;
        transform: translateX(0px);
    }

}

@keyframes slideInbtn {
    from{
        opacity: 0;
        transform: translateX(-100px) translateY(20px);
    }
    to {
        opacity: 100;
        transform: translateX(0px);
    }

}

.vision{
    position:relative;
    width:100%;
    height:90vh;
    min-height:fit-content;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color:#0b0348;
    background-image:url('../images/vision-bg3.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    scroll-snap-align: center;
}

.uk-button-primary{
    background-color: #ffffff38!important;
    color:#fff!important;
    border-style: solid;
    border-color: #ffffff7a;
    border-width: 1px;
    font-weight: 600;
    border-radius: 10px;
}

.uk-button-primary:hover{
    background-color: rgb(0, 131, 146)!important;
    border-color: #ffffffbd;
    transition:0.5s;
}

.uk-first-column{
    background-color: rgba(0, 132, 146, 0)
}

button {
    position: absolute;
    top: 50%;
    height:40px;
    width:40px;
    transform: translateY(-50%);
    background-color: rgba(117, 142, 153, 0.4);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

/*product page*/
.overflower{
    overflow: hidden;
}

.vision-img-overlay{
    position: absolute;
    align-self: baseline;
    top:10%;
    animation: dimming 1s ease-out;
    filter:brightness(0.75);
}

.vision-text-overlay{
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-self:flex-end;
    align-items: center;
    text-align:justify;
    width: 60%;
    min-width: 1000px;
    height:80%;
    color: #fff;
    font-family: "Raleway";
    font-size: 3rem;
    padding-top: 7%;
    animation: fadeIn 1s;
}

.vision-text-overlay p{
    width:90%;
    text-align:justify;
    font-weight: 500;
    font-size: calc(20px + 3vh);
}

.m-vision-img-overlay{
    display:none;
}

@keyframes dimming{
    0% {
        filter:brightness(1.1);
    }
    100% {
        filter:brightness(0.75);
    }
}

/*content*/

/* about */
.about-section{ 
    position:relative;
    display:flex;
    width:100%;
    height:fit-content;
}

.about-container{
    position:relative;
    display:flex;
    width:100%;
    height:100%;
    justify-content:space-between;
    align-items: center;
    background-color: #0b0348;
    border-radius: 0px;
    flex-wrap: wrap;
    /* background-color:#8cb1e7; */
    /* box-shadow: inset 0 0 15vh #00000017; */
}

.about-content{
    position:relative;
    display:flex;
    margin-left:5%;
    height:100%;
    width:50%;
    bottom:5%;
    align-items:center;
    justify-content:center;
    color:#fff;
    padding: 50px;
}

.about-logo{
    display:flex;
    height:100%;
    width:100%;
    flex-wrap:wrap;
}

.about-logo img{
    max-height:90px;
    width:auto;
    padding:10px;
}

.contact-content{
    position:relative;
    display:flex;
    margin-left:5%;
    height:50%;
    width:30%;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-align: right;
}


.about-text{
    display:flex;
    position:relative;
    align-items:left;
    flex-direction: column;
}

.about-text h3{
    font-size: 3rem;
    margin-bottom:1vh;
    color:#fff;
}

.about-text p{
    /* text-align: justify; */
    font-size: 1.2rem;
    margin-top:0px;
    font-weight: 400;
    width:90%;
}

.contact-text{
    display:flex;
    position:relative;
    /* align-items:left; */
    flex-direction: column;
    /* padding:50px; */
}

.contact-text h3{
    font-size: 4vh;
    margin-bottom:1vh;
}

.contact-text p{
    /* text-align: justify; */
    font-size: 2vh;
    margin-top:0px;
    font-weight: 400;
    width:90%;
}

/*media*/
@media (max-height:900px){
    .latin{
        display:none;
    }
}

@media (max-width: 1400px){
    .nav-item{
        padding:0px 2px 0px;
    }
    .nav-item-a{
        padding:0px 2px 0px;
    }
    .logo img{
        height:36px!important;
        width:100px!important;
    }
}


@media (max-width: 1024px){
    /* *{
        outline:1px solid red;
    } */
    body{
        /* margin-top:60px; */
        /* overflow-x:hidden; */
        height:auto;
        max-width:100%
    }
    html{ 
        /* overflow-x:hidden; */
        scroll-padding-top:10vh;
        scroll-snap-type: none;
        height:auto;
        max-width:100%;
    } 
    header{
        flex-direction:column;
        height:10vh;
        width:100vw;
        top:0px;
        position:fixed;
        padding:0px !important;
        justify-content:center;
        align-items:center;
    }

    header:has(#menu-toggle:checked) .logo img{
        padding-top:1vh;
    }

    header .logo img{
        height:5vh!important;
        padding-top:1vh!important;
        visibility: visible;
    }
    nav{
        display:none;
        height:auto;
    }
    .phone-btn{
        visibility:visible;
        display:contents;
        margin:10px;
    }

    #menu-toggle:checked ~ nav{
        display:flex;
    }

    #menu-toggle:checked ~ nav ul{
        visibility:visible;
        flex-direction: column;
        background-color: #fff;
        align-items: center;
        margin:10px;
    }

    #menu-toggle:checked ~ nav ul li {
        margin: 10px 0;
        /* height:40px; */
        /* background-color: #fff; */
    }

    #menu-toggle:checked ~ header,
    header:has(#menu-toggle:checked){
        height:100vh;
        justify-content:flex-start;
    }

    #menu-toggle:checked ~ .logo{
        padding-top:11px;
    } 

    #menu-toggle:checked ~ nav .dropdown{
        visibility:hidden;
    } 

    .dropdown{
        display:none !important;
    }

    .vision{
        height:fit-content;
        flex-direction: column;
    }

    .vision-img-overlay{
        display:none;
    }

    .m-vision-img-overlay{
        position: absolute;
        display: flex;
        z-index: -1;
        height:auto;
        width:100%;
        max-width:600px;
        filter: brightness(0.7);
    }

    .uk-h3, h3 {
        line-height: 0.8;
        margin-bottom: 50px;
}

    .vision-text-overlay{
        align-self: center;
        width:90%;
        text-align: center;
        min-width: 300px;
    }

    .vision-text-overlay h3{
        font-size: 75px!important;
        padding:100px 0px 50px!important;
        display:flex;
        justify-content: center;
        align-items: center;
        z-index: 3;
    }

    .vision-text-overlay p{
        width:100%;
        justify-content: center;
        font-size: 20px!important;
        text-align: center;
        padding:0px 0px 40px!important;
        z-index: 3;
    }

    .btn{
        width:200px;
    }

    .contact-section{
        padding:40px 0px 0px;
    }

    .contact-container a{
        width:250px;
    }

    button {
        padding: 8px;
    }

    .content-container{
        flex-wrap: wrap;
        padding-top:10px;
    }

    .about-container{
        width:100%;
        justify-content:center;
    }

    .about-content{
        width:100%;
        padding:50px 10px 50px;
    }

    .contact-content{
        text-align: center;
        width:70%;
    }

    .contact-container{
        text-align: center;
        font-size: 2rem;
    }

    .transparent-header{
        background-color: #ffffff!important;
        width:100%!important;
    }

    .transparent-header .nav-item li a{
        color:#15355E!important;
    }
    
    .transparent-header .nav-item-a li a{
        color:#15355E!important;
    }

    .transparent-header .logo img{
        filter:brightness(1)!important;
    }

}

@media(prefers-reduced-motion){
    .hidden{
        transition:none;
    }
}

.transparent-header{
    background-color: #00000000;
    position:fixed;
    width:89.4%;
}

.transparent-header .nav-item li a{
    color:hsl(0, 0%, 100%);
    /* color:hsl(214, 63%, 23%); */
}

.transparent-header .nav-item-a li a{
    color:#fff;
}

.transparent-header .dropdown{
    color:#fff;
    background-color: #00000000;
}

.transparent-header .logo img{
    filter:brightness(100);
}