/*
Theme Name: Main Theme
Version: 1.0.0

Author: Hub Propaganda
Author URI: https://hubpropaganda.com.br
*/


/* LOCAL IMPORTS */
/*@import url('./css/pages/home.css');
@import url('./css/dashboard.css'); */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100..900;1,100..900&display=swap');

/* SETUP */
* {
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
      
    margin: 0;
    padding: 0;
}

html {

    scroll-behavior: smooth;
}

/* KEYFRAMES */

/* GENERIC STYLES */
.button {

    border: none;
    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9rem;

    padding: 0.75rem 1.5rem;
    font-weight: 800;

    color: white;
    cursor: pointer;

    text-decoration: none;
    transition: background-color .3s ease;
}

.static-position {

    position: static !important;
}

.flex-column {

    display: flex;
    flex-direction: column;
}

/* FRONT-PAGE */
#front-page div.show {

    opacity: 1;
    transform: translateY(0);
}

#front-page .hidden-to-interpolate {

    opacity: 0;
    transform: translateY(5rem);
    
    transition: all 1s;
}

#front-page h1,
#front-page h2 {

    color: #2E4052
}

/* HEADER */
#front-page .navbar {

    width: 100%;
    display: flex;

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

    gap: 1.5rem;

    padding: 0.5rem 5rem;
    position: fixed;

    z-index: 100;
}

/* NAVBAR */
#front-page .navbar .nav-logo {

    width: 12.5rem;
    height: 7.5vh;

    object-fit: contain;
}

#front-page .navbar .nav-list {

    display: flex;
    list-style: none;

    gap: 1.5rem;
}

#front-page .navbar .nav-item a {

    text-decoration: none;
    color: #2E4052;

    font-weight: 500;
    font-size: 0.95rem;

    cursor: pointer;
}

#front-page .navbar .nav-item a::after {

    display: block;
    content: '';

    border-bottom: 0.15rem solid #2E4052;
    transform: scaleX(0);

    transition: transform 0.05s ease-in-out;
}

#front-page .navbar .nav-item.active a {

    font-weight: 700;
}

#front-page .navbar .nav-item.active a::after,
#front-page .navbar .nav-item a:hover::after {

    transform: scaleX(1);
}

#front-page nav .login-button {

    width: 5.5rem;
    height: 2.5rem;

    background-color: #df2452;
    transition: background-color 0.25s ease;

    font-size: 0.9rem;
    text-decoration: none;
}

#front-page nav .login-button:hover {

    background-color: #573FEA;
}

/* NAVBAR - MOBILE */
#front-page .mobile-button {

    display: none;
    border: none;

    background-color: rgba(0, 0, 0, 0.075);
    border-radius: 0.25rem;

    font-size: 1.5rem;
    cursor: pointer;

    padding: 0.25rem 0.5rem;
    z-index: 100;
}

#front-page .mobile-navbar {

    display: flex;
    flex-direction: column;
    
    align-items: center;
    position: fixed;

    padding: 1rem;
    right: 0;
    top: 4rem;

    transform-origin: top;
    transform: scaleY(0);

    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transition: transform 0.25s ease-in-out;

    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 1rem;
    z-index: 99;
}

#front-page .mobile-navbar.active {

    transform: scaleY(1);
}

#front-page .mobile-navbar .nav-list {

    display: flex;
    flex-direction: column;

    margin: 1.2rem 0;
}

#front-page .mobile-navbar .nav-list .nav-item {    

    padding: 0.5rem;
    
    list-style: none;
    text-align: center;
}

#front-page .mobile-navbar .nav-item a {

    text-decoration: none;
    color: black;

    font-weight: 500;
    font-size: 0.95rem;

    cursor: pointer;
}

#front-page .mobile-navbar .nav-item.active a,
#front-page .mobile-navbar .nav-item a:hover {

    font-weight: 700;
    color: white;
}

#front-page .mobile-navbar .nav-item.active,
#front-page .mobile-navbar .nav-item:has(a:hover) {

    background-color: #323232;
}

