/* =========================================
   MD MARUF AL HOSSAIN PORTFOLIO
   MAIN DESIGN SYSTEM
   STYLE.CSS PART 1/5
========================================= */



/* =========================
   ROOT VARIABLES
========================= */


:root {


    --primary-bg: #050505;

    --secondary-bg: #0b0b0b;


    --glass-bg:
        rgba(255,255,255,0.06);


    --glass-border:
        rgba(255,255,255,0.12);



    --text-primary:
        #ffffff;


    --text-secondary:
        rgba(255,255,255,0.65);



    --accent-blue:
        #00a8ff;


    --accent-purple:
        #8b5cf6;



    --gradient:
        linear-gradient(
            135deg,
            #00a8ff,
            #8b5cf6
        );



    --shadow-glow:

        0 0 40px
        rgba(0,168,255,0.25);



    --radius-lg:
        24px;


    --radius-md:
        16px;



    --transition:
        all .4s cubic-bezier(
            .16,
            1,
            .3,
            1
        );



}





/* =========================
   LIGHT THEME
========================= */


[data-theme="light"] {


    --primary-bg:
        #f7f7f7;


    --secondary-bg:
        #ffffff;


    --text-primary:
        #111111;


    --text-secondary:
        rgba(0,0,0,.65);



    --glass-bg:
        rgba(255,255,255,.7);



}









/* =========================
   RESET
========================= */


* {


    margin:0;

    padding:0;

    box-sizing:border-box;


}




html {


    scroll-behavior:smooth;


}




body {


    background:

        var(--primary-bg);


    color:

        var(--text-primary);



    font-family:

        "Inter",
        sans-serif;



    overflow-x:hidden;



    line-height:1.6;



}






img {


    max-width:100%;


    display:block;


}




a {


    text-decoration:none;


    color:inherit;


}




button {


    border:none;


    background:none;


    cursor:pointer;


    font-family:inherit;


}





ul {


    list-style:none;


}









/* =========================
   TYPOGRAPHY
========================= */


h1,
h2,
h3 {


    font-family:

        "Space Grotesk",
        sans-serif;


    line-height:1.1;


}




h1 {


    font-size:

        clamp(
            3rem,
            8vw,
            6rem
        );


    font-weight:800;


}



h2 {


    font-size:

        clamp(
            2rem,
            5vw,
            4rem
        );


}



h3 {


    font-size:

        1.4rem;


}








p {


    color:

        var(--text-secondary);


    font-size:

        1rem;


}









/* =========================
   GLOBAL SECTION
========================= */


.section {


    width:100%;


    padding:

        120px 8%;


    position:relative;



}





.section-heading {


    max-width:800px;


    margin-bottom:70px;


}




.section-heading span {


    color:

        var(--accent-blue);


    font-size:.9rem;


    text-transform:uppercase;


    letter-spacing:3px;


    font-weight:600;


}





.section-heading h2 {


    margin-top:20px;


}








/* =========================
   BACKGROUND EFFECTS
========================= */


.noise-overlay {


    position:fixed;


    inset:0;


    pointer-events:none;


    opacity:.05;


    z-index:-1;


    background-image:

    url(
      "data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"
    );


}





.gradient-background {


    position:fixed;


    width:800px;


    height:800px;


    border-radius:50%;


    background:

        radial-gradient(
            circle,
            rgba(0,168,255,.18),
            transparent 70%
        );


    top:-300px;


    right:-300px;


    filter:blur(80px);


    z-index:-2;


}








#particles,
#three-background {


    position:fixed;


    inset:0;


    width:100%;


    height:100%;


    pointer-events:none;


    z-index:-3;


}









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


.navbar {


    position:fixed;


    top:20px;


    left:50%;


    transform:

        translateX(-50%);



    width:

        min(
            90%,
            1200px
        );



    padding:

        18px 30px;



    display:flex;


    align-items:center;


    justify-content:space-between;




    background:

        var(--glass-bg);



    backdrop-filter:

        blur(20px);



    border:

        1px solid
        var(--glass-border);



    border-radius:

        100px;



    z-index:1000;



}








.logo {


    font-size:1.6rem;


    font-weight:800;


    font-family:

        "Space Grotesk";


}



.logo span {


    color:

        var(--accent-blue);


}








