@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
    --bluegrey   : #545863;
    --greenblue  : #f4d1c6;
    --gloworange : #e1bc9a;
    --lightpink  : #eee3e1;
    --beige      : #eed4bd;
    --warmorange : #e6af7c;
    --offwhite   : #fafafa;
}

body, html {
    margin      : 0;
    font-family : "Outfit", sans-serif;
    color       : var(--bluegrey);
    font-size   : 20px;
}

h1 {
    font-family : "Dancing Script", cursive;
    font-size   : 50px;
}

h2 {
    font-size : 30px;
}

p {
    font-size   : 20px;
    line-height : 28px;
}

header {
    background-color : var(--gloworange);
    height           : 120px;
    width            : 100%;
    border-bottom    : 4px solid var(--gloworange);
    position         : sticky;
    top              : 0;
    z-index          : 1000;
    box-shadow       : none;
    transition       : box-shadow 200ms ease;
}

header.scrolled {
    box-shadow : 0 6px 18px rgba(0, 0, 0, 0.08);
}

section {
    margin-top    : 30px;
    margin-bottom : 30px;
}

.innerheader {
    width          : 95%;
    max-width      : 1600px;
    height         : 120px;
    margin         : 0 auto;
    display        : flex;
    flex-direction : row;
}

.logo {
    height        : 120px;
    width         : auto;
    display       : flex;
    align-items   : center; /* Vertically center items */
    border-bottom : 4px solid var(--gloworange);
}

.logo h1 {
    margin-left   : 20px;
    margin-bottom : 0;
    margin-top    : 0;
    color         : var(--offwhite);
}

.logo h2 {
    font-size     : 18px;
    margin-top    : 0;
    margin-bottom : 0;
    margin-left   : 20px;
    color         : var(--offwhite);
}

.menu-toggle {
    display   : none;
    position  : absolute;
    top       : 50%;
    right     : 20px;
    transform : translateY(-50%);
    font-size : 24px;
    color     : var(--offwhite);
    cursor    : pointer;
    z-index   : 1001;
}

.nav {
    height        : 120px;
    flex-grow     : .9;
    text-align    : right;
    border-bottom : 4px solid var(--gloworange);
}

.nav ul {
    list-style : none;
    margin     : 0;
    font-size  : 0;
}

.clickli {
    cursor          : pointer;
    text-decoration : none;
    padding         : 0 15px;
    color           : var(--offwhite);
}

.clickli:hover {
    background-color : rgba(255, 255, 255, 0.10);
    border-bottom    : 4px solid var(--warmorange);
}

.clickli,
.imgli {
    display     : inline-block;
    line-height : 120px;
    font-size   : 18px;
}

.imgli {
    padding : 0;
}

.imgli img {
    width          : 40px;
    height         : 40px;
    cursor         : pointer;
    vertical-align : middle;
}

.selected {
    background-color : rgba(255, 255, 255, 0.10);
    border-bottom    : 4px solid var(--warmorange);
}


content {
    width          : 100%;
    min-height     : 100vh;
    display        : flex;
    flex-direction : column;
}

.main-content {
    display        : flex;
    flex-direction : column;
    flex-grow      : 1;
}

.profilepic {
    background-image    : url("images/nicolepedra.jpg");
    background-position : center center;
    background-repeat   : no-repeat;
    border              : var(--warmorange) solid 3px;
    border-radius       : 50%;
    height              : 90px;
    width               : 90px;
    margin              : 0;
}

.aboutme {
    display        : flex;
    flex-direction : row;
    width          : 95%;
    max-width      : 1400px;
    margin         : 0 auto;
    gap            : 50px;
}

.about_img {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    width           : 50%;
}

.about_img img {
    max-width     : 80%;
    border-radius : 25px;
    max-height    : 600px;
}

.about_txt {
    margin : 50px;
    width  : 50%;
}

.partner-section {
    background-color : var(--gloworange);
    width            : 100%;
    padding          : 50px 0;
    color            : var(--offwhite);
    display          : flex;
    flex-direction   : column;
    align-items      : center;
}

.homebtn_white {
    padding          : 10px 50px 10px 20px; /* Extra right padding for the icon */
    border-radius    : 25px;
    background-color : var(--warmorange);
    color            : var(--offwhite);
    font-family      : "Outfit", sans-serif;
    font-size        : 20px;
    cursor           : pointer;
    border           : var(--beige) solid 5px;
    position         : relative;
}

.homebtn_white::after {
    content             : "";
    position            : absolute;
    right               : 15px;
    top                 : 50%;
    transform           : translateY(-50%);
    width               : 30px; /* Adjust to your icon size */
    height              : 30px;
    background-image    : url('images/clickicon.png');
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : center;
    animation           : point 1s ease-in-out infinite;
}

