/* SUBSCRIPTION SECTION */
.subscribe {background: no-repeat center/cover url( ../images/subscribe-back.webp) #2b4d6f; padding: 50px 0px 67px; text-align: center;}
.subscribe .content > :first-child {margin-bottom: 1.87rem;}
.subscribe .content :nth-last-child(3) {margin-bottom: 1.87rem; font-size: var(--fs-lg); color: #fff; line-height: 1;}
.subscribe form {width: 100%; max-width: 600px; display: flex; justify-content: space-between; margin-bottom: 1.25rem; border-bottom: 1px solid var(--c-primary); margin-inline: auto;}
.subscribe input {margin-bottom: 0; background-color: transparent; color: #fff; border: none; outline: none; font-size: var(--fs-base); background-image: url('../images/icons/input-mail.svg'); background-repeat: no-repeat; background-position: 5px; width: auto; padding-inline: 3.125rem; height: 3.125rem;}
.subscribe form :last-child {background-color: transparent; color: #fff; text-wrap: nowrap; border: 3px solid var(--c-primary); border-radius: 7px; height: 2.19rem; font-size: var(--fs-2xs); padding: 0 1.25rem; outline: none; font-weight: 900;}
.subscribe form :last-child:hover {background-color: var(--c-primary); transition: 0.3s;}
.subscribe .content :last-child {color: #fff;}

/* SOCIAL SECTION */
.social {padding: 3.44rem 0px; background-color: var(--_c-lght-blue);}
.social .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center;}
.social h2 {display: flex; align-items: center; gap: 0.375rem;}
.social h2,
.social h2 a {font-family: var(--ff-primary); font-size: calc(var(--fs-md) - 5px); margin-bottom: 0;}
.social ul {display: flex; justify-content: flex-end; align-items: center; gap: 1.25rem; padding-left: 0; flex-wrap: wrap;}
.social li a {width: 43px; height: 43px; background-color: #fff; border-radius: 50px; display: flex; justify-content: center; align-items: center;}
.social li a:hover {background-color: var(--c-primary); transition: var(--trans-3);}
.social li a img {filter: brightness(0) saturate(100%) invert(50%) sepia(50%) saturate(1188%) hue-rotate(186deg) brightness(100%) contrast(103%);}
.social li a:hover img {filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(3%) hue-rotate(17deg) brightness(104%) contrast(100%); transition: var(--trans-3);}
.social h2 {font-weight: 700;}

/* FOOTER */
footer {padding-block: 3rem 0; color: var(--c-lite-text); margin-bottom: 1rem;}
footer .wrapper {display: grid; grid-template-columns: minmax(300px, 369.33px) minmax(141.33px, 172.66px) repeat(2, 1fr); gap: 0.5rem 1.5rem; border-bottom: 1px solid var(--c-border); padding-bottom: 1rem;}
footer ul {padding-left: 0;}
footer .title {margin-bottom: 1.25rem;}
footer .title * {display: block; font-weight: 700; color: #000; margin-bottom: 6px;}
footer .about p {font-size: var(--fs-2xs); font-weight: 500;}
footer .features li,
footer .ft-pd li {background-image: url('https://www.thedisplayboxes.com/theme/website/assets/images/icons/ft-li-icon.png'); background-repeat: no-repeat; background-position: 0px; padding-left: 1rem; width: 100%;}
footer .features li:not(:last-child),
footer .ft-pd li:not(:last-child) {margin-bottom: 1rem;}
footer .features li:hover a,
footer .ft-pd li:hover a {color: var(--c-primary); transition: 0.3s;}
footer a {font-size: var(--fs-2xs); color: var(--c-lite-text); font-weight: 500;}
footer .office li {display: flex; align-items: center; gap: 10px; font-size: var(--fs-2xs); font-weight: 500;}
footer .office li a {display: flex; align-items: center; gap: 10px;}
footer .office li:hover a {color: var(--c-primary);}
footer .office li:nth-of-type(2) {margin-block: 1.62rem 2.7rem;}

/* COPYRIGHT */
.copyright {padding-bottom: 1rem;}
.copyright .wrapper {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;}
.copyright ul {display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-left: 0;}
.copyright li:hover a {color: var(--c-primary); transition: 0.3s;}
.copyright :where(p, a) {color: var(--c-lite-text); font-size: var(--fs-2xs); font-weight: 400;}
.copyright p {margin-bottom: 0;}

/* MEDIA QUERIES */
@media only screen and (max-width: 991px) {
    /* FOOTER */
    footer .wrapper {grid-template-columns: repeat(2, 1fr);}
    footer .office li:nth-of-type(2) {margin-block: 1.25rem 1.5rem;}
}
@media only screen and (max-width: 767px) {
    /* SOCIAL SECTION */
    .social .wrapper {grid-template-columns: 1fr;}
    .social ul {gap: 10px;}
    .social h2 { text-align: center; margin-bottom: 1.87rem;}
    /* FOOTER */
    footer {padding-top: 2rem;}
    footer .wrapper {grid-template-columns: minmax(300px, 369.33px) minmax(141.33px, 172.66px); gap: 1rem;}
    /* COPYRIGHT */
    .copyright .wrapper {justify-content: center;}
}
@media only screen and (max-width: 575px) {
    /* SUBSCRIPTION SECTION */
    .subscribe {padding: 40px 0 30px;}
    .subscribe form {display: block; padding-bottom: 1.25rem;}
    .subscribe input {width: 100%; margin-bottom: 1.25rem;}
    .subscribe .content > :first-child {margin-bottom: 1.25rem;}
    .subscribe .content :nth-last-child(3) {margin-bottom: 1.25rem;}
    /* SOCIAL SECTION */
    .social {padding: 2rem 0;}
    .social a {width: 2.3rem; height: 2.3rem;}
    .contact li {gap: 1rem;}
    .social li img {height: 1rem;}
    /* FOOTER */
    footer {padding-top: 1rem;}
    footer .wrapper {grid-template-columns: 1fr;}
    footer .title {margin-bottom: 0.6rem;}
    footer .office li:nth-of-type(2) {margin-block: 1rem;}
}
@media only screen and (max-width:320px) {
    /* COPYRIGHT */
    .copyright ul {gap: 0.5rem;}    
}