:root {

    --apta-bg: #070b14;

    --apta-bg-light: #0d1422;

    --apta-text: #f5f7fb;

    --apta-muted: #9ca8ba;

    --apta-primary: #6c63ff;

    --apta-secondary: #00d4ff;

}


html {

    scroll-behavior: smooth;

    scroll-padding-top: 80px;

}


body {

    background: var(--apta-bg);

    color: var(--apta-text);

    overflow-x: hidden;

}


/* ==========================
   PAGE LOADER
========================== */

#page-loader {

    position: fixed;

    inset: 0;

    background: var(--apta-bg);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 9999;

    transition:
        opacity .5s ease,
        visibility .5s ease;

}


#page-loader.hide {

    opacity: 0;

    visibility: hidden;

}


/* ==========================
   FLOATING NAVBAR
========================== */

#mainNavbar {

    z-index: 1000;

    padding: 1.25rem 0;

    transition:
        background .4s ease,
        backdrop-filter .4s ease,
        box-shadow .4s ease,
        padding .4s ease;

}


#mainNavbar.scrolled {

    position: fixed !important;

    background: rgba(7, 11, 20, .78);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 10px 40px rgba(0, 0, 0, .18);

    padding: .7rem 0;

    border-bottom:
        1px solid rgba(255,255,255,.06);

}


.navbar-brand img {

    max-height: 42px;

    width: auto;

}


.nav-link {

    color:
        rgba(255,255,255,.72) !important;

    font-size: .92rem;

    font-weight: 500;

    transition:
        color .25s ease,
        transform .25s ease;

}


.nav-link:hover,
.nav-link.active {

    color: #fff !important;

    transform: translateY(-1px);

}


#mainNavbar .btn {

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


#mainNavbar .btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 30px rgba(255,255,255,.12);

}


/* ==========================
   HERO
========================== */

.hero-section {

    min-height: 100vh;

    background:

        radial-gradient(
            circle at 75% 30%,
            rgba(108,99,255,.16),
            transparent 30%
        ),

        radial-gradient(
            circle at 20% 80%,
            rgba(0,212,255,.10),
            transparent 30%
        ),

        var(--apta-bg);

}


.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .18;

    background-image:

        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    transform:
        perspective(700px)
        rotateX(60deg)
        scale(1.5);

    transform-origin:
        center bottom;

}


.hero-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;

}


.hero-orb-one {

    width: 300px;

    height: 300px;

    background:
        rgba(108,99,255,.15);

    top: 15%;

    right: 10%;

}


.hero-orb-two {

    width: 250px;

    height: 250px;

    background:
        rgba(0,212,255,.10);

    bottom: 10%;

    left: 5%;

}


/* ==========================
   HERO BADGE
========================== */

.hero-badge {

    border:
        1px solid rgba(255,255,255,.12);

    background:
        rgba(255,255,255,.04);

    backdrop-filter: blur(10px);

    border-radius: 50rem;

    padding: .55rem 1rem;

    color: #cbd5e1;

    font-size: .85rem;

}


.pulse-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #35e68b;

    box-shadow:
        0 0 12px rgba(53,230,139,.8);

}


/* ==========================
   HERO GRADIENT TEXT
========================== */

