@import url('https://fonts.googleapis.com/css2?family=Bungee+Tint&family=Honk&family=Press+Start+2P&family=Special+Elite&family=ZCOOL+KuaiLe&display=swap');

/* ===============GOOGLE FONTS============= */
.heading-first-letter {
    font-family: "Honk", system-ui;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "MORF" 15,
        "SHLN" 50;
}

.sub-hero {
    font-family: "ZCOOL KuaiLe", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.red-letters {
    font-family: "Bungee Tint", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.body-bold {
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
}

.body-normal {
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style: normal;
}


/* -------------------------------------------------------------------------------------------------------------- */
/* =====================hero section================ */
.hero-section {
    min-height: 100dvh;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./assets/vlad-deep-zniM2Qqaxv4-unsplash.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero {
    height: 90vh;
}

.hero h1,
.hero h3,
.hero .hero-links {
    opacity: 0;
    animation: appear 1s ease-in forwards;
}

.hero h1 {
    word-spacing: 20px;
}

.hero h3 {
    animation-delay: 0.7s;
}

.hero .hero-links {
    animation-delay: 1.5s;
}

.inline-logo {
    display: inline-block;
    font-size: 5rem;
    animation: jump_grow 3s linear infinite;
}

.inline-logo-2 {
    animation-delay: 1s;
}

.inline-logo-3 {
    animation-delay: 2s;
}

/* -------------------------------------------------------------------------------------------------------------- */
/* =================FEATURE SECTION================ */
.feature-section img {
    width: 80%;
}

.feature-section h3 {
    font-size: 1.2rem;
}

.feature-section p {
    word-spacing: 10px;
    font-size: 1rem;
}

/* -------------------------------------------------------------------------------------------------------------- */
/* ============Reviews============ */
.left_quote,
.right_quote {
    border-radius: 20px;
    border-top: 2px solid black;
    position: relative;
}

.left_quote {
    border-right: 2px solid black;
    text-align: right;
}

.right_quote {
    border-left: 2px solid black;
    text-align: left;
}

.review_pic {
    width: 15%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -5%;
}

.right_quote>.review_pic {
    right: -2%;
}

.left_quote>.review_pic {
    left: -2%;
}

.r_p_1 {
    background-image: url(./assets/reviewers/doug-bagg-9iLbXsMZ6ls-unsplash.jpg);
}

.r_p_2 {
    background-image: url(./assets/reviewers/batel-studio-ttSRjiYG_WM-unsplash.jpg);
}

.r_p_3 {
    background-image: url(./assets/reviewers/leo-svalov-JxNnRZFTWFM-unsplash.jpg);
}

.r_p_4 {
    background-image: url(./assets/reviewers/nicolas-horn-ARBQCe2GrjQ-unsplash.jpg);
}

/* -------------------------------------------------------------------------------------------------------------- */
/* ================CONTACT SECTION========== */
.location_header,
.location_info,
.email_header,
.email_info,
.phone_header,
.phone_info {
    width: 80%;
}

.contact_section h2 {animation: pulse 1.5s linear infinite alternate;}

.location_header {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./assets/smartphone-2198559_1920.jpg);
}

.email_header {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./assets/brett-jordan-LPZy4da9aRo-unsplash.jpg);
}

.phone_header {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./assets/onur-binay-diNfwACx8bk-unsplash.jpg);
}

.location_header,
.email_header,
.phone_header {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 20vh;
}



