.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--white);
    background-image: url(assets/img/loader.png);
    background-size: 60px!important;
    z-index: 10;
    display: grid;
    place-items: center;
    transition: var(--transition-2)
}

.preloader.loaded {
    opacity: 0;
    pointer-events: none
}

.preloader .circle {
    width: 100px;
    height: 100px;
    border: 5px solid var(--raisin-black_20);
    border-radius: 50%;
    border-top-color: var(--persian-red);
    animation: rotate360 1s linear infinite;
    transition: var(--transition-2)
}

@keyframes rotate360 {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.preloader.loaded .circle {
    opacity: 0
}

.btn {
    max-width: max-content;
    font-weight: var(--fw-700);
    font-size: var(--fs-9);
    height: 55px;
    display: flex;
    align-items: center;
    padding-inline:50px;border: none;
    border-radius: var(--radius-10);
    overflow: hidden;
    transition: var(--transition-2)
}

.btn:before,.btn:after {
    right: 0;
    width: 100%;
    height: 51%;
    transform: scaleX(0);
    background-color: var(--black);
    z-index: -1;
    transition: transform var(--transition-1)
}

.btn:before {
    top: 0;
    transform-origin: left
}

.btn:after {
    top: 50%;
    transform-origin: right
}

.btn:is(:hover,:focus):before,.btn:is(:hover,:focus):after {
    transform: scaleX(1)
}

.btn:is(:hover,:focus):before {
    transform-origin: right
}

.btn:is(:hover,:focus):after {
    transform-origin: left
}

.btn-primary {
    background-color: var(--persian-red);
    color: var(--white)
}

.btn-primary:is(:hover,:focus) {
    background-color: var(--persian-red);
    color: var(--white)
}

.btn-secondary {
    background-color: var(--mustard);
    color: var(--raisin-black-1);
    gap: 15px
}

.btn-secondary:before,.btn-secondary:after {
    background-color: var(--persian-red)
}

.btn-secondary:is(:hover,:focus) {
    background-color: var(--mustard);
    color: var(--white)
}

.header .btn {
    display: none
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-block:25px;background-color: var(--white);
    transition: var(--transition-1);
    z-index: 4
}

.header.active {
    background-color: var(--white);
    padding-block:15px;box-shadow: var(--shadow-1)
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.nav-open-btn {
    background-color: var(--white);
    color: var(--eerie-black);
    font-size: 35px;
    padding: 10px;
    box-shadow: var(--shadow-2);
    border-radius: var(--radius-10)
}

.navbar {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    background-color: var(--raisin-black-2);
    color: var(--white);
    max-width: 350px;
    width: 100%;
    height: 100%;
    padding: 30px;
    z-index: 1;
    transform: translate(100%);
    visibility: hidden;
    transition: .25s var(--cubic-in)
}

.navbar.active {
    transform: translate(0);
    visibility: visible;
    transition: .5s var(--cubic-out)
}

.navbar .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end:60px}

.nav-close-btn {
    color: var(--white);
    font-size: 30px;
    transition: var(--transition-1)
}

.nav-close-btn:is(:hover,:focus) {
    color: var(--persian-red)
}

.navbar-item:not(:last-child) {
    border-block-end:1px solid var(--jet)}

.navbar-link {
    font-size: var(--fs-9);
    font-weight: var(--fw-700);
    text-transform: uppercase;
    padding-block:15px;transition: var(--transition-1)
}

.navbar-link:is(:hover,:focus) {
    color: var(--mustard)
}

.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--raisin-black_90);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-2)
}

.overlay.active {
    opacity: 1;
    pointer-events: all
}

.footer {
    background-color: var(--raisin-black-1);
    color: var(--cool-gray)
}

.footer-top {
    padding-block-end:60px;display: grid;
    gap: 50px
}

.footer-list-title {
    color: var(--white);
    font-size: var(--fs-5);
    font-weight: var(--fw-500);
    margin-block-end:20px}

.footer-text {
    margin-block-end:30px}

.footer .social-list {
    gap: 12px
}

.footer .social-link {
    background-color: var(--onyx);
    padding: 14px;
    border-radius: 50%;
    transition: var(--transition-1)
}

.footer .social-link:is(:hover,:focus) {
    background-color: var(--persian-red);
    color: var(--white)
}

.footer-link {
    font-size: var(--fs-8);
    margin-block-start:15px;transition: var(--transition-1)
}