#front-page .mobile-navbar .button {

    width: 12rem;
}

/* CONTENT */
/* PAGE HEADER */
#front-page .page-header {

    width: 100%;

    display: flex;
    flex-direction: column;

    justify-content: end;
    align-items: center;

    overflow: hidden;
    padding-top: 7.5rem;
}

#front-page .page-header h1 {

    font-size: 1.75rem;
    margin-bottom: 3.5rem;

    text-align: center;
}

#front-page .page-header .hero-image {

    display: flex;
    position: relative;

    align-items: center;
    justify-content: center;
}

#front-page .page-header .hero-image .benefit-list.not-carousel {

    position: absolute;

    width: 130%;
    height: 100%;
}

#front-page .page-header .hero-image .benefit-list.not-carousel .benefit-item {

    position: absolute;
    width: 22.5rem;

    border-radius: 1.5rem;
    background-color: white;

    padding: 1rem;

    font-weight: 500;
    font-size: 0.85rem;
}

#front-page .page-header .hero-image .benefit-list.not-carousel .benefit-item:nth-child(1) {

    top: 9rem;
    left: 4rem;
}
#front-page .page-header .hero-image .benefit-list.not-carousel .benefit-item:nth-child(2) {

    top: 17.5rem;
    left: 0;
}

#front-page .page-header .hero-image .benefit-list.not-carousel .benefit-item:nth-child(3) {

    top: 5rem;
    right: 8rem;
}

#front-page .page-header .hero-image .benefit-list.not-carousel .benefit-item:nth-child(4) {

    top: 15rem;
    right: 3rem;
}

#front-page .page-header .hero-image .benefit-list.not-carousel .benefit-item:nth-child(5) {

    top: 22.5rem;
    right: 0;
}

#front-page .page-header .hero-image .benefit-carousel {

    width: 100%;
    height: 4rem;

    bottom: 2rem;
    position: absolute;

    display: none;
}

#front-page .page-header .hero-image .benefit-carousel .content {

    height: 100%;
    margin: 0 2.5rem;

    overflow: hidden;
}

#front-page .page-header .hero-image .benefit-carousel .benefit-list .benefit-item {

    width: 10rem;
    height: 100%;

    display: flex;

    border-radius: 1.5rem;
    background-color: white;

    font-weight: 500;
    font-size: 0.85rem;

    align-items: center;
    justify-content: center;
}

#front-page .page-header .hero-image .benefit-carousel .benefit-list .benefit-item span {

    width: 90%;
}

#front-page .page-header .hero-image::before {

    content: '';
    display: block;
    position: absolute;

    width: 180rem;
    height: 200rem;

    z-index: -1;
    background: radial-gradient(circle, rgb(228, 152, 173) 0%, rgba(255, 255, 255, 0) 50%);
}

#front-page .page-header .hero-image img {

    display: block;
    max-width: 80%;
}

/* CLIENTS */
#front-page .clients {

    display: flex;
    justify-content: center;

    width: 100%;
    background-color: #df2452;
}

#front-page .clients .container {

    display: flex;
    width: 90%;

    justify-content: center;
    align-items: center;

    gap: 1rem;
}

#front-page .clients .title {

    width: 22rem;
    padding: 2.5rem 0;

    color: white;
    font-size: 1.5rem;
}

#front-page .clients .carousel {

    width: 42rem;
    height: 5rem;
}

#front-page .clients .carousel .content {

    height: 100%;

    margin: 0 2.5rem;
    overflow: hidden;
}

#front-page .clients .carousel .client-list .client-item {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 2rem;
    height: 100%;
}

#front-page .clients .carousel .client-list .client-item img {

    width: 7.5rem;
}

#front-page .clients .carousel .button-prev, 
#front-page .clients .carousel .button-next {

    width: initial;
    height: initial;

    color: white;
    font-size: 1rem;
}

