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


body {
    overflow-x: hidden;
}

/* -------shared style- end ------- */
.font-open-sans {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
}

.container {
    width: min(90%, 1140px);
    margin: 0 auto;
    padding-inline: 1rem;
}

.orange-color {
    color: #FD6E0A;
}

.btn {
    background-color: #FD6E0A;
    padding: 18px 36px;
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 5px;
    /* animation: kamal 2s ease-out forwards; */

}

#about,
#skill,
#resume,
footer {
    padding-top: clamp(1.6rem, 8.125vw, 10rem);
}

.section-heading {
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    text-align: center;
}

.section-heading h2 {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: clamp(1rem, 2vw, 2.9rem);
}

.section-heading p {
    font-size: 1.125rem;
    line-height: 2.2rem;
    margin-bottom: 3.1rem;
    color: #757575;
}

.icon {
    margin-right: 5px;
}

/* ---------shared style- end--------- */

/* ------- --header style area start-----------*/
header {
    background: url("../images/developer.png"), url("../images/header_bg.png"), #FFF8F3;
    background-repeat: no-repeat;
    background-position: 54px 10px, right bottom;
    padding-top: 4.2rem;

}

/* --------nav style start------------- */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-container .menu {
    display: flex;
    gap: 4.2rem;
    align-items: center;
}

.nav-container .logo {
    font-size: 2.8rem;
    font-weight: 900;
}

.nav-container .menu {
    list-style: none;
}

.nav-container a {
    text-decoration: none;
    color: #474747;
    font-size: 1.125rem;
}

/* --------nav style end------------- */

/* ---------banner style start------- */

.banner .banner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.banner-container .banner-content {
    max-width: 580px;
    width: 100%;
}

.banner-container .banner-content h3 {
    font-size: 45px;
    font-weight: 600;
}

.banner-container .banner-content h2 {
    font-size: 5rem;
    font-weight: 900;
    margin-bottom: 1.25rem;
}

.banner-container .banner-img {
    width: 100%;
    max-width: 33.25rem;
    /* width: clamp(300px, 40vw, 580px); */
}

.banner-container .banner-img img {
    width: 100%;
    height: auto;
    margin-left: 11rem;
}

/* ----------banner content h2-------- */
.marrry::after {
    content: "hardy";
    color: #FD6E0A;
    /* animation: text 2s infinite; */
}

/* 
@keyframes text {
    0% {
        content: "hardy";
    }

    100% {
        content: "kamal";
    }
} */

/* ----------banner content h2-------- */

.banner-container .banner-content p {
    font-size: 1.125rem;
    line-height: 1.9rem;
    margin-bottom: 1.9rem;
    color: #757575;
}

.banner-container img {
    vertical-align: middle;
}

.banner-container .banner-content .btn {
    /* margin-right: 30px; */

}

.banner-container .banner-content .white-btn {
    background-color: white;
    padding: 17px 36px;
    font-size: 20px;
    font-weight: bold;
    color: #FD6E0A;
    border: none;
    border-radius: 5px;
    border: 1px solid #FD6E0A;
    /* animation: kamal 3s ease-out forwards; */
}

/* 
@keyframes kamal {
    from {
        transform: translateX(900%);
    }

    to {
        transform: translateX(0);
    }
} */

/* ---------banner style end-------- */

/* ------- ------header style area end-----------*/

/* -----------------main area style start------------- */

/* ----------about section style start------ */

.about-container {
    padding: clamp(1rem, 8vw, 10rem) clamp(0rem, 3vw, 12rem);
    background-color: #FFF8F3;
    text-align: center;
}

#about .about-container .about-info {
    display: flex;
    justify-content: space-around;
}

.about-container .about-info .info-card p {
    font-size: 1.125rem;
    color: #757575;
    line-height: 1.9rem;
}

.about-container .about-info .info-card h3 {
    font-size: 1.25rem;
    color: #474747;
    font-weight: bold;
}

/* ---------about style end------- */

/* -------skill section style start------- */

#skill .skill-container .skill-card {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
}

.skill-container .skill-card .card {
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0px 6px 16px #757575;
}

.skill-container .skill-card .card img {
    margin-bottom: 1.9rem;
}

.skill-container .skill-card .card h3 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1.25rem;
}

.skill-container .skill-card .card p {
    font-size: 1rem;
    line-height: 1.9rem;
    color: #757575;
}

/* -------skill section style end------- */

/* --------resume section style start----- */

#resume .section-heading h2 {
    padding-bottom: clamp(1rem, 6.25vw, 3.2rem);
}

#resume .resume-container {
    display: flex;
    justify-content: space-between;
    gap: clamp(1rem, 4.4vw, 5rem);
}

.resume-container .experience h3 {
    font-size: clamp(1.8rem, 2vw, 2.2rem);
    font-weight: bold;
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
    color: #474747;
}

.experience .resume-card .card-title {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: bold;
    margin-bottom: 0.7rem;
    color: #474747;
}

.experience .resume-card .card-info {
    font-size: clamp(1.25rem, 1.2vw, 1.5rem);
    font-weight: 600;
    margin-bottom: 0.7rem;
    /* font-size: 20px; */
}

.experience .resume-card .card-text {
    font-size: 1rem;
    line-height: clamp(1.3rem, 2vw, 1.8rem);
    color: #757575;
}

.resume-container .experience hr {
    margin: clamp(1.3rem, 2vw, 1.9rem) 0;
}

#resume .resume-btn {
    text-align: center;
    margin-top: clamp(1rem, 2vw, 3.1rem);
}

/* -----resume section style end------- */

/* -----------main area style end--------------- */

/* ------footer style start------ */
footer {
    margin-top: clamp(2.1rem, 5vw, 7rem);
    padding: clamp(2.1rem, 6vw, 9rem) 0;
    background-color: #FFF8F3;
    /*navbar sticky related*/
}

footer .footer-container {
    display: flex;
    justify-content: space-between;
    gap: clamp(2.3rem, 5vw, 7.5rem);
}


footer .footer-container .social {
    width: 100%;
    max-width: 560px;
}

footer .footer-container .social-heading {
    font-size: clamp(2.4rem, 3vw, 2.3rem);
    font-weight: bold;
    margin-bottom: 1.25rem;
}

.footer-container .social p {
    font-size: clamp(0.9rem, 1.2vw, 1.25rem);
    line-height: clamp(1.3rem, 1.2vw, 1.8rem);
    color: #474747;
    margin-bottom: 1.9rem;
}

.footer-container .social .social-img a {
    padding-right: 1rem;
}

.footer-container .form input[type="text"],
.footer-container .form input[type="email"],
.footer-container .form textarea {
    padding: 1.1rem 0 1.1rem 1.9rem;
    width: clamp(14rem, 5vw, 30rem);
    margin-bottom: 1.5rem;
    border-radius: 5px;
    border: none;
}

.footer-container .form input::placeholder {
    font-size: 1rem;
    line-height: clamp(2rem, 3.5vw, 5rem);
    color: #757575;
}

.footer-container .form textarea::placeholder {
    font-size: 1rem;
    line-height: clamp(2rem, 3.5vw, 5rem);
    color: #757575;
}

/* ------footer style end------ */