.hero-gradient-text {

    background:
        linear-gradient(
            90deg,
            var(--apta-primary),
            var(--apta-secondary)
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


/* ==========================
   TECHNOLOGY TAGS
========================== */

.hero-tech-list span {

    padding: .4rem .75rem;

    border:
        1px solid rgba(255,255,255,.1);

    border-radius: 50rem;

    background:
        rgba(255,255,255,.03);

    color: #aeb8c7;

    font-size: .8rem;

}


/* ==========================
   HERO VISUAL
========================== */

.hero-visual {

    position: relative;

    min-height: 430px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.tech-ring {

    position: absolute;

    border:
        1px solid rgba(108,99,255,.18);

    border-radius: 50%;

    animation:
        rotateRing 18s linear infinite;

}


.ring-one {

    width: 280px;

    height: 280px;

}


.ring-two {

    width: 360px;

    height: 360px;

    animation-duration: 25s;

    animation-direction: reverse;

}


.ring-three {

    width: 440px;

    height: 440px;

    animation-duration: 35s;

}


@keyframes rotateRing {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }

}


/* ==========================
   CODE WINDOW
========================== */

.hero-code-card {

    position: relative;

    z-index: 2;

    width:
        min(100%, 360px);

    background:
        rgba(13,20,34,.88);

    border:
        1px solid rgba(255,255,255,.1);

    border-radius: 1.25rem;

    overflow: hidden;

    backdrop-filter: blur(15px);

}


.code-card-header {

    display: flex;

    gap: 6px;

    padding: .8rem 1rem;

    border-bottom:
        1px solid rgba(255,255,255,.08);

}


.code-card-header span {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.3);

}


.code-content {

    padding: 1.5rem;

    font-family: monospace;

    font-size: .82rem;

    line-height: 2;

    color: #aeb8c7;

}


.code-purple {
    color: #c084fc;
}


.code-blue {
    color: #60a5fa;
}


.code-green {
    color: #34d399;
}


.code-white {
    color: #f8fafc;
}


/* ==========================
   FLOATING TECH LABELS
========================== */

.floating-tech {

    position: absolute;

    z-index: 3;

    padding: .65rem .9rem;

    border-radius: .8rem;

    background:
        rgba(13,20,34,.85);

    border:
        1px solid rgba(255,255,255,.1);

    backdrop-filter: blur(10px);

    font-size: .8rem;

    box-shadow:
        0 10px 30px rgba(0,0,0,.2);

}


.tech-php {

    top: 12%;

    left: 5%;

    animation:
        floatOne 5s ease-in-out infinite;

}


.tech-python {

    right: 2%;

    top: 35%;

    animation:
        floatTwo 6s ease-in-out infinite;

}


.tech-cloud {

    bottom: 12%;

    left: 12%;

    animation:
        floatOne 7s ease-in-out infinite;

}


@keyframes floatOne {

    50% {
        transform: translateY(-12px);
    }

}


@keyframes floatTwo {

    50% {
        transform: translateY(12px);
    }

}


/* ==========================
   SCROLL REVEAL
========================== */

[data-reveal] {

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


[data-reveal].show {

    opacity: 1;

    transform: translateY(0);

}


/* ==========================
   SCROLL INDICATOR
========================== */

.scroll-indicator {

    color:
        rgba(255,255,255,.5);

    text-decoration: none;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: .4rem;

}


.scroll-indicator span {

    width: 1px;

    height: 35px;

    background:
        rgba(255,255,255,.3);

}


/* ==========================
   MOBILE
========================== */

@media (max-width: 991.98px) {

    #mainNavbar {

        background:
            rgba(7,11,20,.35);

        backdrop-filter:
            blur(10px);

    }


    #mainNavbar .navbar-collapse {

        margin-top: .8rem;

        padding: 1rem;

        background:
            rgba(7,11,20,.92);

        backdrop-filter:
            blur(18px);

        border:
            1px solid rgba(255,255,255,.08);

        border-radius: 1rem;

    }


    .hero-section {

        padding-top: 80px;

    }


    .hero-visual {

        min-height: 380px;

    }


    .ring-three {

        display: none;

    }

}


@media (max-width: 575.98px) {

    .hero-visual {

        min-height: 320px;

    }


    .ring-one {

        width: 220px;

        height: 220px;

    }


    .ring-two {

        width: 280px;

        height: 280px;

    }


    .floating-tech {

        font-size: .7rem;

        padding: .5rem .7rem;

    }

}
/* ==========================
   SECTION EYEBROW
========================== */

.section-eyebrow {

    color: var(--apta-secondary);

    font-size: .75rem;

    font-weight: 600;

    letter-spacing: .14em;

}


/* ==========================
   ABOUT
========================== */

#about {

    background:
        linear-gradient(
            180deg,
            var(--apta-bg),
            var(--apta-bg-light)
        );

}


.about-point {

    display: inline-flex;

    align-items: center;

    gap: .45rem;

    color: #cbd5e1;

    font-size: .85rem;

}


.about-point i {

    color: var(--apta-secondary);

}


/* ==========================
   ABOUT VISUAL
========================== */

.about-visual {

    position: relative;

    min-height: 480px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.about-main-card {

    position: relative;

    z-index: 2;

    width: min(100%, 500px);

    padding: 2rem;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid rgba(255,255,255,.09);

    border-radius: 1.5rem;

    backdrop-filter: blur(18px);

    box-shadow:
        0 25px 70px rgba(0,0,0,.25);

}


.about-icon {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(108,99,255,.2),
            rgba(0,212,255,.12)
        );

    color: var(--apta-secondary);

    font-size: 1.2rem;

}


.stack-item {

    display: flex;

    align-items: center;

    gap: .75rem;

    padding: .9rem;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: .9rem;

    background:
        rgba(255,255,255,.025);

    color: #dbe4ef;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;

}


.stack-item i {

    font-size: 1.2rem;

    color: var(--apta-secondary);

}


.stack-item:hover {

    transform: translateY(-3px);

    border-color:
        rgba(0,212,255,.25);

    background:
        rgba(255,255,255,.05);

}


/* ==========================
   FLOATING ABOUT CARD
========================== */

