@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@400&family=Inter:wght@300,400;700&display=swap');


/* Basic Styles */
body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1vw;
    line-height: 1.5;
    margin: 0;
    line-height: 1.5;
    background-color: #000;
    color: #fff;

}

h1, h2, h3, h4, h5, h6{
    font-family: 'Bebas Neue', cursive;
    line-height: 1;
}
h1{ font-size: 4vw; line-height: 4vw; margin: 0px; }
h2{ font-size: 1.5vw; font-weight: 700; font-family: 'Inter', sans-serif; }
h3{ font-size: 1.5vw; }
h4{font-size: 1.3vw; font-family: 'Inter', sans-serif; margin:0px; line-height: 1.3vw; font-weight: 300; }

ul li{ margin-top: 15px; }
.btn {
    padding: 10px 50px;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
}

.bgWhite{
   background-color: #ffffff;
    color: #000; 
}

.bgGold{
    background:linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    color: #000;
}

.clear{
    width: 100%; 
    clear:both;
    height: 1px;
}

.block{
    display: block;
    width: 100%;
    padding: 40px 0px;
}

.blockTitle{
    text-align: center;
    width: 35%;
    margin: 100px auto;
    max-width: 600px;
}
.blockTitle img{
    width: 100%;
}

.blockContent{
    position: relative;
    max-width: 1920px;
    margin: auto;

}





header {
    padding: 60px 70px;
    width: calc(100% - 140px);
    background: url(../img/header.jpg) no-repeat center;
    background-size: cover;
}

header .logo {
    width: 10%;
    float:left; 
    margin: 0px;
    max-width: 200px;
}

header nav{
    margin: 0px;
    padding: 0;
    float:right;
}

header nav ul {
    list-style: none;
}

header nav ul li {
    margin-left: 30px;
    display: inline-block;
    margin: 0px 20px;
    list-style: none;
}

header nav ul li a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}


.burger-menu {
   display: none;
   cursor: pointer;
   float: right;
   margin-top: 10px;
}

.burger-menu span {
   display: block;
   width: 25px;
   height: 3px;
   background-color: #fff;
   margin: 5px 0;
}


.sloganBox{
    width: 50%; 
    margin: 10% auto; 
    text-align: center;
}

.sloganTitle{
    font-family: 'Bebas Neue', cursive;
    font-size: 3rem;
    line-height: 4rem;
    margin: 50px auto;
}

.sloganTitleSecond{
    margin: 0px auto;
    display: block;
}

.sloganTitleGrey{
    font-size: 4rem;
    color: #939598;
    margin: 20px auto 10px auto;
    display: block;
}

.sloganText{
    margin: 10px auto;
    font-size: 1.2vw;
}

.sloganBtn{ margin-top: 20px; }




.pakalpojumiBlock{
    display: block;
}
.pakalpojumiBlock:first-child{
    margin-top: 40px;
}

.pakalpojumiTitle{
    font-family: 'Bebas Neue', cursive;
    width: 40%;
    margin-top: 2%;
    left: 22%;
    z-index: 3;
    font-size: 7vw;
    line-height: 7vw;
    position: absolute;
}
.pakalpojumiTitle2{
    left: 47%;
}

.pakalpojumiTitle3{
    left: 36%;
}

.pakalpojumiText{
    width: 38%;
    margin: 12% 5% 0% 5%;
    float: left;
}

.pakalpojumiImages{
    width: 50%;
    float:right;
}
.pakalpojumiText2{
    float:right;
    margin-top: 16%;
}
.pakalpojumiImages2{
    float:left;
}


.pakalpojumiIageItem{
    width: 100%;
}
.pakalpojumiImageItem img{width: 100%;}

.slick-dots{bottom: 10px;}
.slick-dots li {
    width: 18px;
    height: 18px;
}
.slick-dots li button {
    border-radius: 50%;
    width: 16px;
    height: 16px;
}
.slick-dots li button:before {
    font-size: 18px !important;
    color: #000;
    opacity: 1;
}

.slick-dots li.slick-active button:before {
    color: transparent !important;
}

.slick-dots li.slick-active button {
    background:linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
}



.contactsBlock{
    padding: 20px;
    width: auto;
    position: absolute;
    left: 40px; bottom: 40px;
    background-color: #1a1a1a; 
    z-index: 900;
}
.contactsBlock ul{ list-style: none; padding: 0px; margin: 0px; }
.contactsBlock ul li{ margin-top: 10px; }
.contactIcon, .contactText{ display: inline-block; vertical-align: middle; }
.contactIcon img{width: 100%;}
.contactIcon{width: 48px; margin-right: 10px; }
.contactText a{color: #fff; text-decoration: none; }

.map{
    width: 100%;
    aspect-ratio: 16/9;
    position:relative;
}
.map img{width: 100%;}
.mapPin{ position: absolute; top: 30%; left: 40%; width: 7%; }
.mapPin img{width: 100%;}

.map-iframe {
    width: 100%;
    height: 600px;
    border: 0;
}

.contactForm{
    padding: 40px;
    width: auto;
    position: absolute;
    right: 40px; top: 40px;
    background-color: #1a1a1a; 
    z-index: 900;
    max-width: 20%;
}
.contactFormGroup{
    margin-top: 20px;
    width: 100%;
}
.contactFormGroup input, .contactFormGroup textarea{
    font-family: 'Inter', sans-serif;
    font-size: 1vw;
    color: #f0d17e;
    background-color: #000;
    border:none;
    padding: 10px 20px;
    width: calc(100% - 40px);
    outline: none;
}
.formBtn{
    margin: auto;
}
.formBtn img{ width: 24px; margin-right: 10px; margin-top: 3px;  }

.contactFormTitle p{ font-size: 0.8vw; }

.about{
    width: 80%; max-width: 1140px; margin: auto;
}

.aboutLeft{float:left; width: 38%; padding: 5% 0% 0% 0%; }
.aboutLeft img{width: 100%;}
.aboutRight{float:right; padding: 5%; width: 48%; }

.aboutImages{
    width: 100%;
    margin-top: 10px;
    text-align: center;
}
.aboutImage{
    margin: 1%; width: 28%;
    background-color: #e6e7e8;
    aspect-ratio: 1/1;
    display: inline-block;
    vertical-align: top;
}


footer {
   
}

.footer-content {
    width: 100%;
    text-align:center;
    padding-top: 50px;
}

.footer-logo img {
    height: 50px;
}

.footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}
.footer-nav ul li{
    display: inline-block;
    vertical-align: middle;
    margin: 10px;
}