.footer-link:is(:hover,:focus) {
    color: var(--persian-red)
}

.insta-post {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px
}

.insta-card {
    position: relative;
    border-radius: var(--radius-10);
    overflow: hidden
}

.insta-card .card-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    place-content: center;
    background-color: var(--red-ryb_80);
    color: var(--white);
    font-size: 25px;
    opacity: 0;
    transition: var(--transition-1)
}

.insta-card:is(:hover,:focus-within) .card-content {
    opacity: 1
}

.footer-bottom {
    color: var(--white);
    font-size: var(--fs-8);
    padding-block:40px;border-block-start:1px solid var(--onyx)}

.copyright {
    margin-block-end: 15px
}

.footer-bottom-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px
}

.footer-bottom-link {
    transition: var(--transition-1)
}

.footer-bottom-link:is(:hover,:focus) {
    color: var(--persian-red)
}

.video-player {
    position: relative;
    min-height: 100vh;
    width: 100%;
    background-color: var(--raisin-black_90)
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%
}

.video-player .wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-inline:30px;padding-block:20px;display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
    transition: var(--transition-1)
}

.wrapper .operator {
    background-color: var(--raisin-black_20);
    height: 50px;
    width: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    opacity: .5;
    transition: var(--transition-1)
}

.wrapper .operator:is(:hover,:focus) {
    opacity: 1
}

.operator ion-icon {
    font-size: 24px;
    color: var(--white)
}

.close-btn ion-icon {
    --ionicon-stroke-width: 50px
}

.alert {
    position: fixed;
    width: 50%;
    bottom: 20px;
    left: 30px;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 4;
    transition: .3s ease-in-out
}

.alert ion-icon {
    font-size: 25px
}

:root {
    --sky-blue-crayola: hsl(188, 64%, 60%);
    --raisin-black_90: hsla(240, 8%, 12%, .9);
    --raisin-black_20: hsla(240, 8%, 12%, .2);
    --raisin-black-1: hsl(240, 8%, 17%);
    --raisin-black-2: hsl(240, 8%, 12%);
    --red-ryb_80: hsla(0, 88%, 60%, .8);
    --persian-red: hsl(0, 76%, 51%);
    --eerie-black: hsl(0, 0%, 13%);
    --ghost-white: hsl(230, 60%, 98%);
    --light-gray: hsl(0, 0%, 80%);
    --slate-gray: hsl(225, 8%, 48%);
    --cool-gray: hsl(225, 11%, 59%);
    --gainsboro: hsl(217, 16%, 90%);
    --mustard: hsl(47, 100%, 69%);
    --white: hsl(0, 0%, 100%);
    --black: hsl(0, 0%, 0%);
    --onyx: hsl(240, 5%, 26%);
    --jet: hsl(0, 0%, 21%);
    --ff-dm-sans: "DM Sans", sans-serif;
    --fs-1: 4rem;
    --fs-2: 3.5rem;
    --fs-3: 2.4rem;
    --fs-4: 2.2rem;
    --fs-5: 2rem;
    --fs-6: 1.8rem;
    --fs-7: 1.7rem;
    --fs-8: 1.5rem;
    --fs-9: 1.4rem;
    --fw-500: 500;
    --fw-700: 700;
    --gradient: radial-gradient( ellipse at center, hsla(0, 0%, 0%, .25), transparent 80% );
    --section-padding: 100px;
    --shadow-1: 0px 2px 50px hsla(223, 40%, 76%, .3);
    --shadow-2: 0px -2px 12px hsl(252, 29%, 93%);
    --shadow-3: 0px 4px 4px hsla(231, 20%, 49%, .06);
    --shadow-4: 0px 15px 30px hsla(210, 30%, 32%, .05);
    --shadow-5: 0px 15px hsla(241, 62%, 34%, .04);
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-15: 15px;
    --radius-20: 20px;
    --transition-1: .25s ease;
    --transition-2: .5s ease;
    --cubic-in: cubic-bezier(.51, .03, .64, .28);
    --cubic-out: cubic-bezier(.33, .85, .4, .96)
}

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

ul,figure {
    margin: 0;
    padding: 0
}

li {
    list-style: none
}

a,img,span,input,button,ion-icon {
    display: block
}

a {
    color: inherit;
    text-decoration: none
}