.nav-links {


    display:flex;


    gap:35px;


}



.nav-links a {


    color:

        var(--text-secondary);


    transition:

        var(--transition);


}



.nav-links a:hover {


    color:

        var(--text-primary);


}








.nav-actions {


    display:flex;


    align-items:center;


    gap:20px;


}







.theme-toggle {


    width:42px;


    height:42px;


    border-radius:50%;


    display:grid;


    place-items:center;


    background:

        var(--glass-bg);



    color:white;


    transition:

        var(--transition);


}



.theme-toggle:hover {


    transform:

        rotate(25deg)
        scale(1.1);


}









/* =========================
   BUTTONS
========================= */


.btn {


    display:inline-flex;


    align-items:center;


    justify-content:center;


    padding:

        15px 30px;



    border-radius:

        50px;



    font-weight:600;


    transition:

        var(--transition);


    position:relative;


    overflow:hidden;


}






.primary-btn {


    background:

        var(--gradient);



    color:white;



    box-shadow:

        var(--shadow-glow);


}




.primary-btn:hover {


    transform:

        translateY(-5px);


}







.secondary-btn {


    border:

        1px solid
        var(--glass-border);



    background:

        var(--glass-bg);



}



.secondary-btn:hover {


    background:

        rgba(255,255,255,.12);



    transform:

        translateY(-5px);


}
/* =========================
   HERO SECTION
========================= */


.hero {


    min-height:100vh;


    padding:

        160px 8% 80px;



    display:flex;


    align-items:center;


    justify-content:space-between;



    gap:60px;


    position:relative;



}





.hero-content {


    max-width:750px;


}





.hero-tag {


    display:inline-block;


    color:

        var(--accent-blue);



    font-size:1rem;


    letter-spacing:3px;


    text-transform:uppercase;



    margin-bottom:25px;



}




.hero h1 {


    margin-bottom:25px;


}





.hero h1 span {


    background:

        var(--gradient);



    -webkit-background-clip:

        text;



    background-clip:

        text;



    color:

        transparent;



}





.hero h2 {


    font-size:

        clamp(
            1.5rem,
            3vw,
            2.5rem
        );


    color:

        var(--text-secondary);



    margin-bottom:30px;


}





.typing-text {


    color:

        var(--accent-blue);



}





.hero-description {


    max-width:600px;


    font-size:1.15rem;


    margin-bottom:40px;



}





.hero-buttons {


    display:flex;


    flex-wrap:wrap;


    gap:20px;



}








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



.hero-image {


    position:relative;


    width:

        min(
            420px,
            40vw
        );



    aspect-ratio:1;



    display:flex;


    align-items:center;


    justify-content:center;



}





.hero-image img {


    width:85%;


    height:85%;


    object-fit:cover;


    border-radius:50%;



    border:

        2px solid
        rgba(255,255,255,.2);



    position:relative;


    z-index:2;



    animation:

        floatImage 6s ease-in-out infinite;



}




.image-glow {


    position:absolute;


    inset:10%;



    border-radius:50%;


    background:

        var(--gradient);



    filter:

        blur(80px);



    opacity:.5;



    animation:

        pulseGlow 5s infinite;


}





@keyframes floatImage {


    0%,
    100% {


        transform:

            translateY(0);


    }


    50% {


        transform:

            translateY(-20px);


    }


}





@keyframes pulseGlow {


    0%,
    100% {


        transform:scale(1);


        opacity:.4;


    }



    50% {


        transform:scale(1.2);


        opacity:.7;


    }


}








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



.about-container {


    display:grid;


    grid-template-columns:

        1fr 1fr;



    gap:60px;



    align-items:center;



}





.about-text {


    display:flex;


    flex-direction:column;


    gap:25px;



}





.stats-grid {


    display:grid;


    grid-template-columns:

        repeat(2,1fr);



    gap:25px;


}







.stat-card {


    padding:35px;



    border-radius:

        var(--radius-lg);



    background:

        var(--glass-bg);



    border:

        1px solid
        var(--glass-border);



    backdrop-filter:

        blur(20px);



    transition:

        var(--transition);



}





.stat-card:hover {


    transform:

        translateY(-10px);



    box-shadow:

        var(--shadow-glow);



}





