/* css of styler.css?  */
section{
   padding-top: 8vh;
}
body,
html {
    overflow-x: hidden;
}
.navtog{
    height: 1vh;
}

.navbarwal {
    color: rgb(0, 0, 0);
    mix-blend-mode: difference;
}

/* skills css  */

/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');

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

.containe {
    height: 100%;
    display: inline-block;
    background: #4070f4;
    align-items: center;
    justify-content: center;
}

.containe {
    position: relative;
    max-width: 100%;
    width: 100%;
    background: #fff;
    margin: 0 15px;
    padding: 10px 20px;
    border-radius: 7px;
}

.containe .skill-box {
    width: 100%;
    margin: 25px 0;
}

.skill-box .title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.skill-box .skill-bar {
    height: 1rem;
    width: 100%;
    border-radius: 6px;
    margin-top: 6px;
    background: rgba(0, 0, 0, 0.1);
}

.skill-bar .skill-per {
    position: relative;
    display: block;
    height: 100%;
    width: 90%;
    border-radius: 6px;
    background: #4070f4;
    animation: progress 07s ease-in-out forwards;
    opacity: 0;
}

.skill-per.html {
    width: 90%;
    animation-delay: 5s;
}

.skill-per.css {
    width: 50%;
    animation-delay: 7s;
}

.skill-per.javascript {
    width: 50%;
    animation-delay: 9s;
}

.skill-per.nodejs {
    width: 30%;
    animation-delay: 11s;
}

@keyframes progress {
    0% {
        width: 0;
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.skill-per .tooltip {
    position: absolute;
    right: -14px;
    top: -28px;
    font-size: 9px;
    font-weight: 500;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    background: #4070f4;
    z-index: 1;
}

.tooltip::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    height: 10px;
    width: 10px;
    z-index: -1;
    background-color: #4070f4;
    transform: translateX(-50%) rotate(45deg);

}







.heroheight {
    height: 2000px;
}

#servicesd {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;
    /* NEW, Spec - Firefox, Chrome, Opera */

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

}














/* preloader */


* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --hue: 223;
    --bg: hsl(var(--hue), 90%, 95%);
    --fg: hsl(var(--hue), 90%, 5%);
    --trans-dur: 0.3s;
    font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}

.body {
    position: fixed;
    z-index: 1031;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: transparent;
    display: block;
    overflow: hidden;

    background-color: var(--bg);
    color: var(--fg);
    font: 1em/1.5 sans-serif;
    transition: background-color var(--trans-dur);
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 1.5em 0;
}

.ip {
    width: 16em;
    height: 8em;
}

.ip__track {
    stroke: hsl(var(--hue), 90%, 90%);
    transition: stroke var(--trans-dur);
}

.ip__worm1,
.ip__worm2 {
    animation: worm1 2s linear infinite;
}

.ip__worm2 {
    animation-name: worm2;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue), 90%, 5%);
        --fg: hsl(var(--hue), 90%, 95%);
    }

    .ip__track {
        stroke: hsl(var(--hue), 90%, 15%);
    }
}

