html {
    scroll-behavior: smooth;
}   
body {
    margin: 0;
    font-family: "Montserrat", sans-serif;
}
#head {
    width: 100%;
    margin: 0;
    height: 600px;
    background-color: rgb(49, 49, 49);
}

.hamburger {
    display: none;
}

                 /* navbar */
.navbar {
    position: fixed; 
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgb(30, 39, 58);
    width: 100%;
    height: 65px;
}
.logo {
    float: left;
    font-size: 13px;
    margin: -2px 0 0 60px;
    font-family: "Comfortaa", sans-serif;
    color: aliceblue;
    position: relative;
}

.logo .text1 a  {
       color: aliceblue;
       text-decoration: none;
}
.logo .text1 p  {
    margin-left: 13px;
    letter-spacing: 2px;
}
.logo .text2 a  {
       color: aliceblue;
       text-decoration: none;
}
.logo .text2 p {
    margin-top: -13px;
    letter-spacing: 2px;
}
.logo .text3 a  {
       color: rgb(164, 179, 230);
       text-decoration: none;
}
.logo .text3 p {
    margin-top: -13px;
    margin-left: 9px;
    font-size: 11px;
    color: rgb(164, 179, 230);
    font-style: bold;
}
.menu ul {
    float: right;
    display: flex;
    margin: 22px 710px 0 0;
    font-size: 17px;
}
.menu ul li {
    list-style: none;
    margin-right: 65px;
}
.menu ul li a {
    color: rgb(164, 179, 230);
    text-decoration: none;
    cursor: pointer;
    font-weight: 400;
}
.menu ul li a:hover {
    color: white;
}
                     /* bacground-image */
.background-image {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-image: url("img/Bluee.png");
    background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.content-img {
    position: relative;
    width: 360px;
    height: 560px;
    left: 70%;
    top: 110px;
}
.content-img img {
    width: 360px;
    height: 560px;
}
 .content-text {
    position: relative;
    animation: slideIn 1s ease-out forwards;
    width: 550px;
    height: 200px;
    top: -230px;
    left: 20%;
    text-align: center;
 }
 .content-text .text1 {
    color: aliceblue;
    font-size: 28px;
    font-weight: 400;
    font-family: "Playfair Display", serif;

 }
 .content-text .text2 {
    color: aliceblue;
    font-size: 18px;
    font-weight: 300;
    
 }
 .button-box  {
    margin-top: 30px;
} 
 .button-box a {
    font-size: 14px;
    padding: 9px 18px;
    border-radius: 5px;
    background-color: rgba(205, 152, 179, 0);
    border: 2.2px solid rgb(164, 179, 230);
    color: white;
    margin: 0 7px;
    text-decoration: none;
    transition: all 0.3s ease;

   }
.button-box a:hover {
    border: 2px solid white;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  }        
 
                        /* about */

#about {
    width: 100%;
    height: 1780px; 
    display: flex;
    background-color: rgb(227, 227, 227);
 }
 .menu ul .about-color li a {
    color: aliceblue;
 }
 .about-img img {
    width: 400px;
    height: 500px;
    margin: 120px 400px 0 40%;
    position: relative;
    animation: slideIn 1s ease-out forwards;
 }
 .about-text {
    width: 450px;
    margin: 100px 0 0 0;
    position: relative;
    animation: slideIn 1.3s ease-out forwards;
 }
 .about-text h2 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
 }
 .about-text h3 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 22px;
    /* line-height: 1; */

 }
 .about-text p {
    font-size: 17px;
    margin-top: 0;
 }
 .text-malipodnaslov {
    font-weight: 500;
    margin-top: 8px;
    font-size: 18px;
 }
 
 .text-malipodnaslov i {
     color: rgb(30, 39, 58);
     font-size: 12px;
 }
.about-box  {
    margin: 35px 0 0 -7px;
} 
 .about-box a {
    font-size: 15px;
    font-weight: 300;
    padding: 8px 9px;
    border-radius: 5px;
    background-color: rgba(227, 227, 227);
    border: 2px solid rgb(30, 39, 58);
    color: rgb(30, 39, 58);
    margin: 0 7px;
    text-decoration: none;
    transition: all 0.3s ease;
   }
