/* clearfix v pripade potreby nastavit prazdnemu divku

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}; 
*/





html {
  margin: 0;
  width: 100vw;
  overflow-x: hidden;
}






body {
  width: 100vw;
	margin:0;
  box-sizing: border-box;
	padding:0;
	font-family: 'Poppins';
  background: #f9f9f9;
  overflow-x: hidden;
  

}

/* appear animacia */
.hidden-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.hidden-element.visible {
  opacity: 1;
  transform: translateY(0);
}



.hidden-element-zwei {
  opacity: 0;
  transform: translateX(90px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.hidden-element-zwei.visible {
  opacity: 1;
  transform: translateX(0);
}







/* appear animacia */



@keyframes animate {
	0%, 10%, 100%
	{
		width: 0;
	}
	70%,90%
	{
		width: 100%;
	}
}


/* Start of navbar */


.topnav {
  overflow: hidden;
  text-align: center;
  background-color: rgba(3, 42, 93, 0.4); /* v pripade potreby staci nastavit "none" */
  position: absolute;
  z-index: 99;


  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 5%;
}

@media screen and (max-width: 600px) {
  .topnav {
    position: relative;
    left: auto;
    transform: none;
    text-align: center;
  }
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    display: block;
  }
}

/* Style the links inside the navigation bar */
.topnav a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
  font-size: 17px;


  vertical-align: middle;
}

/* Change the color of links on hover */
.topnav a:hover {
  color: rgba(227, 192, 255, 0.8);
}



/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* End of navbar */




/* Domov stranka*/

.responsive-container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, rgba(255, 161, 242, 0.6) 100%), 
                url('images/new/picovina2.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;

}

.responsive-container p {
  color: white;
  text-shadow: rebeccapurple 0 0 10px;
  padding-top: 40px;
  padding-bottom: 20px;
  padding-left: 50px;
  padding-right: 50px;
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;
  text-align:center;
  animation-name: headingSlide;
  animation-duration: 2s;

}

.responsive-container h2 {
  color: white;
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
}


@keyframes headingSlide {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0%);
  }
}







/* End of Domov stranka */







/* Responsive sluzby karty */
.nadpis-sekcia-sluzby {
  display: flex;
  justify-content: center;
  background: #5000ca;
  width: 100%;


  
}

.nadpis-sekcia-sluzby h1 {
  font-size: 36px;
  color: white;
  padding-top: 3rem;
  padding-bottom: 15px;
  text-align: center;
  

}

.nadpis-sekcia-sluzby p {
  font-size: 18px;
  color: white;
  padding-top: 15px;
  padding-bottom: 30px;
  text-align: center;
 
}

#sekcia-sluzby {
    font-family: Arial, sans-serif;
    background: #5000ca;
    color: black;
    max-height: 150vh;
    min-height: 65vh;
  
    

}





.services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  gap: 20px;
  justify-content: center;
  padding: 20px;
  
}

.service-card {
  background-color: #ffeef0;
  border-radius: 10px;
  padding: 20px;
  max-width: 300px;
  height: 350px;
  text-align: center;
  flex: 1 1 300px;
  transition: transform 0.3s ease;
  box-shadow: 0 5px 5px -3px;
}

.service-card:hover {
  transform: translateY(-10px);
}

.icon img {
  width: 50px;
  height: 50px;
}

.service-card h2 {
  color: black;
  font-size: 1.5em;
  margin: 10px 0;
}

.service-card h3 {
  color: black;
  font-size: 1.5em;
  margin: 10px 0;
}

.service-card h4 {
  color: black;
  font-size: 1.5em;
  margin: 10px 0;
}

.service-card p {
  color: #666;
  font-size: 1em;
  margin: 10px 0;
  height: 150px;

}

.cena {
  color: black;
  font-size: 1.5em;
  margin: 10px 0;
}

.more-info {
  color: #e60023;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  margin-top: 0;
}

.more-info::after {
  content: ' ➔';
}




