/* UTILITIES */

* {

 margin: 0;

 padding: 0;

 box-sizing: border-box;

}



body {

 font-family: Poppins;
 background-color:#000000;

}

a {

 text-decoration: none;

}

li {

 list-style: none;

}

.normal 
{
	list-style-type:square;
	margin-left:20px;
}

/* NAVBAR STYLING STARTS */

.navbar {

 display: flex;

 align-items: center;

 justify-content: space-between;

 padding: 20px;

 background-color: black;

 color: #fff;

}

.nav-links a {

 color: #fff;

}

/* LOGO */

.logo {

 font-size: 32px;

}

/* NAVBAR MENU */

.menu {

 /*display: flex;*/

 gap: 1em;

 font-size: 14px;

}

.menu li:hover {

 background-color: #cccccc;

 border-radius: 5px;

 transition: 0.3s ease;

}

.menu li {

 padding: 5px 14px;

}

/* DROPDOWN MENU */

.services {

 position: relative; 

}

.dropdown {

 background-color: rgb(13, 13, 13);

 padding: 1em 0;

 position: absolute; /*WITH RESPECT TO PARENT*/

 display: none;

 border-radius: 8px;

 top: 35px;

}

.dropdown li + li {

 margin-top: 10px;

}

.dropdown li {

 padding: 0.5em 1em;

 width: 8em;

 text-align: center;

}

.dropdown li:hover {

 background-color: #333333;

}

.services:hover .dropdown {

 display: block;

}


/*RESPONSIVE NAVBAR MENU STARTS*/

/* CHECKBOX HACK */

input[type=checkbox]{

 display: none;

} 

/*HAMBURGER MENU*/

.hamburger {

 display: none;

 font-size: 24px;

 user-select: none;

}

div
{
	background-color:#000000;
	color:#ffffff;
	link:#ff0000;
}

a
{
	color:#ffffff;
}

a:hover
{
	color:#ff0000;
}

h1
{
	color:#ffffff;
}
p 
{
	color:#ffffff;
}

/* APPLYING MEDIA QUERIES */

@media (max-width: 1px) {

.menu { 

 display:none;

 position: absolute;

 background-color:black;

 right: 0;

 left: 0;

 text-align: center;

 padding: 16px 0;

}

.menu li:hover {

 display: inline-block;

 background-color:#333333;

 transition: 0.3s ease;

}

.menu li + li {

 margin-top: 12px;

}

input[type=checkbox]:checked ~ .menu{

 display: block;

}

.hamburger {

 display: block;

}

.dropdown {

 left: 50%;

 top: 30px;

 transform: translateX(35%);

}

.dropdown li:hover {

 background-color: #333333;

}

}

/*
.cont_1 {
  width: 80%;
  margin:0% 10% 0% 10%;
}
*/
.div_s {
	width:80%;
	margin: 0% 10% 0% 10%;
}

@media only screen and (max-width: 1000px) {
  .div_s {
	width:90%;
	margin: 0% 5% 0% 5%;
  }
}

@media only screen and (max-width: 800px) {
  .div_s {
	width:95%;
	margin: 0% 2.5% 0% 2.5%;
  }
}


@media only screen and (max-width: 600px) {
  .div_s {
	width:100%;
	margin: 0% 0% 0% 0%;
  }
}



.container {
    overflow: hidden; /* Korjaa floatit */
}

.item {
    width: 30%; /* Aseta alkuperäinen leveys */
    float: left; /* Aseta elementit vierekkäin */
    margin: 0 1.66%; /* Lisää välistystä elementtien väliin */
    background-color: #000000;
}

@media screen and (max-width: 600px) {
    .item {
        width: 100%; /* Aseta täysi leveys pienemmillä näytöillä */
        float: none; /* Poista float pienemmillä näytöillä */
        margin: 5px 0; /* Lisää välistystä ylä- ja alapuolelle pienemmillä näytöillä */
    }
}


.container {
    overflow: hidden; /* Korjaa floatit */
}

.item2 {
    width: 47%; /* Aseta alkuperäinen leveys */
    float: left; /* Aseta elementit vierekkäin */
    margin: 0 1%; /* Lisää välistystä elementtien väliin */
    background-color: #000000;
}

@media screen and (max-width: 600px) {
    .item2 {
        width: 100%; /* Aseta täysi leveys pienemmillä näytöillä */
        float: none; /* Poista float pienemmillä näytöillä */
        margin: 5px 0; /* Lisää välistystä ylä- ja alapuolelle pienemmillä näytöillä */
    }
}



/* Piilotetaan kaikki formit oletuksena */
.form {
  display: none;
}

/* Näytetään valittu form */
#form1:checked ~ #form1-content {
  display: block;
}

#form2:checked ~ #form2-content {
  display: block;
}