/* CSS Document */

/* Images as Background Images */

.octane-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

.octane-content {
    position: relative;
    height: 100%;
}

.octane-position {
    position: relative;
}

/* hero */

#hero {
    background: var(--style-main);
    background: var(--style-quad);
    padding: 150px 0px;
    border-block: 5px solid var(--black);
}

.bg-texture {
    pointer-events: none;
}

.bg-texture img {
    mix-blend-mode:multiply;
}

.hero-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
}

.hero-left, .hero-right {
    width: 50%;
}

.hero-right {
    position: relative;
}

.hero-video {
    aspect-ratio: 16 / 9;
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 5px solid var(--white);
}

.hero-video p {
	margin: 0px;
}

.hero-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.hero-svg {
    position: absolute;
    top:  -90px;
    left: -80px;
    filter: drop-shadow(0 0 0.75rem #000000);
}

/* hero left/ */

.hero-title {
    color: var(--white);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 3.6rem;
    line-height: 1;
    text-wrap: balance;
}

.hero-left p {
    font-size: 1.8rem;
    color: var(--white);
    line-height: 1.2;
}

.pol-link {
    font-size: 1rem;
    padding: 16px 24px;
    border: 3px solid var(--white);
    border-radius: 10px;
    display: block;
    width: fit-content;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
}

.pol-link:hover {
    transform: translatey(5px);
}

.white-link {
    color: var(--style-main);
    background: var(--white);
}

.white-link:hover {
    background: transparent;
    color: var(--white);
}


/* fix */

#fix, #why, #plan, #blog {
    background: var(--style-tri);
}

#fix .bg-texture, #why .bg-texture, #plan .bg-texture, #blog .bg-texture {
    opacity: .3;
}

.pad {
    padding: 120px 0px;
}

.fix-flex {
    display: flex;
    gap: 100px;
}

.fix-flex::before, .fix-flex::after {
    content: none;
}

.fix-left {
    max-width: 800px;
    width: 100%;
}

.fix-right {
    flex-grow: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fix-right img:first-of-type {
    border: 5px solid var(--style-main);
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    max-width: 575px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}


.fix-right img:nth-of-type(2) {
    position: absolute;
    border: 3px solid var(--white);
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    max-width: 225px;
    left: -20%;
    top: 50%;
    transform: translatey(-50%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.fix-right img:nth-of-type(3) {
    position: absolute;
    border: 3px solid var(--white);
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    max-width: 225px;
    left: 0px;
    bottom: -10%;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

/* fix left */

.fix-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fix-title {
    font-size: 1.778rem;
    color: var(--style-main);
    font-weight: bold;
}

.fix-left p {
    font-size: 1.111rem;
    color: var(--style-sec);
    font-weight: 500;
}

.fix-left ul {
    padding-left: 30px;
    margin-bottom: 20px;
}

.fix-left li {
    list-style-type: disc;
    font-size: 1.111rem;;
    font-weight: 500;
    color: var(--style-sec);
}

/* solutions */

#solutions {
    border-block: 5px solid var(--style-main);
}

.lg-title {
 font-size: 2.667rem;
    text-align: center;
    text-wrap: balance;
    text-transform: capitalize;
    font-weight: 700;
    color: var(--style-sec);
}

.red-title {
    color: var(--style-main);
}

#solutions p {
    font-size: 20px;
    color: var(--style-sec);
    text-align: center;
    max-width: 1000px;
    margin-inline: auto;
}

.solutions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.sol-card {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: var(--radius);
    overflow:hidden;
    transition: .4s;
    display: flex;
    flex-direction:column;
}

.sol-card:hover, .blog-post:hover {
    transform: translatey(10px);
}

.sol-card img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    transition: .4s;
}

.sol-card:hover img, .blog-post:hover .blog-img {
    opacity: .7;
}

#solutions .sol-card p, .blog-excerpt p {
    text-align: left;
    font-size: .9rem;
    margin-inline: initial;
}

.sol-card-text {
    padding: 10px;
    flex-grow: 1;
    display: flex;
    flex-direction:column;
}