.wrapper-tlacitka a {
  padding: 20px 90px;
  background: #ffeef0;
  text-decoration: none;
  color: black;
  font-weight: 500;
  font-size: 1.2em;
  border-radius: 4px;
  box-shadow: 0 8px 8px -5px;
}

.wrapper-tlacitka {
  text-align: center;
  margin-top: 5rem;
 
}








/* End of Sluzby */




/* Start of Galeria portfolio 
svg {
  background: #f9f9f9;
  margin: 0;
  padding:0;
  height: 100px;  skosenie 
}


path {
  margin:0;
  padding:0;
  
}

svg:not(:root) {
  
}

*/ 

/* Start of Galeria portfolio */







.unique-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 20px;
  max-width: 100%;
  min-height: 60vh;
  margin: 0 auto;
}

.unique-image img {
  max-width: 600px;
  height: auto;
  border-radius: 10px;
}

.unique-content {
  max-width: 600px;
  padding: 70px;
}

.unique-content h2 {
  font-size: 2em;
  margin-bottom: 20px;
}

.unique-content p {
  margin-bottom: 15px;
  line-height: 1.6;
  color: #555;
}

.unique-services {
  padding-top: 40px;
}

.unique-service {
  display: flex;

  margin-right: 20px;
  margin-bottom: 20px;
  flex: 1;
  min-width: 200px;
}

.unique-icon {
  font-size: 2em;
  margin-right: 18px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.unique-icon img {
  width:70px;
  height: auto;
}
.unique-text h3 {
  margin: 0;
  margin-top: 12px;
  font-size: 1.2em;
}

@media (max-width: 768px) {
  .unique-container {
      flex-direction: column;
      align-items: flex-start;
  }

  .unique-content {
      max-width: 100%;
      padding: 10px;
  }

  .unique-service {
      margin-right: 0;
  }
}

























/* Vlnka nad About us z https://www.shapedivider.app */
.wave {

  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave svg {
  position: absolute;
  display: block;
  width: calc(100% + 1.3px);
  height: 150px;
}

.wave .shape-fill {
  
  fill: #CBE2F3;
}

@media only screen and (max-width: 600px) {
.wave svg {
  display: none;
}
}

/* Koniec vlnky nad About us z https://www.shapedivider.app */












/* template social media*/
#contact{
margin: auto;
padding-bottom: 20px;
height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--main-fonts-color);
border: 3px solid red;
}

.social-media{
padding: 10px;
display: flex;
position: center;
  align-items: space-around;
justify-content:center;
}

.social-media a {
  margin: 10px;
  font-size: 2rem;
  text-align:center;
  display: inline-block;
  color: var(--main-fonts-color);
}

.social-media a i{
  cursor: pointer;
}

.social-media  a:hover {
  color: var(--main-decor-color);
  text-shadow: 0 0 50px var(--main-decor-color);
}

:root{
  --main-decor-color:#b84bda;
}

/* end of social media*/








#tlacitkohore {
display: none; /* Aby defaultne bolo skryte */
position: fixed;
bottom: 1.5rem;
right: 12%;
z-index: 99;
border: none;
outline: none; /* Odstrani obrysy */
color: white;
cursor: pointer;
padding-bottom: 1rem;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
border-radius: 10%;
background-color: #36454F;
}

#tlacitkohore::after {
content: '▲';
color: #33F9FF;
margin-bottom: 50%;
font-size: 1rem;
}











/* REPLIT ----------------------------*/

/*──────────────────
  social media
──────────────────*/

.social-media{
padding: 10px;
display: flex;
position: center;
  align-items: space-around;
justify-content:center;
}

.social-media a {
  margin: 10px;
  font-size: 2rem;
  text-align:center;
  display: inline-block;
color: var(--main-fonts-color);
}

.social-media a i{
cursor: pointer;
}

.social-media  a:hover {
color: var(--main-decor-color);
text-shadow: 0 0 50px var(--main-decor-color);
}
