.stat-card h3 {


    font-size:3rem;



    background:

        var(--gradient);



    -webkit-background-clip:

        text;



    background-clip:

        text;



    color:

        transparent;



}








/* =========================
   TIMELINE
========================= */



.timeline {


    max-width:900px;


    margin:auto;



    position:relative;



}





.timeline::before {


    content:"";


    position:absolute;


    left:20px;


    top:0;


    width:2px;


    height:100%;



    background:

        linear-gradient(
            to bottom,
            var(--accent-blue),
            var(--accent-purple)
        );



}





.timeline-item {


    position:relative;


    padding-left:70px;


    margin-bottom:60px;



}





.timeline-dot {


    position:absolute;


    left:8px;


    top:10px;


    width:25px;


    height:25px;


    border-radius:50%;



    background:

        var(--gradient);



    box-shadow:

        0 0 25px
        var(--accent-blue);



}





.timeline-content {


    padding:35px;



    background:

        var(--glass-bg);



    border:

        1px solid
        var(--glass-border);



    border-radius:

        var(--radius-lg);



    backdrop-filter:

        blur(20px);



    transition:

        var(--transition);



}





.timeline-content:hover {


    transform:

        translateX(10px);



}





.timeline-content span {


    color:

        var(--accent-blue);



    font-weight:700;



    letter-spacing:2px;


}





.timeline-content h3 {


    margin:

        15px 0;



}
/* =========================
   SKILLS SECTION
========================= */


.skills-container {


    display:grid;


    grid-template-columns:

        repeat(3,1fr);



    gap:30px;



}




.skill-category {


    padding:40px;



    background:

        var(--glass-bg);



    border:

        1px solid
        var(--glass-border);



    border-radius:

        var(--radius-lg);



    backdrop-filter:

        blur(20px);



    transition:

        var(--transition);



}




.skill-category:hover {


    transform:

        translateY(-10px);



    box-shadow:

        var(--shadow-glow);



}





.skill-category h3 {


    margin-bottom:30px;


    color:

        var(--text-primary);



}






.skill-list {


    display:flex;


    flex-wrap:wrap;


    gap:15px;



}




.skill {


    padding:

        10px 18px;



    border-radius:

        50px;



    background:

        rgba(
            255,
            255,
            255,
            .08
        );



    border:

        1px solid
        var(--glass-border);



    color:

        var(--text-secondary);



    transition:

        var(--transition);



}





.skill:hover {


    color:white;


    background:

        var(--gradient);



    transform:

        translateY(-5px);



}









/* =========================
   TECH STACK SECTION
========================= */



.tech-grid {


    display:grid;


    grid-template-columns:

        repeat(
            4,
            1fr
        );



    gap:30px;



}




.tech-item {


    min-height:160px;


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;



    gap:20px;



    border-radius:

        var(--radius-lg);



    background:

        var(--glass-bg);



    border:

        1px solid
        var(--glass-border);



    backdrop-filter:

        blur(20px);



    transition:

        var(--transition);



}




.tech-item i {


    font-size:3rem;


    color:

        var(--accent-blue);



}





.tech-item span {


    font-weight:600;


    color:

        var(--text-secondary);



}





.tech-item:hover {


    transform:

        translateY(-12px)
        rotateY(8deg);



    box-shadow:

        var(--shadow-glow);



}





.tech-item:hover i {


    transform:

        scale(1.2);



}









/* =========================
   PROJECT SECTION
========================= */



.projects-grid {


    display:grid;


    grid-template-columns:

        repeat(
            3,
            1fr
        );



    gap:35px;



}





.project-card {


    overflow:hidden;



    border-radius:

        var(--radius-lg);



    background:

        var(--glass-bg);



    border:

        1px solid
        var(--glass-border);



    backdrop-filter:

        blur(20px);



    transition:

        var(--transition);



}





.project-card:hover {


    transform:

        translateY(-15px);



    box-shadow:

        var(--shadow-glow);



}








.project-image {


    height:260px;


    overflow:hidden;



}





.project-image img {


    width:100%;


    height:100%;


    object-fit:cover;



    transition:

        0.6s ease;



}





.project-card:hover 
.project-image img {


    transform:

        scale(1.1);



}








.project-content {


    padding:30px;



}





.project-content h3 {


    margin-bottom:15px;



}





.project-content p {


    margin-bottom:25px;



}