.footer-nav ul li a {
    color: #808285;
    text-decoration: none;
}
.footerLine{
    background:linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    width: 100%;
    clear:both;
    height: 5px;
    margin: 30px auto 10px auto;
}
.footer-eu {
    padding: 20px;
    width: calc(100% - 40px);
}

.footerEuLeft{
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    margin-right: 10px;
}

.footerEuRight{
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 230px);
}

.footer-eu img {
   width: 100%;
}

.footer-eu p{
    font-size: 0.8em;
    text-align: left;
}

/* custom dropdown styled like other inputs */
.custom-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 10px 14px;
  border-radius: 6px;
  background: #000;
  cursor: pointer;
  user-select: none;
  color: #f0d17e;
  box-sizing: border-box;
}
.custom-select:focus { outline: 2px solid rgba(0,0,0,0.08); }

.custom-select .select-value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select .select-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  opacity: 0.9;
  color: #f0d17e;
}

.select-options {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #1a1a1a;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  z-index: 30;
  max-height: 220px;
  overflow: auto;
}

.custom-select.open .select-options {
  display: block;
}

.select-options li {
  padding: 10px 14px;
  cursor: pointer;
    color: #fff;
}
.select-options li:hover {
color: #f0d17e;
}

/* small visual change when selected */
.custom-select .select-value.placeholder {  color: #f0d17e; }
.formResponse{display: none;}


@media all and (min-width: 1920px){
   

    /* font sizes */
    body, .contactFormGroup input, .contactFormGroup textarea {
     font-size: 17px;
     line-height: 25px;
    }
    h1{
        font-size: 90px;
        line-height: 90px;
    }
    h2{
        font-size: 25px;
        line-height: 25px;
    }
    h4{
        font-size: 25px;
        line-height: 25px;
    }
    .sloganText{
        font-size: 25px;
        line-height: 35px;
    }
    .pakalpojumiTitle{
        font-size: 130px;
        line-height: 130px;
    }
    .contactFormTitle p{
        font-size: 15px;
        line-height: 15px;
    }

}

@media all and (max-width: 1024px){
    body, .contactFormGroup input, .contactFormGroup textarea {
     font-size: 2vw;
     line-height: 2.3vw;
    }
    .sloganBox {width: 100%;}
    .sloganText{font-size: 2.2vw; line-height: 2.5vw;}
}

@media all and (max-width: 980px){
    header nav {
        display: none;
        width: 100%;
        text-align: center;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        background-color: rgba(0,0,0,0.9);
        z-index: 1000;
        padding-top: 60px;
    }

    header nav.active {
        display: block;
    }

    header nav ul li {
        display: block;
        margin: 20px 0;
    }

    .burger-menu {
        display: block;
        position: absolute;
        top: 60px;
        right: 70px;
        z-index: 1001;
    }
    h2{font-size: 2.5vw; line-height: 3vw;}
    h4{font-size: 3.5vw; line-height: 4vw;}
    .contactFormTitle p{ font-size: 15px; line-height: 17px; }
    ul li{ margin-top: 10px; }
    .blockTitle{ width: 60%; }
    .pakalpojumiTitle{ position: relative; left:0; margin: 2% auto 0% auto; width: 80%; text-align: center; }
    .pakalpojumiText{ order:1; width: 90%; margin: 5%; }
    .pakalpojumiImages{ order: 2; width: 100%; }
    .pakalpojumiBlock{ margin-top: 10%; }

    .contactsBlock, .contactForm{ position: relative; width: 80%; padding: 10%; margin: auto; left:0; right: 0; top:0; bottom:0; }
    .contactsBlock{ order: 1; }
    .contactForm{ order: 2; max-width: 100%;}
    .map{ order: 3; }
    .aboutLeft, .aboutRight{float:none; width: 100%; margin: 10% 0%; padding: 0px; }
    .aboutImage{width: 100%; margin: 2% 0%;}
    .footerEuLeft, .footerEuRight{
        width: 90%; display: block; margin: 2% auto; max-width: 90%;
    }

}

@media all and (max-width: 640px){
    body, .contactFormGroup input, .contactFormGroup textarea {
     font-size: 4vw;
     line-height: 5vw;
    }
    h1{ font-size: 14vw; line-height: 14vw; }
    h2{ font-size: 3.5vw; line-height: 4vw; }
    h4{font-size: 6.5vw;}
    .sloganText{ font-size: 3.2vw; line-height: 5vw; }
    header .logo{ width: 30%; }
    .map{aspect-ratio: 1/1;}

}

@media all and (max-width: 480px){
    
}