img {
    height: auto
}

input,button,textarea {
    background: none;
    border: none;
    font: inherit
}

input,textarea {
    width: 100%
}

button {
    cursor: pointer
}

ion-icon {
    pointer-events: none
}

html {
    font-family: var(--ff-dm-sans);
    font-size: 10px;
    scroll-behavior: smooth
}

body {
    background-color: var(--white);
    color: var(--slate-gray);
    font-size: 1.6rem;
    line-height: 1.75
}

:focus-visible {
    outline-offset: 4px
}

::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-track {
    background-color: #fafafa
}

::-webkit-scrollbar-thumb {
    background-color: #ccc
}

::-webkit-scrollbar-thumb:hover {
    background-color: #b3b3b3
}

.container {
    padding-inline:15px}

.section {
    padding-block:var(--section-padding)}

.h1,.h2 {
    letter-spacing: -2px
}

.h1 {
    color: var(--black);
    font-size: var(--fs-1);
    line-height: 1.1
}

.h2,.h3 {
    color: var(--raisin-black-1)
}

.h2 {
    font-size: var(--fs-2);
    line-height: 1.2
}

.h3 {
    font-size: var(--fs-3);
    line-height: 1.3;
    font-weight: var(--fw-500)
}

.has-before,.has-after {
    position: relative;
    z-index: 1
}

.has-before:before,.has-after:after {
    content: "";
    position: absolute
}

:is(.h1,.h2) .has-before {
    display: inline-block
}

:is(.h1,.h2) .has-before:before {
    bottom: 6px;
    left: 0;
    height: 6px;
    width: 100%;
    background-color: var(--mustard);
    z-index: -1
}

.social-list {
    display: flex
}

.w-100 {
    width: 100%
}

.section-subtitle {
    color: var(--cool-gray);
    font-size: var(--fs-6);
    font-weight: var(--fw-500);
    line-height: 1.2
}

.section-subtitle:before {
    position: static;
    width: 12px;
    height: 12px;
    background-color: var(--mustard);
    display: inline-block;
    border-radius: 50%;
    margin-inline-end:10px}

.text-center {
    text-align: center
}

.section-title {
    margin-block:30px 35px}

.grid-list {
    display: grid;
    gap: 30px
}

.img-holder {
    aspect-ratio: var(--width) / var(--height);
    background-color: var(--light-gray);
    overflow: hidden
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.has-bg-image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.hero {
    padding-block-start:calc(var(--section-padding) + 60px)!important}

.hero .container {
    display: grid;
    gap: 70px
}

.hero-text {
    font-size: var(--fs-7);
    margin-block:30px 35px}

.hero-content :is(.wrapper,.hero-btn) {
    display: flex;
    align-items: center
}

.hero-content .wrapper {
    flex-wrap: wrap;
    gap: 30px;
    margin-block-end:30px}

.hero-btn {
    gap: 15px;
    color: var(--raisin-black-1);
    transition: var(--transition-1)
}

.hero-btn:is(:hover,:focus) {
    color: var(--persian-red)
}

.hero-btn ion-icon {
    font-size: 24px
}

.hero-btn .span {
    font-size: var(--fs-6);
    font-weight: var(--fw-500)
}

.hero .social-list .span {
    display: none
}

.hero .social-list {
    gap: 15px
}

.hero .social-link {
    background-color: var(--white);
    color: var(--color);
    padding: 12px;
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-8);
    transition: var(--transition-2)
}

.hero .social-link:is(:hover,:focus) {
    background-color: var(--color);
    color: var(--white)
}

.services {
    background-color: var(--ghost-white)
}

.services .section-title {
    margin-block:30px 60px}

.service-card,.services .link-card {
    padding: 45px;
    border-radius: var(--radius-20)
}

.service-card {
    height: 100%;
    background-color: var(--white);
    padding-block-end:40px;border-block-end:3px solid transparent;box-shadow: var(--shadow-3);
    transition: var(--transition-1)
}

.service-card:is(:hover,:focus-within) {
    border-color: hsla(var(--color))
}

.service-card .card-icon {
    max-width: max-content;
    padding: 15px;
    border-radius: var(--radius-8);
    background-color: hsla(var(--color),.15);
    margin-block-end:15px;transition: var(--transition-2)
}

#affiliation .card-icon>img,#client .card-icon>img {
    width: 100%
}