.project-links {


    display:flex;


    gap:20px;



}





.project-links a {


    padding:

        10px 20px;



    border-radius:

        50px;



    background:

        rgba(
            255,
            255,
            255,
            .08
        );



    transition:

        var(--transition);



}





.project-links a:hover {


    background:

        var(--gradient);



    transform:

        translateY(-3px);



}
/* =========================
   SERVICES SECTION
========================= */


.service-grid {


    display:grid;


    grid-template-columns:

        repeat(
            3,
            1fr
        );



    gap:30px;



}





.service-card {


    padding:40px;



    border-radius:

        var(--radius-lg);



    background:

        var(--glass-bg);



    border:

        1px solid
        var(--glass-border);



    backdrop-filter:

        blur(20px);



    transition:

        var(--transition);



    text-align:center;



}





.service-card:hover {


    transform:

        translateY(-12px);



    box-shadow:

        var(--shadow-glow);



}





.service-card i {


    font-size:3rem;


    margin-bottom:25px;


    color:

        var(--accent-blue);



}





.service-card h3 {


    margin-bottom:15px;



}








/* =========================
   ACHIEVEMENTS
========================= */



.achievement-box {


    display:grid;


    grid-template-columns:

        repeat(
            3,
            1fr
        );



    gap:30px;



}





.achievement-box div {


    padding:

        50px 30px;



    text-align:center;



    border-radius:

        var(--radius-lg);



    background:

        var(--glass-bg);



    border:

        1px solid
        var(--glass-border);



    backdrop-filter:

        blur(20px);



    transition:

        var(--transition);



}





.achievement-box div:hover {


    transform:

        scale(1.05);



}





.achievement-box h3 {


    font-size:3.5rem;


    background:

        var(--gradient);



    -webkit-background-clip:

        text;



    background-clip:

        text;



    color:

        transparent;



}








/* =========================
   TESTIMONIALS
========================= */



.testimonial-card {


    max-width:800px;


    margin:auto;



    padding:50px;



    border-radius:

        var(--radius-lg);



    background:

        var(--glass-bg);



    border:

        1px solid
        var(--glass-border);



    backdrop-filter:

        blur(20px);



    text-align:center;



    transition:

        var(--transition);



}





.testimonial-card:hover {


    transform:

        translateY(-10px);



    box-shadow:

        var(--shadow-glow);



}





.testimonial-card p {


    font-size:1.3rem;


    margin-bottom:30px;



}





.testimonial-card h3 {


    color:

        var(--accent-blue);



}








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



.contact-form {


    max-width:800px;


    margin:auto;



    display:flex;


    flex-direction:column;



    gap:25px;



}





.contact-form input,
.contact-form textarea {


    width:100%;


    padding:

        18px 25px;



    border-radius:

        20px;



    border:

        1px solid
        var(--glass-border);



    background:

        var(--glass-bg);



    backdrop-filter:

        blur(20px);



    color:

        var(--text-primary);



    font-size:1rem;



    outline:none;



    transition:

        var(--transition);



}





.contact-form textarea {


    min-height:180px;


    resize:vertical;



}





.contact-form input:focus,
.contact-form textarea:focus {


    border-color:

        var(--accent-blue);



    box-shadow:

        0 0 25px
        rgba(
            0,
            168,
            255,
            .25
        );



}





.contact-form button {


    width:max-content;


    align-self:center;



}








/* =========================
   FOOTER
========================= */



.footer {


    padding:

        70px 8%;



    text-align:center;



    background:

        var(--secondary-bg);



    border-top:

        1px solid
        var(--glass-border);



}





.footer h2 {


    margin-bottom:15px;



}





.footer p {


    margin:15px 0;



}





.social-links {


    display:flex;


    justify-content:center;


    gap:20px;



    margin:30px 0;



}





.social-links a {


    width:50px;


    height:50px;



    display:grid;


    place-items:center;



    border-radius:50%;



    background:

        var(--glass-bg);



    border:

        1px solid
        var(--glass-border);



    font-size:1.3rem;



    transition:

        var(--transition);



}





.social-links a:hover {


    background:

        var(--gradient);



    transform:

        translateY(-8px);



}
/* =========================
   CUSTOM CURSOR
========================= */


