@charset "UTF-8";
/*
Theme Name: UXDevine
Author: Pradnyanandana Suwitra
Author URI: https://pradevia.xyz
Theme URI: -
Version: 0.0.1
Stable tag: 0.0.1
Requires at least: 6.4.3
Tested up to: 6.4.3
Requires PHP: 8.1
*/

@import url("https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

/* === Animation === */

@keyframes slideReveal {
    0% {
        width: 0;
    }
    10% {
        width: 100%;
    }
    40% {
        width: 100%;
    }
    50% {
        width: 0;
    }
    100% {
        width: 0;
    }
}

:root {
    /* ==== Dark Theme ==== */
    --color-dark-bg: #121212;
    --color-dark-text: #ffffff;
    --color-dark-subtext-bg: #ebebeb;

    /* ==== Light Theme ==== */
    --color-light-bg: #f2f8fc;
    --color-light-text: #1e1e1e;
    --color-light-subtext: #767676;

    /* ==== Common Elements ==== */
    --color-primary: #dafc00;
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-error: #f44336;

    /* ==== Semantic Usage ==== */
    --color-background: var(--color-dark-bg);
    --color-text: var(--color-dark-text);
    --color-subtext-bg: var(--color-dark-subtext-bg);

    --color-alt-background: var(--color-light-bg);
    --color-alt-text: var(--color-light-text);
    --color-alt-subtext: var(--color-light-subtext);

    /* Font Families */
    --font-body: "DM Sans", sans-serif;
    --font-title: "Agdasima", sans-serif;

    /* Colors */
    --color-title: #ffffff;
    --color-text: #ffffff;
    --color-background: #121212;
    --color-subtext: #ebebeb;
}

/* === Reset === */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    font-family: var(--font-body);
    line-height: 1.5;
    background-color: var(--color-background);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title);
    color: var(--color-title);
    font-weight: 700;
}

body {
    font-size: 16px;
    line-height: 25px;
    font-weight: 400;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset {
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    gap: 4.5px;
    padding: 15px;
    line-height: 16px;
    border-radius: 100px;
    border: 1px solid var(--color-text);
}

.button.with-svg {
    padding-top: 10px;
    padding-bottom: 10px;
}

.button svg {
    width: 25px;
    height: 25px;
}

.button:hover {
    color: var(--color-light-text);
    border-color: var(--color-primary);
    background: var(--color-primary);
}

/**
* Header
*/
header {
    position: sticky;
    top: 0;
    background: #1e1e1e4d;
    backdrop-filter: blur(20px);
    z-index: 1;
}

header .container,
header .site-info,
header .site-navigation .menu,
header .site-action,
header .social-links {
    display: flex;
    align-items: center;
}

header .container {
    justify-content: space-between;
    padding: 25px 0;
}

header .container,
header .site-info,
header .site-action {
    gap: 20px;
}

header .social-links {
    gap: 10px;
}

header .site-navigation {
    margin-left: 38px;
}

header .site-navigation .menu {
    gap: 40px;
}

header .header-text,
header .site-navigation a {
    line-height: 16px;
}

header .header-text .emoji {
    vertical-align: text-top;
}

header .site-logo img {
    width: 63px;
}

header .social-links svg {
    width: 41px;
    height: 41px;
    border-radius: 50%;
}

header .social-links a:hover svg {
    color: var(--color-light-text);
    background: var(--color-primary);
}

/**
* Footer
*/
footer .container {
    text-align: center;
    padding: 132px 0 176.76px 0;
}

footer .footer-text {
    font-weight: 400;
    font-size: 61px;
    line-height: 61px;
    margin-bottom: 60px;
}

footer .social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

footer .social-links .button {
    gap: 0;
    font-weight: 700;
    width: calc(100% / 4 - 15px);
    border-radius: 10px;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #404040;
    background: linear-gradient(128.76deg, rgba(255, 255, 255, 0.15) -30.52%, rgba(255, 255, 255, 0) 90.88%);
}

footer .social-links .button svg {
    width: 45.25px;
    height: 45.25px;
}

footer .social-links .button:hover {
    color: var(--color-text);
}

/**
* Hero
*/
#hero {
    position: relative;
    margin-top: -97.41px;
    padding-top: 301px;
    padding-bottom: 144px;
    background: url(/wp-content/uploads/2025/07/hero-bg.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#hero .site-title {
    display: flex;
    align-items: center;
    padding: 21px 31px;
    font-weight: 700;
    font-size: 140px;
    line-height: 150px;
    text-transform: uppercase;
    text-align: center;
    width: fit-content;
    margin: 0 auto;
    white-space: nowrap;
}

#hero .site-title .slide-text-wrapper {
    display: flex;
    overflow: hidden;
    vertical-align: bottom;
    position: relative;
    justify-content: flex-end;
}

#hero .site-title .slide-text {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 21.2px;
    color: var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    transition:
        transform 1s ease,
        opacity 0.5s ease;
}

#hero .site-title .slide-text-stay {
    padding-left: 21.2px;
}