/* FAQ zoznam */
.obalFAQ {
  width: 100%;
  min-height: 75vh;
  background: #5000ca;

}

.obalFAQ h2 {
  background: none;
  color: #ffeef0;
  font-size: 2rem;
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.faqcontainer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  color: #fff;
  background-color: #261331;
  border-radius: 12px;


}

.faq-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.faq-item {
  background-color: #ffeef0;
  padding: 20px;
  margin-bottom: 20px;
  margin-right: 20px; /* added margin between each column */
  margin-left: 20px;
  border-radius: 12px;
  overflow: hidden;
  transition: scale 0.3s ease-out;
  flex: 1 1 40%;
  color: black;
 

}

.faq-item:hover {
  scale: 1.05;
}

.faq-question {
  font-size: 24px;
  padding-bottom: 20px;
  margin-bottom: 3rem;
}

.number {
  position: absolute;
  margin-top: 2rem;
  font-size: 50px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.1);


}

@media screen and (max-width: 767px) {
  .faq-item {
    flex-basis: 100%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  .faq-section {
    flex-wrap: nowrap;
  }

  .faq-item {
    flex-basis: 50%;
  }
}

@media screen and (min-width: 1200px) {
  .faq-item {
    flex-basis: 30%;
  }
}










/* FAQ zoznam */



.portfolio-heading {
  text-align: center;
  background: #f9f9f9;
  font-size: 2rem;
  padding: 50px;
}

.portfolio-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  min-height: 400px;
  background: #f9f9f9;
  margin-bottom: 4rem;
}



.portfolio-item {
  display: flex;
  justify-content: center;
  width: 600px;
  height: 320px;
  padding: 50px;
  position: relative;
  overflow: hidden;
}

.portfolio-item a {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s, background-color 0.3s;
}

.portfolio-item img:hover {
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.5);
}

.portfolio-item:hover .overlay {
  opacity: 1;
}

.portfolio-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.portfolio-item .overlay-text {
  font-size: 2rem;
  color: black;
  text-align: center;
  background:white;
  padding: 10px 40px;
}

.portfolio-item .overlay-text i {
  font-size: 25px;
}

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





  .portfolio-item {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 180px;

  position: relative;
  overflow: hidden;
}

  .portfolio-item img {
    width: 100%;
    height: 100%;
  }

  .portfolio-item a {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

}




@media screen and (max-width: 870px) {
  .portfolio-item:hover .overlay {
    opacity: 0;
  }
  
  .portfolio-item .overlay {
   display: none;
  }
  
  .portfolio-item .overlay-text {
    display:none;
  }
  
  .portfolio-item .overlay-text i {
    
  }
}

















/* Globálne nastavenie sekcie */
.prave-slovo-sekcia {
    padding: 60px 20px;
    background-color: #5000ca;
    
    color: white;
    line-height: 1.7;
}

/* Kontajner s mriežkou (Grid) pre rozloženie textu a obrázka */
.prave-slovo-kontajner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    align-items: center;
}

/* Typografia a nadpis */
.prave-slovo-obsah h2 {
    font-size: 2rem;
    color: white;
    margin-bottom: 25px;
    font-weight: 700;
    position: relative;
}

/* Jemná dizajnová linka pod nadpisom */
.prave-slovo-obsah h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background-color: #3182ce; /* Pekná modrá ladiaca s webom */
    margin-top: 8px;
    border-radius: 2px;
}

.prave-slovo-obsah p {
    font-size: 1.05rem;
    margin-bottom: 15px;
    color: white;
}

/* Zvýraznený záverečný výrok */
.prave-slovo-obsah .zvyraznenie {
    font-weight: 600;
    color: white;
    border-left: 3px solid #e53e3e;
    padding-left: 15px;
    margin-top: 20px;
}

/* Špeciálny dizajnový box pre štatistiku (15 sekúnd) */
.prave-slovo-statistika {
    background: #ffffff;
    border-left: 4px solid #e53e3e; /* Výstražná červená pre dôležitý fakt */
    padding: 15px 20px;
    margin: 25px 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 15px;
}