#front-page .clients .carousel .button-next::after,
#front-page .clients .carousel .button-prev::after {

    display: none;
}

#front-page .clients .carousel .button-next,
#front-page .clients .carousel .button-prev {

    height: 50%;
    font-size: 1.5rem;
}

/* THE FUTURE */
#front-page .the-future {

    display: flex;
    width: 100%;
    flex-direction: column;

    background-image: url("./assets/backgrounds/side-lizard.png");
    background-repeat: no-repeat;
    background-position: 100%;
    
    gap: 3rem;
    margin-top: 3rem;

    align-items: center;
    justify-content: center;

    overflow: hidden;
}

#front-page .the-future .title {

    max-width: 80%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
    gap: 0.25rem;
}

#front-page .the-future .title h2 {

    font-weight: 800;
}

#front-page .the-future .title p {

    font-weight: 500;
}

#front-page .the-future .title p span {

    color: #df2452;
    font-weight: 700;
}

#front-page .the-future .programatic-advertising-search {

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 3rem;

    align-items: center;
    justify-content: center;
}

#front-page .the-future .programatic-advertising-search .search-title {

    max-width: 90%;

    text-align: center;
    text-transform: uppercase;
}

#front-page .the-future .programatic-advertising-search .search-list {

    display: grid;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);

    column-gap: 3rem;
    row-gap: 3rem;
}

#front-page .the-future .programatic-advertising-search .search-list .search-item {

    width: 22rem;
    height: 16rem;

    display: flex;
    flex-direction: column;

    gap: 1rem;
    background: transparent;

    align-self: center;
    justify-self: center;

    perspective: 100rem;
    user-select: none;
}

#front-page .the-future .programatic-advertising-search .search-list .search-item .flip-card-inner {

    position: relative;

    width: 100%;
    height: 100%;

    text-align: center;
    transition: transform 0.8s;

    transform-style: preserve-3d;
}

#front-page .the-future .programatic-advertising-search .search-list .search-item:hover .flip-card-inner {

    transform: rotateY(180deg);
}

#front-page .the-future .programatic-advertising-search .search-list .search-item .flip-card-inner .flip-card-front,
#front-page .the-future .programatic-advertising-search .search-list .search-item .flip-card-inner .flip-card-back {

    position: absolute;

    width: 100%;
    height: 100%;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#front-page .the-future .programatic-advertising-search .search-list .search-item .flip-card-inner .flip-card-front {

    display: flex;
    flex-direction: column;

    background-color: #f2f2f2;
    border-radius: 1rem;

    padding: 2rem;
    gap: 1rem;
    
    align-items: center;
    justify-content: center;
}

#front-page .the-future .programatic-advertising-search .search-list .search-item .flip-card-inner .flip-card-back {

    background-color: #f2f2f2;
    border-radius: 1rem;

    display: flex;

    align-items: center;
    justify-content: center;

    transform: rotateY(180deg);
    padding: 1rem;
}

#front-page .the-future .programatic-advertising-search .search-list .search-item .flip-card-inner .flip-card-back ul {

    display: flex;
    flex-direction: column;

    align-items: left;
    justify-content: center;

    gap: 1rem;
    font-weight: 500;

    list-style-type: none;
    
    text-align: justify;
    hyphens: auto;

    -webkit-hyphens: auto;
    word-spacing: -0.05em;
}

#front-page .the-future .programatic-advertising-search .search-list .search-item img {

    width: 10rem;
}

#front-page .the-future .programatic-advertising-search .search-list .search-item span {

    text-align: center;

    font-weight: 700;
    font-size: 0.8rem;
}

#front-page .the-future .programatic-advertising-search .search-data {

    display: flex;

    gap: 5rem;
    margin-top: 3rem;
}

#front-page .the-future .programatic-advertising-search .search-data .usage {

    display: flex;
    flex-direction: column;

    gap: 2rem;
    max-width: 30rem;
}

#front-page .the-future .programatic-advertising-search .search-data .usage h2 {

    text-align: center;

    font-size: 2rem;
    font-weight: 800;
}

