/* Reset some defaults */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, 
ul, ol, li, nav, header, footer, main, section, article, aside,
figure, figcaption, blockquote, dl, dt, dd, form, input, textarea, button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* outline: brown solid 1px; */
}

/* Additional element-specific resets */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, 
ul, ol, li, nav, header, footer, main, section, article, aside,
figure, figcaption, blockquote, dl, dt, dd, form, input, textarea, button {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font: inherit;
    font-size: 100%;
}

/* List resets */
ul, ol {
    list-style: none;
}

/* Table resets */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.fa, .fas {
    font-size: 4em;
    padding-bottom: .5em;
    padding-right: 20px;
    }
    
body {
    font-family: sans-serif;
}
.cal-sans-regular {
    font-family: "Cal Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
/* Creates a serrated/zig-zag border effect on the bottom of an element */
.serrated-border {
  /* Customizable properties */
  --serration-size: 24px;    /* How big each "tooth" of the serrated edge is */
  --serration-angle: 90deg;  /* How pointy the serrations are (smaller = sharper) */
  
  /* Basic element styling */
  padding: 2rem;

  /* The serrated effect is created using CSS masks */
  /* We use both -webkit-mask and mask for cross-browser support */
  -webkit-mask: 
    conic-gradient(
      /* Start the gradient at the bottom center of each "tooth" */
      from calc(var(--serration-angle) / -2) at bottom,
      /* Create the zig-zag pattern: transparent -> black -> transparent */
      transparent,
      black 1deg calc(var(--serration-angle) - 1deg),
      transparent var(--serration-angle)
    ) 50% / var(--serration-size) 100% repeat-x;
    
  /* Standard mask property (same values as -webkit-mask) */
  mask: 
    conic-gradient(
      from calc(var(--serration-angle) / -2) at bottom,
      transparent,
      black 1deg calc(var(--serration-angle) - 1deg),
      transparent var(--serration-angle)
    ) 50% / var(--serration-size) 100% repeat-x;
}
header {
    position: relative;
    height: 500px;
}

.header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.header-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: 40%;
    background:linear-gradient(rgba(0, 18, 4, 0.568), rgb(3, 129, 32));
}

.header-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0;
    height: 100%;
}

.logo {
    color: white;
    font-size: 24px;
}

.logo i {
    margin-right: 10px;
}

nav ul {
    list-style: none;
    display: flex;
}
nav ul li img {
    padding: 28px 9px;
}
nav ul li {
    margin: 0;
    background-color: #ffffff;

}

nav ul li a {
    display: inline-block;
    color: #008000;
    text-decoration: none;
    border-radius: 0;
    padding: 40px 40px;
    width: 200px;
}

nav ul li a:hover {
    color: #d3f6d3;
    background-color: rgb(28, 177, 0);
}

main {
    text-align: center;
}

h1 {
    margin-top: 2em;
    margin-bottom: 0.5em;
    color: #fafffa;
    font-family: "Cal Sans", sans-serif;
    font-size: 3em;
    font-weight:100;
    font-style:normal;
}
.title-highlight {
    /* Creates a gradient text effect that transitions from bright green to yellow */
    /* You can customize:
       - Gradient angle (45deg): Try 90deg for vertical, 0deg for horizontal
       - Colors: Use any valid color values (hex, rgb, hsl)
       - Gradient type: Try radial-gradient() for circular effect
       - Multiple color stops: gradient(45deg, color1, color2, color3)
       - Animated gradients: Add @keyframes to animate position
    */
    background: linear-gradient(45deg, #adfc02, #f3d704);
    
    /* These properties make the background only apply to text */
    /* Cross-browser support for background-clip */
    -webkit-background-clip: text;  /* For Safari/Chrome */
    -moz-background-clip: text;     /* For Firefox */
    background-clip: text;          /* Standard syntax */
    
    /* Makes the text transparent so gradient shows through */
    -webkit-text-fill-color: transparent;
    
    /* Optional enhancements you can add:
       - text-shadow: 2px 2px 4px rgba(0,0,0,0.3);  // Add depth
       - filter: brightness(1.2);                    // Adjust brightness
       - transition: all 0.3s ease;                  // Smooth color changes
    */
}

div.header-content > span {
    color: #eadc04;
    border:#eadc04 solid 1px;
    padding: 1em;
    font-size: 1.5em;
    text-transform: capitalize;
}
div.header-content > h1 > span, h3 > span, p > span {
    text-transform:uppercase;
}
.about {
    height: 250px;
    color: #e0f7e0;
    background-color: rgb(3, 129, 32);
}
#about-section > p, #contacts-section > p, .property-box > p {
    padding-top: 1em;
}
#about-section > p, #about-section > h2 {
    color:rgb(224, 247, 224);
}
.rating {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    font-size: .2em;
    color: #35ae51; /* Orange provides a warm, vibrant contrast while maintaining harmony */
margin-top: 60px;
}
section {
    height: 300px;
    padding: 30px;
}