.prave-slovo-statistika .cislo {
    font-size: 1.8rem;
    font-weight: 800;
    color: #e53e3e;
    white-space: nowrap;
}

.prave-slovo-statistika .text {
    font-size: 0.95rem;
    color: #4a5568;
    font-style: italic;
}

/* Štýlovanie obrázka */
.prave-slovo-obrazok img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Responzivita - prispôsobenie pre mobily a tablety */
@media (max-width: 900px) {
    .prave-slovo-kontajner {
        grid-template-columns: 1fr; /* Na mobile pôjde všetko pod seba */
        gap: 35px;
    }
    
    .prave-slovo-obrazok {
        grid-row: 1; /* Obrázok sa na mobile presunie nad text, vyzerá to lepšie */
    }
    
    .prave-slovo-statistika {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}






















.kontakt-heading {
  width: 100%;
  min-height: 200px;
  background: #5000ca;
  color: white;
  margin-top:2rem;
}

.kontakt-prvy-nadpis {
  font-size:2rem;
  padding: 3rem;
  text-align: center;
}

.kontakt-druhy-nadpis {
  font-size:1.2rem;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}



.kontakt {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Adjust alignment if necessary */
  flex-wrap: wrap;

  background: radial-gradient(circle at -8.9% 51.2%, rgb(255, 124, 0) 0%, rgb(255, 124, 0) 15.9%, rgb(255, 163, 77) 15.9%, rgb(255, 163, 77) 24.4%, rgb(80,0,202) 24.5%, rgb(80,0,202) 66%);
  width: 100%;
  
}

.contact-form {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  background: none;
  text-align: center;
 
  
}

.kontakt-karta {
  display: flex;
  justify-content: center;

  width: 700px;
  
}

.kontakt-karta p img {
  width:60px;
  height: 60px;
  margin-right: 10px;
}

.contact-form p {
  width: 400px;
  color: black;
  padding: 12px;
  letter-spacing: 1px;
  text-align: center;
}

.kontakt-prvy-nadpis h1 {
  color: white;
  font-weight: 500;
  font-size: 2rem;
}

.underline {
  margin: -0.312em auto;
  height: 3px;  
  width: 180px;
  background-color: white;
}

.kontakt-druhy-nadpis {
  color: white;
  font-size: 18px;
  font-size: 1rem;
  margin-top: 15px;
}

.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"] {
  background: rgb(245, 244, 244);
  margin: 20px 20px;
  text-align:center;
  border:none;
  border-radius: 5px;
  padding: 10px 10px;
  width: 235px;
  color: black;
  box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);

}



.contact-form input[type="tel"] {
  width: 250px;
}

.contact-form select {
  width: 300px;
  padding: 15px 10px;
  margin: 20px auto;
  background: none;
}

.contact-form input[type="number"] {
  width: 300px;
  padding: 15px 10px;
  margin: 20px auto;
  display: none;

}

.contact-form #span {
  display:none;
}

.contact-form textarea {
  background: rgb(245, 244, 244);
  margin: 20px auto;
  border: none;
  border-radius: 5px;
  box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
  padding: 15px 10px;
  width: 530px;
  height: 250px;
  color: black;
}

.contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, textarea:focus {
  
 
}

.contact-form input[type="submit"] {
  
background: white;
color: black;
border-radius: 5px;
height: 50px;
width: 200px;
font: 15px 'Poppins';
text-shadow: none;
  cursor: pointer;
border: none;
}


.contact-form input[type="submit"]:hover {
  background-color: white;
  color: #5000ca;
}




@media (max-width: 1071px) {
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"] {
  background: white;
  margin: 20px 20px;
  text-align:center;
  border:none;
  padding: 15px 10px;
  width: 300px;
  color: black;
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);

}



.contact-form input[type="tel"] {
  width: 640px;
}