.service-card:is(:hover,:focus-within) .card-icon {
    transform: rotateY(.5turn)
}

.service-card .card-title {
    transition: var(--transition-1)
}

.service-card:is(:hover,:focus-within) .card-title {
    color: hsla(var(--color))
}

.services .link-card {
    background-color: hsla(var(--color),.15);
    text-align: center
}

.services .link-card .span {
    color: var(--raisin-black-1);
    font-size: var(--fs-6);
    font-weight: var(--fw-500);
    margin-block-end:20px;transition: var(--transition-1)
}

.services .link-card:is(:hover,:focus-within) .span {
    color: var(--persian-red)
}

.services .link-card ion-icon {
    color: var(--persian-red);
    font-size: 15rem;
    transform: rotate(-45deg);
    margin: -25px auto;
    transition: var(--transition-1)
}

.services .link-card:is(:hover,:focus-within) ion-icon {
    color: var(--red-ryb_80)
}

.feature .container,.feature-list {
    display: grid;
    gap: 60px
}

.feature-card .card-icon {
    background-color: hsla(var(--color),.15);
    max-width: max-content;
    padding: 18px;
    font-size: 24px;
    border-radius: 50%;
    margin-block-end:20px;transition: var(--transition-2)
}

.feature-card .card-icon ion-icon {
    color: hsla(var(--color));
    transition: var(--transition-1)
}

.feature-card .card-text {
    color: var(--cool-gray);
    font-size: var(--fs-7);
    margin-block-start:10px}

.feature-card:is(:hover,:focus) .card-icon {
    box-shadow: inset 0 0 0 30px hsla(var(--color),.9)
}

.feature-card:is(:hover,:focus) .card-icon ion-icon {
    color: var(--white)
}

.project {
    background-color: var(--ghost-white)
}

.project .section-title {
    margin-block:20px 60px}

.filter-list {
    display: none!important;
    max-width: 90%;
    margin-inline:auto;display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-block-end:70px}

.filter-btn {
    color: var(--cool-gray);
    font-size: var(--fs-9);
    font-weight: var(--fw-500);
    padding: 11px 20px;
    border-radius: var(--radius-8);
    transition: var(--transition-1)
}

.filter-btn:is(:hover,:focus) {
    color: var(--raisin-black-1)
}

.filter-btn.active {
    background-color: var(--white);
    color: var(--raisin-black-1);
    box-shadow: var(--shadow-4)
}

.project-card {
    position: relative;
    border-radius: var(--radius-15);
    overflow: hidden
}

.project-card .card-banner img {
    transition: var(--transition-2)
}

.project-card:is(:hover,:focus-within) .card-banner img {
    transform: scale(1.1);
    filter: brightness(.8)
}

.project-card .card-content {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    background-color: var(--mustard);
    border-radius: var(--radius-10);
    padding: 30px 20px;
    text-align: center;
    opacity: 0;
    transform: translateY(calc(-50% + 20px));
    transition: var(--transition-2)
}

.project-card .card-tag {
    color: var(--raisin-black-1);
    font-size: var(--fs-9)
}

.project-card:is(:hover,:focus-within) .card-content {
    opacity: 1;
    transform: translateY(-50%)
}

.newsletter {
    color: var(--white)
}

.newsletter .container {
    display: grid;
    gap: 50px
}

.newsletter-banner {
    max-width: max-content
}

.newsletter .section-subtitle {
    color: var(--light-gray)
}

.newsletter .section-title {
    color: var(--white);
    margin-block:20px 35px}

.contact-field {
    background-color: var(--white);
    color: var(--raisin-black-2);
    font-size: var(--fs-9);
    min-height: 60px;
    padding-inline:20px;border-radius: var(--radius-8);
    margin-block-end:20px;box-shadow: var(--shadow-5);
    outline: 3px solid transparent;
    outline-offset: 0;
    transition: var(--transition-1)
}

.contact-field:focus {
    outline-color: var(--mustard)
}

.contact-field::placeholder {
    color: inherit
}

.blog {
    background-color: var(--ghost-white)
}

.blog .section-title {
    margin-block:20px 70px}

.blog-list {
    display: grid;
    gap: 40px
}

.blog-card .card-banner {
    border-radius: var(--radius-20);
    overflow: hidden;
    margin-block-end:20px}

.blog-card.large .card-banner {
    margin-block-end:40px}