#hero .site-title .divider {
    width: 43.87px;
    height: 43.87px;
    flex: 0 0 43.87px;
    transform: rotate(31.4deg);
}

#hero .container {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 60px;
}

#hero .container svg {
    width: 15px;
    color: var(--color-primary);
    margin-bottom: 10px;
}

#hero .container .text-left {
    display: flex;
    gap: 20px;
}

#hero .container .text-left > div:first-child .hero-text {
    width: 80%;
}

#hero .container .text-left > div {
    width: 305px;
}

#hero .container > .hero-text:last-child {
    width: 522px;
    font-size: 19px;
    line-height: 35px;
}

/**
* Scroll Info
*/
.scroll-info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
}

.scroll-info img {
    width: 25px;
    margin-bottom: 5px;
}

.scroll-info p {
    font-size: 14px;
    line-height: 14px;
}

/**
* Service Slider
*/
#service-slider {
    padding-top: 100px;
    padding-bottom: 100px;
    margin-top: -100px;
    margin-bottom: -100px;
    overflow: hidden;
}

#service-slider .slider-showcase {
    overflow: hidden;
    position: relative;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 61px;
    line-height: 61px;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 20px 10px;
    background: var(--color-background);
    width: 105%;
    left: -2.5%;
}

#service-slider .slider-track {
    display: flex;
    gap: 18.2px;
    white-space: nowrap;
    will-change: transform;
}

#service-slider .slider-showcase svg {
    width: 26px;
}

#service-slider .slider-showcase.slider-1 {
    transform: rotate(-3.81deg);
}

#service-slider .slider-showcase.slider-2 {
    margin-top: -101px;
    transform: rotate(3.81deg);
}

#service-slider .slider-showcase.slider-1 .slide-item,
#service-slider .slider-showcase.slider-1 .slide-icon {
    opacity: 0.2;
}

#service-slider .slider-showcase .slide-item,
#service-slider .slider-showcase .slide-icon {
    flex: 0 0 auto;
}

/** 
* Portfolio
*/
#portfolio .portfolio-item {
    transition: background-color 0.3s ease;
    border-bottom: 1px solid #404040;
}

#portfolio .portfolio-item:hover {
    background-color: var(--hover-color);
}

#portfolio .portfolio-content {
    position: relative;
    display: flex;
    gap: 30px;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
}

#portfolio .portfolio-content .left-content {
    display: flex;
    gap: 30px;
    align-items: center;
}

#portfolio .portfolio-content svg {
    width: 44px;
    color: var(--color-primary);
}

#portfolio .portfolio-item:hover .portfolio-content svg {
    color: var(--color-dark-text);
}

#portfolio .portfolio-title {
    font-size: 41px;
    line-height: 41px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

#portfolio .categories {
    line-height: 16px;
    color: var(--color-subtext);
}

#portfolio .category {
    display: inline-block;
}

#portfolio .category:not(:last-child) {
    margin-right: 5px;
}

#portfolio .portfolio-thumbnail {
    position: absolute;
    left: 427px;
    top: 50%;
    opacity: 0;
    transform: translateY(-25%);
    transition: all 0.4s ease;
}

#portfolio .portfolio-item:hover .portfolio-thumbnail {
    opacity: 1;
    transform: translateY(-50%);
}

#portfolio .button {
    padding: 10px;
}

.home #portfolio {
    margin-top: 76.93px;
}

@media (min-width: 601px) {
    .admin-bar header {
        top: 32px;
    }
}

