/* { ___ CTA ___ } */
.cta {padding-block: 72px; background-color: var(--c-primary-drk);}
.cta .title * {font-size: var(--fs-xl, 34px); font-weight: 500; line-height: 1.3; color: #fff;}
.cta .wrapper {display: flex; align-items: center; justify-content: space-between;}
.cta .btns {display: flex; align-items: center; justify-content: center; gap: 32px; width: 100%; max-width: 465px;}
.cta .btns .btn__primary-outline {width: 100%; padding: 10px;}
.cta .btns .btn__primary-outline:hover {border-color: #fff;}
.cta *::selection {background-color: #fff; color: var(--c-primary);}

/* { ___ FOOTER ___ } */
footer {padding-top: 54px; --_c-text-lght: #757575; --_c-primary-lght: #9b4aa91f; --_c-spacer: #EBEBEB;}
footer .wrapper {display: grid; grid-template-columns: minmax(280px, 331px) 1fr minmax(220px, 325px); justify-content: space-between; gap: 110px;}
footer .main {position: relative; max-width: 250px;}
footer .main .logo {margin-bottom: 20px;}
footer .links {position: relative; display: flex; align-items: flex-start; justify-content: space-between; width: 270px;}
footer :where(.main, .links)::before {position: absolute; top: 21; right: -95px; width: 1px; height: 83%; background-color: var(--_c-spacer); content: '';}
footer .links li:not(:last-of-type) {margin-bottom: 12px;}
footer :where(.links, .newsletter) div > :first-child {font-size: var(--fs-sm, 18px); margin-bottom: 20px;}
footer .links li a {position: relative; color: var(--_c-text-lght); line-height: 25px;}
footer .links li a::before {position: absolute; bottom: -3px; left: 0; width: 0; height: 2px; background-color: var(--c-primary); content: '';}
footer .links li a:hover::before {width: 80%; transition: var(--transition);}
footer .links li a:hover {color: var(--c-primary);}
footer .newsletter p {font-size: var(--fs-xs, 14px); margin-bottom: 32px;}
footer .newsletter form input {width: 100%; padding: 13px 20px; border: 1px solid var(--c-neutral-wht); border-radius: 4px; margin-bottom: 16px;}
footer .newsletter form input::placeholder {color: var(--c-neutral-wht);}
footer .newsletter form button {width: 100%; border-radius: 4px;}
footer .newsletter ul {display: flex; align-items: center; gap: 29px; margin-top: 55px;}
footer .newsletter li img {filter: brightness(0) invert(65%) brightness(91%);}
footer .newsletter li a:hover {transform: scale(1.15);}
footer .additional {display: flex; align-items: center; justify-content: space-between; margin-top: 70px;}
footer .additional li {display: flex; align-items: center; gap: 12px; padding: 12px 29px 12px 13px; border: 1px solid var(--c-neutral-wht); border-radius: 104px;}
footer .additional li > span {display: flex; align-items: center; justify-content: center; width: 47px; height: 47px; background-color: var(--c-primary); border-radius: 50%;}
footer .additional li div * {display: block;}
footer .additional li div :first-child {font-family: var(--ff-primary); font-size: var(--fs-sm, 18px); font-weight: 500; color: var(--c-primary);}
footer .additional li div :nth-child(2) {font-size: var(--fs-xs, 14px); color: var(--_c-text-lght);}
footer .copyright {background-color: var(--_c-primary-lght); padding-block: 9px; margin-top: 42px;}
footer .copyright .wrap {display: flex; align-items: center; justify-content: space-between; gap: 6px 30px;}
footer .copyright * {color: #000; text-align: center;}
footer .copyright .wrap div {display: flex; align-items: center; gap: 3px 12px;}
footer .copyright .wrap div :first-child {font-family: var(--ff-primary); text-wrap: nowrap;}


/* { --- MEDIA QUERIES --- } */
@media only screen and (max-width: 1200px) {
    /* CTA */
    .cta .btns {max-width: 550px; gap: 20px;}
    /* Footer */
    footer .wrapper {gap: 80px;}
    footer :is(.main, .links)::before {right: -40px;}
    footer .additional li {padding-right: 20px;}
    footer .copyright p {flex-shrink: 10;}
}

@media only screen and (max-width: 991px) {
    /* CTA */
    .cta {padding-block: 50px;}
    .cta .btns {max-width: 350px; flex-direction: column; gap: 12px;}
    /* Footer */
    footer {padding-top: 40px;}
    footer .wrapper {grid-template-columns: repeat(3, 1fr); gap: 40px;}
    footer :is(.main, .links)::before {right: -20px;}
    footer .links {max-width: 240px;}
    footer .additional {flex-wrap: wrap; justify-content: center; gap: 15px;}
    footer .additional li {width: calc(50% - 15px); padding: 12px;}
    footer .copyright .wrap {flex-direction: column;}
}

@media only screen and (max-width: 767px) {
    /* CTA */
    .cta .wrapper {flex-direction: column; align-items: flex-start; gap: 12px;}
    .cta .btns {flex-direction: row; max-width: 550px;}
    /* Footer */
    footer .wrapper {grid-template-columns: repeat(2, 1fr);}
    footer :is(.main, .links)::before {content: none;}
    footer .newsletter {grid-area: 2 / 1 / 3 / 3;}
    footer .newsletter p {margin-bottom: 24px;}
    footer .newsletter ul {margin-top: 36px;}
    footer .additional {margin-top: 48px;}
    footer .copyright {margin-top: 32px;}
}

@media only screen and (max-width: 575px) {
    /* CTA */
    .cta {padding-block: 32px;}
    /* Footer */
    footer {padding-top: 24px;}
    footer .wrapper {grid-template-columns: 1fr;}
    footer .main {max-width: 100%;}
    footer .links {width: 100%; max-width: 100%; justify-content: flex-start; gap: 50px;}
    footer .newsletter {grid-area: auto;}
    footer .newsletter p {margin-bottom: 16px;}
    footer .newsletter ul {margin-top: 24px;}
    footer .additional {margin-top: 28px;}
    footer .additional li {width: 100%;}
    footer .copyright {margin-top: 24px;}
}

@media only screen and (max-width: 475px) {
     /* CTA */
    .cta .title * {text-align: center;}
    .cta .wrapper {align-items: center;}
    .cta .btns {flex-direction: column;}
    /* Footer */
    footer .logo {max-width: 160px;}
    footer :where(.links, .newsletter) div > :first-child {margin-bottom: 12px;}
    footer .copyright .wrap {gap: 12px;}
    footer .copyright .wrap div {flex-direction: column;}
}