*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body,
body * {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Roboto", sans-serif;
}

img {
    inline-size: 100%;
    display: block;
    object-fit: cover;
}

ul,
ol {
    list-style-type: none;
}

a {
    text-decoration: none;
}

:root {
    --hue: 348deg;
    --saturation: 100%;
    --lightness: 59%;

    --main-color: hsl(var(--hue), var(--saturation), var(--lightness));
}

::selection {
    background-color: var(--main-color);
    color: hsl(0, 0%, 100%);
}

::-moz-selection {
    background-color: var(--main-color);
    color: hsl(0, 0%, 100%);
}

.container {
    max-inline-size: 75rem;

    margin-inline: auto;
    padding-inline: 1.5rem;
}

.sr-only {
    inline-size: 1px;
    block-size: 1px;

    margin: -1px;
    padding: 0;

    border: 0;

    position: absolute;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    white-space: nowrap;
}

.section-title {
    inline-size: fit-content;

    margin-block-end: 5rem;
    margin-inline: auto;

    padding-block-end: 1rem;

    position: relative;

    font-size: clamp(1.85rem, calc(0.1vw + 1.3rem), 2.5rem);
    font-family: "Source Sans Pro", sans-serif;
    line-height: 1.875rem;
    text-transform: capitalize;
    text-align: center;

    color: hsl(0deg 0% 20%);
}

.section-title::before {
    content: "";

    inline-size: 100%;
    block-size: 1px;

    position: absolute;
    inset-block-end: -20%;

    display: block;

    background-color: var(--main-color);
}

.section-title::after {
    content: "";

    inline-size: 40%;
    block-size: 1px;

    padding-block: 0.25rem;

    border-block-start: 1px solid var(--main-color);
    border-block-end: 1px solid var(--main-color);

    display: block;

    position: absolute;
    inset-block-end: -30%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
}

.section-padding {
    padding-block: 4rem;
}

.section-bg {
    background-color: hsl(0, 0%, 95%);
}

.section-bg-2 {
    background-color: hsl(0, 0%, 20%);
}

.btn {
    padding-block: 0.7rem;
    padding-inline: 1.75rem;

    border: none;
    border-radius: 0.375rem;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--main-color);
    color: hsl(0, 0%, 100%);

    font-size: 1.1rem;
    text-transform: capitalize;

    cursor: pointer;

    transition: background-color 0.3s ease-in-out;
}

.btn:hover {
    background-color: #ec2403;
}

.header {
    min-height: 100dvh;

    position: relative;

    background-image: url("../images/slider-02.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.header::before {
    content: "";

    inline-size: 100%;
    block-size: 100%;

    position: absolute;
    inset: 0;
    z-index: 0;

    background-color: rgba(0, 0, 0, 0.76);
}

.header__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;

    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;

    text-align: center;
}

.header__hello,
.header__job {
    color: #fff;
}

.header__hello {
    font-size: 2rem;
}

.header__name {
    inline-size: max-content;

    color: var(--main-color);
    font-size: clamp(2rem, calc(0.5vw + 1.66rem), 4rem);
    text-transform: uppercase;
}

.header__job {
    inline-size: max-content;

    text-transform: capitalize;
    font-weight: 300;
}

.navbar {
    padding-block: 1.5rem;

    position: relative;
    z-index: 9;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 1.1rem;
}

.navbar__hamburger {
    inline-size: 2rem;
    block-size: 1rem;

    display: none;
}

.navbar__hamburger:focus-within {
    user-select: none;
}

@media screen and (max-width: 850px) {
    .navbar__hamburger {
        display: block;
    }
}

.navbar__lines-container {
    inline-size: 100%;
    block-size: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    cursor: pointer;
}

.hamburger__line {
    inline-size: 1.5rem;
    block-size: 2px;

    position: relative;

    background-color: hsl(0, 0%, 100%);
}

.navbar__menu {
    display: none;
}

.navbar__hamburger:has(.navbar__menu:checked) + .navbar__list {
    inset-block-start: 5rem;

    visibility: visible;
    opacity: 1;
}

.navbar__logo__text {
    color: var(--main-color);
    font-size: 1.5rem;
}

.navbar__list {
    display: flex;
    gap: 0.85rem;
}

@media screen and (max-width: 850px) {
    .navbar__list {
        flex-direction: column;
        gap: 1.5rem;

        padding-block: 1.5rem;
        border-radius: 0.375rem;

        position: absolute;
        inset-inline: 0;
        inset-block-start: 0;
        z-index: 10;

        visibility: hidden;
        opacity: 0;

        text-align: center;

        background-color: hsl(0, 0%, 20%);

        transition:
            inset-block-start 0.3s ease-in-out,
            opacity 0.3s ease-in-out;
    }
}