@keyframes point {
    0%, 100% {
        transform : translateY(-50%) translateX(0);
    }
    50% {
        transform : translateY(-50%) translateX(3px);
    }
}


.homebtn_white:hover {
    box-shadow : 0 0 8px rgba(255, 255, 255, 0.7);
}

.workedwith {
    width            : 100%;
    background-color : var(--lightpink);
}

.ploygon_l_r {
    clip-path      : polygon(0 0, 100% 0, 100% 100%, 0 90%);
    padding-bottom : 125px;
}


.ww_inner {
    display        : flex;
    flex-direction : column;
    width          : 90%;
    max-width      : 1400px;
    margin         : 0px auto;
    padding-top    : 30px;
}

.clogos {
    display        : flex;
    flex-direction : row;
    width          : 100%;
    flex-wrap      : wrap;
}

.clogos img {
    height : 50px;
    margin : 30px;
}

.partnerhome {
    width          : 85%;
    max-width      : 1000px;
    display        : flex;
    flex-direction : column;
    margin         : 100px auto 0;
    gap            : 75px;
}

.media-spotlight .title {
    width     : 100%;
    max-width : 800px;
}

.media-spotlight .title img {
    max-width : 250px;
}

.mediahome {
    position   : relative;
    padding    : 0;
    overflow   : hidden;
    margin-top : 100px;
}

.topborderwave {
    width               : 100%;
    height              : 80px;
    transform           : rotate(180deg);

    /* Background */
    background-image    : url('images/wavesOpacity.svg');
    background-size     : cover;
    background-repeat   : no-repeat;
    background-position : center bottom;

    /* Positioning */
    display             : block;
    margin              : 0;
    padding             : 0;
}

.mediahomecontent {
    background-color : var(--gloworange);
    position         : relative;
    z-index          : 1;
    padding          : 20px 0 80px;
    color            : white;
    overflow         : hidden; /* Prevents margin collapse */
    margin-top       : -1px; /* Pull it up by 1px */
}

.mhc-pad {
    padding-bottom : 90px;
}

.mediahomecontent .title {
    width      : 90%;
    max-width  : 900px;
    margin     : 0 auto;
    text-align : center;
}

.media-feature-box {
    width          : 90%;
    max-width      : 900px;
    display        : flex;
    flex-direction : row;
    gap            : 40px;
    margin         : 40px auto 0;
}

.media-feature {
    flex           : 1;
    display        : flex;
    flex-direction : column;
    cursor         : pointer;
    border-radius  : 10px;
    border         : var(--beige) solid 5px;
}

.media-feature:hover {
    box-shadow : 0 0 20px rgba(255, 255, 255, 0.9);
}

.media-feature__img {
    /* Optional: Set a specific height if you want consistent image container heights */
    /* height: 200px; */
    overflow: hidden; /* This will crop images that exceed the container */
}

.media-feature__img img {
    width         : 100%;
    height        : auto; /* Changed from 100% to auto to maintain aspect ratio */
    border-radius : 10px 10px 0 0;
    object-fit    : cover; /* This ensures images fill the container nicely without distortion */
    display       : block; /* Removes any inline spacing issues */
}

.media-feature__text {
    background-color : var(--warmorange);
    border-radius    : 0 0 10px 10px;
    padding          : 20px;
    font-size        : 16px;
    min-height       : 80px;
}

.media-button {
    width           : 90%;
    max-width       : 900px;
    display         : flex;
    flex-direction  : row;
    justify-content : center;
    margin          : 40px auto;
}

.bottomborderwave {
    width               : 100%;
    height              : 80px;
    background-image    : url('images/wavesOpacityBtm.svg');
    background-size     : cover;
    background-repeat   : no-repeat;
    background-position : center top;
    display             : block;
    margin              : 0;
    padding             : 0;
}


.ww_feature {
    width : 100%;
}

.wwft_inner {
    display        : flex;
    flex-direction : column;
    width          : 90%;
    max-width      : 1200px;
    margin         : 150px auto 0;
}

.feat {
    display        : flex;
    flex-direction : row;
}

.ftgif {
    width     : 50%;
    margin    : 20px;
    min-width : 620px;
}

.fttxt {
    width  : 50%;
    margin : 20px;
}

video {
    cursor : pointer;
}

video:hover {
    opacity : 0.5;
}

.tickertitle {
    width      : 90%;
    max-width  : 900px;
    margin     : 0 auto;
    text-align : center;
}

