* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    color: #ededed;
    background: #081b29;
    
}

/* header section styling (header vitra navbar ni parxa
aba kina .header vayo tw vanda hamle class=header vanera use gareyxam teivara
aba header ko satoo class=goru rakheyko vaye .goru hunthyo styling garda*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 10%;
    background: #051129;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;


}

.logo {
    position: relative;
    font-size: 25px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    cursor: default;
    opacity: 0;
    animation: slideRight 1s ease forwards;
}

.navbar a {
    display: inline-block;
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    margin-left: 35px;
    transition: 0.3s;
    opacity: 0;
    animation: slideTop .5s ease forwards;
    /* slide top vanya 
    bottom dekhi top ma slide hudai aauni yedi slideright vanyo vaney left to right slide huni 
    forwards ले animation सकिएपछि element लाई animation को अन्तिम अवस्था मै राखिराख्छ। 
    ease भनेको animation को speed कसरी change हुने भनेर define गर्ने हो।*/
    animation-delay: calc(0.2s * var(--i));
}

.navbar a:hover {
    color: #0ef
}
.navbar a {
    position: relative;
}

.navbar a.current::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #0ef;
    border-radius: 2px;
}

/* home section styling */
.home {
    position: relative;
    width: 100%;
    justify-content: space-between;
    height: 100vh;
    background: url(images/homepage4.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 70px 10% 0;

}

.home-content {
    max-width: 500px;
}

.home-content h3 {
    font-size: 32px;
    font-weight: 700;
    opacity: 0;
    animation: slideBottom 1s ease forwards;
    animation-delay: 0.7s;
    /*animation सुरु हुनुअघि 0.7 second को delay राखिएको छ। */
}

.home-content h3:nth-of-type(2) {
    margin-bottom: 30px;
    animation: slideTop 1s ease forwards;
    animation-delay: 0.7s;
}

.home-content h3 span {
    color: #0ef;
}

.home-content h1 {
    font-size: 56px;
    font-weight: 700;
    margin: -3px 0;
    opacity: 0;
    animation: slideRight 1s ease forwards;
    animation-delay: 1s;
}

.home-content p {
    font-size: 18px;
    opacity: 0;
    animation: slideLeft 1s ease forwards;
    animation-delay: 1s;
}

/* social icons styling */
.home-socialIcons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid #0ef;
    border-radius: 50%;
    font-size: 20px;
    color: #0ef;
    text-decoration: none;
    margin: 30px 15px 30px 0;
    transition: 0.5s ease;
    opacity: 0;
    animation: slideLeft 1s ease forwards;
    animation-delay: calc(0.2s * var(--i));
    /* calc() function ले CSS मा mathematical expressions लाई calculate गर्न प्रयोग हुन्छ। */
}

.home-socialIcons a:hover {
    background: #0ef;
    color: #081b29;
    box-shadow: 0 0 20px #0ef;

}

.btn-box {
    display: inline-block;
    padding: 12px 18px;
    background: #0ef;
    border-radius: 48px;
    font-size: 16px;
    text-decoration: none;
    color: #081b29;
    letter-spacing: 1px;
    font-weight: 600;
    opacity: 0;
    animation: slideTop 1s ease forwards;
    animation-delay: 2s;
    box-shadow: 0 0 5px #0ef,
        0 0 25px #0ef;
}

.btn-box:hover {
    box-shadow: 0 0 5px cyan,
        0 0 25px cyan, 0 0 50px cyan,
        0 0 100px cyan, 0 0 200px cyan;
}



/* about section styling */
.about {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 1.5rem;
}

.about-img img {
    padding-bottom: 20%;
    max-width: 630px;
    height: auto;
    width: 100%;
    border-radius: 8px;

}

/* media query last ma xa hai jasko kam every screeen ma kam chalos vanni ho not only laptop */

.about-text h2 {
    font-size: 60px;
}

.about-text h2 span {
    color: #0ef;
}

.about-text h4 {
    font-size: 29px;
    font-weight: 600;
    color: #fff;
    line-height: 1.7;
    margin: 15px 0 30px;
}

