/* =============================================
   WEBFONT
   ============================================= */
@font-face {
    font-family: 'SeverStudio_webfont';
    src: url('webfont/SeverStudio_webfont.eot?86etev');
    src: url('webfont/SeverStudio_webfont.eot?86etev#iefix') format('embedded-opentype'),
        url('webfont/SeverStudio_webfont.ttf?86etev') format('truetype'),
        url('webfont/SeverStudio_webfont.woff?86etev') format('woff'),
        url('webfont/SeverStudio_webfont.svg?86etev#SeverStudio_webfont') format('svg');
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================
   BASE / RESET OVERRIDES
   ============================================= */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 1em;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: #fff;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    position: relative;
}

main {
    overflow-x: hidden;
    max-width: 100vw;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

/* =============================================
   ICON FONT
   ============================================= */
[class^="icon-"],
[class*=" icon-"] {
    font-family: 'SeverStudio_webfont' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

.icon-gg:before { content: "\e90a"; }
.icon-ae:before { content: "\e907"; }
.icon-ai:before { content: "\e908"; }
.icon-an:before { content: "\e909"; }
.icon-id:before { content: "\e911"; }
.icon-ps:before { content: "\e912"; }
.icon-up:before { content: "\e913"; }
.icon-xd:before { content: "\e914"; }
.icon-arrow:before { content: "\e900"; }
.icon-behance:before { content: "\e901"; }
.icon-facebook:before { content: "\e902"; }
.icon-mail:before { content: "\e903"; }
.icon-menu_burger:before { content: "\e904"; }
.icon-messenger:before { content: "\e905"; }
.icon-send:before { content: "\e906"; }

/* =============================================
   TYPOGRAPHY
   ============================================= */
h1 {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size: 5em;
    font-weight: 800;
    background: linear-gradient(to right, #2cb0d1, #2488cb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 0.1em 0;
    line-height: 1.2;
}

h2 {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size: 2.5em;
    font-weight: 800;
    background: linear-gradient(to right, #2cb0d1, #2488cb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

h3 {
    color: #363636;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1em;
    padding: 0.7em 0 0 0;
}

h4 {
    color: #363636;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    line-height: 1.4em;
    font-size: 0.9em;
}

/* =============================================
   HEADER / NAVIGATION
   ============================================= */
.header_top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #363636;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7em 2em;
}

.header_top > a {
    flex-shrink: 0;
}

.header_top > a img {
    width: 12em;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.6em;
    cursor: pointer;
    padding: 0.3em;
    flex-shrink: 0;
}

nav {
    display: flex;
    align-items: center;
}

nav ul {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 0.2em;
}

nav ul li a {
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9em;
    padding: 0.8em 1em;
    display: block;
    transition: opacity 0.3s;
}

nav ul li a:hover {
    opacity: 0.7;
}

/* =============================================
   HERO SECTION
   ============================================= */
section.hero {
    position: relative;
    background-color: #363636;
    padding-top: 5em;
    padding-bottom: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.header-text {
    text-align: center;
    padding: 1em;
    z-index: 10;
    position: relative;
}

.see_portfolio {
    display: flex;
    justify-content: center;
    z-index: 10;
    margin-top: 2em;
    position: relative;
}

.parallax {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.wave-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wave {
    position: absolute;
    left: -50%;
    width: 400%;
    height: 200px;
}

.wave-1 {
    animation: wave-drift 8s ease-in-out infinite alternate;
    top: calc(50% - 60px);
}

.wave-2 {
    animation: wave-drift 10s ease-in-out infinite alternate-reverse;
    top: calc(50% - 10px);
}

.wave-3 {
    animation: wave-drift 12s ease-in-out infinite alternate;
    top: calc(50% + 40px);
}

@keyframes wave-drift {
    0% { transform: translateX(0%) translateY(0px); }
    50% { transform: translateX(-10%) translateY(-10px); }
    100% { transform: translateX(-20%) translateY(0px); }
}

/* =============================================
   BUTTONS
   ============================================= */
.button-white {
    width: 280px;
    height: 65px;
    background-color: white;
    border-radius: 40px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1em;
    line-height: 65px;
    cursor: pointer;
    transition: all 0.4s;
}

.button-white .text-button {
    display: inline-block;
}

.button-white .text-button i {
    display: inline-block;
    font-size: 35px;
    transform: translate(0%, 25%);
    transition: transform 0.4s;
}

.button-white:hover {
    background-color: transparent;
    border: 2px solid white;
    color: white;
}

.button-white:hover .text-button i {
    color: white;
    transform: translate(15%, 25%);
}

.button-white:hover .text-button {
    color: white;
}

.button-white-shadow {
    width: 280px;
    height: 65px;
    background-color: white;
    border-radius: 40px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1em;
    line-height: 65px;
    cursor: pointer;
    box-shadow: 0 0 3em rgba(0, 0, 0, 0.2);
    transition: all 0.4s;
}

.button-white-shadow .text-button-shadow {
    display: inline-block;
    transition: color 0.4s;
}

.button-white-shadow .text-button-shadow i {
    display: inline-block;
    font-size: 35px;
    transform: translate(0%, 25%);
    transition: all 0.4s;
}

.button-white-shadow:hover {
    background-color: #363636;
    box-shadow: none;
    animation: button-glow 6s;
}

.button-white-shadow:hover .text-button-shadow {
    color: #fff;
}

.button-white-shadow:hover .text-button-shadow i {
    color: #fff;
    transform: translate(15%, 25%);
}

@keyframes button-glow {
    0% { background-color: #363636; }
    25% { background-color: #44A4D4; }
    75% { background-color: #40BBD8; }
    100% { background-color: #363636; }
}

/* =============================================
   OFFER SECTION
   ============================================= */
.offer_wrapper {
    margin-top: 4em;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5em;
    margin-bottom: 6em;
    padding: 0 1em;
    position: relative;
    z-index: 10;
}

.website,
.vector,
.other {
    width: 22em;
    max-width: 100%;
    border-radius: 2em;
    box-shadow: 0 0 4em rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.4s;
    overflow: hidden;
    background: white;
}

.website:hover,
.vector:hover,
.other:hover {
    box-shadow: 0 0 4em rgba(0, 0, 0, 0.35);
}

.offer_top {
    height: 14em;
    background: linear-gradient(to right, #2cb0d1, #2488cb);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.animation {
    transition: transform 0.4s;
}

.animation img {
    max-width: 80%;
    margin: 0 auto;
}

.website:hover .animation,
.vector:hover .animation,
.other:hover .animation {
    transform: scale(1.1);
}

.offer_bottom {
    padding: 1.2em 1.8em 1.5em;
    transition: padding 0.4s ease;
}

.website:hover .offer_bottom,
.vector:hover .offer_bottom,
.other:hover .offer_bottom {
    padding-left: 2.5em;
}

.txt100 { opacity: 1; transition: opacity 0.3s, transform 0.3s; }
.txt80 { opacity: 0.8; transition: opacity 0.3s, transform 0.3s; }
.txt60 { opacity: 0.6; transition: opacity 0.3s, transform 0.3s; }
.txt40 { opacity: 0.4; transition: opacity 0.3s, transform 0.3s; }
.txt20 { opacity: 0.2; transition: opacity 0.3s, transform 0.3s; }

.website:hover .txt100,
.website:hover .txt80,
.website:hover .txt60,
.website:hover .txt40,
.website:hover .txt20,
.vector:hover .txt100,
.vector:hover .txt80,
.vector:hover .txt60,
.vector:hover .txt40,
.vector:hover .txt20,
.other:hover .txt100,
.other:hover .txt80,
.other:hover .txt60,
.other:hover .txt40,
.other:hover .txt20 {
    opacity: 1;
    transform: translateX(4px);
}

/* =============================================
   CONTACT-ME CTA
   ============================================= */
.contact-me {
    text-align: center;
    margin: 4em 0 8em;
}

.bigonetxt {
    margin-bottom: 2em;
}

/* =============================================
   SECTION HEADERS
   ============================================= */
.info-header {
    margin: 0 0 2em;
    padding-left: 5%;
}

.info-header-top {
    display: flex;
    align-items: center;
    margin-bottom: 0.3em;
}

.info-header-txt {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.8em;
}

.info-header-line {
    margin-left: 0.6em;
    height: 1px;
    width: 8em;
    background: #363636;
}

.info-header-bottom-txt {
    font-family: 'Montserrat', sans-serif;
    font-weight: 100;
    font-size: 2.5em;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* =============================================
   ABOUT ME
   ============================================= */
.about-me {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 3em;
    margin: 5em auto;
    max-width: 70em;
    padding: 0 1.5em;
}

.about-me-left {
    flex-shrink: 0;
    width: 22em;
}

.about-me-left img {
    width: 100%;
    border-radius: 2em;
}

.about-me-right {
    max-width: 36em;
}

.about-me .about-me-right h2 {
    text-align: left;
    margin-bottom: 1em;
}

.about-me .about-me-right h2 i {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    background: linear-gradient(to right, #2d2d2d, #2d2d2d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-me .about-me-right p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    line-height: 1.8em;
    text-align: left;
}

.about-me .about-me-right p i {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

/* =============================================
   PORTFOLIO
   ============================================= */
.portfolio-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5em;
    padding: 2em 1em;
}

.portfolio-item {
    width: 20em;
    max-width: 100%;
}

.portfolio-item img {
    width: 100%;
    border-radius: 1.5em;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: box-shadow 0.4s;
}

.portfolio-item:hover img {
    box-shadow: 0 0 3em rgba(0, 0, 0, 0.2);
}

.portfolio-item .portfolio-header {
    padding: 0.8em 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.portfolio-header-txt h3 {
    padding: 0;
}

.portfolio-arrow i {
    font-size: 2em;
    transition: all 0.4s;
}

.portfolio-item:hover .portfolio-arrow i {
    background: linear-gradient(to right, #2cb0d1, #2488cb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateX(4px);
}

.item-description {
    padding: 0.3em 0 0;
}

.portfolio-gallery a {
    text-decoration: none;
    color: inherit;
}

.more {
    text-align: center;
    margin: 2em 0 8em;
}

/* =============================================
   SKILLS
   ============================================= */
.flex-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5em;
    padding: 4em 1.5em;
}

.single-chart {
    width: 12%;
    min-width: 120px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
}

.circular-chart {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 200px;
}

.circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 1;
}

.circle {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 0 100;
    transition: stroke-dasharray 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.single-chart.animated .circle {
    /* actual values set via HTML stroke-dasharray attribute */
}

@keyframes progress {
    0% { stroke-dasharray: 0 100; }
}

.single-chart text {
    text-anchor: middle;
    font-size: 0.25em;
    fill: #666;
}

.circular-chart.ps .circle { stroke: #31C5F0; }
.circular-chart.ai .circle { stroke: #FF7F18; }
.circular-chart.xd .circle { stroke: #FF2BC2; }
.circular-chart.ae .circle { stroke: #D8A1FF; }
.circular-chart.id .circle { stroke: #FF408C; }
.circular-chart.gg .circle { stroke: #F4B500; }
.circular-chart.an .circle { stroke: #FF401F; }
.circular-chart.dev .circle { stroke: #3c9ee5; }

.text-wrapper {
    margin-top: 0.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
}

.text-wrapper i {
    font-size: 2em;
    color: #363636;
}

.text-wrapper .icon-ps { color: #31C5F0; }
.text-wrapper .icon-ai { color: #FF7F18; }
.text-wrapper .icon-xd { color: #FF2BC2; }
.text-wrapper .icon-ae { color: #D8A1FF; }
.text-wrapper .icon-id { color: #FF408C; }
.text-wrapper .icon-gg { color: #F4B500; }
.text-wrapper .icon-an { color: #FF401F; }
.text-wrapper .icon-up { color: #3c9ee5; }

/* =============================================
   CONTACT
   ============================================= */
.contact {
    display: flex;
    justify-content: flex-start;
    padding: 0 1.5em 4em;
    padding-left: 5%;
}

.contact-info {
    max-width: 40em;
}

.contact-header {
    margin-bottom: 2em;
}

.contact-header h2 {
    text-align: left;
    margin-bottom: 0.8em;
}

.contact-header h2 i {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    background: linear-gradient(to right, #2d2d2d, #2d2d2d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-header p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    line-height: 1.8em;
    text-align: left;
}

.contact-box {
    display: flex;
    gap: 2em;
    flex-wrap: wrap;
}

.msgr-box,
.mail-box {
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    transition: opacity 0.3s;
}

.msgr-box:hover,
.mail-box:hover {
    opacity: 0.7;
}

.block-header h3 {
    padding: 0;
}

.block-header h3 i {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.block-header .portfolio-arrow i {
    font-size: 1.5em;
    display: block;
    margin-top: 0.2em;
}

.icon-msgr i,
.icons-mail i {
    font-size: 2.5em;
    background: linear-gradient(to right, #2cb0d1, #2488cb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-box a {
    text-decoration: none;
    color: inherit;
}

/* =============================================
   FOOTER
   ============================================= */
.social-bar {
    display: flex;
    justify-content: center;
    gap: 1em;
    padding: 2em 0;
}

.footer-sm {
    width: 5em;
    height: 5em;
    border-radius: 50%;
    box-shadow: 0 0 2em rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.4s;
}

.footer-sm:hover {
    box-shadow: 0 0 3em rgba(0, 0, 0, 0.35);
}

.footer-sm i {
    font-size: 1.8em;
    color: #363636;
}

.social-bar a {
    text-decoration: none;
}

.copyright {
    text-align: center;
    padding: 2em 1em 3em;
}

.copyright p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 0.85em;
    line-height: 1.6;
    letter-spacing: 0.15em;
    color: #363636;
    transition: letter-spacing 0.4s;
}

.copyright p i {
    background: linear-gradient(to right, #2cb0d1, #2488cb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
}

.copyright:hover p {
    letter-spacing: 0.2em;
}


/* =============================================
   RESPONSIVE
   ============================================= */

/* --- Tablet landscape (max 1100px) --- */
@media screen and (max-width: 1100px) {
    .about-me {
        padding: 0 2em;
    }

    .about-me-left {
        width: 18em;
    }

    .flex-wrapper {
        padding: 3em 4%;
    }

    .single-chart {
        width: 18%;
    }

    .contact {
        padding-left: 6%;
    }

    .info-header {
        padding-left: 6%;
    }
}

/* --- Tablet portrait (max 900px) --- */
@media screen and (max-width: 900px) {

    .nav-toggle {
        display: block;
    }

    nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #363636;
        padding: 1em 0;
    }

    nav.active {
        display: block;
    }

    nav ul {
        flex-direction: column;
        gap: 0;
    }

    nav ul li a {
        padding: 1em 2em;
        text-align: center;
    }

    h1 {
        font-size: 3.5em;
    }

    .about-me {
        flex-direction: column;
        align-items: center;
    }

    .about-me-left {
        width: 80%;
        max-width: 20em;
    }

    .about-me-right {
        text-align: center;
    }

    .about-me .about-me-right h2 {
        text-align: center;
    }

    .about-me .about-me-right p {
        text-align: center;
    }

    .single-chart {
        width: 25%;
    }

    .info-header {
        padding-left: 5%;
    }

    .contact {
        padding-left: 5%;
    }

    .portfolio-item {
        width: 18em;
    }
}

/* --- Mobile (max 680px) --- */
@media screen and (max-width: 680px) {

    .header_top {
        padding: 0.25em 1em;
    }

    .header_top > a img {
        width: 7em;
    }

    h1 {
        font-size: 2.2em;
    }

    h2 {
        font-size: 1.6em;
    }

    .info-header-bottom-txt {
        font-size: 1.8em;
    }

    section.hero {
        min-height: 50vh;
        padding-top: 4em;
    }

    .button-white,
    .button-white-shadow {
        width: 230px;
        height: 55px;
        line-height: 55px;
        font-size: 0.9em;
    }

    .button-white .text-button i,
    .button-white-shadow .text-button-shadow i {
        font-size: 28px;
    }

    .offer_wrapper {
        margin-top: 2em;
        gap: 1.5em;
    }

    .website,
    .vector,
    .other {
        width: 90%;
        max-width: 20em;
    }

    .offer_top {
        height: 12em;
    }

    .about-me {
        padding: 0 1.5em;
        margin: 3em auto;
    }

    .portfolio-gallery {
        gap: 1.5em;
        padding: 1em 5%;
    }

    .portfolio-item {
        width: 100%;
        max-width: 20em;
    }

    .single-chart {
        width: 40%;
        min-width: 100px;
    }

    .flex-wrapper {
        padding: 2em 5%;
        gap: 1em;
    }

    .info-header {
        padding-left: 1.5em;
    }

    .contact {
        padding-left: 1.5em;
        padding-right: 1.5em;
    }

    .contact-box {
        flex-direction: column;
        gap: 1.5em;
    }

    .more {
        margin-bottom: 5em;
    }

    .contact-me {
        margin: 3em 1em 5em;
    }

    .footer-sm {
        width: 4em;
        height: 4em;
    }

    .footer-sm i {
        font-size: 1.4em;
    }
}

/* --- Small mobile (max 420px) --- */
@media screen and (max-width: 420px) {

    .header_top > a img {
        width: 7em;
    }

    h1 {
        font-size: 1.8em;
    }

    .button-white,
    .button-white-shadow {
        width: 200px;
        height: 50px;
        line-height: 50px;
        font-size: 0.85em;
    }

    .single-chart {
        width: 42%;
    }

    .copyright p {
        font-size: 0.75em;
        letter-spacing: 0.1em;
    }
}