.solution-title, .blog-title {
    color: var(--style-main);
    font-weight: 500;
    font-size: 1.333rem;
}

.solution-link, .blog-link {
    font-size: 1.111rem;
    color: var(--style-main);
    font-weight: 500;
    
    margin-top: auto;
    display: block;
    width: fit-content;
}

.solution-link i {
    margin-left: 10px;
}


/* why */
.why-flex {
    display: flex;
    gap: 100px;
    justify-content: center;
    margin-top: 40px;
}

.why-flex::before, .why-flex::after {
    content: none;
}

.them-title {
    font-size: 1.778rem;
    font-weight: bold;
    color: var(--style-sec);
    text-align: center;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.why-flex ul {
    padding: 40px 0px;
}

.why-flex li {
    font-size: 1.333rem;
    margin-bottom: 20px;
    font-weight: 500;
    color: var(--style-sec);
    display: flex;
    gap: 10px;
    align-items: center;
}

.why-left li::before {
    content: "";
    width: 45px;
    height: 45px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/wp-content/themes/high-octane-3.3.0/assets/img/icons/check-shield.svg);
}

.why-right li::before {
    content: "";
    width: 45px;
    height: 45px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/wp-content/themes/high-octane-3.3.0/assets/img/icons/trash.svg);
}

.why-right, .why-left {
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    align-items: center;
}


/* benefits */

#benefits {
    background: #403e3e;
}

#benefits p {
    max-width: 1000px;
    color: var(--white);
    text-align: center;
    margin-inline: auto;
}

.pol-title {
    font-size: 1.778rem;
    font-weight: 600;
    text-align: center;
    text-wrap: balance;
}

.white-title {
    color: var(--white);
}


.benefits {
    display: flex;
    gap: 25px;
}

.ben-card {
    background: var(--white);
    border-radius: var(--radius);
    display:flex;
    flex-direction:column;
    align-items: center;
    padding: 32px;
    width: 30%;
    flex-grow: 1;
}

.ben-svg, .ben-svg image {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

.benefit-title {
    font-size: 1.333rem;
    font-weight:bold;
    color: var(--style-sec);
    text-align: center;
}

#benefits .ben-card p {
    color: var(--style-sec);
    font-size: .9rem;
    margin: 0px;
}


/* plan */

#plan, #blog {
    border-block: 5px solid var(--style-main);
}

/* timeline*/

#timeline {
    padding: 50px 20px;
    position: relative;
    max-width: 1300px;
    margin-inline: auto;
}

#timeline::before {
    content: "";
    display: block;
    height: 100%;
    width: 7px;
    background: var(--style-main);

    position: absolute;
    top: 0;
    left: 50%;
    transform: translatex(-50%);
    -webkit-mask-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(255,255,255,0) 100%);

    animation: lineDown 6s;
}


@keyframes lineDown {
    0% {
        height: 0%;
    }    

    100% {
        height: 100%;
    }
}

.timeline {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 20px;
}

.time-row {
    display: flex;
    width: 100%;
    position: relative;
}

.time-row:nth-of-type(even) {
    justify-content: flex-end;
}

.dot {
    content: "";
    display: block;
    height: 60px;
    width: 60px;
    background: #fff;
    border: 3px solid var(--style-main);
    font-weight: bold;
    color: var(--style-main);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;

    position: absolute;

    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    transform: scale(0);
}

.dot-filled {
    background: var(--style-main);
    color: var(--white);
    transition: transform 0.7s, background-color 0.7s .5s,  color 0.7s .5s;
    transform: scale(1);
}