.about-text p {
    font-size: 20px;
    color: aliceblue;
    line-height: 1.4;
    margin-bottom: 4rem;

}

/* About section sakkiyo*/
/* My services styling suru */

#services {
    color: aliceblue;
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 4;

}

.container {
    padding: 90px;
}


.sub-title {
    text-align: center;
    font-size: 60px;
    padding-bottom: 70px;
}

.sub-title span {
    color: #0ef;

}

.services-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(259px, 1fr));
    grid-gap: 40px;
    margin-top: 50px;
}

.services-list div {
    background: transparent;
    padding: 40px;
    font-size: 13px;
    font-weight: 13px;
    border-right: 10px;
    border-radius: 20px;
    transition: background 0.5s, transform 0.5s;
    box-shadow: 1px 1px 20px #012290f7,
        1px 1px 40px #0053b8f7;
}

.services-list div i {
    font-size: 50px;
    margin-bottom: 30px;
}

.services-list div h2 {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 15px;
}

.services-list div p {
    font-size: 16px;
}

.services-list div a {
    text-decoration: none;
    font-size: 12px;
    margin-top: 20px;
    display: inline block;
}

.read {
    display: inline-block;
    padding: 12px 18px;
    background: #0ef;
    border-radius: 40px;
    font-size: 16px;
    color: #081b29;
    font-weight: 600;
    opacity: 0;
    animation: slideTop 1s ease forwards;
    animation-delay: 2s;
    box-shadow: 0 0 5px #0ef,
        0 0 25px #0ef;
}

.read:hover {
    background: #0ef;
    color: #081b29;
    box-shadow: 0 0 5px cyan,
        0 0 25px cyan, 0 0 50px cyan,
        0 0 100px cyan, 0 0 200px cyan;
}

.services-list div:hover {
    transform: translateY(-10px);
}

/*My services styling sakkiyo*/
/* My skills section styling suru*/

section {
    display: flex;
    flex-wrap: wrap;
}

.container1 {
    width: 600px;
    height: 500px;
    padding: 75px 90px;
    margin-left: 120px;
    margin-top: -40px;

}

.heading-1 {
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 5px;
    margin-bottom: 50px;

}

.bar {
    font-size: 23px;
}

.technical-bars .bar {
    margin: 8px 0px;

}

.technical-bars .bar:first-child {
    margin-top: 0px;
}

.technical-bars .bar:last-child {
    margin-bottom: 0px;
}

.technical-bars .bar .info {
    margin-bottom: 2px;
}

.technical-bars .bar .info span {
    font-size: 17px;
    font-weight: 500;
    animation: showText 0.5s 1s linear forwards;
    opacity: 0;
}

@keyframes showText {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.technical-bars .bar .progress-line {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 5px;
    background-color: #000000;
    animation: animate 1s cubic-bezier(1, 0, 0, 1) forwards;
    transform: scaleX(0);
    transform-origin: left;
    margin-bottom: 8px;

}

@keyframes animate {
    100% {
        transform: scaleX(1);
    }
}

.technical-bars .bar .progress-line span {
    display: block;
    position: absolute;
    border-radius: 10px;
    height: 100%;
    background-color: #0ef;
    animation: animate 1s 1s cubic-bezier(1, 0, 0, 1) forwards;
    transform: scaleX(0);
    transform-origin: left;
    margin-bottom: 100px;

}

.progress-line.html span {

    width: 80%;

}

.progress-line.css span {
    width: 70%;
}

.progress-line.Javascript span {
    width: 60%;
}

.progress-line.iot span {
    width: 30%;
}

.progress-line.AiMl span {
    width: 45%;
}

.progress-line.Django span {
    width: 70%;
}

.progress-line span::after {
    position: absolute;
    padding: 1px 8px;
    background-color: #0000;
    color: #fff;
    font-size: 12px;
    border-radius: 3px;
    top: 28px;
    right: -20px;
    animation: showText 0.5s 1.5s linear forwards;
    opacity: 0;

}

.progress-line.html span::after {
    content: "80%";
    margin-top: -18px;
}

.progress-line.css span::after {
    content: "70%";
    margin-top: -18px;
}

.progress-line.Javascript span::after {
    content: "60%";
    margin-top: -18px;

}

.progress-line.iot span::after {
    content: "30%";
    margin-top: -18px;
}

.progress-line.AiMl span::after {
    content: "45%";
    margin-top: -18px;
}

.progress-line.Django span::after {
    content: "70%";
    margin-top: -18px;
}

/* professional skills */
.radial-bars {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
}

.radial-bars .radial-bar {
    width: 50%;
    height: 170px;
    margin-bottom: 100px;
    position: relative;
}

.radial-bars .radial-bar svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    width: 120px;
    height: 160px;

}