.about-box a:hover {
    border: 2px solid rgb(30, 39, 58);
    background-color: rgb(30, 39, 58);
    color: rgb(227, 227, 227);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  }    
 
                              /* services */

 #services {
    width: 100%;
    height: 650px;
    background-color: rgb(227, 227, 227);
    margin: 0;
 }
 
 .services-content {
    width: 56%;
    display: flex;
    margin: 90px auto;
    opacity: 0;
    transform: translateY(120px);
    transition: all 1.3s ease;
 }
 .services-content.show {
  opacity: 1;
  transform: translateY(0);
}
 .services-naslov {
   width: 150px;
   display: block;
   margin: 0 auto;
 }
 .services-naslov h1 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 38px;
    color: rgb(30, 39, 58);
    padding-top: 100px;
    padding-bottom: 20px;
    margin: 0;
    text-align: center;
 }
 .services-container {
    width: 230px;
    height: 230px;
    border-radius: 100%;
    margin: 0 50px;
 }
 .services-container a {
    text-decoration: none;
 }
 .services-container a:hover h2 {
    color: rgb(97, 107, 134)
 }
 .services-container img {
    width: 230px;
    height: 230px;
    border-radius: 100%;
 }
 .services-container h2 {
    text-align: center;
    color: rgb(30, 39, 58);
    font-weight: 400;
 }
 
                                              /* detaljna-analiza */
#detaljna-analiza {
    width: 100%;
    height: 2550px;
    background: rgb(227, 227, 227);
}
.menu ul .detaljna-color li a {
    color: aliceblue;
 }
  .detaljna-analiza-pocetna {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
    animation: slideIn 1s ease-in-out forwards;
}
 .detaljna-analiza-slika {
  width: 500px;
  height: 500px;
  margin: 110px auto 0 auto;
}
.detaljna-analiza-slika img {
  width: 500px;
  height: 500px;
  border-radius: 100%;
}
 .detaljna-analiza-naslov {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    text-align: center;
}
.detaljna-analiza-naslov p {
      font-family: "Cormorant Garamond", serif;
      font-weight: 300;
      letter-spacing: 0.5px;
      font-size: 56px;
      color: aliceblue;
     text-shadow: 0 0 30px rgb(19, 19, 19), 0 0 30px rgb(22, 22, 22);
}         
  .detaljna-analiza-text {
    width: 630px;
    margin: 60px auto 0 auto;
    text-align: center;
    animation: slideIn 1s ease-in-out forwards;

}
.detaljna-analiza-text h2 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
}
.detaljna-analiza-text h3 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 22px;
}
.detaljna-analiza-text p {
    font-size: 17px;
    margin-top: 0;
}
.detaljna-analiza-text p i {
    font-size: 15px;
    margin-top: 0;
}
.detaljna-analiza-malipodnaslov {
    font-weight: 500;
    margin-top: 8px;
    font-size: 18px;
 }
 
 .detaljna-analiza-malipodnaslov i {
     color: rgb(30, 39, 58);
     font-size: 12px;
 }
 .detaljna-analiza-malipodnaslov2 {
    font-size: 17px;
    margin-top: 8px;
 }
 .detaljna-analiza-malipodnaslov2 i {
     color: rgb(30, 39, 58);
     font-size: 11px;
 }
 .detaljna-analiza-content {
    width: 590px;
    border: 3px solid rgb(30, 39, 58);
    padding: 10px 20px;
    margin: 40px 0 40px 0;
    background-color: rgb(237, 237, 237);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
 }
 .detaljna-analiza-cena {
    width: 330px;
    border: 3px solid rgb(30, 39, 58);
    padding: 7px 0 13px 0;
    background-color: rgb(237, 237, 237);
    border-radius: 3%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    margin: 20px auto;
 }
 .detaljna-analiza-content2 {
    width: 640px;
    display: flex;
    margin: 30px auto;
 }
 .detaljna-analiza-malikontejner {
    width: 320px;
    border: 3px solid rgb(30, 39, 58);
    padding: 7px 10px;
    background-color: rgb(237, 237, 237);
    border-radius: 3%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    margin: 0 15px;
 }
 
                                  /* pisani-izvestaji */