.blog-card.large .card-title {
    font-size: var(--fs-2);
    line-height: 1.2;
    margin-block-end:20px}

.blog-card .card-text {
    color: var(--cool-gray)
}

.blog-card .card-banner img {
    transition: var(--transition-2)
}

.blog-card:is(:hover,:focus-within) .card-banner img {
    transform: scale(1.1)
}

.blog-card .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    margin-block-end:20px}

.blog-card .tag {
    color: var(--persian-red);
    font-size: var(--fs-9);
    font-weight: var(--fw-700);
    text-transform: uppercase;
    transition: var(--transition-1)
}

.blog-card:is(:hover,:focus) .tag {
    color: var(--raisin-black-1)
}

.blog-card .publish-date {
    display: none;
    align-items: center;
    gap: 10px;
    color: var(--cool-gray);
    font-weight: var(--fw-500);
    transition: var(--transition-1)
}

.blog-card .publish-date ion-icon {
    font-size: 18px;
    --ionicon-stroke-width: 40px
}

.blog-card .publish-date:is(:hover,:focus) {
    color: var(--raisin-black-1)
}

.blog-card .card-title {
    color: var(--raisin-black-1);
    font-size: var(--fs-4);
    letter-spacing: -1px;
    transition: var(--transition-1)
}

.blog-card .card-title:is(:hover,:focus) {
    color: var(--persian-red)
}

.back-top-btn {
    position: fixed;
    bottom: 20px;
    right: 30px;
    background-color: var(--persian-red);
    color: var(--white);
    font-size: 18px;
    padding: 16px;
    border-radius: var(--radius-8);
    visibility: hidden;
    opacity: 0;
    transition: var(--transition-1)
}

.back-top-btn.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(-10px)
}

.back-top-btn:after {
    bottom: -12px;
    right: 0;
    width: 100%;
    height: 10px;
    background-image: var(--gradient)
}

@media (min-width: 575px) {
    .container {
        max-width:540px;
        width: 100%;
        margin-inline:auto}

    .header .container {
        max-width: unset
    }

    .project-card .card-content {
        max-width: max-content;
        width: calc(100% - 40px);
        left: 50%;
        right: auto;
        padding: 50px 80px;
        transform: translate(-50%,calc(-50% + 20px))
    }

    .project-card:is(:hover,:focus-within) .card-content {
        transform: translate(-50%,-50%)
    }

    .project-card .card-title {
        margin-block-end:10px}
}

@media (min-width: 768px) {
    :root {
        --fs-1: 5.5rem;
        --fs-2: 3.8rem;
        --fs-7: 1.8rem;
        --section-padding: 120px
    }

    .container {
        max-width: 720px
    }

    .btn {
        height: 60px
    }

    .grid-list {
        grid-template-columns: 1fr 1fr
    }

    .hero .container {
        gap: 120px
    }

    .hero .wrapper {
        gap: 50px;
        margin-block-end:60px}

    .hero .social-link .span {
        display: block;
        font-size: var(--fs-9);
        color: var(--raisin-black-1);
        font-weight: var(--fw-700);
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: var(--transition-1)
    }

    .hero .social-link {
        display: flex;
        align-items: center;
        gap: 15px;
        background: none;
        box-shadow: none
    }

    .hero .social-link:is(:hover,:focus) {
        background: unset;
        color: var(--color)
    }

    .hero .social-link:is(:hover,:focus) .span {
        color: var(--color)
    }

    .feature-banner {
        max-width: max-content
    }

    .feature-list {
        gap: 30px
    }

    .feature-card {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 25px
    }

    .feature-card .card-icon {
        margin-block-end:0}

    .feature-card .card-text {
        max-width: 32ch
    }

    .project .grid-list>li:first-child {
        grid-column: 1 / 3
    }

    .newsletter-form {
        position: relative
    }

    .email-field {
        margin-block-end:0}

    #contact .btn-secondary {
        right: 0;
        bottom: -50px;
        top: auto;
        height: 60px;
        min-width: 200px
    }

    .blog-card:not(.large) {
        display: flex;
        align-items: center;
        gap: 40px
    }

    .blog-card:not(.large) .card-banner {
        margin-block-end:0;flex-shrink: 0
    }

    .blog-card:not(.large) .card-banner>img {
        width: 200px
    }

    .blog-card .card-title {
        --fs-4: 2.6rem
    }

    .footer-top {
        grid-template-columns: 1fr 1fr
    }

    .copyright {
        text-align: center
    }

    .footer-bottom-list {
        justify-content: center
    }
}