.about-floating-card {

    position: absolute;

    z-index: 3;

    right: 0;

    bottom: 5%;

    display: flex;

    align-items: center;

    gap: .8rem;

    padding: 1rem 1.2rem;

    background:
        rgba(13,20,34,.9);

    border:
        1px solid rgba(255,255,255,.1);

    border-radius: 1rem;

    backdrop-filter: blur(15px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);

}


.about-floating-icon {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background:
        rgba(108,99,255,.12);

    color: #a78bfa;

}


/* ==========================
   ABOUT MOBILE
========================== */

@media (max-width: 767.98px) {

    .about-visual {

        min-height: 420px;

    }


    .about-floating-card {

        right: 5%;

        bottom: 2%;

    }


    .about-main-card {

        padding: 1.4rem;

    }

}
/* ==========================
   TECHNOLOGIES
========================== */

#technologies {

    background:
        var(--apta-bg-light);

}


.technology-card {

    position: relative;

    padding: 1.75rem;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 1.25rem;

    overflow: hidden;

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}


.technology-card::before {

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    top: -70px;

    right: -70px;

    border-radius: 50%;

    background:
        rgba(108,99,255,.10);

    filter: blur(25px);

    transition:
        transform .4s ease;

}


.technology-card:hover {

    transform: translateY(-7px);

    border-color:
        rgba(108,99,255,.25);

    background:
        rgba(255,255,255,.045);

    box-shadow:
        0 20px 50px rgba(0,0,0,.18);

}


.technology-card:hover::before {

    transform:
        scale(1.5);

}


.technology-icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1.25rem;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(108,99,255,.14),
            rgba(0,212,255,.08)
        );

    border:
        1px solid rgba(255,255,255,.07);

    color:
        var(--apta-secondary);

    font-size: 1.35rem;

}


.technology-card h5 {

    position: relative;

}


.technology-number {

    position: absolute;

    top: 1.5rem;

    right: 1.5rem;

    font-size: .7rem;

    color:
        rgba(255,255,255,.18);

    font-family: monospace;

}


/* ==========================
   TECHNOLOGY FLOW
========================== */

.technology-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    padding: 1.5rem 1.75rem;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 1.25rem;

    background:
        rgba(255,255,255,.02);

}


.technology-flow {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: .8rem;

    color: #cbd5e1;

    font-size: .85rem;

}


.technology-flow i {

    color:
        var(--apta-secondary);

}


/* ==========================
   MOBILE
========================== */

@media (max-width: 767.98px) {

    .technology-bottom {

        flex-direction: column;

        align-items: flex-start;

    }


    .technology-flow {

        justify-content: flex-start;

    }

}
/* =========================================================
   SOLUTIONS
========================================================= */

.solution-card,
.solution-cta {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    transition: transform .3s ease, border-color .3s ease;
}

.solution-card:hover,
.solution-cta:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,.18);
}

.solution-cta {
    background:
        linear-gradient(
            135deg,
            rgba(120,80,255,.12),
            rgba(0,190,255,.06)
        );
}
/* =========================================================
   HOSTING & SERVERS
========================================================= */

.hosting-main-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 15px 45px rgba(0,0,0,.06);
}

.hosting-icon,
.hosting-small-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #f5f5f5;
    border: 1px solid rgba(0,0,0,.07);
}

.hosting-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    font-size: 1.4rem;
}

.hosting-small-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
}

.hosting-stat {
    background: #f8f8f8;
    border: 1px solid rgba(0,0,0,.06);
}

.hosting-service {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    transition: transform .3s ease, box-shadow .3s ease;
}

.hosting-service:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(0,0,0,.07);
}

.hosting-flow {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
}
/* =========================================================
   CLOUD
========================================================= */

.cloud-section {
    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(110,80,255,.08),
            transparent 30%
        );
}

.cloud-architecture {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
}

.cloud-visual {
    min-height: 300px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.cloud-core {
    width: 130px;
    height: 130px;

    border-radius: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        0 0 60px rgba(120,80,255,.12);
}

.cloud-core i {
    font-size: 2.3rem;
}

.cloud-core span {
    font-size: .6rem;
    letter-spacing: .15em;
    margin-top: 6px;
    color: rgba(255,255,255,.5);
}

.cloud-node {
    position: absolute;

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);

    color: rgba(255,255,255,.7);
}

.cloud-node-1 {
    top: 10%;
    left: 18%;
}

.cloud-node-2 {
    top: 18%;
    right: 15%;
}

.cloud-node-3 {
    bottom: 12%;
    left: 20%;
}

.cloud-node-4 {
    bottom: 17%;
    right: 18%;
}

.cloud-feature {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
}