.cursor {


    width:18px;


    height:18px;


    position:fixed;


    top:0;


    left:0;


    border-radius:50%;



    background:

        var(--accent-blue);



    pointer-events:none;



    z-index:9999;



    mix-blend-mode:

        difference;



    transform:

        translate(-50%, -50%);



    transition:

        width .3s ease,
        height .3s ease;



}





.cursor-follower {


    width:45px;


    height:45px;


    position:fixed;


    top:0;


    left:0;



    border-radius:50%;



    border:

        1px solid
        rgba(
            255,
            255,
            255,
            .5
        );



    pointer-events:none;



    z-index:9998;



    transform:

        translate(-50%, -50%);



}





.cursor.active {


    width:50px;


    height:50px;



}








/* =========================
   SCROLL PROGRESS
========================= */


.scroll-progress {


    position:fixed;


    top:0;


    left:0;



    height:4px;


    width:0%;



    background:

        var(--gradient);



    z-index:99999;



}








/* =========================
   REVEAL ANIMATION STATES
========================= */


.reveal {


    opacity:0;


    transform:

        translateY(50px);



    transition:

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



}





.reveal.active {


    opacity:1;


    transform:

        translateY(0);



}








/* =========================
   GLASS UTILITIES
========================= */


.glass {


    background:

        var(--glass-bg);



    border:

        1px solid
        var(--glass-border);



    backdrop-filter:

        blur(25px);



    -webkit-backdrop-filter:

        blur(25px);



}








.glow-border {


    position:relative;



}





.glow-border::before {


    content:"";


    position:absolute;


    inset:-1px;



    border-radius:inherit;



    background:

        var(--gradient);



    z-index:-1;



    opacity:0;



    transition:

        var(--transition);



}





.glow-border:hover::before {


    opacity:1;



}








/* =========================
   FLOATING EFFECTS
========================= */


.float {


    animation:

        floating 5s ease-in-out infinite;



}





@keyframes floating {


    0% {


        transform:

            translateY(0);



    }



    50% {


        transform:

            translateY(-20px);



    }



    100% {


        transform:

            translateY(0);



    }


}








/* =========================
   BUTTON RIPPLE EFFECT
========================= */


.btn::after {


    content:"";


    position:absolute;



    width:0;


    height:0;



    background:

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



    border-radius:50%;



    transform:

        translate(-50%, -50);



    transition:

        width .5s ease,
        height .5s ease;



}





.btn:active::after {


    width:300px;


    height:300px;



}








/* =========================
   IMAGE INTERACTION
========================= */


.project-card img,
.hero-image img {


    cursor:pointer;



}








/* =========================
   SMOOTH SELECTION
========================= */


::selection {


    background:

        var(--accent-blue);



    color:white;



}








/* =========================
   SCROLLBAR
========================= */


::-webkit-scrollbar {


    width:10px;



}





::-webkit-scrollbar-track {


    background:

        var(--primary-bg);



}





::-webkit-scrollbar-thumb {


    background:

        linear-gradient(
            var(--accent-blue),
            var(--accent-purple)
        );



    border-radius:20px;



}








/* =========================
   BACK TO TOP BUTTON
========================= */


.back-to-top {


    position:fixed;


    bottom:30px;


    right:30px;



    width:50px;


    height:50px;



    display:grid;


    place-items:center;



    border-radius:50%;



    background:

        var(--gradient);



    color:white;



    opacity:0;


    visibility:hidden;



    transition:

        var(--transition);



}





.back-to-top.show {


    opacity:1;


    visibility:visible;



}








/* =========================
   PERFORMANCE OPTIMIZATION
========================= */


.hero-image,
.project-card,
.service-card,
.tech-item,
.skill-category {


    will-change:

        transform;



}








/* =========================
   REDUCED MOTION SUPPORT
========================= */


@media(prefers-reduced-motion:reduce){


    *,
    *::before,
    *::after {


        animation-duration:

            .01ms!important;



        animation-iteration-count:

            1!important;



        scroll-behavior:auto!important;



        transition-duration:

            .01ms!important;



    }


}
/* =========================
   PERSONAL ABOUT SECTION
========================= */


.personal-about-container{

    display:grid;

    grid-template-columns:

    1.2fr .8fr;

    gap:50px;

    align-items:center;

}



.personal-about-text p{

    color:var(--text-secondary);

    font-size:1.1rem;

    line-height:1.9;

    margin-bottom:20px;

}



