@import url('https://fonts.googleapis.com/css2?family=Poppins:weight@300;400;500;600;700;800;900&display=swap');
/*Denna rad gör inget annat än att den importerar en font från google*/
/*D*/



*{
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    font-family: "Open Sans", sans-serif;

}



body {
    
    background-image: url('../images/background.png');
    background-size: cover; /* Gör att bilden täcker hela skärmen */
    background-repeat: no-repeat;    /* Förhindrar att bilden upprepas */    
    background-position: center;     /* Centrerar bilden */ 
    background-attachment: fixed;    /* Gör så att bilden stannar när du scrollar (valfritt) */
    padding: 0 10%;

}

#Jag {

    height: 100vh;
    overflow: hidden;
}


header {
    display: flex;
    align-items: center;
    gap: 40px;
    animation: TopIn 1s ease-in-out forwards;
    opacity: 0;
    animation-delay: 0.6s;
}

.ZainLogo {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgb(42, 58, 85, 0.9);
}

.ZainLogo span {
    font-size: 72px;
    color: #3B5E94;
    line-height: 0.2;
}

nav {

    flex: 1; 
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 10px 0;

}

.LinkBarIcon {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
}

nav {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 70px;
}


.LinkBarIcon {

    font-size: 19px;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgb(42, 58, 85, 0.9);
    transition: 0.3;
    cursor: pointer;
    text-decoration: none;  /*Denna selctor är till att ta bort det fula strecket under länken*/
    text-transform: capitalize;

}

.LinkBarIcon:hover {

    color: #3B5E94;

}

.TaEttSnack {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    background-color: #3B5E94;
    color: white;
    height: 35px;
    width: 200px;
    border-radius: 20px;
    transition: 0.3;


}


.TaEttSnack:hover {
  
    background-color:rgba(16, 116, 216, 0.753)

}

.MittSenasteProject {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    background-color: #3B5E94;
    color: white;
    height: 35px;
    width: 350px;
    border-radius: 20px;
    transition: 0.3;

}


.MittSenasteProject:hover {

    background-color:rgba(16, 116, 216, 0.753)

}

.WelcomingContent {

    display: grid;
    grid-template-columns: 1.2fr 1fr;

}

.WelcomingContent h1 {

    font-size: 3 rem;
    color: rgb(42, 58, 85, 0.9);
    text-transform:uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    animation: bottomIn 1s ease-in-out forwards;
    opacity: 0;
    animation-delay: 0.3s;

    

}

.WelcomingContent p {
    font-size: 18px;
    line-height: 1.8;
    animation: bottomIn 1s ease-in-out forwards;
    opacity: 0;
    animation-delay: 0.4s;

}

h1 span {
    color: #3B5E94;
}

.WelcomingContent h3 {

    font-size: 5.5 rem;
    color: rgb(42, 58, 85, 0.9);
    animation: bottomIn 1s ease-in-out forwards;
    opacity: 0;
    animation-delay: 0.2s;

}

.WelcomingLeft {

    margin-top: 200px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    animation: bottomIn 1s ease-in-out forwards;
    opacity: 0;
    animation-delay: 0.5s;


}


.PicOfMe {
    width: 80%;
    position: absolute;
    bottom: 0px;
    right: -280px;
    animation: bottomIn 1s ease-in-out forwards;
    opacity: 0;

}


.SocialMediaLoggor i {

    font-size: 40px;
    font-weight: 600;
    border: 2px;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 50px;
    padding: 5px;
    margin-left: 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: 0.3s;
    color: rgb(42, 58, 85, 0.9);
  
    
}


.SocialMediaLoggor i:hover {

    
    color:  #3B5E94;
    transform: scale(1.5);
    
}