.radial-bars .radial-bar .progress-bar {
    stroke-width: 10;
    stop-color: #000;
    fill: transparent;
    stroke-dasharray: 502;
    stroke-dashoffset: 502;
    stroke-linecap: round;
    animation: animate-bar 1s linear forwards;
}

@keyframes animate-bar {
    100% {
        stroke-dashoffset: -1;
    }
}

.path {
    stroke-width: 10;
    stroke: #0ef;
    fill: transparent;
    stroke-dasharray: 502;
    stroke-dashoffset: 502;
    stroke-linecap: round;

}

.path1 {
    animation: animate-path1 1s 1s linear forwards;
}

.path2 {
    animation: animate-path2 1s 1s linear forwards;
}

.path3 {
    animation: animate-path3 1s 1s linear forwards;
}

.path4 {
    animation: animate-path4 1s 1s linear forwards;
}

@keyframes animate-path1 {
    100% {
        stroke-dashoffset: 50;
        ;
    }
}

@keyframes animate-path2 {
    100% {
        stroke-dashoffset: 175;
        ;
    }
}

@keyframes animate-path3 {
    100% {
        stroke-dashoffset: 125;
        ;
    }
}

@keyframes animate-path4 {
    100% {
        stroke-dashoffset: 75;
        ;
    }
}

.radial-bar .percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 17px;
    font-weight: 500;
    animation: showText 0.5s 1s linear forwards;
    opacity: 0;
}

.radial-bar .text {
    width: 100%;
    position: absolute;
    text-align: center;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    font-size: 17px;
    font-weight: 500;
    animation: showText 0.5s 1s linear forwards;
    opacity: 0;

}

/* MY skills section sakkiyo
aba my projects section suru */

.main-text {
    padding-top: 130px;
    margin-top: 200px;
}

.main-text h2 {
    font-size: 60px;
    margin-bottom: 50px;
    line-height: 1;
    text-align: center;
}

.main-text h2 span {
    color: #0ef;
}

.portfolio-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    padding: 0 20px;
}

.row {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}


.row img {
    width: 100%;
    aspect-ratio: 16 / 10;   /* sabai card ko same size */
    object-fit: cover;       /* image stretch hudaina, crop hunchha */
    object-position: top;    /* website screenshot ko mathi bhag dekhaucha */
    border-radius: 8px;
    display: block;
    transition: transform 0.5s;
}