#front-page .the-future .programatic-advertising-search .search-data .usage .media-devices {

    font-size: 1.125rem;

    line-height: 1.75rem;
    font-weight: 600;
}

#front-page .the-future .programatic-advertising-search .search-data .usage .media-devices span {

    display: inline-block;

    color:#df2452;
    width: 1.6rem;

    font-weight: 700;
}

#front-page .the-future .programatic-advertising-search .search-data .usage .annual-growth {

    font-weight: 500;
}

#front-page .the-future .programatic-advertising-search .search-data .graph {
    
    width: 35rem;
    height: 18.5rem;
    
    border-bottom: 0.75rem solid #2E4052;
    border-right: 0.75rem solid #2E4052;
}

#front-page .the-future .programatic-advertising-search .media-expenses {
    
    max-width: 50rem;

    text-align: center;
    font-weight: 800;
}

/* HOW WORKS */
#front-page .how-works {

    display: flex;
    flex-direction: column;

    background-color: #f0f2f5;
    background-image: url("./assets/backgrounds/side-paw.png");
    background-repeat: no-repeat;
    background-position: 0 100%;

    align-items: center;

    margin-top: 3.5rem;
    padding-top: 2.5rem;

    overflow: hidden;
}

#front-page .how-works .logo {

    width: 20rem;
}

#front-page .how-works h2 {

    max-width: 17.5rem;    
    font-size: 1.25rem;

    padding-top: 1.5rem;
    text-align: center;
}

#front-page .how-works .campaign-steps {

    width: 80%;
    padding-top: 3.5rem;

    display: flex;

    align-items: center;
    justify-content: center;
}

#front-page .how-works .resume {

    max-width: 80%;

    display: flex; 
    padding-top: 5rem;

    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-spacing: -0.05em;

    gap: 5rem;
    align-items: center;
}

#front-page .how-works .resume p {

    max-width: 35rem;
    line-height: 1.75rem;
}

#front-page .how-works .resume img {
    
    width: 15rem;
}

/* REASONS TO ADVERTISE WITH US */
#front-page .reasons-to-advertise-with-us {

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 1.5rem;
    padding-top: 1.5rem;

    overflow: hidden;
}

#front-page .reasons-to-advertise-with-us .title {

    width: 50%;

    font-size: 1.5rem;
    font-weight: 500;

    text-align: center;
    text-transform: uppercase;
}

#front-page .reasons-to-advertise-with-us .logo {
 
    width: 20rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#front-page .reasons-to-advertise-with-us .reason-list {
    
    display: grid;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(7, 1fr);

    column-gap: 1rem;
    row-gap: 0.75rem;

    padding-top: 2.5rem;
}

#front-page .reasons-to-advertise-with-us .reason-item {

    display: flex;
    flex-direction: row;

    align-items: center;
    gap: 1rem;

    justify-self: center;
}

#front-page .reasons-to-advertise-with-us .reason-item::before {

    content: '';
    display: block;

    width: 24.25rem;
    height: 4rem;

    background-color: #2e4052;
    position: absolute;

    border-radius: 0.5rem;
    z-index: -1;
}

#front-page .reasons-to-advertise-with-us .reason-item p {

    width: 20rem;
    height: 4rem;

    display: flex;
    flex-direction: row;

    align-items: center;
    background-color: #d9d9d9;

    font-size: 0.85rem;
    font-weight: 600;

    margin-bottom: 1.25rem;
    margin-right: 2rem;

    padding-left: 1rem;
    padding-right: 1rem;

    border-radius: 0.5rem;
}

#front-page .reasons-to-advertise-with-us .reason-item i {

    color: white;
    font-size: 2rem;

    margin-left: 1rem;
}

/* METRICS */
#front-page .metric-list {

    width: 100%;
    background-color: #2e4052;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 2.5rem;
    padding: 2.5rem;

    overflow: hidden;
}

