/*Landing Page Section*/
#landing_page{
   padding-top: 0%;

   background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/pozadie.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}
.landing_page{
   height: 100vh;

   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;

   padding-right: 30%;
}
.landing_page h1{
   font: bold 3.5rem var(--sub_heading);

   color: var(--light);

   margin-bottom: 3%;
}
.landing_page strong{
   font: 2rem var(--sub_heading);

   color: var(--light);

   margin-bottom: 3%;
}
.landing_page a{
   border-radius: 10px;
   padding: 1% 3%;
   border: solid 2px var(--primary);

   font: 1.5rem var(--sub_heading);

   color: var(--light);
   background-color: var(--primary);
}
.landing_page a:hover{
   background-color: transparent;
   color: var(--primary);
}
@media screen and (max-width: 1079px) {
   .landing_page{
      padding-right: 10%;
   }
   .landing_page strong{
      font-size: 1.5rem;
   }
   .landing_page a{
      font-size: 1.2rem;
   }
   .landing_page h1{ 
      font-size: 2.5rem;
   }
}
@media screen and (max-width: 635px){
   #landing_page{
      padding: 0 5%;
   }
   .landing_page{
      align-items: center;

      padding-right: 0;
   }
   .landing_page strong{
      font-size: 1.2rem;
      text-align: center;
      margin-bottom: 4%;
   }
   .landing_page a{
      font-size: 1.2rem;
      text-align: center;
   }
   .landing_page h1{ 
      font-size: 2.5rem;
      text-align: center;
      margin-bottom: 5%;
   }
}
/*Landing Page Section*/