#pisani-izvestaji {
    width: 100%;
    height: 1080px;
    background: rgb(227, 227, 227);
}
.menu ul .pisani-color li a {
    color: aliceblue;
 }
  .pisani-izvestaji-pocetna {
    position: relative; 
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
    animation: slideIn 1s ease-in-out forwards;
}
 .pisani-izvestaji-slika {
  width: 500px;
  height: 500px;
  margin: 110px auto 0 auto;
}
.pisani-izvestaji-slika img {
  width: 500px;
  height: 500px;
  border-radius: 100%;
}
 .pisani-izvestaji-naslov {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    text-align: center;
}
.pisani-izvestaji-naslov p {
      font-family: "Cormorant Garamond", serif;
      font-weight: 300;
      letter-spacing: 0.5px;
      font-size: 58px;
      color: aliceblue;
      text-shadow: 0 0 30px rgb(19, 19, 19), 0 0 30px rgb(22, 22, 22);

}         
.pisani-izvestaji-text {
    width: 630px;
    margin: 60px auto 0 auto;
    text-align: center;
        animation: slideIn 1s ease-in-out forwards;

}
.pisani-izvestaji-text h2 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
}
.pisani-izvestaji-text h3 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 22px;
}
.pisani-izvestaji-text p {
    font-size: 17px;
    margin-top: 0;
}
.pisani-izvestaji-text2 {
    display: flex;
    width: 100%;
    height: 1400px;
    background-color: rgb(237, 237, 237);
}
.pisani-izvestaji-img img {
    width: 450px;
    height: 670px;
    margin: 100px 0 0 80px;
}
.pisani-izvestaji-textcont {
    width: 450px;
    margin: 80px 0 0 100px;
}
.pisani-izvestaji-textcont h2 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
}
.pisani-izvestaji-textcont h3 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 22px;
}
.pisani-izvestaji-textcont p {
    font-size: 17px;
    margin-top: 0;
}
.pisani-izvestaji-malipodnaslov {
    font-weight: 500;
    margin-top: 8px;
    font-size: 18px;
}
.pisani-izvestaji-malipodnaslov p i {
     font-weight: 500;
     font-size: 17px;
 }
.pisani-izvestaji-malipodnaslov2 {
    font-size: 17px;
    margin-top: 8px;
}
.pisani-izvestaji-malipodnaslov2 i {
     color: rgb(30, 39, 58);
     font-size: 11px;
}
.pisani-izvestaji-malipodnaslov2 b {
    font-weight: 500;
}
.pisani-izvestaji-cena {
    width: 260px;
    border: 3px solid rgb(30, 39, 58);
    padding: 7px 0 13px 20px;
    background-color: rgb(237, 237, 237);
    border-radius: 3%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    margin: 20px auto;
 }
 .pisani-izvestaji-text3 {
    display: flex;
    width: 100%;
    height: 1550px;
    background-color: rgb(227, 227, 227);
}
.pisani-izvestaji-text4 {
    display: flex;
    width: 100%;
    height: 1140px;
    background-color: rgb(237, 237, 237);
}
.pisani-izvestaji-text5 {
    display: flex;
    width: 100%;
    height: 1330px;
    background-color: rgb(227, 227, 227);
}
.pisani-izvestaji-text6 {
    display: flex;
    width: 100%;
    height: 990px;
    background-color: rgb(237, 237, 237);
}

                                     /* astro-kockice */