.contact-form textarea {
  background: white;
  margin: 20px auto;
  text-align:center;
  border: none;
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
  padding: 15px 10px;
  width: 640px;
  height: 300px;
  color: black;
}
}




@media (max-width: 777px) {
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"] {
  background: white;
  margin: 20px 20px;
  text-align:center;
  border:none;
  padding: 15px 10px;
  width: 150px;
  color: black;
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);

}



.contact-form input[type="tel"] {
  width: 340px;
}

.contact-form textarea {
  background: white;
  margin: 20px auto;
  text-align:center;
  border: none;
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
  padding: 15px 10px;
  width: 340px;
  height: 300px;
  color: black;
}



.contact-form p {
  text-align: center;
}

}





@media (max-width: 468px) {
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"] {
  background: white;
  text-align:center;
  border:none;
  padding: 15px 10px;
  width: 230px;
  color: black;
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);

}



.contact-form input[type="tel"] {
  width: 230px;
}

.contact-form textarea {
  background: white;
  text-align:center;
  border: none;
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
  padding: 15px 10px;
  width: 230px;
  height: 300px;
  color: black;
}
}
























footer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #3f019c;
  height: 60px;

}

#footer-content {
  text-align: center;
  color: white;
}

footer h2 {
  margin: 0;
  color: white;
  font-size: 0.8em;
}

#copyright {
  font-size: 0.6em;
  color: white;
  padding-bottom: 10px;
}

/* Make the footer responsive */
@media (max-width: 768px) {
  footer {
    flex-wrap: wrap;
  }
}



/* =========================
   MODERN DESIGN REFRESH v2
   ========================= */

:root{
  --primary:#5b21b6;
  --primary-dark:#4c1d95;
  --accent:#8b5cf6;
  --bg:#f8fafc;
  --surface:#ffffff;
  --text:#1e293b;
  --text-light:#64748b;
  --border:#e2e8f0;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --radius:16px;
}

body{
  background:var(--bg);
  color:var(--text);
}

.topnav{
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(15px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:50px;
  padding:0 15px;
}

.topnav a{
  font-weight:500;
}

.topnav a:hover{
  color:#ddd6fe;
}

#sekcia-sluzby,
.nadpis-sekcia-sluzby{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
}

.service-card{
  background:#fff;
  border-radius:20px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}

.service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.wrapper-tlacitka a{
  border-radius:999px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.wrapper-tlacitka a:hover{
  background:var(--primary);
  color:#fff;
}

.faqcontainer{
  background:#fff;
  color:var(--text);
  box-shadow:var(--shadow);
}

.faq-item{
  background:#f8fafc;
  border:1px solid var(--border);
}

.portfolio-item img{
  border-radius:20px;
}

.portfolio-item .overlay{
  backdrop-filter:blur(10px);
}

/* CONTACT */

.kontakt{
  background:#f8fafc;
  padding:80px 0;
}

.kontakt-heading{
  background:#f8fafc;
  color:#1e293b;
}

.kontakt-prvy-nadpis h1{
  color:#1e293b;
}

.kontakt-druhy-nadpis{
  color:#64748b;
}

.underline{
  background:#8b5cf6;
}

.contact-form{
  max-width:900px;
  margin:auto;
  background:#fff;
  border-radius:24px;
  padding:50px;
  box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.contact-form p{
  color:#334155;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:none;
  transition:.25s;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:#8b5cf6;
  box-shadow:0 0 0 4px rgba(139,92,246,.15);
}

.contact-form input[type="submit"]{
  background:#5b21b6;
  color:#fff;
  border-radius:999px;
  font-weight:600;
  transition:.25s;
}

.contact-form input[type="submit"]:hover{
  background:#6d28d9;
  color:#fff;
  transform:translateY(-2px);
}

/* FOOTER */

footer{
  background:#5000ca;
  border-top:1px solid #e2e8f0;
  height:90px;
}

footer h2,
#footer-content,
#copyright{
  color:#ffffff;
}

#copyright{
  font-size:.8rem;
}