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

* {
 overflow-x: hidden;
   padding: 0;
   margin: 0;
}
/* Styling for Screens below 501 pixels */
@media screen and (max-width: 501px) {
   body {
      max-width: 500px;
      align-items: center;
   }

   .topheadercolor {
      background-color: #fef7f6;
      display: none;
   }
   .bottomheadercolor {
      background-color: white;
   }
   .topheader { 
      display: flex;
      background-color: #fef7f6 ;
      height: 5vh;
      justify-content: space-between;
       align-items: center;
       width: 80%;
       margin: auto;
   }
   
   span {
      padding-left: 1vh;
      font-size: 10px;
   }
   
   .bottomheader {
      display: flex;
    height: 10vh;
    background-color: white;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    justify-content: space-around;
   }
   
   a {
      font-weight: 600;
      font-family: poppins;
      text-decoration: none;
      color: black;
      padding-left: 0.8em;
   }
   
   
   .dropdownarrow {
      padding: 0;
   }
   
   A:hover {
      color: orange;
      transition: 0.4s ease;
   }
   i:hover {
      color: orange;
      transition: 0.4s ease;
   }
   
   /* Dropdown image */
   
   .dropdown {
      position: relative;
      display: inline-block;
    }
   
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
      /* margin-top: 1.4em; */
      
    }
   
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
   
    }
    .dropdown-content a:hover {background-color: #ddd;}
    .dropdown:hover .dropdown-content {display: block;
      
   }
   
   /* Large forside image with background images */
   .Forsideimage {
      background-image: url(./Silon/Gfx/bg-1.jpg);
      background-repeat: no-repeat;
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 800px;
max-width: 100%;
   }
   .image-on-background {
      padding-bottom: 10vh;
     margin: 0 auto;
   }
   
   .image-tekst {
      text-align: center;
      /* position: absolute;
      top: 50%;
      left: 40%;
      transform: translate(-50%, -50%); */
    
   }
   
   
   h1 {
      font-size: 2.5em;
      font-family: roboto;
      font-weight: 400;

   }
   h4 {

      color: gray;
      padding-bottom: 1.5vh;
   }
   
   .image-on-background {
      width: 100%;
   }
   
   .button {
      /* position: absolute;
      top: 70%;
      left: 36%;
      transform: translate(-50%, -50%); */
   }
   button {
      padding: 15px 35px 15px 35px;
      background-color: #ff5353;
      color: white;
      border: none;
      border-radius: 5px;
   }
   
   .headericons {
      position: relative;
   display: flex;
   padding-left: 1.3em;
   }
   
   .headericons .badge {
      position: absolute;
      top: -3px;
      right: 5px;
      padding: 5px 10px;
      border-radius: 50%;
      background: orangered;
      color: white;
      font-size: 10px;
    }
   
    /* Featured Products section of the Website */
   
   .featured {
   width: 100%;
   }
   
   .featuredtext {
      display: flex;
      justify-content: space-around;
      padding-top: 1em;
      text-align: center;
   }
   
   h2 {
      text-align: center;
      padding-top: 1.5em;
      padding-bottom: 2.5em;
      font-size: 1.9em;
      font-family: poppins;
      font-weight: 900;
   }

   .featuredimage {
      width: 100%;
      margin: 0 auto;
   }
  
   
   .featuredimages {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
   }

   .featuredimages .row {
display: flex;
flex-direction: row;
   } 

   .imagerow {
      display: flex;
      flex-direction: row;
      max-width: 100%;
   }
    
   .serviceimage {
      padding-bottom: 2vh;
   }
   
   span {
      color: gray;
      font-size: 0.9em;
      
   }
   
   h3 {
      font-size: 1.3em;
   }
   i {
      padding-top: 0.7em;
      padding-bottom: 0.7em;
   }
   
   
   /* Second large background image */
   
   .midsection {
      display: flex;
      flex-direction: column;
      position: relative;
   background-color: #eae2d8;
   justify-content: flex-end;
   height: 500px;
   }
   
   .midtext {
      text-align: center;
      position: absolute;
      top: 25%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 1em;
      width: 70%;
   }
   .midbutton {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
   
   }
   
   .midh1 {
      font-size: 3.4em;
      width: 100%;
      padding-bottom: 0.3em;
      font-style: italic;
      font-family: poppins;
   }
   
   .midimage {
      width: 80%;
      position: absolute;
      top: 55.4%;
      left: 10%;
   }
   
   button:hover {
      background-color: hotpink;
      cursor: pointer;
   }
   
   .midh3 {
      padding-bottom: 2em;
      font-weight: 300;
   }
   
   
   /* Most Populare products section */
   
   .popular {
      width: 80%;
      margin: auto;
   } 
   
   .popularimages {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
   }
   
   .populartext {
      display: flex;
      justify-content: space-around;
      padding-top: 1em;
      text-align: center;
   }
   
   /* 4 icon with info about services */
   
   .services {
      padding-top: 5em;
      display: flex;
      width: 100%;
      margin: auto;
      flex-direction: column;
align-items: center;
   }
   
   .service {
   text-align: center;
      padding: 1.5em 30%;
      display: flex;
      border: 1px rgba(128, 128, 128, 0.308) solid;
      align-items: center;
   flex-direction: column;
   margin-bottom: 5vh;
   }
   
   
   
   .servicetext {
      padding-bottom: 1vh;
   }
   
   /* featured images */
   .journal {
      width: 100%;
      margin: auto;
   }
   .journal-image {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
   }
   .journal-images {
      display: flex;
flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
   }
   
   .journal-spans {
      display: flex;
      justify-content: space-evenly;
      padding-top: 3vh;
   }
   
   .journal-span {
      display: flex;
      flex-direction: column;
      /* max-width: 30%; */
      padding-top: 4vh;
      padding-left: 5vh;
   }
   
   .span-h5 {
      padding-top: 1vh;
      font-size: 1.24em;
      padding-bottom: 3vh;
      border-bottom: 1px gray solid;
   }
   
   .journal-extra {
   display: flex;
   }
   
   .journal-border {
   margin-left: -2.5vh;
   padding-bottom: 3vh;
   }
   
   .journal-border span:hover {
      color: orangered;
   }
   
   article div span {
      padding: 0;
   }
   
   /* icons */
   
   .material-symbols-outlined {
   font-size: 10px;
   
     font-variation-settings:
     'FILL' 0,
     'wght' 400,
     'GRAD' 0,
     'opsz' 24
   }
   
   .material-icons.md-60 { font-size: 30px; }
   
   article div span i {
      padding-left: 20px;
   }

   section .featuredimage {
      padding-bottom: 4vh;
   }
   
   
   /* Footer */
   
   footer {
   margin-top: 8vh;
   background-color: #e9e2d8;
   }
   
   .footercontainer {
      width: 80%;
      margin: auto;
      display: flex;
      padding: 50px 50px;
      justify-content: space-around;
      flex-direction: column;
   }
   
   .footerspans {
      display: flex;
      flex-direction: column;
     
   }
   .footerspans h6 {
      padding: 0;
      font-size: 2.5vh;
      padding-bottom: 3vh;
   }
   
   
   .footerspans span {
      padding: 0;
      font-size: 2.5vh;
      padding-bottom: 1.5vh;
   }
   
   .footerandroid {
      align-items: center;
      width: 50%;
      display: flex;
      background-color: white;
      border-radius: 10px;
      padding: 5px 5px;
      margin-right: 2vh;
   }
   .androidflex {
      display: flex;
      flex-direction: column;
   }
   
   .footerandroid i {
      font-size: 25px;
      padding-right: 2vh;
      padding-left: 1vh;
      color: orangered;
   }
   
   .footerapple {
      
      align-items: center;
      width: 50%;
      display: flex;
      background-color: orangered;
      border-radius: 10px;
      padding: 5px 5px;
   } 
   
   .footerapple i {
      font-size: 25px;
      padding-right: 2vh;
      padding-left: 1vh;
      color: white;
   }
   
   .androidflex span {
      font-size: 2vh;
      padding-bottom: 0;
   }
   
   .footer-span-large {
      font-size: 2.5vh;
      font-weight: bold;
   }
   
   .footerapple .androidflex span {
      color: white;
   }
   
   
   .footer-install {
      display: flex;
   
   }
   
   .footerspans .online {
      margin-top: 5vh;
      border-top: 1px gray solid;
      font-weight: 900;
      padding-top: 20px;
   }
   
   .footericons {
      display: flex;
      flex-direction: row;
   }
   
   .footericon {
      padding: 0px 14px;
      margin-right: 2vh;
      background-color: white;
   }
   
   .footericon i {
      font-size: 2.5vh;
   }
   
   .footericon:hover {
      background-color: orangered;
      color: white;
   }
   
   footer span:hover {
      color: orangered;
   }
   .footericon i:hover {
      color: white;
   }
   
   .footercontainer .footerspans span {
      cursor: pointer;
   }
   
   .footercontainer .footerspans i {
      cursor: pointer;
   }
   
   header i {
      cursor: pointer;
   }
   
   /* image hover effeckt */
   .imagehover {
      position: relative;
   }
   .overlay {
      position: absolute;
      bottom: 20vh;
      left: 0;
      right: 0;
      background-color: transparent;
      overflow: hidden;
      width: 100%;
      height: 0;
      transition: .4s ease;
      display: flex;
      justify-content: space-around;
   }
.row {
   display: flex;
   flex-direction: row;
   max-width: 50%;
}

   .text {
      color: orangered;
      font-size: 15px;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);

    }
   .text i {
      text-align: center;
      background-color: white;
      border-radius: 50%;
      padding: 10px 15px;
      margin-left: 1vh;
   }


    .text i:hover {
      background-color: orangered;
      color: white;
    }
    
    .text i:hover {
      color: white;
    }
   

    .text-3 {
      color: orangered;
      font-size: 15px;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);

    }
   .text-3 i {
      text-align: center;
      background-color: white;
      border-radius: 50%;
      padding: 10px 15px;
      margin-left: 1vh;
   }


    .text-3 i:hover {
      background-color: orangered;
      color: white;
    }
    
    .text-3 i:hover {
      color: white;
    }


    .none {
      display: none;
   }


    .text2:hover {
      background-color: orangered;
      color: white;
    }
    
    .text2 i:hover {
      color: white;
    }
    .text3:hover {
      background-color: orangered;
      color: white;
    }
    
    .text3 i:hover {
      color: white;
    }
   
   
    .text-4-1:hover {
      background-color: orangered;
      color: white;
    }
    
    .text-4-1 i:hover {
      color: white;
    } 
    .text-4-2:hover {
      background-color: orangered;
      color: white;
    }
    
    .text-4-2 i:hover {
      color: white;
    } 
    .text-4-3:hover {
      background-color: orangered;
      color: white;
    }
    
    .text-4-3 i:hover {
      color: white;
    }
   
   
   
   
   .imagehover:hover .overlay{
     height: 100px;
   }
   
   
   .footerandroid:hover {
      background-color: orangered;
      color: white;
   }
   
   .footerandroid:hover span{
      color: white;
   }
   
   .footerandroid:hover i{
      color: white;
   }

   nav {
      display: none;
   }

}