.logo-ticker {
    --ticker-height : 72px; /* max visible height for logos */
    --gap           : 28px; /* gap between logos */
    --px-per-sec    : 60; /* base speed (pixels/second) */
    --duration      : 30s; /* gets overwritten by JS for consistency */
    position        : relative;
    width           : 90%;
    max-width       : 1200px;
    margin          : 0 auto;
    overflow        : hidden;
    padding         : 12px 0;
    background      : transparent;
}

.logo-ticker__viewport {
    overflow      : hidden;
    margin-bottom : 30px;
}

.logo-ticker__track {
    display     : flex;
    align-items : center;
    gap         : var(--gap);
    will-change : transform;
    /* the animation is applied by JS after duplication is ready */
}

.logo-ticker__item {
    flex        : 0 0 auto; /* keep items from shrinking */
    display     : grid;
    place-items : center;
    min-width   : max(120px, var(--ticker-height));
}

.logo-ticker__item img {
    height     : var(--ticker-height);
    width      : auto;
    max-width  : 300px; /* prevent ultra-wide logos from dominating */
    max-height : 70px;
    object-fit : contain;
    filter     : none; /* tweak if you need grayscale: grayscale(1) */
    opacity    : 0.95;
    transition : transform 200ms ease;
}

.logo-ticker__item img:hover {
    transform : scale(1.06);
}

/* Fades at edges (optional but nice) */
.logo-ticker__fade {
    position       : absolute;
    top            : 0;
    bottom         : 0;
    width          : 60px;
    pointer-events : none;
    z-index        : 2;
    background     : linear-gradient(to right, rgba(225, 188, 154, 1), rgba(225, 188, 154, 0));
}

.logo-ticker__fade--left {
    left : 0;
}

.logo-ticker__fade--right {
    right     : 0;
    transform : scaleX(-1);
}

/* Scrolling animation */
@keyframes ticker-scroll {
    from {
        transform : translateX(0);
    }
    to {
        transform : translateX(var(--loop-end, -50%));
    }
}

/* Applied when JS signals the track is ready */
.logo-ticker__track.is-animating {
    animation : ticker-scroll var(--duration) linear infinite;
}

/* Pause on hover/focus for accessibility & UX */
.logo-ticker:hover .logo-ticker__track,
.logo-ticker:focus-within .logo-ticker__track {
    animation-play-state : paused;
}

/* Respect reduced motion */
@media (prefers-reduced-motion : reduce) {
    .logo-ticker__track {
        animation : none !important;
    }
}

.media {
    width            : 100%;
    background-color : var(--gloworange);
    padding          : 50px 0;
}

.mediawave {
    width               : 100%;
    height              : 40px;
    background-image    : url('images/shallowWaves.svg');
    background-size     : cover;
    background-repeat   : no-repeat;
    background-position : center top;
    display             : block;
    margin              : 0;
    padding             : 0;
}

.innermedia {
    margin         : 0 auto;
    width          : 95%;
    max-width      : 1600px;
    display        : flex;
    flex-direction : row;
    gap            : 50px;
}

.innermedia .img {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : flex-start;
    width           : 60%;
}

.innermedia .img img {
    width         : 96%;
    border-radius : 5px;
}

.innermedia .txt {
    width           : 40%;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    color           : var(--offwhite)
}

.innermedia .txt h1 {
    color : var(--offwhite);
}

.medialist {
    width          : 90%;
    max-width      : 770px;
    display        : flex;
    flex-direction : column;
    gap            : 40px;
    align-items    : center;
    margin         : 50px auto 0;
}

.medialist__item {
    display        : flex;
    flex-direction : row;
    gap            : 50px;
}

.medialist__item > div {
    flex : 1;
}

.medialist__item .img {
    overflow      : hidden;
    max-height    : 300px;
    border-radius : 5px;
    cursor        : pointer;
}

.medialist__item .img:hover {
    box-shadow : 0 0 10px rgba(224, 187, 153, 0.5);
}

.medialist__item .img img {
    width : 100%;
}

.medialist__item .txt h4 {
    margin-top : 5px;
}

.medialist__item .txt a {
    color      : var(--gloworange);
    /* Add transition for smooth animation */
    transition : transform 0.3s ease, color 0.3s ease;
    /* Ensure it's positioned correctly */
    display    : inline-block;
}

.medialist__item .txt a:hover {
    color     : var(--warmorange);
    /* Move up by 3 pixels */
    transform : translateY(-3px);
}

.quotesection {
    /* Sizing and spacing */
    width      : 90%;
    max-width  : 900px;
    margin     : 50px auto 30px;


    /* Center content */
    text-align : center;
    position   : relative;
}