.navbar__link {
    padding-block: 1rem;

    font-weight: 300;
    text-transform: capitalize;
    color: hsl(0, 0%, 100%);

    transition: color 0.3s ease-in-out;
}

.navbar__link.active,
.navbar__link:hover {
    color: var(--main-color);
}

.about__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3rem;
}

.about__start {
    flex-basis: 40%;
}

.about__end {
    flex-basis: 60%;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media screen and (min-width: 850px) {
    .about__container {
        flex-wrap: nowrap;
    }
}

@media screen and (max-width: 850px) {
    .about__start,
    .about__end {
        flex-basis: auto;
    }

    .about__start {
        margin-inline: auto;
    }
}

.about__start__content {
    position: relative;

    border: 10px solid hsl(0, 0%, 33%);
    border-radius: 5px;
}

@media screen and (max-width: 991px) {
    .about__start__content {
        border: none;
    }
}

.about__img {
    border-radius: 5px;
    position: relative;

    inset-block-start: 1.25rem;
    inset-inline-start: 1.5rem;

    overflow: hidden;
}

@media screen and (max-width: 850px) {
    .about__img {
        inset: 0;
    }
}

.about__overlay-links {
    inline-size: 100%;
    block-size: 100%;

    border-radius: 5px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 9;

    background-color: rgba(19, 19, 19, 0.67);

    transition: inset-block-start 0.3s ease-in-out;
}

.about__img:hover .about__overlay-links {
    inset-block-start: 0;
}

.about__img-link {
    color: hsl(0, 0%, 100%);

    transition: color 0.3s ease-in-out;
}

@media (hover: hover) {
    .about__img-link:hover {
        color: var(--main-color);
    }
}

.about__section-title {
    border-inline-start: 5px solid var(--main-color);
    padding-inline-start: 0.9375rem;
    display: inline-block;

    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 600;
}

.about__section-title::after {
    content: ",";
}

.about__desc {
    padding-block-end: 1rem;
    border-block-end: 1px dashed hsl(0deg 0% 33.33%);

    color: hsl(0deg 0% 33.33%);
    line-height: 1.7;
    font-size: clamp(0.9rem, calc(0.1vw + 0.95rem), 1.3rem);
}

.about__details {
    padding-block-start: 0.75rem;

    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.about__item {
    flex-basis: 48%;

    display: flex;
    align-items: center;
    gap: 0.25rem;
}

@media screen and (max-width: 576px) {
    .about__item {
        flex-basis: 100%;
    }
}

.about__item a {
    color: hsl(0, 0%, 33%);
}

.about__title {
    text-transform: capitalize;
    font-weight: 500;
}

.about__btn-groups {
    display: flex;
    gap: 1rem;
}

@media screen and (max-width: 576px) {
    .about__btn-groups {
        flex-direction: column;
    }

    .about__btn-groups .btn {
        flex-basis: 100%;
    }
}

.services__container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.75rem, 1fr));
}

.services__card {
    padding-block: 2rem;
    padding-inline: 0.5rem;

    border-radius: 0.375rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;

    text-align: center;

    background-color: transparent;

    transition:
        background-color 0.3s ease-in-out,
        box-shadow 0.3s ease-in-out;
}

.services__card:hover {
    background-color: hsl(0, 0%, 100%);
    box-shadow: 0 0.9375rem 1.25rem rgba(0, 0, 0, 0.1);
}

.services__card-icon {
    color: var(--main-color);

    font-size: 1.5rem;
}

.services__card-title {
    font-size: clamp(1.25rem, calc(0.2vw + 0.6rem), 1.85rem);
    text-transform: uppercase;
}

.services__card-desc {
    color: hsl(0deg 0% 33.33%);
    line-height: 1.7;
    font-size: clamp(0.95rem, calc(0.2vw + 0.7rem), 1.75rem);
}

.portfolio__filter {
    margin-block-end: 3rem;
    margin-inline: auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    text-align: center;
}

.portfolio__btn {
    border: none;
    outline: none;

    background-color: transparent;

    text-transform: uppercase;
    font-size: 1rem;

    cursor: pointer;

    transition: color 0.3s ease-in-out;
}

.portfolio__btn:hover {
    color: var(--main-color);
}

.portfolio__btn.active {
    color: var(--main-color);
}

.portfolio__container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.portfolio__container .portfolio__card {
    flex-basis: 30%;
}

.portfolio__card {
    border-radius: 3px;

    position: relative;

    overflow: hidden;
    cursor: pointer;
}