.layer {
    width: 100%;
    height: 0;
    background: linear-gradient(rgba(0, 0, 0, 01), #0ef);
    position: absolute;
    border-radius: 8px;
    left: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 40px;
    transition: height 0.5s;

}

.layer h5 {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.layer p {
    color: #000;
    font-size: 1rem;
    line-height: 1.8;
}

.layer a {
    margin-top: 20px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #081b29;
    border: 2px solid #081b29;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.layer a i {
    font-size: 22px;
    color: #0ef;
    transition: color 0.3s ease;
}

.layer a:hover {
    transform: translateY(-4px) scale(1.08);
    background: #fff;
    border-color: #fff;
}

.layer a:hover i {
    color: #081b29;
}
.layer {
    background: linear-gradient(to top, rgba(0, 238, 255, 0.95), rgba(0, 238, 255, 0.85));
}

.row:hover img {
    transform: scale(1.1);
}

.row:hover .layer {
    height: 100%;
}

/* My projects section sakkiyo aba contact section ko styling*/
.contact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 3rem;
    max-width: 1200px;
    margin: 130px auto 0;
    padding: 0 30px;
}

.contact-text h2 {
    font-size: 60px;
    line-height: 1.1;
    text-align: left;
}

.contact-text h2 span {
    color: #0ef;
}

.contact-text h4 {
    margin: 15px 0;
    font-size: 20px;
    font-weight: 600;
    color: #e4e4e4;
}

.contact-text p {
    color: #b1b1b1;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.contact-list {
    list-style: none;
    margin-bottom: 2rem;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    word-break: break-word;
}

.contact-list li a {
    color: #ededed;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-list li a:hover {
    color: #0ef;
}
.contact-icons a {
    text-decoration: none;
}

.contact-icons i {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid #0ef;
    border-radius: 50%;
    font-size: 20px;
    color: #0ef;
    margin: 30px 15px 30px 0;
    transition: 0.5s ease;
    opacity: 0;
    animation: slideLeft 1s ease forwards;
}

.contact-icons i:hover {
    background: #0ef;
    color: #000;
    box-shadow: 0 0 20px #0ef;
}

.contact-list i {
    color: #0ef;
    font-size: 22px;
}

/* ---------- Form ---------- */
.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(0, 238, 255, 0.25);
    border-radius: 8px;
    outline: none;
    color: #ededed;
    font-size: 1rem;          /* 16px: iPhone ma auto-zoom hudaina */
    font-weight: 400;
    font-family: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #8aa0ab;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #0ef;
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 3px rgba(0, 238, 255, 0.2);
}

.contact-form textarea {
    resize: vertical;
    min-height: 180px;
}

.contact-form .send {
    align-self: flex-start;
    padding: 14px 44px;
    background: #0ef;
    border: none;
    border-radius: 40px;
    color: #081b29;
    font-size: 1rem;
    font-weight: 600;
    text-transform: capitalize;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(0, 238, 255, 0.45);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-form .send:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(0, 238, 255, 0.8);
}

.contact-form .send:active {
    transform: translateY(0);
}

 /* yo chai form submit gareypaxi back garda feri suru bata start huni banauni styling */

 .form-status {
    font-size: 0.95rem;
    min-height: 1.4em;
    margin-top: 4px;
}

.form-status.success {
    color: #0ef;
}

.form-status.error {
    color: #ff6b6b;
}

.contact-form .send:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* contact section sakkiyo */

.last-text {
    width: 100%;
    text-align: center;
    padding: 25px;
    font-weight: 300;
    margin-top: 70px;
    background: rgb(7, 85, 91);
}

.last-text span {
    font-weight: bold;
}

.top {
    position: fixed;
    bottom: 2.1rem;
    right: 2.1rem;
}

.top i {
    color: black;
    background: #0ef;
    font-size: 20px;
    padding: 10px;
    border-radius: 0.5rem;
}



/* @keyframes भनेको animation को सुरुवात र अन्त्यमा element कस्तो हुनुपर्छ भनेर define गर्ने हो। 
yo mathi .logo ma use vaxa hai tyo logo lai animation dida */
@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translateX(-100px);
        /* Logo आफ्नो original position भन्दा 100px right मा हुन्छ। */
    }

    100% {
        transform: translateX(0);
        /* Logo आफ्नो original position मा आउँछ। */
        opacity: 1;
    }
}