section > h2 {
    margin-top: 2em;
    padding-bottom: .5em;
    font-family: "Cal Sans", sans-serif;
    font-weight:200;
    font-style:normal;
    font-size: 1.2em;
    text-transform: uppercase;
    color: #abffab;
}

.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 20px;
}

#services-section {
    height: auto;
    width: auto;
}

.service-box {
    display: flex;
    flex-direction: column;
    margin: 5px;
    padding: 2em;
    border-radius: 7px;
    width: 15em;
    min-height: 200px;
    text-align: center;
}

#services-section > h2 {
    width: 100%;
    margin: 0 20px 20px 20px;
    text-align: center;
    color: #006400;
   
}
.fa-balance-scale, .fa-file-contract,.fa-piggy-bank,.fa-search, .fa-tools {
    font-size: 2.5em;
}
.fas {
    padding: 1em;
}
div.service-box > h3 {
    margin-bottom: 15px;
    text-align: center;
    font-weight: 600;
    font-size: .8em;
}

div.service-box > p {
    text-align: center;
    flex-grow: 1;
    font-weight: 400;
    font-size: .8em;

}

section.properties {
    background: 
        linear-gradient(rgba(0, 0, 0, 0.66), rgba(1, 32, 1, 0.84)), url('/images/property-type-commercial.jpg');
    background-size: cover;
    background-position: center;
    height: auto;
    padding: 40px;
 
}
#contacts-section {
    /*   */
    background: 
        linear-gradient(135deg,rgb(3, 129, 32),rgba(39, 102, 0, 0.4)), url('/images/contact-zak.jpg');
background-size: cover;
background-position: center;
height: 450px;
}

#contacts-section > p {
    color:#bbf7bb;
    padding-top: 2em;
    margin: 2em 0;
}


#contacts-section > p > a, #contacts-section > p > a:hover {
    color:  #bbf7bb;
    text-decoration: none;
    display: inline-block;
    
}
#contacts-section > p > a:hover {
    padding-bottom: .7em;
    border-bottom: .7px solid #bbf7bb;
    transition: all 0.1s ease;
}
.fa-phone, .fa-envelope {
    font-size: 1.3em;
    padding-right: .3em;
    padding-left: 0;
}

.property-box > p > a, .property-box > p{
    color: #008000;
    text-decoration: none;
    display: inline-block;
}
.fa-building {
    font-size: 1em;
    color: #d3f6d3;
}
.fa-address-book{
    font-size: 1em;
    color: #abffab;
}
.fa-gem {
    font-size: 1em;
    color: #006400;
}
.fa-heart {
    font-size: 1em;
    color: #373c37;
    padding: 0 .2em;
}
.property-box > p > a:hover, .property-box > a:hover {
    color: #d3f6d3;
    text-decoration: none;
    border-bottom: #d3f6d3 solid 1px;
}
.property-box {
    padding: 0 2em;
    margin-bottom: 2em;
}
/* No need for z-index management or pseudo-elements */
section.properties h1, 
section.properties h2, 
section.properties h3, 
section.properties p, 
section.properties span, 
section.properties a {
    color: #FFFB07; /* All content will be visible by default */
}
section.properties > h2 {
    color: #d3f6d3;
}
.property-box > p{
    font-size: .8em;
}
/* p.register-property {
    display: block;
    padding-top: 190px;
    font-size: 1em;
} */

.property-types {
    list-style: none;
    padding: 0 0 2em 0;
    margin: 2em 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center; /* Centers the list items horizontally */
    align-items: center; /* Centers the list items vertically */
}

.property-types li {
    padding: 0.5em 1.5em; /* Keep padding for text */
    background: none; /* Ensure no background color */
    color: white;
    font-size: .9em;
    font-weight: lighter;
    position: relative; /* Crucial for positioning pseudo-elements */
    border: none; /* Remove any standard borders */
    overflow: hidden; /* Hide parts of pseudo-elements outside the li */
    margin: 0.5em 0; /* Add some vertical margin if needed */
}

.property-types li::before,
.property-types li::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px; /* Border width */
    background-color: #bbf7bb; /* Border color */
    transform-origin: center; /* Rotate/skew from the center */
}

.property-types li::before {
    left: 5px; /* Position near the left edge (adjust as needed) */
    transform: skewX(-20deg); /* Slant the left border (adjust angle) */
}

.property-types li::after {
    right: 5px; /* Position near the right edge (adjust as needed) */
    transform: skewX(-20deg); /* Slant the right border (adjust angle) */
}