.portfolio__card:hover::before,
.portfolio__card:hover::after {
    opacity: 1;
    visibility: visible;

    transition: opacity 0.3s ease-in-out;
}

.portfolio__card img {
    border-radius: 3px;
}

.portfolio__card::before {
    content: "";

    inline-size: 100%;
    block-size: 100%;

    position: absolute;
    inset: 0;
    z-index: 1;

    opacity: 0;
    visibility: hidden;

    background-color: hsla(0, 0%, 0%, 0.51);

    transition: opacity 0.3s ease-in-out;
}

.portfolio__card::after {
    content: "";

    inline-size: 1rem;
    block-size: 1rem;

    position: absolute;
    inset-block-end: 5%;
    inset-inline-end: 5%;
    z-index: 1;

    opacity: 0;
    visibility: hidden;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    transition: opacity 0.3s ease-in-out;
}

.portfolio__card.link::after {
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M15.7285 3.88396C17.1629 2.44407 19.2609 2.41383 20.4224 3.57981C21.586 4.74798 21.5547 6.85922 20.1194 8.30009L17.6956 10.7333C17.4033 11.0268 17.4042 11.5017 17.6976 11.794C17.9911 12.0863 18.466 12.0854 18.7583 11.7919L21.1821 9.35869C23.0934 7.43998 23.3334 4.37665 21.4851 2.5212C19.6346 0.663551 16.5781 0.905664 14.6658 2.82536L9.81817 7.69182C7.90688 9.61053 7.66692 12.6739 9.51519 14.5293C9.80751 14.8228 10.2824 14.8237 10.5758 14.5314C10.8693 14.2391 10.8702 13.7642 10.5779 13.4707C9.41425 12.3026 9.44559 10.1913 10.8809 8.75042L15.7285 3.88396Z" fill="%23ffffff"></path><path d="M14.4851 9.47074C14.1928 9.17728 13.7179 9.17636 13.4244 9.46868C13.131 9.76101 13.1301 10.2359 13.4224 10.5293C14.586 11.6975 14.5547 13.8087 13.1194 15.2496L8.27178 20.1161C6.83745 21.556 4.73937 21.5863 3.57791 20.4203C2.41424 19.2521 2.44559 17.1408 3.88089 15.6999L6.30473 13.2667C6.59706 12.9732 6.59614 12.4984 6.30268 12.206C6.00922 11.9137 5.53434 11.9146 5.24202 12.2081L2.81818 14.6413C0.906876 16.5601 0.666916 19.6234 2.51519 21.4789C4.36567 23.3365 7.42221 23.0944 9.33449 21.1747L14.1821 16.3082C16.0934 14.3895 16.3334 11.3262 14.4851 9.47074Z" fill="%23ffffff"></path></g></svg>');
}

.portfolio__card.video::after {
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M16 10L18.5768 8.45392C19.3699 7.97803 19.7665 7.74009 20.0928 7.77051C20.3773 7.79703 20.6369 7.944 20.806 8.17433C21 8.43848 21 8.90095 21 9.8259V14.1741C21 15.099 21 15.5615 20.806 15.8257C20.6369 16.056 20.3773 16.203 20.0928 16.2295C19.7665 16.2599 19.3699 16.022 18.5768 15.5461L16 14M6.2 18H12.8C13.9201 18 14.4802 18 14.908 17.782C15.2843 17.5903 15.5903 17.2843 15.782 16.908C16 16.4802 16 15.9201 16 14.8V9.2C16 8.0799 16 7.51984 15.782 7.09202C15.5903 6.71569 15.2843 6.40973 14.908 6.21799C14.4802 6 13.9201 6 12.8 6H6.2C5.0799 6 4.51984 6 4.09202 6.21799C3.71569 6.40973 3.40973 6.71569 3.21799 7.09202C3 7.51984 3 8.07989 3 9.2V14.8C3 15.9201 3 16.4802 3.21799 16.908C3.40973 17.2843 3.71569 17.5903 4.09202 17.782C4.51984 18 5.07989 18 6.2 18Z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
}

.portfolio__card.image::after {
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M23 4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V4ZM21 4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4Z" fill="%23ffffff"></path><path d="M4.80665 17.5211L9.1221 9.60947C9.50112 8.91461 10.4989 8.91461 10.8779 9.60947L14.0465 15.4186L15.1318 13.5194C15.5157 12.8476 16.4843 12.8476 16.8682 13.5194L19.1451 17.5039C19.526 18.1705 19.0446 19 18.2768 19H5.68454C4.92548 19 4.44317 18.1875 4.80665 17.5211Z" fill="%23ffffff"></path><path d="M18 8C18 9.10457 17.1046 10 16 10C14.8954 10 14 9.10457 14 8C14 6.89543 14.8954 6 16 6C17.1046 6 18 6.89543 18 8Z" fill="%23ffffff"></path></g></svg>');
}