/*About Us Page*/
.hero{
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.hero .section-title{
   text-align: left;
}
.hero .text{
   width: 50%;
   text-align: justify;
   font-size: .9rem;
}
.hero figure{
   width: 40%;
}
.hero figure video{
   width: 100%;
}
@media screen and (max-width: 1265px){
   .hero{
      flex-direction: column;
      justify-content: center;
   }
   .hero .section-title{
      text-align: center;
   }
   .hero .text{
      width: 100%;
      margin-bottom: 5%;
   } 
   .hero figure{
      width: 100%;
   }
}
@media screen and (max-width: 435px){
   #about{
      padding: 5%;
   }
   .hero p{
      font-size: .8rem;
   }
}
/*About Us Page*/
/*Services section*/
#services {
   background-color: var(--secondary);
}
.services-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 30px;
   margin-top: 50px;
}
.service-card {
   background: white;
   border-radius: 8px;
   padding: 30px;
   text-align: center;
   transition: all 0.3s ease;
   box-shadow: var(--shadow);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.text-center p{
   text-align: center;
}
.service-card:hover {
   transform: translateY(-10px);
}
.service-icon {
   font-size: 3rem;
   color: var(--primary);
   margin-bottom: 20px;
}
.service-card h3 {
   font-size: 1.5rem;
   margin-bottom: 15px;
   color: var(--primary);
}
.text-center h2{
   margin-bottom: 1%;
}
@media screen and (max-width: 1045px){
   .services-grid {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   }
}
@media screen and (max-width: 500px){
   #services{
      padding: 5%;
   }
   .service-icon{
      font-size: 2rem;
   }
   .service-card h3{
      font-size: 1.2rem;
   }
   .service-card p{
      font-size: .9rem;
   }
}
/* Portfolio Section */
#portfolio {
   background-color: var(--light);
}
.portfolio-filter {
   display: flex;
   justify-content: center;
   gap: 15px;
   margin-bottom: 40px;
}
.filter-btn {
   padding: 1% 2%;
   background-color: transparent;
   border: 1px solid var(--primary);
   color: var(--primary);
   border-radius: 4px;
   cursor: pointer;
   transition: var(--transition);
}
.section-title{
   font: bold 3rem var(--sub_heading);
   text-align: center;

   margin-bottom: 5%;
}
.filter-btn.active, .filter-btn:hover {
   background-color: var(--primary);
   color: var(--light);
}
.portfolio-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
   gap: 25px;
}
.portfolio-item {
   position: relative;
   border-radius: 8px;
   overflow: hidden;
   height: 250px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.portfolio-item img {
   display: flex;
   justify-content: center;
   align-items: center;

   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: var(--transition);
}
.portfolio-item:hover img {
   transform: scale(1.1);
}
.portfolio-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(22, 86, 132, 0.8);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   opacity: 0;
   transition: var(--transition);
}
.portfolio-item:hover .portfolio-overlay {
   opacity: 1;
}
.portfolio-overlay h3 {
   color: var(--light);
   font: 1.5rem var(--sub_heading);
   text-align: center;
   margin-bottom: 10px;
}
.portfolio-overlay p {
   color: var(--light);
   margin-bottom: 20px;
   text-align: center;
}
/* Portfolio Modal */
.portfolio-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   z-index: 2000;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
   visibility: hidden;
   transition: var(--transition);
}
.portfolio-modal.active {
   opacity: 1;
   visibility: visible;
}
.modal-content {
   width: 90%;
   max-width: 1000px;
   height: 90%;
   background-color: var(--light);
   border-radius: 10px;
   overflow: hidden;
   position: relative;
}
.modal-close {
   position: absolute;
   top: 20px;
   right: 20px;
   font-size: 1.5rem;
   color: var(--light);
   background-color: var(--primary);
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   z-index: 10;
}
.modal-slider {
   width: 100%;
   height: 500px;
   position: relative;
}
.slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: var(--transition);
}
.slide.active {
   opacity: 1;
}
.slide img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   background-color: #f1f1f1;
}
.slide-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 50px;
   height: 50px;
   background-color: rgba(22, 86, 132, 0.7);
   color: var(--light);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   z-index: 10;
}
.slide-nav.prev {
   left: 20px;
}
.slide-nav.next {
   right: 20px;
}
.modal-info {
   width: 100%;
   height: calc(100% - 500px);

   padding: 2.5%;

   display: flex;
   flex-direction: column;
   align-items: start;
   justify-content: space-between;

   overflow-y: scroll;
}
.modal-info h3 {
   font: 1.8rem var(--sub_heading);
   text-align: center;
   margin-bottom: 1%;
   color: var(--primary);
}
.modal-info p {
   margin-bottom: 1%;
}
@media screen and (max-width: 619px){
   #portfolio{
      padding: 0 5%;
   }
   .portfolio-grid{
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   }
   .portfolio-filter{
      gap: 10px;
   }
   .filter-btn{
      font-size: .8rem;
   }
}
@media screen and (max-width: 753px) {
   .portfolio-filter{
      flex-wrap: wrap;
   }
   .section-title{
      font-size: 2rem;
   }
   .modal-slider{
      height: 300px;
   }
   .modal-info h3{
      font-size: 1.2rem;
   }
   .modal-info p{
      font-size: .8rem;
   }
}
/*Social Media Section*/
/* Add to styles.css */
#social_media {
   background-color: var(--secondary);
   padding: 5% 15%;
   text-align: center;
}
.social-icons {
   display: flex;
   justify-content: center;
   gap: 30px;
   margin-top: 30px;
}
.social-icons a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background-color: var(--primary);
   color: white;
   font-size: 1.8rem;
   transition: var(--transition);
}
.social-icons a:hover {
   background-color: var(--accent);
   transform: translateY(-5px);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
   .social-icons {
      gap: 20px;
   }
   
   .social-icons a {
      width: 50px;
      height: 50px;
      font-size: 1.5rem;
   }
}
/*Social Media Section*/
/* Map Section */
#map {
   height: 400px;
   width: 100%;
   padding: 0;
}
/*Contact section*/
#contact {
   background-color: var(--secondary);
   padding: 5% 15%;
   text-align: center;
}
.contact-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 30px;
   margin: 50px 0;
}
.contact-card {
   background: var(--light);
   border-radius: 10px;
   padding: 30px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   transition: var(--transition);
   text-align: center;
}
.contact-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.contact-icon {
   font-size: 2.5rem;
   color: var(--primary);
   margin-bottom: 20px;
}
.contact-content h3 {
   font: 1.5rem var(--sub_heading);
   color: var(--primary);
   margin-bottom: 15px;
}
.contact-content a, .contact-content p {
   color: var(--dark);
   transition: var(--transition);
   display: block;
   margin-bottom: 10px;
}
.contact-content a:hover {
   color: var(--primary-light);
}
@media (max-width: 768px) {
   .contact-icon{
      font-size: 1.5rem;
   }
   .contact-content h3{
      font-size: 1.2rem;
   }
   .contact-container {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   }
}