#astro-kockice {
    width: 100%;
    height: 1650px;
    background: rgb(227, 227, 227);
}
.menu ul .kockice-color li a {
    color: aliceblue;
 }
  .astro-kockice-pocetna {
    position: relative; 
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
    animation: slideIn 1s ease-in-out forwards;
}
 .astro-kockice-slika {
  width: 500px;
  height: 500px;
  margin: 110px auto 0 auto;
}
.astro-kockice-slika img {
  width: 500px;
  height: 500px;
  border-radius: 100%;
}
 .astro-kockice-naslov {
    position: absolute;
    top: 63%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    text-align: center;
}
.astro-kockice-naslov p {
      font-family: "Cormorant Garamond", serif;
      font-weight: 300;
      letter-spacing: 0.5px;
      font-size: 58px;
      color: aliceblue;
      text-shadow: 0 0 30px rgb(19, 19, 19), 0 0 30px rgb(22, 22, 22);

}      
.astro-kockice-text {
    width: 630px;
    margin: 60px auto 0 auto;
    text-align: center;
    animation: slideIn 1s ease-in-out forwards;
}
.astro-kockice-text h2 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
}
.astro-kockice-text h3 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 22px;
}
.astro-kockice-text p {
    font-size: 17px;
    margin-top: 0;
}
.astro-kockice-text p i {
    font-size: 15px;
    margin-top: 0;
}
.astro-kockice-malipodnaslov  {
    font-weight: 500;
    margin-top: 8px;
    font-size: 18px;
 }
 
 .astro-kockice-malipodnaslov p i {
     font-weight: 500;
     font-size: 17px;
 }
 .astro-kockice-malipodnaslov i {
     color: rgb(30, 39, 58);
     font-size: 12px;
 }
 .astro-kockice-malipodnaslov2 {
    font-size: 17px;
    margin-top: 8px;
 }
 .astro-kockice-malipodnaslov2 i {
     color: rgb(30, 39, 58);
     font-size: 11px;
 }   
.astro-kockice-cena {
    width: 330px;
    border: 3px solid rgb(30, 39, 58);
    padding: 7px 0 13px 0;
    background-color: rgb(237, 237, 237);
    border-radius: 3%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    margin: 20px auto;
 }
  @keyframes slideIn {
  from {
    transform: translateY(80%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
                                     /* kontakt */

#kontakt {
    background-color: rgb(30, 39, 58);
    width: 100%;
    height: 1255px;
}
.kontakt-text {
    width: 600px;
    margin: 0 auto 0 auto;
    text-align: center;
    color: rgb(226, 226, 227);
    padding-top: 50px;
}
.kontakt-text h1 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    padding-bottom: 30px;
    color: aliceblue;
}
.kontakt-text h2 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    color: aliceblue;
}
.kontakt-text h3 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 22px;    
    color: aliceblue;
}
.kontakt-text p {
    font-size: 17px;
    margin-top: 0;
}
.kontakt-text p i {
    font-size: 15px;
    margin-top: 0;
}
 .kontakt-malipodnaslov2 {
    font-size: 17px;
    margin-top: 8px;
 }
 .kontakt-malipodnaslov2 i {
     color: rgb(164, 179, 230);
     font-size: 11px;
 }   
 .kontakt-malipodnaslov2 b {
    font-weight: 500;
}
.insta-box  {
    margin: 60px auto 30px auto;
    width: fit-content;
} 
 .insta-box a {
    display: inline-block;
    text-align: center;
    line-height: 1.7;
    font-size: 17px;
    font-weight: 400;
    padding: 15px 30px;
    border-radius: 5px;
    background-color: rgb(30, 39, 58);
    border: 2px solid rgb(227, 227, 227);
    color: rgb(227, 227, 227);
    text-decoration: none;
    transition: all 0.3s ease;
   }
   .insta-box i {
    margin-right: 3px;
    color: rgb(164, 179, 230);
   }
.insta-box a:hover {
    border: 2px solid rgb(164, 179, 230);
    background-color: rgb(30, 39, 58);
    color: rgb(227, 227, 227);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  }    
  .email-box  {
    margin: 0 auto;
    width: fit-content;
} 
  .email-box a {
    display: inline-block;
    text-align: center;
    line-height: 1.5;
    font-size: 17px;
    font-weight: 400;
    padding: 16px 32px;
    border-radius: 5px;
    background-color: rgb(30, 39, 58);
    border: 2px solid rgb(30, 39, 58);
    color: rgb(227, 227, 227);
    text-decoration: none;
    transition: all 0.3s ease;
   }
   .email-box i {
    margin-right: 3px;
    color: rgb(227, 227, 227);
   }
  #footer {
    width: 500px;
    text-align: center;
    margin: 75px auto 0 auto;
  }
  #footer p {
    font-size: 14px;
    color: rgb(227, 227, 227);
  }
  #footer a {
    text-decoration: none;
    color: rgb(164, 179, 230);
  }


                        /* laptop */

                   /* info-navbar */

 @media screen and (min-width: 1100px) and (max-width: 1550px) {

#head {
    width: 100%;
    height: 95vh;
}
.menu ul {
    margin: 22px 22% 0 0;
}
                     /* bacground-image */