.personal-about-text strong{

    color:white;

}




.personal-info-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}



.info-card{

    padding:25px;

    border-radius:20px;

    background:

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

    border:

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

    backdrop-filter:blur(15px);

    transition:.4s ease;

}



.info-card:hover{

    transform:translateY(-8px);

    border-color:#00a8ff;

}



.info-card span{

    display:block;

    color:#00a8ff;

    font-size:.9rem;

    margin-bottom:10px;

}



.info-card h3{

    font-size:1.1rem;

}
/* =========================
   CREATIVE SKILLS CARDS
========================= */


.skills-showcase{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;

}




.creative-skill-card{

    padding:35px;

    border-radius:25px;


    background:

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


    border:

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


    backdrop-filter:blur(20px);


    transition:.4s ease;


    position:relative;

    overflow:hidden;

}





.creative-skill-card:hover{


    transform:

    translateY(-12px);



    border-color:

    #00a8ff;


}





.skill-icon{


    width:70px;

    height:70px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:20px;


    background:

    linear-gradient(
        135deg,
        #00a8ff,
        #8b5cf6
    );


    margin-bottom:25px;


}





.skill-icon i{

    font-size:32px;

    color:white;

}




.creative-skill-card h3{

    font-size:1.3rem;

    margin-bottom:15px;

}





.creative-skill-card p{


    color:

    var(--text-secondary);


    line-height:1.8;

    font-size:.95rem;


}
/* =========================
   CONTACT SOCIAL SECTION
========================= */


.section-subtitle{

    max-width:650px;

    margin:20px auto;

    color:var(--text-secondary);

    line-height:1.8;

}





.availability{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin:30px auto 50px;

    width:max-content;

    padding:12px 25px;

    border-radius:50px;


    background:

    rgba(0,255,120,.08);


    border:

    1px solid rgba(0,255,120,.25);


    color:white;

}




.availability span{


    width:10px;

    height:10px;

    border-radius:50%;


    background:#00ff78;


    box-shadow:

    0 0 15px #00ff78;


}







.social-contact-grid{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}







.social-contact-card{


    padding:35px 25px;


    border-radius:30px;


    background:

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


    border:

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


    backdrop-filter:blur(20px);


    text-align:center;


    transition:.4s ease;


    position:relative;


    overflow:hidden;


}





.social-contact-card:hover{


    transform:

    translateY(-12px);


    border-color:

    rgba(0,168,255,.8);


    box-shadow:

    0 20px 50px rgba(0,168,255,.15);


}







.social-icon{


    width:80px;


    height:80px;


    margin:auto;


    margin-bottom:25px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:25px;


    font-size:35px;


    color:white;


}





.social-icon.facebook{


    background:

    linear-gradient(
    135deg,
    #1877f2,
    #0d47a1
    );

}





.social-icon.instagram{


    background:

    linear-gradient(
    135deg,
    #f58529,
    #dd2a7b,
    #8134af
    );

}





.social-icon.email{


    background:

    linear-gradient(
    135deg,
    #ea4335,
    #c5221f
    );

}





.social-icon.whatsapp{


    background:

    linear-gradient(
    135deg,
    #25d366,
    #128c7e
    );

}







.social-contact-card h3{


    font-size:1.4rem;


    margin-bottom:15px;


}







.social-contact-card p{


    color:

    var(--text-secondary);


    line-height:1.7;


    font-size:.95rem;


    min-height:90px;


}







.social-contact-card a{


    display:inline-block;


    margin-top:20px;


    color:#00a8ff;


    font-weight:600;


    transition:.3s;


}





.social-contact-card a:hover{


    letter-spacing:1px;


}
img{

    max-width:100%;

    height:auto;

    display:block;

}
*{

    box-sizing:border-box;

}



p,h1,h2,h3{

    overflow-wrap:break-word;

}
@media(max-width:480px){


.hero-image img{

    width:280px;

    height:280px;

}



.hero h1{

    font-size:2.7rem;

}



.section-heading h2{

    font-size:2rem;

}


}
@media(max-width:768px){

    *{

        animation-duration:
        .3s !important;

    }


    .cursor,
    .cursor-follower{

        display:none;

    }

}
.mobile-mode .three-background{

    display:none;

}