#front-page .metric-list .content {

    max-width: 80%;
    display: grid;

    grid-template-columns: repeat(4, 10rem);
    grid-template-rows: repeat(0, 1fr);

    align-items: center;
    justify-content: center;

    column-gap: 5rem;
    row-gap: 2.5rem;
}

#front-page .metric-item {

    max-width: 20rem;

    display: flex;
    color: white;

    flex-direction: column;
    align-items: center;

    text-transform: uppercase;
}

#front-page .metric-item span.data {

    font-size: 3.5rem;
    font-weight: 700;
}

#front-page .metric-item span:not(.data) {

    font-weight: 600;
    font-size: 1.5rem;
}

/* OUR PARTNERS */
#front-page .our-partners {

    display: flex;
    flex-direction: column;

    padding-top: 4rem;
    align-items: center;

    overflow: hidden;
    position: relative;
}

#front-page .our-partners .partners {

    width: 65rem;
    display: flex;

    align-items: start;
    justify-content: space-between;

    gap: 4rem;
}

#front-page .our-partners .partners .title {

    font-size: 1.75rem;
    font-weight: 600;
    color: #2E4052;
}

#front-page .our-partners .partners .partner-list {

    display: grid;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);

    align-items: center;
    justify-content: center;

    column-gap: 6rem;
    row-gap: 2rem;
}

#front-page .our-partners .partners .partner-list img {

    width: 8.5rem;
    filter: brightness(77%) contrast(0%) saturate(49%) blur(0px) hue-rotate(0deg);
}

#front-page .our-partners .brand-is-safe-with-us {

    display: flex;
    width: 65rem;

    justify-content: space-between;
    gap: 4rem;

    padding-top: 8rem;
    padding-bottom: 4rem;
}

#front-page .our-partners .brand-is-safe-with-us .brand-safety {

    width: 100%;
}

#front-page .our-partners .brand-is-safe-with-us .brand-safety .title {

    font-size: 1.75rem;
    font-weight: 600;
    color: #2E4052;
}

#front-page .our-partners .brand-is-safe-with-us .brand-safety .logo {

    width: 80%;
    padding-top: 1.5rem;
}

#front-page .our-partners .brand-is-safe-with-us .brand-safety .brand-important {

    font-weight: 600;
    color: #df2452;

    padding-top: 1.5rem;
}

#front-page .our-partners .brand-is-safe-with-us .brand-safety .description {

    line-height: 1.25rem;
    padding-top: 2rem;
}

#front-page .our-partners .brand-is-safe-with-us .brand-safety .brand-button {

    width: 100%;
    height: 3.5rem;

    font-size: 1.1rem;

    background-color: #df2452;
    margin-top: 2rem;
}

#front-page .our-partners .brand-is-safe-with-us .brand-safety .brand-button:hover {

    background-color: #573FEA;
}

#front-page .our-partners .brand-is-safe-with-us span {

    display: flex;

    align-items: center;
    justify-content: center;
}

#front-page .our-partners .brand-is-safe-with-us span img {

    max-width: 30rem;
}

#front-page .our-partners .brand-is-safe-with-us span::before {

    content: '';
    display: block;
    position: absolute;

    width: 180rem;
    height: 200rem;

    z-index: -1;
    background: radial-gradient(circle, rgba(228, 152, 173, 0.3) 0%, rgba(255, 255, 255, 0) 40%);
}

/* MANIFEST */
#front-page .manifest {

    width: 100%;
    display: flex;

    align-items: center;
    justify-content: center;

    background-color: #f0f2f5;
    background-image: url("./assets/backgrounds/side-small-lizard.png");
    
    background-repeat: no-repeat;
    background-size: 20%;

    background-position: bottom left;
}

#front-page .manifest .content {

    max-width: 50rem;

    margin: 7.5rem 0;
    padding: 3rem 3rem;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 2rem;
    background-color: white;

    gap: 3rem;
    position: relative;
}