.background-image {
    width: 100%;
    height: 100vh;
    background-image: url("img/blueee.png");
    background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.content-img {
    left: 65%;
    top: 107px;
}
.content-text {
    top: -320px;
    left: 10%;
 }

                                  /* about */
 
 .about-img img {
    margin: 120px 240px 0 22%;
 } 
                                  /* services */

 .services-content {
    width: 70%;
    display: flex;
    margin: 50px auto;
 }
 .services-naslov {
   width: 150px;
   margin: 0 0 0 550px;
 }
 
}
                              /* tablet */

@media screen and (min-width: 550px) and (max-width: 1099px) {

#head {
    width: 100%;
    height: 810px;
}
.logo {
    margin: -2px 0 0 40px;
}
.hamburger {
        display: block;
        float: right;
        margin: 20px 40px 0 0;
        cursor: pointer;
    }
.hamburger .line {
        background-color: rgb(164, 179, 230);
        width: 25px;
        height: 2.5px;
        margin: 4px;
        border-radius: 10px;
    }
.menu {
        position: absolute;
        height: 0;
        width: 23vw;
        top: 70px;
        right: 0;
        background-color: rgb(34, 39, 36);
        transition: 0.3s;
        overflow: hidden;
        border-bottom-left-radius: 10px;
    }
.menu.active {
        height: 190px;
        border-top: 1.5px solid rgb(164, 179, 230);
        border-left: 1.5px solid rgb(164, 179, 230);
        border-bottom: 1.5px solid rgb(164, 179, 230);
    }
.menu ul {
        display: block;
        margin: 10px auto 0 auto;
        padding-left: 20px;
        width: fit-content;
        float: none;
        font-size: 16px;
        transition: 0.5s;
        opacity: 0;
    }
.menu ul li {
        list-style: none;
        margin-top: 15px;
    }
    .menu ul li a {
        color: rgb(255, 255, 255);
        cursor: pointer;
    }
    .menu ul li a:hover {
        color: rgba(255, 255, 255, 0.222);
    }
    .menu.active ul {
        opacity: 1;
    }

.menu ul {
    margin: 32px 5% 0 0;
   }
                     /* bacground-image */

.background-image {
    width: 100%;
    background-image: url("img/blueeee.png");
    height: 810px;
    background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  }
.content-img {
    width: 250px;
    height: 370px;
    left: 34%;
    top: 440px;
}
.content-img img {
    width: 250px;
    height: 370px;
}
.content-text {
    width: 450px;
    height: 200px;
    top: -280px;
    left: 20%;
 }

                  /* about */

#about {
    height: 2470px; 
    display: block;
 }

 .about-img img {
    margin: 140px 0 0 21%;
 }
 .about-text {
    width: 420px;
    margin: 80px 0 0 21%;
 }

                   /* services */

 #services {
    width: 100%;
    height: 1300px;
 }
 
 .services-content {
    width: 31%;
    display: block;
    margin: 50px auto;
 }
 .services-naslov {
   width: 150px;
   display: block;
   margin: 0 auto;
 }
 
 .services-container {
    margin: 50px 0 120px 0;
 }

                  /* detaljna-analiza */

#detaljna-analiza {
    height: 2950px;
}
 .detaljna-analiza-slika {
  width: 360px;
  height: 360px;
}
.detaljna-analiza-slika img {
  width: 370px;
  height: 370px;
}
.detaljna-analiza-naslov {
    top: 65%;
    width: 220px;
}
.detaljna-analiza-naslov p {
      font-size: 44px;

}         
  .detaljna-analiza-text {
    width: 450px;
}
.detaljna-analiza-content {
    width: 410px;
}
.detaljna-analiza-content2 {
    width: 450px;
    display: block;
    margin: 35px auto;
 }
 .detaljna-analiza-malikontejner {
    width: 220px;
    padding: 7px 10px;
    margin: 35px auto;
 }

                            /* pisani-izvestaji */