.bubble {
    width: 46%;
    max-width: 500px;
    background: white;
    border-radius: var(--radius);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
    color: black;
    padding: 24px;

    position: relative;

    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.bubble::before {
    content: "";
    display: block;
    height: 4px;
    width: 10%;
    background: var(--style-main);

    position: absolute;
    right: -15%;
    top: 50%;
    transform: translatey(-50%);
    z-index: 10;
}

.bubble-svg, .bubble-svg image {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.time-text {
    width: 50%;
    flex-grow: 1;
}

.time-row:nth-of-type(even) .bubble::before {
    left: -15%;
}

.time-title {
    color: var(--style-main);
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left;
    font-size: 1.389rem;
}

.date {
    border-bottom: 1px solid black;
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-family: var(--main-font);
    font-weight: bold;
    text-align: center;
}

.bubble p {
    margin: 0px;
    line-height: 1.2;
    font-size: .9rem;
    text-align: left;
}

.bubble ul {
    padding-left: 30px;
    padding-top: 10px;
}

.bubble li {
    font-family: var(--thin-font);
    line-height: 1.2;
    font-size: .9rem;
    list-style-type: disc;
}

.bubble img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    border-radius: 15px;
    margin-top: 10px;
    margin-bottom: 0px;
}

.time-link {
    position: absolute;
    bottom: -30px;
    right: -10%;
    text-align: center;
    color: var(--white);
    background: var(--style-main);
    border-radius: var(--radius);
    padding: 10px;
    font-size: 1rem;
    font-weight: 500;
    text-transform:uppercase;
    margin-inline: auto;
    display: block;
    width: fit-content;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
    border: 3px solid var(--style-main);
}

.time-link:hover {
    background: var(--white);
    color: var(--style-main);
}

.bubble:has(a) {
    padding-bottom: 32px;
    padding-right: 32px;
}

/* work */

#work {
    background: var(--style-quad);
}


/* blog */

.blog-posts {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}

.blog-post {
    background: var(--white);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: var(--radius);
    overflow:hidden;
    transition: .4s;
    display: flex;
    flex-direction:column;
}

.blog-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
    transition: .4s;
}

.blog-text {
    padding: 10px;
}


/* end */

#end {
    background: var(--style-quad);
}

#end .octane-background {
    mix-blend-mode:multiply;
}

.end-title {
    text-align: center;
    font-size: 3.556rem;
    font-weight: 700;
    text-wrap:balance;
    line-height: 1;
}

.end-subtitle {
    text-align: center;
    font-size: 2.667rem;
    font-weight: 700;
    text-wrap:balance;
    line-height: 1;
}

#end .pol-link {
    margin-inline: auto;
}



















@media(max-width: 1920px) {
    .pad {
        padding: 100px 0px;
    }
}

@media(max-width: 1650px) {
    .hero-title {
        font-size: 2.8rem;
    }

    .hero-left p {
        font-size: 1.1rem;
    }

    /* fix */

    .fix-right img:first-of-type {
        max-width: 450px;
    }


    .fix-right img:nth-of-type(2) {
        max-width: 170px;
        left: -20%;
        top: 50%;
    }
    
    .fix-right img:nth-of-type(3) {
        max-width: 170px;
        left: 0px;
        bottom: -5%;
    }
}

@media(max-width: 1450px) {
    /* plan */

    .bubble::before {
        width: 5%;
        right: -9%;
    }

    .time-row:nth-of-type(even) .bubble::before {
        left: -9%;
    }
}

@media(max-width: 1350px) {
    .hero-flex {
        gap: 60px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .pol-link {
        padding: 10px 20px;
    }

    /* fix */

    .fix-title {
        font-size: 1.389rem;
    }

    .fix-left p, .fix-left li {
        font-size: 1rem;
    }

    /* why */

    .why-flex li {
        font-size: 1.111rem;
    }

    /* plan */

    .bubble::before {
        display: none;
    }

    .time-row:nth-of-type(even) .bubble::before {
        display: none;
    }

    .dot {
        font-size: 20px;
        height: 40px;
        width: 40px;
    }

    .time-link {
        bottom: -30px;
        right: initial;
        left: 50%;
        transform: translatex(-50%);
        font-size: .9rem;
        line-height: 1;
    }

    .bubble:has(a) {
        padding-right: 24px;
        padding-bottom: 60px;
    }

    /* end */

    .end-title {
        font-size: 2.667rem;
    }

    .end-subtitle {
        font-size: 1.944rem;
    }
    
}

@media(max-width: 1024px) {
    #hero {
        padding: 100px 0px;
    }

    .pad {
        padding: 75px 0px;
    }

    /* fix */

    .fix-flex {
        flex-direction: column;
        gap: 30px;
    }

    .fix-left {
        width: 100%;
        max-width: 100%;
    }

    .fix-right {
        max-width: 600px;
        margin-inline: auto;
    }

        .fix-right img:first-of-type {
            max-width: 370px;
            width: 100%;
        }
        
        
        .fix-right img:nth-of-type(2) {
            max-width: 140px;
        }
        
        .fix-right img:nth-of-type(3) {
            max-width: 140px;
        }

    /* solutions */

    .lg-title {
        font-size: 1.944rem;
    }

    #solutions p {
        font-size: 1rem;
    }

    .solutions, .blog-posts {
        grid-template-columns: repeat(2, 1fr);
    }

    .solution-title, .blog-title {
        font-size: 1.111rem;
    }

    .sol-card img, .blog-img {
        height: 175px;
    }

    /* benefits */

    .benefits {
        flex-wrap: wrap;
    }

    .ben-card {
        width: 40%;
    }
    
    
}