.property-types li:hover {
    /* Optional: Add hover effect if desired, e.g., change text color */
    color: #d3f6d3;
}

/* Remove the previous clip-path rule if it exists */
/* 
.property-types li {
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%); 
}
*/

.property-types li:hover {
    background: none; /* Adjust hover background */
    /* clip-path remains the same on hover unless specified otherwise */
}

a.register-btn {
    display: inline-block;
    padding: 0.8em 1.5em;
    background-color: rgb(3, 129, 32);
    color: #adfc02;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    
    /* Creates shine effect */
    background-image: linear-gradient(
        110deg,
        transparent 0%,
        transparent 40%,
        rgba(255,255,255,0.2) 40%,
        rgba(255,255,255,0.2) 60%,
        transparent 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-position: right bottom;
    /* Options for animation:
       - forwards: Keeps the final keyframe state
       - backwards: Applies first keyframe before animation starts  
       - both: Combines forwards and backwards
       - alternate: Reverses animation on each cycle
       - 1: Plays animation once
       - 2: Plays animation twice
       - number: Plays animation specified number of times
    */
    animation: shine 3s alternate;
}

a.register-btn:hover {
    color: rgb(3, 129, 32);
    background-color: #f3d704;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: none;
}

a.register-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

@keyframes shine {
    0% {
        background-position: right bottom;
    }
    50% {
        background-position: left bottom;
    }
    100% {
        background-position: right bottom;
    }
}

/* Potential tweaks:
1. Change animation duration: adjust the '3s' in animation: shine 3s infinite
2. Modify shine effect: adjust the gradient percentages and colors
3. Add pulse effect: 
   animation: shine 3s infinite, pulse 2s infinite;
   @keyframes pulse {
       0% { transform: scale(1); }
       50% { transform: scale(1.05); }
       100% { transform: scale(1); }
   }
4. Add border animation:
   border: 2px solid transparent;
   background-clip: padding-box;
   animation: borderRotate 4s linear infinite;
5. Add glow effect on hover:
   filter: drop-shadow(0 0 10px rgba(173, 252, 2, 0.5));
*/

.light-green {
    background-color: #e0f7e0;
    color: #006400;

}

.solid-green {
    background-color: #008000;
    color: white;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #d3f6d3;
    color: #354235;
}
footer > p {
    font-size: .8em;
    display: inline;
  }
  #copyright {
    padding-right: 10%;
  }
  #made-by > span{
    font-weight: 600;
    text-transform: none;
  }

/* Responsive design */
@media (max-width:900px) {
    
    .header-content > h1 {
        margin-top: 1em;
        text-align: center;         /* Forces left alignment of text */
        padding-left: 5%;         /* Adds consistent left padding relative to container width */
        width: 100%;             /* Ensures h1 takes full width of container */
    }
    
    .header-content > span {
        display: block;          /* Makes span behave like block element */
        text-align: center;        /* Forces left alignment of text */
        padding-left: 5%;        /* Matches h1 padding for alignment */
        width: 80%;            /* Ensures span takes full width of container */
    
    }
    /* div.header-content > span {
        color: #adfc02;
        border: #adfc02 solid 1px;
        padding: 1em;
        font-size: 1.5em;
      } */
    .services {
        flex-direction: column;
        align-items: center;
        height: auto;
    }
    .service-box {
        width: 80%;
        margin-bottom: 20px;
    }
    div.service-box > p {
        font-size: 1em;
      }
    .header-content {
    padding: 0;
    margin: 0;
    }
    .header-content > nav {
        width: 100%;
    }
    nav ul {
        flex-direction: row;     /* Forces nav items into a horizontal row layout */
        width: 100%;            /* Makes the nav take up full container width */
        display: inline-flex;          /* Enables flexbox layout for direct children */
        font-size: .9em;
    }
    
    nav ul li {
        margin: 0;             /* Removes default spacing between list items */
        padding: 0;            /* Removes internal spacing within list items */
        flex: 1;              /* Makes each list item grow equally to fill space */
        display: flex;        /* Creates nested flex container for <a> tag */
    }

    nav ul li a {
        padding: 15px;         /* Adds consistent internal spacing within links */
        width: 100%;          /* Makes link fill entire list item width */
        height: 100%;         /* Makes link fill entire list item height */
        display: flex;        /* Enables flexbox for link content alignment */
        align-items: center;  /* Vertically centers content within link */
        justify-content: center; /* Horizontally centers content within link */
    }
    #services-section > h2 {
        margin: 0 ;
    }
    .service-box {
        width: 70%;
    }
    .property-types > li{
        width: 100%;
    }
    #contacts-section > p > a {
        margin-top: -2em;
    }
    footer > p {
font-size:.8em;
display: inline-block;
padding-top: 1em;
    }

}