#front-page .manifest .content .favicon {

    position: absolute;
    width: 10%;

    top: 0;
    right: 0;

    transform: translate(25%, -25%);
}

#front-page .manifest .content .quotation-marks {

    max-width: 50%;
}

#front-page .manifest .content .info {

    display: flex;
    flex-direction: column;

    gap: 1rem;
    width: 50%;
}

#front-page .manifest .content .info h2 {

    font-size: 2rem;
    }

#front-page .manifest .content .info p {

    font-weight: 600;
    font-size: 0.95rem;

    text-align: justify;
    -webkit-hyphens: auto;

    hyphens: auto;
    word-spacing: -0.05em;
}

#front-page .manifest .content .info button {

    background-color: black;
    height: 3rem;

    font-size: 1.05rem;
}

/* LET'S TALK */
#front-page .let-is-talk {

    width: 100%;
    min-height: 100vh;

    position: relative;
    display: flex;

    align-items: center;
    justify-content: center;

    background-color: #112035;
    background-image: url("./assets/backgrounds/office.jpeg");

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

    background-position: top center;
}

#front-page .let-is-talk .background {

    width: 100%;
    height: 100%;

    position: absolute;

    opacity: 0.8;
    z-index: 1;

    background-color: #112035;
}

#front-page .let-is-talk .container {

    width: 90%;

    display: flex;
    position: relative;

    align-items: center;
    justify-content: center;

    padding-top: 5rem;
    padding-bottom: 5rem;

    z-index: 2;
    gap: 6rem;
}

#front-page .let-is-talk .container .address {

    max-width: 32.5rem;
    text-align: center;
}

#front-page .let-is-talk .container .address .title {

    color: #ffc757;

    font-weight: 800;
    font-size: 3rem;
}

#front-page .let-is-talk .container .address .resume {

    padding-top: 2rem;
    color: white;

    font-weight: 400;
}

#front-page .let-is-talk .container .address .engagement {

    padding-top: 1rem;
    color: white;

    font-weight: 400;
}

#front-page .let-is-talk .container .address .office-address {

    display: flex;
    align-items: center;

    padding-top: 2rem;
    gap: 2rem;
}

#front-page .let-is-talk .container .address .office-address i {

    color: white;
    font-size: 3rem;
}

#front-page .let-is-talk .container .address .office-address p {

    color: white;
    font-weight: 300;
    text-align: left;
}

#front-page .let-is-talk .container form {

    width: 90%;
    max-width: 35rem;

    display: flex;
    flex-direction: column;
}

#front-page .let-is-talk .container form label {

    color: white;
    font-weight: 600;
}

#front-page .let-is-talk .container form input {

    height: 2rem;

    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
}

#front-page .let-is-talk .container form textarea {

    height: 6rem;

    padding-left: 0.5rem;
    padding-top: 0.25rem;

    resize: vertical;

    min-height: 2rem;
    max-height: 12rem;
}

#front-page .let-is-talk .container form button {

    height: 4rem;
    margin-top: 0.5rem;

    display: flex;
    gap: 1rem;

    align-items: center;
    justify-content: center;

    background-color: #df2452;
    border: none;

    transition: background-color .3s ease;
    cursor: pointer;
}

#front-page .let-is-talk .container form button:hover {

    background-color: #573FEA;
}

#front-page .let-is-talk .container form button i {
    
    color: white;
    font-size: 1.25rem;
}

#front-page .let-is-talk .container form button span {

    color: white;

    font-size: 1.025rem;
    font-weight: 600;
}

/* FOOTER */
#front-page footer {

    display: flex;
    flex-direction: column;

    align-items: center;

    padding-top: 2rem;
    background-color: #e6e6e6;
}

#front-page footer .social-media {

    width: 90%;
    display: flex;

    justify-content: end;
    gap: 0.5rem;

    padding-bottom: 2rem;
    border-bottom: 0.1rem solid #a8acb3;
}

#front-page footer .social-media a {

    cursor: pointer;
}

