/*
Theme Name: Real Heir Theme
Theme URI: http://twojastrona.pl
Description: Motyw WordPress dla strony Real Heir
Version: 1.0
Author: Twoje Imię
Author URI: http://twojastrona.pl
*/



@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;700&display=swap');

* {
    font-family: 'Manrope', sans-serif;
}
body{
    height:300vh;
	background-color:#fff;

}
html {
    scroll-behavior: smooth;
  }

h1{
    font-size:58px;
    font-weight:500;
    margin-bottom:0px;
}
h2{
    font-size:24px;
    font-weight:300;
}

button {
  font-size: 18px;
  font-weight: 500;
  height: 53px;               /* Wymuszona wysokość */
  padding: 0 30px;            /* Padding tylko na boki */
  border: 0.5px solid #000;
  background-color: transparent;
  color: #000;
  cursor: pointer;
  line-height: 53px;          /* Wyrównanie tekstu */
  border-radius: 45px;
  transition: background-color 0.3s ease;
}
button:hover {
    background-color: #DE7E27;  /* Change background color on hover */
                  /* Change text color to white on hover */
}
/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Navbar styles */
  .navbar {
    position: fixed; /* Sticky while scrolling */
    
    width: 100%; /* 100% width */
    padding-left: 4.85%; /* Margin to offset width */
    padding-right: 4.85%; 
    margin-top:45px;
    color: #DE7E27;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000; /* Ensure the navbar stays above other content */
  }
  
  /* Left section (name) */
  .navbar-left .navbar-brand {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    height: 63px;
    justify-content:center;
    align-items:center;
    padding-left:40px;
    padding-right:40px;
    border-radius:45px;
    border: 0.5px solid #DE7E27;
  }
  
  /* Right section (menu) */
  .navbar-right ul {
    list-style: none;
    display: flex;
    height: 65px;
    justify-content:center;
    align-items:center;
    border-radius:45px;
    border: 0.5px solid #DE7E27;
    font-size:16px;
    background-color:#fff;
    gap:40px;
    padding-left:40px;
    padding-right:40px;
  }
  
  
  .navbar-right ul li a {
    text-decoration: none;
    color: #DE7E27;
    font-size: 16px;
  }
  
  .navbar-right ul li a:hover {
    color: #DE7E27; /* Hover color */
  }
  
  /* Content section */
  .content {
    padding: 20px;
  }
  




.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Umożliwia centrowanie głównych elementów wertykalnie */
    align-items: center;
}

.center-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.animation-container {

    display: flex;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    color: rgb(0, 0, 0);
    font-weight: inherit;
    margin-top: 10px; /* Dodaje trochę odstępu między h1 a animacją */
}