.cloud-small-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
}

.cloud-capability {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);

    transition:
        transform .3s ease,
        border-color .3s ease;
}

.cloud-capability:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,.15);
}
/* =========================================================
   WORDPRESS
========================================================= */

.wordpress-main-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 15px 45px rgba(0,0,0,.05);
}

.wordpress-icon {
    width: 60px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: #f5f5f5;
    border: 1px solid rgba(0,0,0,.07);

    font-size: 1.7rem;
}

.wordpress-stat {
    padding: 15px;

    border-left: 1px solid rgba(0,0,0,.08);
}

.wordpress-feature {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.wordpress-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.wordpress-small-icon {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #f5f5f5;
    border: 1px solid rgba(0,0,0,.06);
}

.wordpress-solutions {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
}

.wordpress-pill {
    display: inline-block;

    padding: 8px 14px;

    border-radius: 100px;

    font-size: .72rem;
    font-weight: 600;

    background: #f5f5f5;
    border: 1px solid rgba(0,0,0,.06);
}
/* =========================================================
   AI SECTION
========================================================= */

.ai-section {
    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(120,80,255,.09),
            transparent 32%
        );
}

.ai-main-panel {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
}

.ai-visual {
    min-height: 280px;
    position: relative;
}

.ai-core {
    width: 120px;
    height: 120px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025)
        );

    border: 1px solid rgba(255,255,255,.13);

    box-shadow:
        0 0 70px rgba(120,80,255,.15);

    position: relative;
    z-index: 2;
}

.ai-core i {
    font-size: 2rem;
}

.ai-core span {
    margin-top: 5px;

    font-size: .65rem;
    font-weight: 700;

    letter-spacing: .2em;

    color: rgba(255,255,255,.5);
}

.ai-orbit {
    position: absolute;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 50%;
}

.ai-orbit-one {
    width: 210px;
    height: 110px;

    transform: rotate(25deg);
}

.ai-orbit-two {
    width: 260px;
    height: 145px;

    transform: rotate(-30deg);
}

.ai-feature {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
}

.ai-capability {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);

    transition:
        transform .3s ease,
        border-color .3s ease;
}

.ai-capability:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,.15);
}

.ai-small-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba;
        /* =========================================================
   PROJECTS
========================================================= */

.project-featured {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 15px 45px rgba(0,0,0,.05);
}

.project-visual {
    min-height: 400px;
    padding: 40px;

    background:
        linear-gradient(
            135deg,
            #f3f3f3,
            #e9e9e9
        );
}

.project-browser {
    width: 85%;
    max-width: 560px;

    overflow: hidden;

    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 25px 60px rgba(0,0,0,.12);
}

.project-browser-bar {
    height: 30px;

    background: #f4f4f4;
}

.project-browser-bar span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #cfcfcf;
}

.project-browser-content {
    padding: 25px;
}

.project-ui-line {
    height: 8px;

    margin-bottom: 10px;

    border-radius: 10px;

    background: #e9e9e9;
}

.project-ui-box {
    height: 90px;

    border-radius: 8px;

    background: #f2f2f2;
}

.project-tag {
    padding: 6px 11px;

    border-radius: 100px;

    font-size: .65rem;
    font-weight: 600;

    background: #f5f5f5;
    border: 1px solid rgba(0,0,0,.06);
}

.project-card {
    background: #fff;

    border: 1px solid rgba(0,0,0,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.project-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.07);
}

.project-card-visual {
    min-height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #f3f3f3,
            #e9e9e9
        );

    font-size: 2.3rem;

    color: #555;
     background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
}

/* =========================================================
   CONTACT
========================================================= */

.contact-section {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(120,80,255,.08),
            transparent 30%
        );
}

.contact-mixed-card {
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 25px 70px rgba(0,0,0,.2);
}

.contact-dark-side {
    background: #111;
    color: #fff;
}

.contact-light-side {
    background: #f5f5f3;
    color: #111;
}

.contact-icon {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
}

.contact-link {
    color: rgba(255,255,255,.8);
    text-decoration: none;
}

.contact-link:hover {
    color: #fff;
}

.contact-social {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: rgba(255,255,255,.7);

    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);

    text-decoration: none;

    transition: transform .3s ease;
}

.contact-social:hover {
    transform: translateY(-3px);
}

.contact-light-side .contact-input {
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    color: #111;
}

.contact-light-side .contact-input:focus {
    background: #fff;
    border-color: rgba(0,0,0,.35);
    color: #111;
    box-shadow: 0 0 0 .2rem rgba(0,0,0,.04);
}

.contact-light-side .contact-input::placeholder {
    color: #999;
}

.contact-light-side .contact-input option {
    color: #111;
}}