/* =================================================================== 
 * Infinity Main Stylesheet
 * Template Ver. 2.0.0
 * 12-17-2021
 * ------------------------------------------------------------------
 *
 * TOC:
 * # SETTINGS
 *      ## fonts 
 *      ## colors
 *      ## spacing and typescale
 *      ## grid variables
 * # NORMALIZE
 * # BASE SETUP
 * # GRID
 *      ## large screen devices 
 *      ## medium screen devices 
 *      ## tablet devices 
 *      ## mobile devices 
 *      ## small screen devices 
 *      ## additional column stackpoints 
 * # UTILITY CLASSES
 * # TYPOGRAPHY 
 *      ## base type styles
 *      ## additional typography & helper classes
 *      ## lists
 *      ## spacing
 * # PRELOADER
 * # FORM
 *      ## style placeholder text
 *      ## change autocomplete styles in Chrome
 * # BUTTONS
 * # TABLE
 * # COMPONENTS
 *      ## pagination
 *      ## alert box 
 *      ## skillbars
 *      ## stats tabs
 * # PROJECT-WIDE SHARED STYLES
 *      ## media classes
 *      ## swiper overrides
 *      ## section header
 *      ## theme-specific typography classes
 * # PAGE WRAP
 * # SITE HEADER
 *      ## logo
 *      ## menu toggle
 *      ## off-canvas menu
 *      ## header social
 * # INTRO
 *      ## intro background
 *      ## intro content
 *      ## intro social
 *      ## intro scroll
 * # ABOUT
 * # SERVICES
 *      ## services background
 *      ## services list
 * # PORTFOLIO
 *      ## portfolio list
 *      ## testimonials
 *      ## clients
 * # CONTACT
 *      ## contact infos
 *      ## contact bottom
 * # FOOTER
 *      ## copyright
 *      ## go top
 *
 * ------------------------------------------------------------------ */


/* ===================================================================
 * # SETTINGS
 *
 *
 * ------------------------------------------------------------------- */

/* ------------------------------------------------------------------- 
 * ## fonts 
 * ------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

:root {
    --font-1: "Lora", serif;
    --font-2: "Inter", sans-serif;

    /* monospace
    */
    --font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}

/* ------------------------------------------------------------------- 
 * ## colors
 * ------------------------------------------------------------------- */
:root {

    /* color-1(#F9A828)
     * color-2(#07617D)
     */
    --color-1: hsla(37, 95%, 57%, 1);
    --color-2: hsla(194, 89%, 26%, 1);

    /* theme color variations
     */
    --color-1-lighter: hsla(37, 95%, 77%, 1);
    --color-1-light: hsla(37, 95%, 67%, 1);
    --color-1-dark: hsla(37, 95%, 47%, 1);
    --color-1-darker: hsla(37, 95%, 37%, 1);
    --color-2-lighter: hsla(194, 89%, 46%, 1);
    --color-2-light: hsla(194, 89%, 36%, 1);
    --color-2-dark: hsla(194, 89%, 16%, 1);
    --color-2-darker: hsla(194, 89%, 10%, 1);

    /* feedback colors
     * color-error(#ffd1d2), color-success(#c8e675), 
     * color-info(#d7ecfb), color-notice(#fff099)
     */
    --color-error: hsla(359, 100%, 91%, 1);
    --color-success: hsla(76, 69%, 68%, 1);
    --color-info: hsla(205, 82%, 91%, 1);
    --color-notice: hsla(51, 100%, 80%, 1);
    --color-error-content: hsla(359, 50%, 50%, 1);
    --color-success-content: hsla(76, 29%, 28%, 1);
    --color-info-content: hsla(205, 32%, 31%, 1);
    --color-notice-content: hsla(51, 30%, 30%, 1);

    /* shades 
     * generated using 
     * Tint & Shade Generator 
     * (https://maketintsandshades.com/)
     */
    --color-black: #000000;
    --color-gray-19: #161616;
    --color-gray-18: #2c2c2c;
    --color-gray-17: #424342;
    --color-gray-16: #585958;
    --color-gray-15: #6e6f6f;
    --color-gray-14: #838585;
    --color-gray-13: #999b9b;
    --color-gray-12: #afb2b1;
    --color-gray-11: #c5c8c7;
    --color-gray-10: #dbdedd;
    --color-gray-9: #dfe1e0;
    --color-gray-8: #e2e5e4;
    --color-gray-7: #e6e8e7;
    --color-gray-6: #e9ebeb;
    --color-gray-5: #edefee;
    --color-gray-4: #f1f2f1;
    --color-gray-3: #f4f5f5;
    --color-gray-2: #f8f8f8;
    --color-gray-1: #fbfcfc;
    --color-white: #ffffff;

    /* text
     */
    --color-text: var(--color-gray-19);
    --color-text-dark: var(--color-black);
    --color-text-light: var(--color-gray-13);
    --color-placeholder: var(--color-gray-13);

    /* buttons
     */
    --color-btn: var(--color-gray-9);
    --color-btn-text: var(--color-black);
    --color-btn-hover: var(--color-gray-11);
    --color-btn-hover-text: var(--color-black);
    --color-btn-primary: var(--color-1);
    --color-btn-primary-text: var(--color-black);
    --color-btn-primary-hover: var(--color-1-dark);
    --color-btn-primary-hover-text: var(--color-black);
    --color-btn-stroke: var(--color-black);
    --color-btn-stroke-text: var(--color-black);
    --color-btn-stroke-hover: var(--color-black);
    --color-btn-stroke-hover-text: var(--color-white);

    /* preloader
     */
    --color-preloader-bg: var(--color-gray-19);
    --color-loader: var(--color-1);
    --color-loader-light: rgba(255, 255, 255, 0.1);

    /* others
     */
    --color-body: white;
    --color-border: rgba(0, 0, 0, .08);
    --border-radius: 3px;
}