.facts__container {
    display: grid;
    gap: 5rem;
}

@media screen and (min-width: 320px) {
    .facts__container {
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 576px) {
    .facts__container {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 991px) {
    .facts__container {
        grid-template-columns: repeat(4, 1fr);
    }
}

.facts__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
}

.facts__card-icon {
    color: var(--main-color);
    font-size: 1.3rem;
}

.facts__title {
    font-weight: 800;
    font-size: 1.5rem;
}

.facts__desc {
    text-transform: capitalize;
    text-align: center;

    font-size: 1.1rem;
}

.rating-icon {
    color: hsl(48, 90%, 50%);
}

.testimonial-card {
    max-inline-size: 45rem;

    margin-inline: auto;

    padding-block-start: 3rem;
    padding-block-end: 4.5rem;
    padding-inline: 1.5rem;

    position: relative;

    border-radius: 0.375rem;

    display: flex;
    align-items: center;
    gap: 2.5rem;

    background-color: hsl(0, 0%, 95%);

    font-family: "Source Sans Pro", sans-serif;

    overflow: hidden;
}

@media screen and (max-width: 660px) {
    .testimonial-card {
        flex-direction: column;
    }
}

.testimonial-card::before {
    content: "";
    inline-size: 12.5rem;
    block-size: 30rem;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 0;
    background-color: var(--main-color);
    transform: rotate(45deg) translateX(-12.5rem);
}

.testimonial-card__start,
.testimonial-card__end {
    position: relative;
    z-index: 1;
}

.testimonial-card__img {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
}

.testimonial-card__img img {
    border-radius: 50%;
}

.testimonial-card__end {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.testimonial__card-title {
    font-size: 1.25rem;
    text-transform: capitalize;
    color: hsl(0deg 0% 20%);
}

.testimonial__card-subtitle {
    color: hsl(0, 0%, 47%);
    text-transform: capitalize;
    font-weight: 200;
}

.testimonial-card__desc {
    font-style: italic;
    font-size: 1rem;
    line-height: 1.6;
    color: hsl(0, 0%, 47%);
}

.blog__container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
    gap: 2rem;
}

.blog__card {
    background-color: hsl(0, 0%, 100%);
}

.blog__card__video {
    width: 100%;
    height: 12.5rem;
}

.blog__card__end {
    padding-block: 1rem;
    padding-inline: 1rem;

    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.blog__title {
    text-transform: capitalize;
}

.blog__desc {
    color: hsl(0deg 0% 33.33%);
    line-height: 1.6;
    font-size: 0.95rem;
}

.blog__read-more {
    text-transform: uppercase;
    color: hsl(0, 0%, 20%);

    transition: color 0.3s ease-in-out;
}

.blog__read-more__icon {
    transition: transform 0.3s ease-in-out;
}

.blog__read-more:hover {
    color: var(--main-color);
}

.blog__read-more:hover .blog__read-more__icon {
    transform: translateX(0.4rem);
}

.input,
.textarea {
    inline-size: 100%;

    padding-block: 0.75rem;
    padding-inline: 0.75rem;

    outline: none;

    border-radius: 0.25rem;
    border: 1px solid hsl(0, 0%, 80%);

    font-family: "Source Sans Pro", sans-serif;
    font-size: 0.9rem;

    transition: border-color 0.3s ease-in-out;
}

.textarea {
    min-block-size: 8rem;
    max-block-size: 15rem;
    resize: vertical;
}

.input:focus-within,
.textarea:focus-within {
    border-color: var(--main-color);
}

.input::placeholder,
.textarea::placeholder {
    text-transform: capitalize;
    color: hsl(0, 0%, 60%);
}

.contact__container {
    max-inline-size: 50rem;
    margin-inline: auto;
    padding-inline: 1.5rem;

    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.contact__container__first {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
    gap: 1.25rem;
}

.contact__container__second {
    display: grid;
    gap: 1.25rem;
}

.contact__container .btn {
    max-inline-size: 11.25rem;
    text-transform: uppercase;
    font-size: 0.9rem;
}

@media screen and (max-width: 850px) {
    .contact__container .btn {
        max-inline-size: 100%;
    }
}

.footer__content {
    text-align: center;
    color: hsl(0, 0%, 100%);
}

.footer__links {
    margin-block-end: 1.25rem;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.footer__copyright {
    font-size: 0.95rem;
}

.footer__copyright__name {
    color: var(--main-color);
}

.footer__copyright__name:hover {
    text-decoration: underline;
}