@keyframes slideTop {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideBottom {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*Responsive Styles 
@media = "condition-based CSS"
Normal CSS le sadhai apply huncha, jasto sukai screen size hos. @media chai euta "if" statement jasto ho — "yedi yo condition milyo bhane, yo CSS apply gara, natra nagara." */
/* Tablets and large phones ko lagi
/* yo tab matra apply huncha jaba screen ≤ 768px */
@media (max-width: 768px) {
    .about {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-img {
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
    }

    .contact {
        grid-template-columns: 1fr;
    }

    .contact-form {
        margin-top: 30px;
    }
    
}

/* Tablets and small laptops */
@media (max-width: 768px) {
    .container1 {
        width: 90%;
        max-width: 600px;
        height: auto;
        margin-left: 0;
        margin: 0 auto;
        padding: 40px 20px;
    }

    .main-text {
        padding-top: 60px;
        margin-top: 60px;
    }

    .main-text h2 {
        font-size: 36px;
    }

    .contact {
        margin-left: 0;
        margin-top: 60px;
        padding: 0 20px;
    }

    .radial-bars .radial-bar {
        width: 50%;
        height: 150px;
    }

    .radial-bars .radial-bar svg {
        width: 100px;
        height: 130px;
    }

    body {
        overflow-x: hidden;
    }
}

/* Hamburger icon- hidden on desktop by default
yo tyo navbar ma aba phone ma kholda tw purai eutai line ma aaatuanna home skill contact about
so teivara yo menu/toggle icon use gareu ani tesko lagi css normal laptop ma chaluda tyo icon lukauni
tara phone ma chai tyo icon dekhauni navbar components lukauni */
.menu-icon {
    display: none;
    font-size: 28px;
    color: #0ef;
    cursor: pointer;
    z-index: 1001;
}

@media (max-width: 768px) {
    .menu-icon {
        display: block;
    }

        .navbar {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 250px;
        background: #081b29;
        flex-direction: column;
        align-items: flex-start;
        padding: 80px 30px;
        gap: 25px;
        transition: right 0.4s ease;
        z-index: 1000;
    }

    .navbar a {
        margin-left: 0;
    }

    .navbar.menu-open {
        right: 0;
        gap:10px;

    }
}

/* Mobile layout fixes */
@media (max-width: 768px) {
    .header {
        padding: 16px 6%;
    }

    .home {
        height: auto;
        min-height: 100vh;
        padding: 120px 8% 48px;
        background-position: right center;
        /* background-position: 65% center; */
    }

    .home-content {
        width: 100%;
        max-width: 100%;
    }

    .home-content h1 {
        font-size: clamp(2.3rem, 10vw, 3.5rem);
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .home-content h3 {
        font-size: clamp(1.3rem, 6vw, 2rem);
        line-height: 1.3;
    }

    .home-content p {
        font-size: 1rem;
        line-height: 1.6;
    }

    .home-socialIcons a {
        margin: 24px 12px 24px 0;
    }

    .container {
        padding: 40px 6%;
    }

    .sub-title {
        font-size: 2.3rem;
        padding-bottom: 35px;
    }

    .portfolio-content {
        
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Mobile hero: show the whole photo ring on top, text below it */
@media (max-width: 768px) {
    .home {
        height: auto;
        min-height: 0;
        padding: calc(98vw + 24px) 8% 56px;
        background-size: 220% auto;
        background-position: 90% top;
        background-repeat: no-repeat;
        align-items: flex-start;
    }
}


/* Mobile About: tighter photo, smaller text */
@media (max-width: 768px) {
    .about {
        padding: 56px 6% 24px;
        gap: 1rem;
    }

    .about-img {
        display: block;
        position: relative;
        width: min(78vw, 320px);
        aspect-ratio: 1 / 1;
        margin: 0 auto 8px;
        overflow: hidden;
    }

    /* about6.png has lots of empty space around the ring, so crop to the ring */
    .about-img img {
        position: absolute;
        width: 189%;
        max-width: none;
        height: auto;
        left: -25%;
        top: -18.6%;
        padding: 0;
        border-radius: 0;
    }

    .about-text h2 {
        font-size: 2.3rem;
    }

    .about-text h4 {
        font-size: 1.35rem;
        line-height: 1.4;
        margin: 10px 0 20px;
    }

    .about-text p {
        font-size: 1rem;
        line-height: 1.75;
        margin-bottom: 2rem;
        text-align: left;
    }
}
@media (max-width: 768px) {
    .contact {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin: 60px auto 0;
        padding: 0 20px;
    }

    .contact-text h2 {
        font-size: 36px;
        text-align: center;
    }

    .contact-text h4,
    .contact-text p {
        text-align: center;
    }

    .contact-text p {
        font-size: 16px;
    }

    .contact-icons {
        text-align: center;
    }

    .contact-form .send {
        align-self: stretch;   /* mobile ma full-width button */
        width: 100%;
    }
}
@media (max-width: 768px) {
    .contact-icons {
        text-align: center;
    }
}