/* Styling for Screens above 1301 pixels website looks beginds to look bad when you scale downwards and  */
@media screen and (min-width: 1301px) {
/* Header Styling */
.topnav {
   display: none;
}

.topheadercolor {
   background-color: #fef7f6;
}
.bottomheadercolor {
   background-color: white;
}
.topheader { 
   display: flex;
   background-color: #fef7f6 ;
   height: 5vh;
   justify-content: space-between;
    align-items: center;
    width: 80%;
    margin: auto;
}

span {
   padding-left: 1vh;
   font-size: 10px;
}

.bottomheader {
   display: flex;
 height: 10vh;
 background-color: white;
 align-items: center;
   justify-content: space-between;

 width: 80%;
 margin: auto;
}

a {
   font-weight: 600;
   font-family: poppins;
   text-decoration: none;
   color: black;
   padding-left: 0.8em;
}


.dropdownarrow {
   padding: 0;
}

A:hover {
   color: orange;
   transition: 0.4s ease;
}
i:hover {
   color: orange;
   transition: 0.4s ease;
}

/* Dropdown image */

.dropdown {
   position: relative;
   display: inline-block;
 }

 .dropdown-content {
   display: none;
   position: absolute;
   background-color: #f1f1f1;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
   /* margin-top: 1.4em; */
   
 }

 .dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;

 }
 .dropdown-content a:hover {background-color: #ddd;}
 .dropdown:hover .dropdown-content {display: block;
   
}

/* Large forside image with background images */
.Forsideimage {
   background-image: url(./Silon/Gfx/bg-1.jpg);
   background-repeat: no-repeat;
display: flex;
justify-content: flex-end;
align-items: center;
}


.image-tekst {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 40%;
   transform: translate(-50%, -50%);
 
}


h1 {
   font-size: 2.5em;
   font-family: roboto;
   font-weight: 400;
   width: 80%;
}
h4 {
   width: 80%;
   color: gray;
   padding-bottom: 1.5vh;
}

.image-on-background {
   width: 50%;
}

.button {
   position: absolute;
   top: 70%;
   left: 36%;
   transform: translate(-50%, -50%);
}
button {
   padding: 15px 35px 15px 35px;
   background-color: #ff5353;
   color: white;
   border: none;
   border-radius: 5px;
}

.headericons {
   position: relative;
display: flex;
padding-left: 1.3em;
}

.headericons .badge {
   position: absolute;
   top: -15px;
   right: -20px;
   padding: 5px 10px;
   border-radius: 50%;
   background: orangered;
   color: white;
 }

 /* Featured Products section of the Website */

.featured {
width: 80%;
margin: auto;
}

.featuredtext {
   display: flex;
   justify-content: space-around;
   padding-top: 1em;
   text-align: center;
}

h2 {
   text-align: center;
   padding-top: 1.5em;
   padding-bottom: 2.5em;
   font-size: 1.9em;
   font-family: poppins;
   font-weight: 900;
}

.featuredimages {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
}
 
.serviceimage {
   padding-bottom: 2vh;
}

span {
   color: gray;
   font-size: 0.9em;
   
}

h3 {
   font-size: 1.3em;
}
i {
   padding-top: 0.7em;
   padding-bottom: 0.7em;
}


/* Second large background image */

.midsection {
   display: flex;
   position: relative;
background-color: #eae2d8;
justify-content: flex-end;
}

.midtext {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 30%;
   transform: translate(-50%, -50%);
}
.midbutton {
   position: absolute;
   top: 70%;
   left: 29%;
   transform: translate(-50%, -50%);

}

.midh1 {
   font-size: 3.4em;
   width: 100%;
   padding-bottom: 0.3em;
   font-style: italic;
   font-family: poppins;
}

.midimage {
   width: 50%;
}

button:hover {
   background-color: hotpink;
   cursor: pointer;
}

.midh3 {
   padding-bottom: 2em;
   font-weight: 300;
}


/* Most Populare products section */

.popular {
   width: 80%;
   margin: auto;
} 

.popularimages {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
}

.populartext {
   display: flex;
   justify-content: space-around;
   padding-top: 1em;
   text-align: center;
}

/* 4 icon with info about services */

.services {
   padding-top: 5em;
   display: flex;
   width: 80%;
   margin: auto;
   justify-content: space-around;
}

.service {
   max-width: 20%;
   padding: 1.5em 2.5em;
   display: flex;
   border: 1px rgba(128, 128, 128, 0.308) solid;
   align-items: center;
flex-direction: column;
}



.servicetext {
   padding-bottom: 1vh;
}

/* featured images */
.journal {
   width: 80%;
   margin: auto;
}
.journal-image {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}
.journal-images {
   display: flex;
   justify-content: space-evenly;
}

.journal-spans {
   display: flex;
   justify-content: space-evenly;
   padding-top: 3vh;
}

.journal-span {
   display: flex;
   flex-wrap: wrap;
   padding-top: 3vh;
   /* flex-direction: column; */
   /* max-width: 30%; */
}

.span-h5 {
   padding-top: 1vh;
   font-size: 1.24em;
   padding-bottom: 3vh;
   border-bottom: 1px gray solid;
   max-width: 90%;
}

.journal-extra {
display: flex;
}

.journal-border {
margin-left: -2vh;
}

.journal-border i {
   padding-bottom: 0;
}

.journal-border span:hover {
   color: orangered;
}

article div span {
   padding: 0;
}
/* image hover */




/* icons */

.material-symbols-outlined {
font-size: 10px;

  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.material-icons.md-60 { font-size: 30px; }

article div span i {
   padding-left: 20px;
}


/* Footer */

footer {
margin-top: 8vh;
background-color: #e9e2d8;
}

.footercontainer {
   width: 80%;
   margin: auto;
   display: flex;
   padding: 50px 50px;
   justify-content: space-around;
}

.footerspans {
   display: flex;
   flex-direction: column;
  
}
.footerspans h6 {
   padding: 0;
   font-size: 2.5vh;
   padding-bottom: 3vh;
}


.footerspans span {
   padding: 0;
   font-size: 2.5vh;
   padding-bottom: 1.5vh;
}

.footerandroid {
   align-items: center;
   width: 22vh;
   display: flex;
   background-color: white;
   border-radius: 10px;
   padding: 5px 5px;
   margin-right: 2vh;
}
.androidflex {
   display: flex;
   flex-direction: column;
}

.footerandroid i {
   font-size: 25px;
   padding-right: 2vh;
   padding-left: 1vh;
   color: orangered;
}

.footerapple {
   
   align-items: center;
   width: 22vh;
   display: flex;
   background-color: orangered;
   border-radius: 10px;
   padding: 5px 5px;
} 

.footerapple i {
   font-size: 25px;
   padding-right: 2vh;
   padding-left: 1vh;
   color: white;
}

.androidflex span {
   font-size: 2vh;
   padding-bottom: 0;
}

.footer-span-large {
   font-size: 2.5vh;
   font-weight: bold;
}

.footerapple .androidflex span {
   color: white;
}


.footer-install {
   display: flex;

}

.footerspans .online {
   margin-top: 5vh;
   border-top: 1px gray solid;
   font-weight: 900;
   padding-top: 20px;
}

.footericons {
   display: flex;
   flex-direction: row;
}

.footericon {
   padding: 0px 14px;
   margin-right: 2vh;
   background-color: white;
}

.footericon i {
   font-size: 2.5vh;
}

.footericon:hover {
   background-color: orangered;
   color: white;
}

footer span:hover {
   color: orangered;
}
.footericon i:hover {
   color: white;
}

.footercontainer .footerspans span {
   cursor: pointer;
}

.footercontainer .footerspans i {
   cursor: pointer;
}

header i {
   cursor: pointer;
}

/* image hover effeckt */
.imagehover {
   position: relative;
}
.featured .overlay {
   position: absolute;
   bottom: 20%;
   left: 0;
   right: 0;
   background-color: transparent;
   overflow: hidden;
   width: 100%;
   height: 0;
   transition: .4s ease;
}

.popular .overlay {
   position: absolute;
   bottom: 5%;
   left: 0;
   right: 0;
   background-color: transparent;
   overflow: hidden;
   width: 100%;
   height: 0;
   transition: .4s ease;
}
.popularimages .overlay {
   position: absolute;
   bottom: 25%;
   left: 0;
   right: 0;
   background-color: transparent;
   overflow: hidden;
   width: 100%;
   height: 0;
   transition: .4s ease;
}


.overlay {
   position: absolute;
   bottom: 25%;
   left: 0;
   right: 0;
   background-color: transparent;
   overflow: hidden;
   width: 100%;
   height: 0;
   transition: .4s ease;
   
}
.text-3 {
   color: orangered;
   font-size: 15px;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   /* text-align: center; */
   background-color: white;
   /* border-radius: 50%; */
   padding: 10px 15px;
   background-color: transparent;
   /* width: 100%; */
 }

 .text-3 i {
   margin-left: 0.5vh;
   padding: 2vh;
   background-color: white;
   border-radius: 50%;
    }
   
    .text-3 i:hover {
      background-color: red;
      border-radius: 50%;
    }
   
   .text-3:hover {
      background-color: transparent;
   }


.text {
   color: orangered;
   font-size: 15px;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   text-align: center;
   background-color: white;
   /* border-radius: 50%; */
   padding: 10px 15px;
   background-color: transparent;
   width: 100%;
 }
 .text i {
margin-left: 0.5vh;
padding: 2vh;
background-color: white;
border-radius: 50%;
 }

 .text i:hover {
   background-color: red;
   border-radius: 50%;
 }

.text:hover {
   background-color: transparent;
}

.imagehover:hover .overlay{
  height: 100px;
  
}




.footerandroid:hover {
   background-color: orangered;
   color: white;
}

.footerandroid:hover span{
   color: white;
}

.footerandroid:hover i{
   color: white;
}


}