@media(max-width: 768px) {
    #hero {
        padding: 50px 0px;
    }

    .hero-title {
        font-size: 1.9rem;
        text-align: center;
    }

    .hero-left p {
        font-size: 0.9rem;
        text-align: center;
    }
    
    .hero-flex {
        flex-direction: column;
    }

    .hero-left, .hero-right {
        width: 100%;
        max-width: 500px;
    }

    .pol-link {
        font-size: 0.9rem;
        margin-inline: auto;
    }

    .hero-video {
        max-width: 400px;
        margin-inline: auto;
    }

    .hero-svg, .hero-svg image {
        width: 130px;
        height: 130px;
    }

    .hero-right {
        margin-top: 30px;
    }

    .hero-svg {
        left: 50%;
        top: -60px;
        transform: rotate(6deg) translatex(-50%);
    }

    .pad {
        padding: 40px 0px;
    }

    /* fix */

    .fix-title {
        text-align: center;
        font-size: 1.111rem;
    }

    .fix-left p, .fix-left li {
        font-size: .9rem;
    }

     .fix-right img:nth-of-type(2) {
        max-width: 110px;
        left: 0px;
        transform: none;
        bottom: 0px;
        top: initial;
    }
        
    .fix-right img:nth-of-type(3) {
        left: initial;
        max-width: 110px;
        bottom: 0px;
        right: 0px;
    }

    /* solutions */

    .solutions, .blog-posts {
        grid-template-columns: repeat(1, 1fr);
    }

    .sol-card:hover, .blog-post:hover {
        transform:none;
    }

    .lg-title {
        font-size: 1.667rem;
    }

    #solutions p {
        font-size: .9rem;
    }

    /* why */

    .why-flex {
        gap: 20px;
    }

    .why-flex li {
        font-size: .9rem;
        line-height: 1;
        align-items: flex-start
    }

    .why-left li::before, .why-right li::before {
        width: 30px;
        height: 30px;
        background-size: contain;
    }

    .them-title {
        font-size: 1.2rem;
    }

    /* benefits */

    .pol-title {
        font-size: 1.556rem;
    }

    #benefits p {
        font-size: .9rem;
    }

    .ben-card {
        width: 100%;
    }

    /* plan */

    #timeline {
        padding-right: 0px;
    }

    .bubble {
        width: 95%;
        flex-direction: column;
    }

    .time-text {
        width: 100%;
    }

    .bubble-svg, .bubble-svg image {
        width: 30px;
        height: 30px;
    }

    .time-row {
        justify-content: flex-end;
    }

    .time-row:has(a) {
        margin-bottom: 20px;
    }

    .time-title {
        font-size: 20px;
        text-align: center;
    }

    .bubble p {
        text-align: center;
    }

    .time-row:nth-of-type(odd) .bubble::before {
        left: initial;
        right: 100%;
        clip-path: polygon(100% 0, 100% 100%, 0 50%);
    }

    .dot {
        margin-left: -40px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    #timeline::before {
        left: calc(0% + 2px);
    }

    /* end */

    .end-title {
        font-size: 1.944rem;
    }

    .end-subtitle {
        font-size: 1.333rem;
    }
    
}