.animation {
    font-size: 2.5em;
    font-weight: 300;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.arrow-container {
  position:absolute;
    padding-top: 25%; /* Odstęp od elementów powyżej */

    cursor: pointer;
}

.arrow-container svg {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center top;
}

.arrow-container:hover svg {
    transform: scaleY(1.5);
}

/* Dostosowanie dla mniejszych ekranów */
@media (max-width: 600px) {
    .animation {
        font-size: 22px;
    }
}

  

  .showreel{

    height:85vh;
    padding-top:15vh;
    
  }

  .showreel-wrapper{
    background-color:#d9d9d9;
    border-radius:20px;
    height:100%;
    width:70%;
    margin-left:15%;
    margin-right:15%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .identification-text{
    margin-left:4.85%;
    padding-top:10vh;
    font-size:34px;
  }

  .gallery1{
    margin-top:10vh;
    position:relative;
    height:55vh;

  }
  .gallery-art{
    position:absolute;
    top:0
  }

  .gallery-art1{
    left:12.5%;
    width:35%;
  }

  .gallery-art2{
    left:60%;
    width:30%;
  }

  .gallery-art img{
    width:100%;
    height:auto;
    object-fit: contain;
    border-radius:20px;
  }

  .gallery2{
    margin-top:10vh;
    position:relative;
    height:125vh;
    width:100%;
    background: linear-gradient(180deg, #FFFFFF 0%, #E8E1D9 100%);

  }



  .gallery-art3{
    top:10%;
    left:4.85%;
    width:27%;
  }

  .gallery-art5{
    top:40%;
    left: 43%;
    width:17%;
  }

  .gallery-art4{
    top:0;
    left:73.5%;
    width:20%;
  }

  .button-div {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: flex-end; 
    padding-bottom:20vh;    /* Centers vertically (in case the button div has a set height) */
    height: 100%;            /* Optional, depending on how you want the button div to behave */
    margin-top: 20px;        /* Optional, for spacing if needed */
}
/* WSPOLPRACA */

.wspolpraca {
  margin-top: 110px;  /* Add some margin on top */
  margin-left:4.85%;    /* Add padding around the content */
  height:auto;
}
.wspolpraca-content {
  display: flex;
  flex-direction: row;
  gap: 30px; /* Space between sections */
}

.chapter-divider{
  width:40%;
}
.chapter-title {
  font-size: 34px;
  border: 0.5px solid black;
  text-transform: uppercase;
  width:fit-content;
  padding:7.5px 45px;
  border-radius:45px;
 
}

.services-list{
  width:30%;
}
.design-list{
  width:25%;
}

.services-list ul,
.design-list ul {
    list-style-type: none;  /* Remove default bullet points */
    padding: 0;             /* Remove padding */
    font-size: 20px;        /* Set font size */
}

.services-list li,
.design-list li {
    margin-bottom: 10px;    /* Add spacing between items */
    position: relative;     /* Position for the pseudo-element */
}

.services-list li,
.design-list li {
    margin-bottom: 10px;    /* Add spacing between items */
    position: relative;     /* Position for the pseudo-element */
    display: flex;          /* Use flexbox to ensure the content stays aligned */
    align-items: center;    /* Vertically center the arrow and text */
    padding-left: 25px;     /* Add space on the left to fit the arrow */
}

.services-list li::before,
.design-list li::before {
    content: '';            /* Make the pseudo-element visible */
    position: absolute;     /* Position it absolutely within the list item */
    left: 0;                /* Align the arrow to the left */
    width: 19px;            /* Set the width of the SVG */
    height: 8px;            /* Set the height of the SVG */
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%228%22%20viewBox%3D%220%200%2019%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18.3536%204.35355C18.5488%204.15829%2018.5488%203.84171%2018.3536%203.64645L15.1716%200.464466C14.9763%200.269204%2014.6597%200.269204%2014.4645%200.464466C14.2692%200.659728%2014.2692%200.976311%2014.4645%201.17157L17.2929%204L14.4645%206.82843C14.2692%207.02369%2014.2692%207.34027%2014.4645%207.53553C14.6597%207.7308%2014.9763%207.7308%2015.1716%207.53553L18.3536%204.35355ZM0%204.5H18V3.5H0L0%204.5Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E'); /* Inline SVG as a background image */
    background-size: contain; /* Ensure the SVG scales properly */
    background-repeat: no-repeat; /* Prevent background repeat */
    transition: left 0.3s ease;  /* Smooth transition for movement */
}

.services-list li:hover::before,
.design-list li:hover::before {
    left: 2px;  /* Move the arrow 2px to the right when hovered */
}


/* FOOTER */

.custom-footer {
  /* height: 60vh; */
  /* Kolor tła stopki */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
  padding-top:90px;
  padding-bottom:20px;
}

.footer-credits{
  padding-top:90px;
}

.social-links{
  display:flex;
  gap:20px;
  margin-top:20px;
  flex-direction:column;
}

.social-link{
  font-size:34px;
}


.wspolpraca-gallery{
  display: flex;
      gap: 20px;
      align-items: center; /* wyrównuje obrazki w rzędzie */
      
  margin-top:110px;
}

.wspolpraca-gallery img{
  border-radius:25px;
}

.wspolpraca-art1{
  flex: 0 0 calc(50% - 4.85% - 10px);
}

.wspolpraca-art1 img {
  width: 100%;
  height: auto;
}


.wspolpraca-art2{
  display: flex;
      align-items: center;
}

.wspolpraca-art2 img {
  height: 100%; /* dostosowanie wysokości do pierwszego obrazka */
  width: auto; /* szerokość dostosowuje się do wysokości */
}

footer h2{
  font-size:34px;
  font-weight:700;
  padding-bottom:30px;
}

footer button{
  margin-bottom:70px;
}

.social1{
  text-decoration:underline;
}
.social2{
  text-decoration:underline;
  text-decoration-color: white;
}
.social2:hover{
  text-decoration:underline;
  text-decoration-color: rgb(0, 0, 0);
}
.social1{
  text-decoration:underline;
}