/* ------------------------------------------------------------------- 
 * ## spacing and typescale
 * ------------------------------------------------------------------- */
:root {

    /* spacing
     * base font size: 18px 
     * vertical space unit : 32px
     */
    --base-size: 62.5%;
    --multiplier: 1;
    --base-font-size: calc(1.8rem * var(--multiplier));
    --space: calc(3.2rem * var(--multiplier));

    /* vertical spacing 
     */
    --vspace-0_125: calc(0.125 * var(--space));
    --vspace-0_25: calc(0.25 * var(--space));
    --vspace-0_375: calc(0.375 * var(--space));
    --vspace-0_5: calc(0.5 * var(--space));
    --vspace-0_625: calc(0.625 * var(--space));
    --vspace-0_75: calc(0.75 * var(--space));
    --vspace-0_875: calc(0.875 * var(--space));
    --vspace-1: calc(var(--space));
    --vspace-1_25: calc(1.25 * var(--space));
    --vspace-1_5: calc(1.5 * var(--space));
    --vspace-1_75: calc(1.75 * var(--space));
    --vspace-2: calc(2 * var(--space));
    --vspace-2_5: calc(2.5 * var(--space));
    --vspace-3: calc(3 * var(--space));
    --vspace-3_5: calc(3.5 * var(--space));
    --vspace-4: calc(4 * var(--space));
    --vspace-4_5: calc(4.5 * var(--space));
    --vspace-5: calc(5 * var(--space));
    --vspace-5_5: calc(5.5 * var(--space));
    --vspace-6: calc(6 * var(--space));

    /* type scale
     * ratio 1         :2 | base: 18px
     * -------------------------------------------------------
     *
     * --text-display-3 = (77.40px)
     * --text-display-2 = (64.50px)
     * --text-display-1 = (53.75px)
     * --text-xxxl      = (44.79px)
     * --text-xxl       = (37.32px)
     * --text-xl        = (31.10px)
     * --text-lg        = (25.92px)
     * --text-md        = (21.60px)
     * --text-size      = (18.00px) BASE
     * --text-sm        = (15.00px)
     * --text-xs        = (12.50px)
     *
     * ---------------------------------------------------------
     */
    --text-scale-ratio: 1.2;
    --text-size: var(--base-font-size);
    --text-xs: calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
    --text-display-1: calc(var(--text-xxxl) * var(--text-scale-ratio));
    --text-display-2: calc(var(--text-display-1) * var(--text-scale-ratio));
    --text-display-3: calc(var(--text-display-2) * var(--text-scale-ratio));

    /* default button height
     */
    --vspace-btn: var(--vspace-2);
}