#front-page footer .social-media a i {

    font-size: 1.25rem;
    color: #2e4052;
}

#front-page footer p {

    padding-top: 3rem;
    padding-bottom: 3rem;

    font-weight: 600;
    font-size: 0.8rem;
}

/* MEDIA QUERIES */
@media screen and (max-width: 1024px) {
    
    #front-page .navbar .nav-list,
    #front-page .navbar .button {

        display: none;
    }

    #front-page .mobile-button {

        display: block;
    }

    #front-page .page-header .hero-image .benefit-list.not-carousel .benefit-item:nth-child(1) {

        top: 9rem;
        left: 8rem;
    }
    #front-page .page-header .hero-image .benefit-list.not-carousel .benefit-item:nth-child(2) {
    
        top: 17.5rem;
        left: 6rem;
    }
    
    #front-page .page-header .hero-image .benefit-list.not-carousel .benefit-item:nth-child(3) {
    
        top: 5rem;
        right: 10rem;
    }
    
    #front-page .page-header .hero-image .benefit-list.not-carousel .benefit-item:nth-child(4) {
    
        top: 15rem;
        right: 7rem;
    }
    
    #front-page .page-header .hero-image .benefit-list.not-carousel .benefit-item:nth-child(5) {
    
        top: 22.5rem;
        right: 6rem;
    }

    #front-page .the-future .programatic-advertising-search .search-list {
    
        width: 90%;

        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    
    #front-page .the-future .programatic-advertising-search .search-data {

        flex-direction: column;
        align-items: center;
    } 
    
    #front-page .reasons-to-advertise-with-us .reason-list {
    
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(10, 1fr);
    }

    #front-page .our-partners .partners {
    
        align-items: center;
        flex-direction: column;
    }

    #front-page .our-partners .brand-is-safe-with-us {
    
        width: 90%;
    }

    #front-page .our-partners .brand-is-safe-with-us span img {
    
        max-width: 20rem;
    }
}

@media screen and (max-width: 800px) {

    #front-page .page-header .hero-image .benefit-list.not-carousel {

        display: none;
    }

    #front-page .page-header .hero-image .benefit-carousel {

        display: inline-block;
    }

    #front-page .page-header .hero-image {

        order: 1;
    }

    #front-page .page-header .copy {

        order: 2;
    }

    #front-page .the-future .programatic-advertising-search .search-data .graph {
    
        width: 30rem;
        height: 15rem;
    }
    
    #front-page .the-future .programatic-advertising-search .media-expenses {
        
        max-width: 30rem;
    }

    #front-page .how-works .campaign-steps {

        width: 95%;
    }

    #front-page .how-works .campaign-steps img {

        width: 85%;
    }

    #front-page .how-works .resume {

        flex-direction: column;
    }

    #front-page .how-works .resume img {

        width: 14rem;
    }

    #front-page .reasons-to-advertise-with-us .reason-list {
    
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(20, 1fr);
    }

    #front-page .metric-list .content {
    
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    #front-page .manifest .content {

        width: 60%;

        align-items: center;
        flex-direction: column;

        padding: 2rem 2rem;
    }

    #front-page .manifest .content .info {

        width: 100%;
    }

    #front-page .manifest .content .quotation-marks {

        max-width: 70%;
    }

    #front-page .manifest .content .info h2 {
    
        text-align: center;
    }

    #front-page .let-is-talk .container {

        flex-direction: column;
        align-items: center;
    }

    #front-page .let-is-talk .container .address .office-address {

        justify-content: center;
    }
}