.PresentAllProjectsLoop{
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

.UnikProject{ /*gör att varje projekt hamnar i en box*/

  margin-top: 100px;  
  width: 220px;
  color:  #3B5E94;
  background: rgba(0, 0, 0, 0.1); /* svart, 30% synlig */

  font-family: 'Arial Black', sans-serif;
               
  border: 1px solid #aaa;
  border-radius: 8px;
  padding-top: -100px;
  text-align: center;

   animation: bottomIn 1s ease-in-out forwards;
   opacity: 0;
   animation-delay: 0.5s;

 
}

.UnikProject a { /*tar bort fula linjernna från under rubriken för projektnamn*/
  text-decoration: none;
  color:  #3B5E94;

}



.UnikProject:hover { /*skolan göras större när man hovrar över boxen*/
  transform: scale(1.1);
  transition: transform 0.3s; /*förstoringen sker mjukt på 0,3 sekunder istället för direkt*/

}

.UnikProject img {
  max-width: 100%; /*bilden får aldrig bli bredare än rutan*/
  height: 150px; /*bilden blir alltid 150px hög.*/
  object-fit: cover; /*bilden täcker rutan helt, och klipps lite om den inte passar, men den blir inte sned.*/
}


.TheSearchTextBox{
  
  height: 20px;
  margin-top: 50px;
  width: 200px;             /* bredare */
  padding: 12px;            /* större höjd */
  border: 1px solid #555;   /* mörkare ram */
  border-radius: 8px;
  font-size: 16px;          /* större text */
  background: rgba(0, 0, 0, 0.1); /* svart, 30% synlig */


  animation: TopIn 1s ease-in-out forwards;
  opacity: 0;
  animation-delay: 0.6s;
  
}

.TheSearchTextBox input {
  background: transparent; /* tar bort vitt */
}



.sökknappen {
  margin-left: 0px;
  padding: 10px 18px;
  font-size: 18px;
  border-radius: 8px;
  background: #9fa0a1;
  color: white;
  cursor: pointer;
}


.Sökknappen{
    margin-left: 235px;
    margin-top: -43.5px;
    animation: TopIn 1s ease-in-out forwards;
    opacity: 0;
    animation-delay: 0.6s;


}

footer.SocialMediaLoggorPos{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 12px 10%;
  background: rgba(255,255,255,0.0);
  z-index: 1000;
}

/*-------------------Techniquessidan------------------------*/

.sökrutanT
{
 height: 20px;
  margin-top: 50px;
  width: 200px;             /* bredare */
  padding: 12px;            /* större höjd */
  border: 1px solid #555;   /* mörkare ram */
  border-radius: 8px;
  font-size: 16px;          /* större text */
  background: rgba(0, 0, 0, 0.1); /* svart, 30% synlig */


  animation: TopIn 1s ease-in-out forwards;
  opacity: 0;
  animation-delay: 0.7s;
}

.sökrutanT
{
    background: transparent; /* tar bort vitt */

}

.sökknappT
{
    margin-left: 235px;
    margin-top: -43.5px;
    animation: TopIn 1s ease-in-out forwards;
    opacity: 0;
    animation-delay: 0.7s;

}


.sökknappT
{
  margin-left: 0px;
  margin-right: 50px;
  padding: 10px 18px;
  font-size: 18px;
  border-radius: 8px;
  background: #3B5E94;
  color: white;
  cursor: pointer;
}



.ProjectsInTechPageT{

  margin-top: 100px;  
  width: 220px;
  color:  #3B5E94;
  background: rgba(0, 0, 0, 0.1); /* svart, 30% synlig */

  font-family: 'Arial Black', sans-serif;
               
  border: 1px solid #aaa;
  border-radius: 8px;
  padding-top: -100px;
  text-align: center;

   animation: bottomIn 1s ease-in-out forwards;
   opacity: 0;
   animation-delay: 0.5s;

}

.ProjectsInTechPage{display:flex;flex-wrap:wrap;gap:35px}
.ProjectsInTechPageT{width:220px;margin-top:200px} /* ta bort padding-top:-100px */

.ProjectsInTechPageT{
  transform: scale(1.1);
  transition: transform 0.3s; /*förstoringen sker mjukt på 0,3 sekunder istället för direkt*/
}


.ProjectsInTechPageT{
  transform: scale(1.1);
  transition: transform 0.3s; /*förstoringen sker mjukt på 0,3 sekunder istället för direkt*/
}


.ProjectsInTechPageT img {
  max-width: 100%; /*bilden får aldrig bli bredare än rutan*/
  height: 150px; /*bilden blir alltid 150px hög.*/
  object-fit: cover; /*bilden täcker rutan helt, och klipps lite om den inte passar, men den blir inte sned.*/
}

.ProjectsInTechPageT a { /*tar bort fula linjernna från under rubriken för projektnamn*/
  text-decoration: none;
  color:  #3B5E94;

}

.SortOrderDropListT{
  background-color: transparent; /* genomskinlig bakgrund */
  border: 1px solid #ccc;        /* tunn linje runtom */
  border-radius: 4px;            /* rundade hörn (matcha sökrutan) */
  padding: 5px 8px;
  color: #222121;
  outline: none;
  margin-right: 50px;
  background: transparent;
  font-size: 18px;
  height: 50px;
  width: 110px;
     animation: TopIn 1s ease-in-out forwards;
    opacity: 0;
    animation-delay: 0.7s;





}

.SortOrderDropListT:focus {
  border-color: #999;            
}

.DescT {
  background: rgba(0, 0, 0, 0.1);
}

.SorteraLAbel {

  background-color: transparent; /* genomskinlig bakgrund */
  border: 1px solid #ccc;        /* tunn linje runtom */
  border-radius: 4px;            /* rundade hörn (matcha sökrutan) */
  padding: 5px 8px;
  color: #222121;
  outline: none;
  margin-left: 0px;
  margin-right: 0px;
  padding: 10px 18px;
  font-size: 18px;
  border-radius: 8px;
     animation: TopIn 1s ease-in-out forwards;
    opacity: 0;
    animation-delay: 0.7s;

 
}

.SerchInFieldDropListT{

  background-color: transparent; /* genomskinlig bakgrund */
  border: 1px solid #ccc;        /* tunn linje runtom */
  border-radius: 4px;            /* rundade hörn (matcha sökrutan) */
  padding: 5px 8px;
  color: #222121;
  outline: none;
  margin-left: 0px;
  margin-right: 0px;
  padding: 10px 18px;
  font-size: 18px;
  border-radius: 8px;
     animation: TopIn 1s ease-in-out forwards;
    opacity: 0;
    animation-delay: 0.7s;

 

}


.TechniquesCheckBoxes{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:10px 0}
.SingleCheckBox input{position:absolute;opacity:0;pointer-events:none}
.SingleCheckBox label{
  display:inline-block;padding:6px 12px;border:1px solid #555;border-radius:999px;
  background:rgba(0,0,0,0.1);color:#3B5E94;cursor:pointer;transition:.2s;
  animation: TopIn 1s ease-in-out forwards;
  opacity: 0; animation-delay: 0.9s;
 
}
.SingleCheckBox label:hover{transform:translateY(-1px)}
.SingleCheckBox input:checked + label{border-color:#3B5E94;box-shadow:0 0 0 2px rgba(59,94,148,.25) inset}



.SingleCheckBox input:checked + label {
  background:#3B5E94;
  color:white;
  border-color:#3B5E94;
}

/*-------------------------------------------*/



.SocialMediaLoggorPos{
    width: 359px;
    margin-top: 220px;
    margin-left: 514px;
    animation: bottomIn 1s ease-in-out forwards;
    opacity: 0;
    animation-delay: 0.2s;

}


.SingleProjectInformation
{
  margin-top: 190px;
}


@keyframes bottomIn {
    from {
        transform: translateY(250px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


@keyframes TopIn {
    from {
        transform: translateY(-250px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media screen and (max-width: 428px) {


    body {
    
    background-image: url('../images/background.png');
    background-size: cover; /* Gör att bilden täcker hela skärmen */
    background-repeat: no-repeat;    /* Förhindrar att bilden upprepas */    
    background-position: center;     /* Centrerar bilden */ 
    background-attachment: fixed;    /* Gör så att bilden stannar när du scrollar (valfritt) */
    padding: 0 3%;

}

#Jag {

    overflow: hidden;
}


header {
    display: flex;
    flex-direction: column;
    gap: 30px

}

nav {
    
    flex-direction: column;
    gap: 20px

}

.WelcomingContent {

    display: flex;
    flex-direction: column;

}



.UnikProject:hover { /*skolan göras större när man hovrar över boxen*/
  transform: scale(1.1);
}

.UnikProject img {
  max-width: 100%; /*bilden får aldrig bli bredare än rutan*/
  height: 150px; /*bilden blir alltid 150px hög.*/
  object-fit: cover; /*bilden täcker rutan helt, och klipps lite om den inte passar, men den blir inte sned.*/
}


.TheSearchTextBox{
  
    height: 20px;
  margin-top: 50px;
  width: 200px;             /* bredare */
  padding: 12px;            /* större höjd */
  border: 1px solid #555;   /* mörkare ram */
  border-radius: 8px;
  font-size: 16px;          /* större text */
  background: rgba(0, 0, 0, 0.1); /* svart, 30% synlig */


  animation: TopIn 1s ease-in-out forwards;
  opacity: 0;
  animation-delay: 0.6s;
  
}

.TheSearchTextBox input {
  background: transparent; /* tar bort vitt */
}



.sökknappen {
  margin-left: 0px;
  padding: 10px 18px;
  font-size: 18px;
  border-radius: 8px;
  background: #9fa0a1;
  color: white;
  cursor: pointer;
}


.Sökknappen{
    margin-left: 235px;
    margin-top: -43.5px;
    animation: TopIn 1s ease-in-out forwards;
    opacity: 0;
    animation-delay: 0.6s;


}

body { padding-bottom: 80px; }           /* ≈ footer-höjd */
footer.SocialMediaLoggorPos{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 12px 10%;
  background: rgba(255,255,255,0.0);
  z-index: 1000;
}




    
}