/* Animation */
@keyframes worm1 {
    from {
        stroke-dashoffset: 0;
    }

    50% {
        animation-timing-function: steps(1);
        stroke-dashoffset: -358;
    }

    50.01% {
        animation-timing-function: linear;
        stroke-dashoffset: 358;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes worm2 {
    from {
        stroke-dashoffset: 358;
    }

    50% {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -358;
    }
}

.heronooneul {
    font-family: Roboto Slab;
}


/* display background color black on navbar scroll */


.navbarScroll.navbarDark {
    backdrop-filter: blur(300px);
    backdrop-filter: blur(300px);
}

/* hero background image */
.bgimage {
    height: 100vh;
    margin: 0;
    font-family: "Exo Extra Bold", sans-serif;
    color: #0048ba;
   background: #fc00ff;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #00dbde, #fc00ff);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #00dbde, #fc00ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

    background-size:cover;
    position:relative;
}

/* text css above hero image*/
.hero_title {
    font-size: 400%;
    font-family: "Ga Maamli", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.hero_desc {
    font-size: 2rem;
}

.hero-text {
    padding: 2vh;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

/* spacing on all sections */
/* #about, #services, #portfolio, #contact {
    margin-top: 4rem;
    padding-top: 4rem;
} */
#contact {
    padding-bottom: 4rem;
}

/* about section image css */
.imageAboutPage {
    width: 100%;
}

/* services section css */
.footeriya {
    padding: 2vh;
}

#footer {
    padding: 20vh;
    background-color: #808080;
    text-align: center;
}

.footeriya {
    margin: 5vh;
}


/* portfoli card css
 */

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

:root {
    --color-text: #616161;
    --color-text-btn: #ffffff;
    --card1-gradient-color1: #f12711;
    --card1-gradient-color2: #f5af19;
    --card2-gradient-color1: #7F00FF;
    --card2-gradient-color2: #E100FF;
    --card3-gradient-color1: #3f2b96;
    --card3-gradient-color2: #a8c0ff;
    --card4-gradient-color1: #11998e;
    --card4-gradient-color2: #38ef7d;
}

.bodyofport {
    font-family: 'Roboto', sans-serif;
    padding: 10vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
   background: #833ab4;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

    background-size:cover;
    position:relative;
}

.card-wrap {

    background: #fff;
    border-radius: 20px;
    border: 5px solid #fff;
    overflow: hidden;
    color: var(--color-text);
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
        rgba(0, 0, 0, 0.23) 0px 6px 6px;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.card-wrap:hover {
    transform: scale(1.009);
}

.card-header {
    height: 60%;
    width: 100%;
    background: red;
    border-radius: 100% 0% 100% 0% / 0% 50% 50% 100%;
    display: grid;
    place-items: center;

}

.card-header i {
    color: #fff;
    font-size: 72px;
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70%;
    margin: 0 auto;
}

.card-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 1rem;
    margin-top: 10px;
    margin-bottom: 20px;

}

.card-text {
    text-align: center;
    font-size: 0.4rem;
    margin-bottom: 0.2rem;
}

.card-btn {
    border: none;
    border-radius: 80px;
    padding: 5px 30px;
    color: #fff;
    font-size: 50%;
    margin-bottom: 0.1rem;
    text-transform: uppercase;
}

.card-header.one {
    background: url("https://miro.medium.com/v2/resize:fit:1100/1*CWFkh5z8oa6dZfn5_gkKKQ.jpeg") no-repeat;
    background-position: 50% 50%;
    background-size: 100% 100%;
}

.card-header.two {

    background: url("https://raw.githubusercontent.com/heyabhishekkrr/portioabhi/refs/heads/main/Screenshot%20(113).png?token=GHSAT0AAAAAAC54EFLYH46JONUL3GU3WIR2Z62IQ6A") no-repeat;
    background-position: 50% 50%;
    background-size: 100% 100%;
}



.card-btn.one {
    background: linear-gradient(to left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}

.card-btn.two {
    background: linear-gradient(to left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}







.heronoone {
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

@media only screen and (max-width: 800px) {
    iframe {
        display: flex;
        align-self: center;
        align-content: center;
        align-items: center;
        background-color: lightblue;
        width: 100%;
        height: 30rem;
    }
}

@media only screen and (max-width: 850px) {
    .iframe {
        height: 30rem;
        display: flex;
        align-self: center;
        align-content: center;
        align-items: center;
        background-color: lightblue;
        width: 100%;
    }

    #formofcontact {

        height: auto;
    }
}

@media only screen and (min-width: 850px) {
    .iframe {
        background-color: #05f1aa;
        height: 500px;
    }
}

.hemantiya {
    display: flex;
    align-self: center;
    align-content: center;
    align-items: center;
    background-color: lightblue;
    width: 100%;
}

#her {
    padding-top: 1vh;
    font-size: 180%;
    color: #0d00ff;

    font-family: "Nanum Gothic Coding", monospace;
    font-weight: 400;
    font-style: normal;

}
section h1{
    font-family: "Anton SC", sans-serif;
    font-weight: 400;
    font-style: normal;
}