#pisani-izvestaji {
    height: 960px;
}
 .pisani-izvestaji-slika {
  width: 360px;
  height: 360px;
}
.pisani-izvestaji-slika img {
  width: 370px;
  height: 370px;
}
.pisani-izvestaji-naslov {
    top: 65%;
    width: 220px;
}
.pisani-izvestaji-naslov p {
      font-size: 44px;
}  
.pisani-izvestaji-text {
    width: 450px;
}       
.pisani-izvestaji-text2 {
    display: block;
    height: 2010px;
}
.pisani-izvestaji-img img {
    width: 450px;
    height: 550px;
    margin: 100px 0 0 16%;
}
.pisani-izvestaji-textcont {
    width: 450px;
    margin: 60px 16%;
}
.pisani-izvestaji-text3 {
    flex-direction: column-reverse;
    height: 2170px;
}

.pisani-izvestaji-text4 {
    display: block;
    height: 1750px;
}
.pisani-izvestaji-text5 {
    flex-direction: column-reverse;
    height: 1950px;
}
.pisani-izvestaji-text6 {
    display: block;
    height: 1600px;
}
                              /* astro-kockice */

#astro-kockice {
    height: 1560px;
}
 .astro-kockice-slika {
  width: 360px;
  height: 360px;
}
.astro-kockice-slika img {
  width: 370px;
  height: 370px;
}
.astro-kockice-naslov {
    top: 65%;
    width: 220px;
}
.astro-kockice-naslov p {
      font-size: 44px;
}   
.astro-kockice-text {
    width: 450px;
}      
                                     /* kontakt */
#kontakt {
    height: 1350px;
}
.kontakt-text {
 width: 450px;

}

}
                                /* mobil */
    
@media only screen and (max-width: 549px) {
  
#head {
    width: 100%;
    height: 800px;
    }
.logo {
    margin: -2px 0 0 40px;
}
.hamburger {
        display: block;
        float: right;
        margin: 20px 35px 0 0;
        cursor: pointer;
    }
.hamburger .line {
        background-color: rgb(164, 179, 230);
        width: 25px;
        height: 2.5px;
        margin: 4px;
        border-radius: 10px;
    }
.menu {
        position: absolute;
        height: 0;
        width: 30vw;
        top: 70px;
        right: 0;
        background-color: rgb(34, 39, 36);
        transition: 0.3s;
        overflow: hidden;
        border-bottom-left-radius: 10px;
    }
.menu.active {
        height: 165px;
        border-top: 1.5px solid rgb(164, 179, 230);
        border-left: 1.5px solid rgb(164, 179, 230);
        border-bottom: 1.5px solid rgb(164, 179, 230);
    }
.menu ul {
        display: block;
        margin: 10px auto 0 auto;
        padding-left: 20px;
        width: fit-content;
        float: none;
        font-size: 14px;
        transition: 0.5s;
        opacity: 0;
         margin: 28px 5% 0 0;
    }
.menu ul li {
        list-style: none;
        margin-top: 13px;
    }
    .menu ul li a {
        color: rgb(255, 255, 255);
        cursor: pointer;
    }
    .menu ul li a:hover {
        color: rgba(255, 255, 255, 0.222);
    }
    .menu.active ul {
        opacity: 1;
    }
    

                     /* bacground-image */

.background-image {
    width: 100%;
    background-image: url("img/blue1.png");
    height: 800px;
}

.content-img {
    width: 230px;
    height: 350px;
    left: 23%;
    top: 450px;
}
.content-img img {
    width: 230px;
    height: 350px;
}
.content-text {
    width: 85%;
    height: 200px;
    top: -240px;
    left: 7.5%;
    right: 7.5%;
 }
 .content-text .text1 {
    font-size: 24px;
 }
 .content-text .text2 {
    text-align: center;
    font-size: 15px;
 }
 .button-box  {
    margin-top: 40px;
} 
.button-box a {
    font-size: 13px;
    padding: 9.5px 16.5px;
    margin: 0 7px;
    border: 2px solid rgb(164, 179, 230);
}

                  /* about */