/* on mobile devices below 600px, change the value of '--multiplier' 
 * to adjust the values of base font size and vertical space unit.
 */
@media screen and (max-width: 600px) {
    :root {
        --multiplier: .875;
    }
}

/* ===================================================================
 * # PAGE WRAP
 *
 *
 * ------------------------------------------------------------------- */
.s-pagewrap {
    --header-height: 7.2rem;

    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    position: relative;
}


/* ===================================================================
 * # PORTFOLIO
 *
 *
 * ------------------------------------------------------------------- */
.s-portfolio {
    background: white;
    min-height: 800px;
    padding: 0;
    position: relative;
}

.s-portfolio__header {
    background-color: #111111;
    padding-top: var(--vspace-5);
    padding-bottom: calc(6.5 * var(--space));
}

/* ------------------------------------------------------------------- 
 * ## portfolio list
 * ------------------------------------------------------------------- */
.folio-list {
    margin-top: calc(var(--vspace-1) * -5.5);
}

.folio-list .brick {
    float: left;
    width: 50%;
    padding: 0;
    margin: 0;
}

.folio-item {
    overflow: hidden;
    position: relative;
}

.folio-item__caption {
    display: none;
}

/* thumbnail
 */
.folio-item__thumb a {
    display: block;
}

.folio-item__thumb a::before {
    z-index: 1;
    content: "";
    display: block;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transition: all, .5s;
}

.folio-item__thumb a::after {
    z-index: 1;
    content: "...";
    text-align: center;
    font-family: var(--font-2);
    font-weight: 300;
    font-size: 2.8rem;
    color: white;
    display: block;
    height: 3.2rem;
    width: 3.2rem;
    line-height: 3.2rem;
    margin-left: -1.6rem;
    margin-top: -3rem;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5);
    transition: all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    position: absolute;
    left: 50%;
    top: 50%;
}

.folio-item__thumb img {
    vertical-align: bottom;
    margin-bottom: 0;
    transition: all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* portfolio info
 */
.folio-item__info {
    z-index: 2;
    padding: 0 8rem 0 var(--vspace-1);
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    position: absolute;
    left: 0;
    top: var(--vspace-1_25);
}

.folio-item__title {
    font-size: var(--text-size);
    line-height: 1.25;
    margin: 0;
    color: white;
}

.folio-item__cat {
    font-family: var(--font-2);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: 0.2rem;
    color: rgba(255, 255, 255, 0.5);
}

.folio-item__project-link {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--vspace-1_25);
    width: var(--vspace-1_25);
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    position: absolute;
    top: var(--vspace-1_25);
    right: var(--vspace-1_25);
}

.folio-item__project-link svg {
    height: var(--vspace-0_625);
    width: var(--vspace-0_625);
}

.folio-item__project-link svg path {
    fill: white;
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.folio-item__project-link:focus,
.folio-item__project-link:hover {
    background-color: white;
    border: 1px solid white;
}

.folio-item__project-link:focus svg path,
.folio-item__project-link:hover svg path {
    fill: black;
}

/* on hover
 */
.folio-item:hover .folio-item__thumb img {
    transform: scale(1.05);
}

.folio-item:hover .folio-item__thumb a::before {
    opacity: 1;
    visibility: visible;
}

.folio-item:hover .folio-item__thumb a::after {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.folio-item:hover .folio-item__info {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.folio-item:hover .folio-item__project-link {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* ------------------------------------------------------------------- 
 * responsive:
 * works
 * ------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
    .folio-item__title {
        font-size: calc(var(--text-size) * 0.8889);
    }

    .folio-item__cat {
        font-size: calc(var(--text-size) * 0.7778);
    }
}

@media screen and (max-width: 700px) {
    .folio-list .brick {
        float: none;
        width: 100%;
    }

    .folio-item__title {
        font-size: var(--text-size);
    }

    .folio-item__cat {
        font-size: 1.2rem;
    }
}