.homepage-section {
    display: flex;
    position: relative;
}
  
.homepage-image-wrapper {
    flex: 1;
    position: relative;
    z-index: 1;
}
  
.homepage-image-wrapper img {
    display: block;
    width: 100%;
}
  
.homepage-overlay {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgb(141, 141, 141);
    text-align: right;
    padding: 5%;
    width: 100%;
}
  
.homepage-subtext {
    font-size: 2.3rem;
    font-weight: 300;
    line-height: 55px;
    color: rgb(141, 141, 141);
    padding: 4% 0 0 0;
}  

.homepage-title {
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgb(48, 48, 48);
    padding-bottom: 3%;
}
  
.homepage-subtitle {
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgb(48, 48, 48);
    padding: 0 0 5% 0;
}
  
.homepage-description {
    font-size: 2.3rem;
    font-weight: 300;
    line-height: 3rem;
    color: rgb(141, 141, 141);
    padding: 4% 0 0 0;
}
  

.custom-button {
    background: #16B99A;
    color: #fff;
    padding: 2%;
    border: 2px solid #16BA9C;
    border-radius: 5px;
    box-shadow: 5px 5px 11px 1px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 2.5rem;
    letter-spacing: 0.3rem;
}
  
.custom-button:hover {
    background: #16B99A;
    color: #FFFFFF;
    border-color: #94E0D4;
}
  
.features {
    display: flex;
    position: relative;
    color: #303030;
}
  
.features img {
    display: block;
    width: 100%;
}
  
.features-content {
    position: absolute;
    top: 7%;
    text-align: left;
    width: 100%;
}
  
.features-title {
    padding: 0 0 22% 2%;
    font-size: 2.5rem;
    font-weight: 600;
}
  
.features table {
    border-collapse: collapse;
    width: 100%;
    font-size: 1.2rem;
}
  
.features table tr:first-child {
    text-align: center;
    font-weight: 400;
    color: rgb(141, 141, 141);
}
  
.features table tr:last-child {
    text-align: center;
    font-weight: 600;
    height: 100px;
}  

.features table td {
    width: 12.5%;
}
  
@media (min-width: 1200px) and (max-width: 1600px) {
    .features-title {
        padding: 0px 0px 15% 2%;
    }
    .features table tr:last-child {
        height: 40px;
    }  
    .custom-button {
        letter-spacing: 0.1rem;
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    .homepage-overlay {
        top: 0%;
        transform: translateY(0%);
    }
    .homepage-subtext {
        font-size: 3rem;
        padding: 0% 0 7% 0;
    }
    .custom-button {
        font-size: 3.5rem;
        padding: 2rem;
        border-radius: 3px;
    }
    .homepage-title {
        font-size: 2rem;
        letter-spacing: 1px;
        padding-bottom: 3%;
    }
    .homepage-subtitle {
        font-size: 3rem;
        letter-spacing: 0px;
        padding: 0 0 25% 0;
    }
    .homepage-description {
        font-size: 2.3rem;
        line-height: 3rem;
        padding: 25% 0 0 0;
    }

    .homepage-subtitle-defender {
        font-weight: 600;
        color: rgb(48, 48, 48);
        font-size: 3rem;
        letter-spacing: 0px;
        padding: 0 0 30% 0;
    }

    .homepage-description-defender {
        font-size: 2.3rem;
        line-height: 3rem;
        padding: 30% 0 0 0;
        font-weight: 300;
        color: rgb(141, 141, 141);
    }

    .features {
        flex-direction: column;
    }

    .features-block {
        position: relative;
        width: 100%;
    }
      
    .features-block img {
        display: block;
        width: 100%;
        height: auto;
    }
      
    .features-content {
        top: 0%;
        z-index: 1;
        padding: 0% 5%;
        height: 24vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        font-size: 2rem;
    }
      
    .features-content-title {
        position: absolute;
        top: 0%;
        z-index: 1;
        height: 10.5vw;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
    }

    .features-title {
        padding: 0% 0% 0% 5%;
        font-size: 2.5rem;
        display: flex;
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .features-subtitle {
        text-align: left;
        font-weight: 600;
        line-height: 3.2rem;
    }

    .features-text {
        text-align: left;
        font-weight: 400;
        color: rgb(141, 141, 141);
        line-height: 2rem;
    }

    .gradient-line {
        height: 2px;
        width: 100%;
        background: linear-gradient(to right, white, rgb(48, 48, 48));
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .line {
        height: 2px;
        width: 100%;
        background: rgb(48, 48, 48);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }


}

@media (max-width: 767px) {
    .homepage-overlay {
        height: 100%;
    }

    .homepage-subtext {
        font-size: 1.3rem;
        padding: 1% 1% 5% 1%;
        line-height: 25px;
        text-align: left;
    }

    .custom-button {
        font-size: 1.2rem;
        letter-spacing: 0.3rem;
        padding: 0.7rem;
        border-radius: 3px;
    }

    .homepage-title {
        font-size: 1rem;
        letter-spacing: 0px;
        padding-bottom: 1.5%;
    }

    .homepage-subtitle {
        font-size: 2rem;
        letter-spacing: 0px;
        padding: 0 0 19% 0;
    }

    .homepage-description {
        font-size: 1.3rem;
        line-height: 25px;
        padding: 19% 0 0 0;
    }


    .homepage-subtitle-defender {
        font-weight: 600;
        color: rgb(48, 48, 48);
        font-size: 2rem;
        letter-spacing: 0px;
        padding: 0 0 25% 0;
    }

    .homepage-description-defender {
        font-size: 1.3rem;
        line-height: 25px;
        padding: 25% 0 0 0;
        font-weight: 300;
        color: rgb(141, 141, 141);
    }

    .features {
        flex-direction: column;
    }

    .features-block {
        position: relative;
        width: 100%;
    }
      
    .features-block img {
        display: block;
        width: 100%;
        height: auto;
    }
      
    .features-content {
        top: 0%;
        z-index: 1;
        padding: 0% 5%;
        height: 24vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
      
    .features-content-title {
        /* position: absolute;
        top: 5%;
        text-align: left;
        width: 100%; */
        position: absolute;
        top: 0%;
        z-index: 1;
        height: 10.5vw;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
    }

    .features-title {
        padding: 0% 0% 0% 5%;
        font-size: 1.5rem;
        display: flex;
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .features-subtitle {
        text-align: left;
        font-weight: 600;
        line-height: 1.2rem;
    }

    .features-text {
        text-align: left;
        font-weight: 400;
        color: rgb(141, 141, 141);
        line-height: 1rem;
    }

    .gradient-line {
        height: 2px;
        width: 100%;
        background: linear-gradient(to right, white, rgb(48, 48, 48));
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .line {
        height: 2px;
        width: 100%;
        background: rgb(48, 48, 48);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
      
}