@media screen and (max-width: 550px) {
    
    #front-page .page-header {

        padding: 8rem 2.5rem 0 2.5rem;
    }

    #front-page .page-header .hero-image .benefit-carousel {

        width: 120%;
    }

    #front-page .page-header .hero-image img {

        max-width: 140%;
    }

    #front-page .the-future .programatic-advertising-search .search-list {
    
        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;
    }

    #front-page .how-works .campaign-steps {

        width: 70%;
    }

    #front-page .how-works .campaign-steps img {

        width: 150%;
    }

    #front-page .metric-list .content {
    
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    #front-page .our-partners .partners .partner-list {
    
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    #front-page .clients .container {

        flex-direction: column;
        align-items: center;

        text-align: center;
        gap: 0;
    }

    #front-page .clients .title {

        width: 100%;
    }

    #front-page .clients .container .title {

        padding-top: 2rem;
        padding-bottom: 1rem;
    }

    #front-page .clients .carousel {

        max-width: 90%;
    }

    #front-page .the-future .programatic-advertising-search .search-data .graph {
    
        width: 25rem;
        height: 12.5rem;
    }

    #front-page .the-future .programatic-advertising-search .search-data .usage {
    
        max-width: 80%;
    }

    #front-page .the-future .programatic-advertising-search .media-expenses {

        max-width: 80%;
    }

    #front-page .our-partners .brand-is-safe-with-us {

        flex-direction: column;
    }
}

@media screen and (max-width: 450px) {

    #front-page .page-header {

        padding: 8rem 1.5rem 0 1.5rem;
    }

    #front-page .page-header .copy {

        max-width: 20rem;
    }

    #front-page .page-header .copy .hero-section h1 {

        font-size: 2.25rem;
    }

    #front-page .page-header .hero-image .benefit-carousel .content {

        margin: 0 2rem;
    }

    #front-page .page-header .hero-image .benefit-carousel .content .benefit-list .benefit-item {

        text-align: justify;
        hyphens: auto;

        -webkit-hyphens: auto;
        word-spacing: -0.05em;
    }

    #front-page .the-future .programatic-advertising-search .search-data .graph {
    
        width: 20rem;
        height: 10rem;
    }

    #front-page .how-works .logo,
    #front-page .how-works .resume img,
    #front-page .reasons-to-advertise-with-us .logo,
    #front-page .reasons-to-advertise-with-us .title {

        width: 70%;
    }

    #front-page .reasons-to-advertise-with-us .reason-list .reason-item {
    
        width: 80%;
        justify-self: center;
    }

    #front-page .reasons-to-advertise-with-us .reason-item::before {

        width: 93%;
    }

    #front-page .our-partners .partners .partner-list {

        column-gap: 25%;
    }

    #front-page .our-partners .brand-is-safe-with-us {

        width: 90%;
    }

    #front-page .our-partners .brand-is-safe-with-us .brand-safety {

        display: flex;
        flex-direction: column;

        align-items: center;
    }

    #front-page .our-partners .brand-is-safe-with-us .brand-safety .title,
    #front-page .our-partners .brand-is-safe-with-us .brand-safety .logo,
    #front-page .our-partners .brand-is-safe-with-us .brand-safety .brand-important,
    #front-page .our-partners .brand-is-safe-with-us .brand-safety .description,
    #front-page .our-partners .brand-is-safe-with-us .brand-safety .brand-button {

        width: 80%;
    }

    #front-page .our-partners .brand-is-safe-with-us .title {

        text-align: center;
    }

    #front-page .our-partners .brand-is-safe-with-us span img {
    
        max-width: 15rem;
    }

    #front-page .manifest .content {

        width: 80%;
        padding: 1.5rem 1.5rem;
    }

    #front-page .manifest .content .info h2 {

        font-size: 1.5rem;
    }
}

@media screen and (max-width: 320px) {

    #front-page .navbar .nav-logo {

        width: 10rem;
    }

    #front-page .the-future .programatic-advertising-search .search-list .search-item,
    #front-page .the-future .programatic-advertising-search .search-data .graph {

        width: 90%;
    }

    #front-page .reasons-to-advertise-with-us .reason-list .reason-item {
    
        width: 75%;
        justify-self: center;
    }

    #front-page .our-partners .partners .partner-list {

        column-gap: 7.5%;
    }

    #front-page .manifest .content,
    #front-page .manifest .content .quotation-marks {

        width: 90%;
    }
}