.quotesection span {
    /* Text styling */
    font-size   : 1.5rem;
    line-height : 1.6;
    font-weight : 300;
    color       : #2c3e50;
    position    : relative;
    display     : block;

    /* Add quotes inline */
    quotes      : "" " " "" "'" "'";
}

.quotesection span::before {
    content        : open-quote;
    font-size      : 4rem;
    line-height    : 0;
    margin-right   : 10px;
    vertical-align : -25px;
    color          : var(--gloworange, #ff6b35);
    font-family    : Georgia, serif;
}

.quotesection span::after {
    content        : close-quote;
    font-size      : 4rem;
    line-height    : 0;
    margin-left    : 10px;
    vertical-align : -25px;
    color          : var(--gloworange, #ff6b35);
    font-family    : Georgia, serif;
}

.quotesection cite {
    display     : block;
    margin-top  : 20px;
    font-size   : 1rem;
    font-style  : normal;
    font-weight : 500;
}

footer {
    width            : 100%;
    margin-top       : 100px;
    background-color : var(--warmorange);
}

.inner-footer {
    width          : 85%;
    max-width      : 1400px;
    margin         : 0 auto;
    display        : flex;
    flex-direction : column;
}

.lower-footer {
    width     : 100%;
    padding   : 20px 0;
    color     : var(--offwhite);
    font-size : 14px;
    flex-grow : 1;
    display   : flex;
}

.lower-footer > div {
    flex : 1;
}

.lower-footer .left {
    text-align : left;
}

.lower-footer .middle {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
}

.lower-footer .right {
    align-items     : center;
    display         : flex;
    flex-direction  : row;
    justify-content : flex-end;
}

.lower-footer .right img {
    height : 40px;
    width  : 40px;
    cursor : pointer;
}


@media only screen and (max-width : 767px) {
    h2 {
        font-size : 30px;
    }

    .logo {
        max-width : 90%;
    }

    .nav {
        position : relative;
        height   : 70px;
    }

    .menu-toggle {
        display : block;
    }

    .nav ul {
        display          : none;
        position         : fixed;
        top              : 0;
        left             : 0;
        width            : 100%;
        height           : 100vh;
        background-color : var(--gloworange);
        flex-direction   : column;
        justify-content  : flex-start;
        align-items      : center;
        z-index          : 1000;
        margin           : 0;
        padding          : 80px 0 0 0;
    }

    .nav ul.active {
        display : flex;
    }

    .clickli, .imgli {
        display       : block;
        line-height   : normal;
        padding       : 20px;
        font-size     : 24px;
        text-align    : center;
        width         : 100%;
        border-bottom : 1px solid rgba(255, 255, 255, 0.2);
    }

    .clickli:hover {
        background-color : rgba(255, 255, 255, 0.1);
        border-bottom    : 1px solid rgba(255, 255, 255, 0.2);
    }

    .imgli {
        padding : 15px;
    }

    .imgli img {
        width  : 50px;
        height : 50px;
    }

    .logo h1 {
        font-size : 24px;
    }

    .logo h2 {
        font-size : 12px;
    }

    .aboutme {
        flex-direction : column-reverse;
        margin-bottom  : 50px;
    }

    .about_img {
        width           : 90%;
        margin          : 0 auto;
        display         : flex;
        flex-direction  : row;
        justify-content : center;
    }

    .about_img img {
        width : 90%;
    }

    .about_txt {
        margin : 0 auto;
        width  : 90%;
    }

    .ploygon_l_r {
        clip-path      : polygon(0 0, 100% 0, 100% 100%, 0 95%);
        padding-bottom : 100px;
    }

    .media-feature-box {
        flex-direction : column;
    }


    .medialist__item {
        flex-direction : column;
    }

    .videos video {
        width : 100%;
    }

    .clogos img {
        height     : auto;
        max-width  : 90%;
        max-height : 50px;
        margin     : 20px;
    }

    .feat {
        flex-direction : column;
    }

    .ftgif {
        width     : 100%;
        min-width : auto;
        margin    : 20px 0;
    }

    .fttxt {
        width  : 100%;
        margin : 20px 0;
    }

    .innermedia {
        flex-direction : column-reverse;
        align-items    : center;
    }

    .innermedia .img {
        align-items : center;
        width       : 100%;
    }

    .innermedia .txt {
        width : 95%;
    }

}

/* Mobile */
@media (max-width: 480px) {
    .ploygon_l_r {
        clip-path      : polygon(0 0, 100% 0, 100% 100%, 0 97%);
        padding-bottom : 75px;
    }
}

/* Very small mobile screens */
@media (max-width: 320px) {
    .ploygon_l_r {
        clip-path      : polygon(0 0, 100% 0, 100% 100%, 0 98%);
        padding-bottom : 50px;
    }
}