@media (min-width: 992px) {
    .container {
        max-width:960px
    }

    .btn {
        height: 70px
    }

    .grid-list {
        grid-template-columns: repeat(3,1fr)
    }

    .header {
        padding-block-start:30px}

    .nav-open-btn,.overlay,.navbar .wrapper {
        display: none
    }

    .navbar,.navbar.active {
        all: unset
    }

    .navbar-item:not(:last-child) {
        border: none
    }

    .navbar-list {
        display: flex;
        gap: 30px
    }

    .navbar-link {
        position: relative;
        color: var(--cool-gray);
        text-transform: capitalize;
        font-size: unset;
        font-weight: var(--fw-500)
    }

    .navbar-link:is(:hover,:focus,.active) {
        color: var(--raisin-black-1)
    }

    .navbar-link:before {
        content: "";
        position: absolute;
        bottom: 5px;
        left: 0;
        width: 0;
        height: 4px;
        border-radius: 5px;
        background-color: var(--persian-red);
        transition: var(--transition-1)
    }

    .navbar-link:is(:hover,:focus,.active):before {
        width: 100%
    }

    .header .btn {
        display: flex
    }

    .header .btn:before,.header .btn:after {
        background-color: var(--raisin-black-1)
    }

    .header .btn:is(:hover,:focus) {
        color: var(--white)
    }

    .hero {
        background-image: linear-gradient(to right,var(--white) 79%,var(--mustard) 79%);
        overflow: hidden
    }

    .hero .container {
        grid-template-columns: 1fr 1fr;
        gap: 40px
    }

    .hero .wrapper {
        flex-wrap: nowrap
    }

    .hero .btn,.hero-btn .span {
        flex-shrink: 0
    }

    .hero-banner {
        margin-inline-end:-140px}

    .feature .container {
        grid-template-columns: 1fr 1fr;
        gap: 30px
    }

    .filter-btn {
        --fs-9: 1.8rem;
        padding: 20px 25px
    }

    .newsletter .container {
        grid-template-columns: 1fr .8fr;
        align-items: center
    }

    .newsletter-banner {
        order: 1;
        margin-inline-start:auto}

    .contact-field {
        min-height: 80px;
        padding-inline:40px}

    .blog-list {
        grid-template-columns: 1fr 1fr;
        gap: 40px 70px
    }

    .blog-list>li:first-child {
        grid-row: 1 / 4
    }

    .blog-card:not(.large) .wrapper {
        gap: 10px;
        flex-wrap: nowrap;
        margin-block-end:10px}

    .blog-card .publish-date {
        flex-shrink: 0;
        font-size: var(--fs-9);
        gap: 5px
    }

    .blog-card .card-title {
        --fs-4: 1.8rem
    }

    .footer-top {
        grid-template-columns: 1fr .5fr .5fr .9fr;
        padding-block:120px}

    .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .copyright {
        margin-block-end:0}
}

@media (min-width: 1200px) {
    :root {
        --fs-2: 4.5rem
    }

    .container {
        max-width: 1140px
    }

    .section-title.text-center {
        max-width: 20ch;
        margin-inline:auto}

    .header .container {
        padding-inline:30px}

    .navbar-list {
        gap: 50px
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        margin-block-start:50px}

    .hero-text {
        margin-block:40px 45px}

    .hero .wrapper {
        margin-block-end:auto}

    .hero-banner {
        margin-inline-end:-200px;max-width: max-content
    }

    #contact .hero-banner {
        max-width: none;
        margin-inline-end:0}

    .services .grid-list {
        grid-template-columns: repeat(4,1fr)
    }

    .service-card .h3 {
        --fs-3: 2rem
    }

    .filter-btn {
        padding-inline:40px}

    .blog-list {
        column-gap: 35px
    }

    .blog-card.large {
        padding-inline:35px;border-inline-end:1px solid var(--gainsboro)}

    .blog-card: not(.large) .publish-date {
        --fs-9: 1.6rem
    }

    .blog-card:not(.large) .wrapper {
        gap: 25px;
        margin-block-end:20px}

    .blog-card .card-title {
        --fs-4: 2.4rem
    }
}