#about {
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    display: block;
    padding-bottom: 35px;
 }
 .about-img img {
    width: 323px;
    height: 430px;
    margin: 120px 0 0 6%;
 }
 .about-text {
    width: 310px;
    margin: 40px auto 0 auto;
 }

                  /* services */

 #services {
    width: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    padding-bottom: 35px;
 }
 
 .services-content {
    width: 60%;
    display: block;
    margin: 50px auto;
 }
 .services-naslov {
   width: 60%;
   display: block;
   margin: 0 auto;
 }
 .services-naslov h1 {
    padding-top: 60px;

 }
 .services-container {
    margin: 50px 0 120px 0;
 }
                              /* detaljna-analiza */
#detaljna-analiza {
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    padding-bottom: 30px;
}
 .detaljna-analiza-slika {
  width: 330px;
  height: 320px;
}
.detaljna-analiza-slika img {
  width: 330px;
  height: 330px;
}
 .detaljna-analiza-naslov {
    top: 65%;
    width: 180px;
}
.detaljna-analiza-naslov p {
      font-size: 40px;
}   
.detaljna-analiza-text {
    width: 305px;
}     
.detaljna-analiza-content {
    width: 270px;
}
.detaljna-analiza-content2 {
    width: 270px;
    display: block;
    margin: 35px auto;
 }
 .detaljna-analiza-malikontejner {
    width: 200px;
    padding: 7px 25px;
    margin: 35px auto;
 }    
 .detaljna-analiza-cena {
    width: 300px;
    margin: 5px auto 0 auto;
 }      

                                  /* pisani-izvestaji */
#pisani-izvestaji {
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    padding-bottom: 15px;

}
 .pisani-izvestaji-slika {
  width: 330px;
  height: 320px;
}
.pisani-izvestaji-slika img {
  width: 330px;
  height: 330px;
}
 .pisani-izvestaji-naslov {
    top: 65%;
    width: 180px;
}
.pisani-izvestaji-naslov p {
      font-size: 40px;
}   
.pisani-izvestaji-text {
    width: 305px;
}       
.pisani-izvestaji-text p {
    margin: 0;
    padding-bottom: 20px;
}
.pisani-izvestaji-text2 {
     display: block;
     min-height: 100svh;
     min-height: 100dvh;
     height: auto;
     padding-bottom: 30px;
}
.pisani-izvestaji-img img {
    width: 323px;
    height: 500px;
    margin: 60px 0 0 5%;
}
.pisani-izvestaji-textcont {
    width: 310px;
    margin: 30px auto 0 auto;
}
.pisani-izvestaji-text3 {
    flex-direction: column-reverse;
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    padding-bottom: 30px;
}
.pisani-izvestaji-text4 {
    display: block;
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    padding-bottom: 30px;
}
.pisani-izvestaji-text5 {
    flex-direction: column-reverse;
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    padding-bottom: 30px;
}
.pisani-izvestaji-text6 {
    display: block;
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    padding-bottom: 30px;
}
.pisani-izvestaji-cena {
    margin: 5px auto;
 }
 
                                /* astro-kockice */
#astro-kockice {
     min-height: 100svh;
     min-height: 100vh;
     height: auto;
}
 
 .astro-kockice-slika {
  width: 330px;
  height: 320px;
}
.astro-kockice-slika img {
  width: 330px;
  height: 330px;
}

 .astro-kockice-naslov {
    top: 65%;
    width: 180px;
}
.astro-kockice-naslov p {
      font-size: 40px;
}   
.astro-kockice-text {
    width: 305px;
    padding-bottom: 30px;
} 
.astro-kockice-cena {
    width: 300px;
    margin: 0 auto;
}
                         /* kontakt */
#kontakt {
   min-height: 100svh;
   min-height: 100dvh;
   height: auto;
}

.kontakt-text {
   width: 310px;
}
.email-box a {
   padding: 16px 0;

}
#footer {
    width: 305px;
    margin: 70px auto 0 auto;
  }
  #footer p {
    margin: 0;
    padding-bottom: 5px;
    font-size: 12px;
    color: rgb(227, 227, 227);
  }
}