@media (max-width: 1440px) {
    body {
        font-size: calc(16 / 1440 * 100vw);
        line-height: calc(25 / 1440 * 100vw);
    }

    .button {
        gap: calc(4.5 / 1440 * 100vw);
        padding: calc(15 / 1440 * 100vw);
        line-height: calc(16 / 1440 * 100vw);
        border-radius: calc(100 / 1440 * 100vw);
        border-width: calc(1 / 1440 * 100vw);
    }

    .button.with-svg {
        padding-top: calc(10 / 1440 * 100vw);
        padding-bottom: calc(10 / 1440 * 100vw);
    }

    .button svg {
        width: calc(25 / 1440 * 100vw);
        height: calc(25 / 1440 * 100vw);
    }

    .container {
        max-width: calc(1280 / 1440 * 100vw);
        margin: 0 auto;
    }

    /**
    * Header
    */
    header .container {
        padding: calc(25 / 1440 * 100vw) 0;
    }

    header .container,
    header .site-info,
    header .site-action {
        gap: calc(20 / 1440 * 100vw);
    }

    header .social-links {
        gap: calc(10 / 1440 * 100vw);
    }

    header .site-navigation {
        margin-left: calc(38 / 1440 * 100vw);
    }

    header .site-navigation .menu {
        gap: calc(40 / 1440 * 100vw);
    }

    header .header-text,
    header .site-navigation a {
        line-height: calc(16 / 1440 * 100vw);
    }

    header .site-logo img {
        width: calc(63 / 1440 * 100vw);
    }

    header .social-links svg {
        width: calc(41 / 1440 * 100vw);
        height: calc(41 / 1440 * 100vw);
    }

    /**
    * Footer
    */
    footer .container {
        padding: calc(132 / 1440 * 100vw) 0 calc(176.76 / 1440 * 100vw) 0;
    }

    footer .footer-text {
        font-size: calc(61 / 1440 * 100vw);
        line-height: calc(61 / 1440 * 100vw);
        margin-bottom: calc(60 / 1440 * 100vw);
    }

    footer .social-links {
        gap: calc(20 / 1440 * 100vw);
    }

    footer .social-links .button {
        width: calc(100% / calc(4 / 1440 * 100vw) - calc(15 / 1440 * 100vw));
        border-radius: calc(10 / 1440 * 100vw);
        border-width: 0px calc(1 / 1440 * 100vw) calc(1 / 1440 * 100vw) 0px;
    }

    footer .social-links .button svg {
        width: calc(45.25 / 1440 * 100vw);
        height: calc(45.25 / 1440 * 100vw);
    }

    /**
    * Hero
    */
    #hero {
        padding-top: calc(301 / 1440 * 100vw);
        padding-bottom: calc(144 / 1440 * 100vw);
        margin-top: calc(-97.41 / 1440 * 100vw);
    }

    #hero .site-title {
        padding: calc(21 / 1440 * 100vw) calc(31 / 1440 * 100vw);
        font-size: calc(140 / 1440 * 100vw);
        line-height: calc(150 / 1440 * 100vw);
    }

    #hero .site-title .slide-text {
        gap: calc(21.1 / 1440 * 100vw);
    }

    #hero .site-title .slide-text-stay {
        padding-left: calc(21.1 / 1440 * 100vw);
    }

    #hero .site-title .divider {
        width: calc(43.87 / 1440 * 100vw);
        height: calc(43.87 / 1440 * 100vw);
        flex: 0 0 calc(43.87 / 1440 * 100vw);
    }

    #hero .container {
        gap: calc(20 / 1440 * 100vw);
        margin-top: calc(60 / 1440 * 100vw);
    }

    #hero .container svg {
        width: calc(15 / 1440 * 100vw);
        margin-bottom: calc(10 / 1440 * 100vw);
    }

    #hero .container .text-left {
        gap: calc(20 / 1440 * 100vw);
    }

    #hero .container .text-left > div {
        width: calc(305 / 1440 * 100vw);
    }

    #hero .container > .hero-text:last-child {
        width: calc(522 / 1440 * 100vw);
        font-size: calc(19 / 1440 * 100vw);
        line-height: calc(35 / 1440 * 100vw);
    }

    /**
    * Scroll Info
    */
    .scroll-info {
        bottom: calc(35 / 1440 * 100vw);
    }

    .scroll-info img {
        width: calc(25 / 1440 * 100vw);
        margin-bottom: calc(5 / 1440 * 100vw);
    }

    .scroll-info p {
        font-size: calc(14 / 1440 * 100vw);
        line-height: calc(14 / 1440 * 100vw);
    }

    /**
    * Service Slider
    */
    #service-slider {
        padding-top: calc(100 / 1440 * 100vw);
        padding-bottom: calc(100 / 1440 * 100vw);
        margin-top: calc(-100 / 1440 * 100vw);
        margin-bottom: calc(-100 / 1440 * 100vw);
        overflow: hidden;
    }

    #service-slider .slider-showcase {
        font-size: calc(61 / 1440 * 100vw);
        line-height: calc(61 / 1440 * 100vw);
        padding: calc(20 / 1440 * 100vw) calc(10 / 1440 * 100vw);
    }

    #service-slider .slider-track {
        gap: calc(18.2 / 1440 * 100vw);
    }

    #service-slider .slider-showcase svg {
        width: calc(26 / 1440 * 100vw);
    }

    #service-slider .slider-showcase.slider-2 {
        margin-top: calc(-101 / 1440 * 100vw);
    }

    /** 
    * Portfolio
    */
    #portfolio .portfolio-content {
        gap: calc(30 / 1440 * 100vw);
        padding: calc(25 / 1440 * 100vw) 0;
    }

    #portfolio .portfolio-content .left-content {
        gap: calc(30 / 1440 * 100vw);
    }

    #portfolio .portfolio-content svg {
        width: calc(44 / 1440 * 100vw);
    }

    #portfolio .portfolio-title {
        font-size: calc(41 / 1440 * 100vw);
        line-height: calc(41 / 1440 * 100vw);
        margin-bottom: calc(15 / 1440 * 100vw);
    }

    #portfolio .categories {
        line-height: calc(16 / 1440 * 100vw);
    }

    #portfolio .category:not(:last-child) {
        margin-right: calc(5 / 1440 * 100vw);
    }

    #portfolio .portfolio-thumbnail {
        left: calc(427 / 1440 * 100vw);
    }

    #portfolio .portfolio-thumbnail img {
        transform: scale(var(--scale-factor));
        transform-origin: left;
    }

    #portfolio .button {
        padding: calc(10 / 1440 * 100vw);
    }

    .home #portfolio {
        margin-top: calc(76.93 / 1440 * 100vw);
    }
}