/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ============BLOG SECTION============= */
.blog-hero-section {
    min-height: 30dvh;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./assets/blog.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.bp_card {
    width: 90%;
    position: relative;
    border-radius: 18px;
    border: 2px solid lightgray;
}

.bp_card a {
    position: absolute;
    bottom: -5%;
}

.col-12:nth-child(1) .bp_card .bp_image {
    background: url(./assets/brett-jordan-LPZy4da9aRo-unsplash.jpg);
    background-size: cover;
}

.col-12:nth-child(2) .bp_card .bp_image {
    background: url(./assets/annie-spratt-__b279kVy0c-unsplash.jpg);
    background-size: cover;
}

.col-12:nth-child(3) .bp_card .bp_image {
    background: url(./assets/annie-spratt-xKJUnFwfz3s-unsplash.jpg);
    background-size: cover;
}

.col-12:nth-child(4) .bp_card .bp_image {
    background: url(./assets/annie-spratt-ZsWaYLImZFs-unsplash.jpg);
    background-size: cover;
}

.col-12:nth-child(5) .bp_card .bp_image {
    background: url(./assets/maria-thalassinou-61fy_dlPtF4-unsplash.jpg);
    background-size: cover;
}

.col-12:nth-child(6) .bp_card .bp_image {
    background: url(./assets/onur-binay-diNfwACx8bk-unsplash.jpg);
    background-size: cover;
}

.col-12:nth-child(7) .bp_card .bp_image {
    background: url(./assets/smartphone-2198559_1920.jpg);
    background-size: cover;
}

.col-12:nth-child(8) .bp_card .bp_image {
    background: url(./assets/thomas-park-PjQ8VIZrZRE-unsplash.jpg);
    background-size: cover;
}

.col-12:nth-child(9) .bp_card .bp_image {
    background: url(./assets/thomas-park-w9i7wMaM3EE-unsplash.jpg);
    background-size: cover;
}

.col-12:nth-child(10) .bp_card .bp_image {
    background: url(./assets/van-tay-media-TOBRTuE_uXA-unsplash.jpg);
    background-size: cover;
}

.col-12:nth-child(11) .bp_card .bp_image {
    background: url(./assets/vitaly-gariev-5jeHKPNLdLY-unsplash.jpg);
    background-size: cover;
}

.col-12:nth-child(12) .bp_card .bp_image {
    background: url(./assets/vlad-deep-zniM2Qqaxv4-unsplash.jpg);
    background-size: cover;
}

.bp_image {
    width: 90%;
    aspect-ratio: 1/0.5;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 18px;
}

.gallery-section img {
    opacity: 0;
    transform: scale(1.5);
    width: 80%;
    animation: fade_in_shrink 2s ease-in forwards;
    animation-timeline: view();
    animation-range: entry 0 cover 30%;
}

.gallery-hero-section {
    min-height: 30dvh;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./assets/vitaly-gariev-tBYDY8CXMyY-unsplash.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* ====================MEDIA QUERIES=========== */

@media (min-width: 768px) {

    /* ==========hero section=========== */
    .hero h1 {
        font-size: 5rem;
        word-spacing: 20px;
    }

    .inline-logo {
        font-size: 10rem;
    }

    /* ================feature=========== */

    .feature-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "f_img_1 f_txt_1 f_txt_1"
            "f_txt_2 f_txt_2 f_img_2"
            "f_img_3 f_txt_3 f_txt_3"
            "f_txt_4 f_txt_4 f_img_4";
    }

    .f_img_1 {
        grid-area: f_img_1;
    }

    .f_txt_1 {
        grid-area: f_txt_1;
    }

    .f_txt_2 {
        grid-area: f_txt_2;
    }

    .f_img_2 {
        grid-area: f_img_2;
    }

    .f_img_3 {
        grid-area: f_img_3;
    }

    .f_txt_3 {
        grid-area: f_txt_3;
    }

    .f_txt_4 {
        grid-area: f_txt_4;
    }

    .f_img_4 {
        grid-area: f_img_4;
    }

    .feature-section h3 {
        font-size: 1rem;
    }

    .feature-section p {
        font-size: 0.8rem;
    }


    /* ---------review-------- */
    .review_pic {
        width: 10%;
    }

    .left_quote,
    .right_quote {
        z-index: 1;
    }

    .left_quote>.review_pic,
    .right_quote>.review_pic {
        z-index: 2;
        bottom: -15%;
    }

    .right_quote>.review_pic {
        right: -5%;
    }

    .left_quote>.review_pic {
        left: -5%;
    }

    /* =========contact======= */
    .location_info,
    .email_info,
    .phone_info {
        font-size: 1.5rem;
    }

    /* =========blog========= */

    .blog-hero h1 {
        font-size: 5rem;
    }

    .bp_card a {
        left: 50%;
        transition: background-color 0.2s ease-in;
        transform: translateX(-50%);
    }

    .bp_card a:hover {
        background-color: navy !important;
    }
}

@media (min-width: 992px) {
    .feature-section h3 {
        font-size: 1.2rem;
    }

    .feature-section p {
        font-size: 1rem;
    }

    /* =========contact======= */
    .location_info,
    .email_info,
    .phone_info {
        font-size: 1.7rem;
    }
}

@media (min-width: 1200px) {
    .feature-section h3 {
        font-size: 1.4rem;
    }

    .feature-section p {
        font-size: 1.2rem;
    }
}


/* =================animation============= */

@keyframes jump_grow {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-10%);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }

}

@keyframes appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade_in_shrink {
    from {
        opacity: 0;
        transform: scale(1.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    from {opacity: 0.4;}
    to {opacity: 1;}
}