:root {
    --primary-color: rgb(13, 14, 13);
    --secondary-color: rgb(226, 226, 226);
    --third-color: rgb(244, 252, 252);
    --fourth-color: rgb(249, 248, 248);
    --primary-font: "Kdam Thmor Pro", sans-serif;
}

/* navbar css */

.back {
    background: radial-gradient(white, rgb(223, 223, 223));
}

.navbar-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    height: 5rem;
}

.logo a {
    color: var(--primary-color);
    text-decoration: none;
}

.logo a h1 {
    margin-left: 7.5rem;
    font-weight: 700;
    font-size: 3rem;
    font-family: "Paytone One", sans-serif;
    letter-spacing: 1.7px;
}

.logo-texture img {
    position: absolute;
    top: -0.2%;
    left: 5%;
    width: 19%;
    filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
}

.texture-img-on-hire img:nth-child(1) {
    position: absolute;
    top: 505%;
    left: 22%;
    width: 17%;
    opacity: 0.2;
    filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
}

.texture-img-on-hire img:nth-child(2) {
    position: absolute;
    top: 507%;
    left: 60%;
    width: 11%;
    opacity: 0.2;
    filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
}

.MenuButton {
    display: flex;
    margin-right: 6rem;
}

.MenuButton i {
    background-color: #f6f5f5;
    padding: 0.3rem;
    font-size: 20px;
    width: 31px;
    text-align: center;
    height: 31px;
    border-radius: 50%;
}

.MenuButton button {
    display: none;
}

.toggle-menu-section {
    display: none;
}

.MenuButton i,
button {
    margin-right: 1.5rem;
    color: var(--primary-color);
    border: 1px solid #ccc;
}

/* cartoon image */

.image-container-cartoon img {
    position: absolute;
    top: 4.1rem;
    left: 67%;
    width: 15.5rem;
    filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
}

/* main content section */
.mainContent {
    display: flex;
    width: 90%;
    height: 100%;
    gap: 2rem;
    /* border: 2px solid black; */
    margin-top: 10rem;
}

.leftContainerSection {
    width: 28%;
}

.leftContainerSection .box {
    position: sticky;
    top: 12.5%;
    width: 100%;
    height: 98vh;
    border: 2px solid #ccc;
    text-align: center;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.5);
}

.ProfileImage img {
    position: relative;
    top: -52%;
    width: 55%;
    border-radius: 5px;
    object-fit: cover;
}

.leftContainerSection .box h1 {
    width: 95%;
    line-height: 0;
}

.leftContainerSection .box p {
    width: 80%;
}

.leftContainerSection .box .ProfileImage {
    width: 100%;
    height: 24.5%;
    /* border: 2px solid purple; */
}

.socialMediaIcons {
    display: flex;
    justify-content: center;
    align-items: center;
}

.socialMediaIcons a {
    text-decoration: none;
    color: var(--primary-color);
    font-size: 1.4rem;
}

.icon-border {
    border-radius: 5px;
    background-color: #e9e7e7;
    width: 2.2rem;
    height: 2.2rem;
    margin: 0 0.5rem;
}

.person-details {
    display: flex;
    padding: 9px 0;
    border-bottom: 1px solid #eeeded;
    width: 100%;
    margin-left: 1px;
    align-items: center;
    text-align: left;
    line-height: 0.8;
    color: var(--primary-color);
}

.person-details .icon-border {
    background-color: #fbfafa;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    padding: 8px;
    box-shadow: 1px 1px 4px rgb(166, 166, 166);
}

.person-details:last-child {
    border-bottom: none;
}

.person-details .icon-border a {
    text-decoration: none;
    color: var(--primary-color);
}

.person-details .details span {
    font-size: 12.5px;
}

.btn-clr {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.btn-clr:hover {
    background-color: rgb(10, 150, 129) !important;
    color: white !important;
}




.MiddleContainerSection {
    width: 62%;
    height: 100%;
}

.MiddleContainerSection .box {
    border: 2px solid #ccc;
    border-radius: 5px;
    width: 100%;
    padding: 2.1rem;
    background-color: rgba(255, 255, 255, 0.5);
}

.about-heading {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    color: var(--primary-color);
}

.about-heading h1 {
    font-weight: 700;
}

.about-para {
    font-size: 17px;
    font-weight: 400;
    color: #282727;
}

.what-i-do {
    margin-top: 2rem;
}

.what-i-do h3 {
    font-weight: 700;
}

.all-skills {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.skill-set {
    display: flex;
    width: 50%;
    height: 14rem;
    border: 2px solid #ccc;
    gap: 10px;
    padding: 12px;
    border-radius: 5px;
    background-color: var(--third-color);
}

.skill-left-icon-section {
    width: 11%;
    /* background-color: pink; */
    padding-left: 4px;
}

.skill-left-icon-section img {
    width: 100%;
    padding-top: 0.2rem;
}

.skills-left-details-section {
    width: 87%;
    /* background-color: grey; */
}

.skills-left-details-section h6 {
    font-weight: 700;
    font-size: 17px;
}

.skills-left-details-section p {
    font-size: 14px;
    font-weight: 480;
    color: #383737;
}


/* education section */
.all-education-section {
    display: flex;
    width: 100%;
    gap: 1rem;
}

.education-section {
    display: flex;
    width: 32%;
    height: 15vh;
    border: 2px solid #ccc;
    /* border-right: 2px solid #ccc; */
    gap: 1.4rem;
    padding: 12px;
    border-radius: 5px;
    background-color: white;
}

.education-section span {
    font-size: 13px;
}

.education-section i {
    font-size: 1.6rem;
    color: var(--primary-color);
}

.education-section h5 {
    font-size: 16px;
    margin: 0 0;
}




.RightContainerSection {
    /* background-color: brown; */
    position: sticky;
    top: 1.5%;
    width: 10%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.RightContainerSection .box {
    border: 2px solid #ccc;
    border-radius: 5px;
    width: 100%;
    padding: 1.2rem;
    background-color: rgba(255, 255, 255, 0.5);
}

.icon-border-nav-items {
    width: 5rem;
    height: 5rem;
    font-size: 1.2rem;
    background-color: rgb(235, 234, 234);
    text-align: center;
    border-radius: 5px;
    /* box-shadow: 2px 2px 5px #ccc; */
}

.icon-border-nav-items i {
    font-size: 1.6rem;
    padding: 16px 14px 0 14px;
}

.icon-border-nav-items h5 {
    font-size: 1rem;
}

.icon-border-nav-items a {
    text-decoration: none;
    color: var(--primary-color);
}



/* hr styling */

.hr-style {
    width: 60%;
    margin: 2rem auto;
}



.bi-number-circle-fill{
    width: 10px;
    height: 2px;
    background-color: var(--primary-color);
    border-radius: 50%;
    color: white;
    padding: 1px;
    padding-left: 4px;
    font-size: 11.5px;

}







/* Project Section starts */

.project-section {
    margin-top: 2rem;
    width: 100%;
    display: flex;
    gap: 2rem;
    padding-left: 0;
    /* border: 2px solid red; */
}

.project-section .box {
    border: 2px solid #ccc;
    border-radius: 5px;
    height: 18rem;
    background-color: white;
}

.project-card img {
    width: 95%;
    padding: 0.6rem;
}

.project-section .box h4 {
    padding-top: 0.2rem;
    padding-left: 0.6rem;
    line-height: 0.4;
}

.project-section .box span {
    font-size: 12px;
    padding-left: 0.9rem;
}

.tag {
    background-color: var(--primary-color);
    color: white;
    padding: 0.2rem;
    width: 97%;
}

.tag h6 {
    padding-left: 0.9rem;
    padding-top: 0.3rem;
}

.projectIcon {
    width: 2.2rem;
    margin-left: 0.5rem;
}




.swiper {
    width: 100%;
    height: 20.3rem;
}

.swiper-slide {
    width: calc(100% / 4);
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.youtube-section {
    margin-top: 2rem;
    width: 100%;
    display: flex;
    gap: 2rem;
    padding-left: 0;
    /* border: 2px solid red; */
}

.youtube-section .box {
    border: 2px solid #ccc;
    border-radius: 5px;
    height: 17rem;
    background-color: white;
}

.youtube-card img {
    width: 100%;
    padding: 0.6rem;
    border-radius: 5px;
}

.youtube-section .box h4 {
    padding-top: 1rem;
    padding-left: 0.6rem;
    font-size: 16px;
}

.youtube-card img:hover {
    scale: 1.01;
    filter: blur(1px);
    padding: 0.1rem;
    border: 1px solid red;

}

.swiper-slide a {
    text-decoration: none;
    color: var(--primary-color);
}



/* Progress CSS */

.progress-body {
    border: 2px solid #ccc;
    border-radius: 5px;
    margin-top: 1rem;
    margin-bottom: 2rem;
    background-color: white;
}

.progress-heading {
    padding: 0.1px 0 0.3rem 15px;
    color: var(--primary-color);
    border-bottom: 2px solid #ccc;
    background-color: rgba(242, 239, 239, 0.958);
    margin-bottom: 1rem;
}

.progress-heading h3 {
    font-weight: 700;
    font-size: 2rem;
}

.progress-section {
    display: flex;
    width: 100%;
    align-items: center;
    padding-left: 1.1rem;
    padding-right: 1.2rem;
    color: var(--primary-color);
    border-bottom: 1px solid #ccc;
    background-color: white;
}

.progress-section:last-child {
    border-bottom: 0px solid #ccc;
}

.leftskillsNames {
    width: 17%;
    padding-top: 0.4rem;
}

.leftskillsNames h4 {
    font-size: 17px;
}
.leftskillsNames i {
    margin-right: 0.8rem;
}
.leftskillsNames h4 span {
    margin-right: 0.8rem;
}

.progress {
    width: 83%;

}

.progress-bar {
    background-color: var(--primary-color) !important;
}


/* Blogs CSS */
.blogs-section {
    margin-top: 2rem;
    width: 100%;
    display: flex;
    gap: 2rem;
    padding-left: 0;
    /* border: 2px solid red; */
}

.blogs-section a {
    text-decoration: none;
    color: var(--primary-color);

}

.blogs-section a:hover {
    color: rgb(10, 150, 129);
}

.blogs-section .box {
    border: 2px solid #ccc;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    background-color: white;
}

.blogs-image img {
    width: 26rem;
    padding: 0.6rem;
    border-radius: 5px;
}

.blogs-details {
    display: flex;
    padding: 0.6rem;
}

.blogs-details h6 {
    font-size: 15px;
    background-color: #eeeded;
    height: 4rem;
    border-radius: 5px;
    padding: 0.4rem;
}

.blogs-heading-description {
    padding: 0.6rem;
    padding-top: 0;
    line-height: 1.2;
}

.blogs-heading-description h4 {
    font-size: 16px;
    font-weight: 700;
}

.blogs-heading-description span {
    font-size: 14px;
    font-weight: 400;
}


.hire {
    width: 100%;
    background-color: var(--secondary-color);
    height: 12rem;
    z-index: -2;
}

.hire h2 {
    padding-top: 2.6rem;
    font-size: 2.6rem;
    font-family: "Kdam Thmor Pro", sans-serif;
}

.hire button {
    position: relative;
    left: 48%;
    margin-top: 1rem;
    font-weight: 600;
}


/* footer section CSS */
.footer-bg {
    background-color: var(--primary-color);
    z-index: 999;
}

.footer-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0.5rem;
}

.footer-contact p {
    font-size: 14px;
    font-weight: 400;
}

.signature {
    font-family: "Allura", cursive;
    font-size: 3rem;
    transform: rotate(-8deg);
}

.follow-me {
    margin-right: 6.5rem;
}

.follow-me p {
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 600;

}

.follow-me a {
    text-decoration: none;
    color: var(--secondary-color);
    font-size: 1.5rem;
    margin: 0.4rem 0.8rem;
}

.follow-me a:hover {
    color: rgb(10, 150, 129);
}

.all-rights-reserved {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    margin: 0.5rem 0;
}

.all-rights-reserved p,
ul {
    font-size: 13px;
    width: 50%;
}

.all-rights-reserved ul li a {
    padding: 0 0.3rem;
    text-decoration: none;
}




/* About us Page CSS here */

.about-total-section {
    width: 100%;
    display: flex;
    margin-top: 5rem;
    margin-bottom: 2rem;
    gap: 1rem;
}
.about-content{
    width: 90%;
    height: 100%;
}

.about-content-section {
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.57);
}

.about-content .introduction h2 {
    padding: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.about-content .introduction p {
    width: 98%;
    padding-left: 1.5rem;
}


.education-and-skills {
    width: 100%;
    display: flex;
    /* border:2px solid green; */
}

.Education {
    width: 32.6rem;
    padding: 1.5rem;
    /* border: 3px solid purple; */
}

.Education .box {
    width: 100%;
    border: 2px solid #ccc;
    padding-top: 0.8rem;
    border-radius: 5px;
    margin-top: 1rem;
    background-color: white;
}

.Education .box ul {
    width: 96%;
}

.Education .box ul li {
    font-size: 13.8px;
    padding: 0.5rem 0;
}

.side-cartoon-image img {
    position: absolute;
    top: 51rem;
    left: 67%;
}

.ul-skills-set .progress-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ul-skills-set .progress-section .leftskillsNames {
    width: 35%;
    padding-top: 0.5rem;
    padding-bottom: 0.26rem;
}

.ul-skills-set .progress-section .leftskillsNames h4 {
    font-size: 16px;
    font-weight: 500;
    padding-left: 0.rem;
}

.ul-skills-set .progress-section .progress {
    width: 65%;
    margin-right: 0.5rem;
}

.contact-about {
    padding: 1.5rem;
}

.about-right-section {
    width: 10%;
    height: 100%;
    border: 2px solid #ccc;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.57);
}


.texture-img-on-hire-onaboutpage img:nth-child(1) {
    position: absolute;
    top: 199.5%;
    left: 22%;
    width: 17%;
    opacity: 0.2;
    filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
}

.texture-img-on-hire-onaboutpage img:nth-child(2) {
    position: absolute;
    top: 201%;
    left: 60%;
    width: 11%;
    opacity: 0.2;
    filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
}




/* Work page css starts here ! */

.op {
    position: absolute;
    top: 34.8%;
    left: 41%;
    opacity: 0.1;
    font-size: 3rem;
    font-weight: 700;

}

.op2 {
    position: absolute;
    top: 34.8%;
    left: 77.4%;
    opacity: 0.1;
    font-size: 3rem;
    font-weight: 700;

}

.op3 {
    position: absolute;
    top: 80.5%;
    left: 41%;
    opacity: 0.1;
    font-size: 3rem;
    font-weight: 700;
}

.op4 {
    position: absolute;
    top: 80.5%;
    left: 77.4%;
    opacity: 0.1;
    font-size: 3rem;
    font-weight: 700;

}

.op5 {
    position: absolute;
    top: 126%;
    left: 41%;
    opacity: 0.1;
    font-size: 3rem;
    font-weight: 700;
}
.op6 {
    position: absolute;
    top: 126%;
    left: 77.4%;
    opacity: 0.1;
    font-size: 3rem;
    font-weight: 700;
}

.work-section {
    width: 100%;
    display: flex;
    gap: 1rem;
    margin-top: 5rem;
}

.work-left-section {
    width: 90%;
    height: 100%;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.57);
}

.work-left-section .myproject-heading {
    padding: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.project-display {
    display: flex;
    gap: 1rem;
    padding: 0 1.1rem;
    justify-content: space-between;
}

.project-display .box {
    width: 50%;
    height: 20.2rem;
    border: 2px solid #ccc;
    border-radius: 5px;
    margin-bottom: 1rem;
    background-color: rgb(252, 251, 251);
}

.project-display:last-child .box {
    width: 49.4%;
    height: 10rem;
    border: 2px solid #ccc;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.project-display .box ul {
    padding-top: 1rem;
    width: 97%;
}

.project-display .box ul li {
    font-size: 13.8px;
    padding: 0.5rem 0;
}

.project-display .box ul li h4 {
    line-height: 0;
}

.desc-points li{
    line-height: 1;
}
.desc-points{
    line-height: 0;
}

.self-work {
    font-weight: 400;
    font-size: 12.5px;
}

.date-format {
    font-weight: 400;
    font-size: 12px;
    color: #747474;
}

.technologies-used {
    padding-top: 0.15rem;
}

.technologies-used span {
    font-size: 13.5px;
    font-weight: 400;
    padding-left: 0.6rem;
}

.Description-used {
    line-height: 0.5;
}

.project-view-more a {
    text-decoration: none;
    color: var(--primary-color);
}

.project-view-more a p {
    margin: 1rem 1.3rem;
    font-weight: 600;
}



.Presentational-skills {
    padding: 1.1rem;
    margin: 1.5rem;
}

.Presentational-skills h3 {
    margin-bottom: 1.6rem;
}

.Presentation-section {
    width: 100%;
}

.Presentation-section .box {
    width: 35%;
    height: 26rem;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: white;
}

.work-right-section {
    width: 10%;
    height: 100%;
    border: 2px solid #ccc;
    padding: 1.5rem;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.57);
}

.texture-img-on-hire-onworkpage img:nth-child(1) {
    position: absolute;
    top: 120rem;
    left: 22%;
    width: 17%;
    opacity: 0.2;
    filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
}

.texture-img-on-hire-onworkpage img:nth-child(2) {
    position: absolute;
    top: 121rem;
    left: 60%;
    width: 11%;
    opacity: 0.2;
    filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
}




/* Blogs Section CSS */

.blogsection {
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: 2.3rem;
    gap: 2rem;

}

.heading-on-carousel {
    position: absolute;
    top: 38%;
    left: 18%;
    width: 60%;
    color: white;
    font-weight: 800;
    font-size: 3.6rem;
    font-family: 'Times New Roman', Times, serif;
}

.blog-box {
    width: 100%;
    height: 25rem;
    border: 2px solid #ccc;
    border-radius: 5px;
}

.blog-image img {
    width: 100%;
    height: 30rem;

}

.h3-blog-heading {
    margin-top: 2rem;
    font-size: 2rem;
    font-family: var(--primary-font);
}

.blog-left-halfbyhalf {
    display: flex;
    gap: 2.5rem;
    margin-top: 2.5rem;
}

.blog-2-boxes {
    width: 42.2%;
    height: 100%;
    margin-top: 2rem;
    border: 2px solid #ccc;
}

.blog-2-boxes a {
    text-decoration: none;
    color: black;
}

.blog-2-boxes a:hover {
    color: rgb(10, 150, 129);
}

.blog-2-boxes img {
    width: 100%;
    height: 20rem;
}

.author-name {
    font-size: 12px;
    color: #6a6a6a;
    margin: 0 0 4px 0;
}

.blog-style-after-two-blogs-boxes {
    margin-top: 2rem;
    width: 100%;
    display: flex;
    gap: 2rem;
}

.left-page-half-blog {
    width: 68%;
    height: 100%;
    /* border: 2px solid purple; */

}

.left-page-half-blog h3 {
    font-style: italic;
    ;
    font-family: 'Times New Roman', Times, serif;
}

.left-page-half-blog h1 {
    font-size: 3.7rem;
    font-weight: 700;
    font-family: 'Times New Roman', Times, serif;
}

.right-page-half-blog {
    width: 32%;
    height: 100%;
}

.right-page-half-blog .blog-about {
    width: 100%;
    background-color: rgb(214, 219, 224);
    padding-bottom: 0.5rem;
}

.blog-about h3 {
    padding: 1.1rem;
    padding-left: 1.5rem;
    padding-bottom: 0;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 800;
}

.blog-about p {
    width: 97%;
    padding-left: 1.5rem;
    font-size: 16px;
    font-weight: 500;
}

.recent-blog-posts {
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    padding-top: 1rem;
}

.recent-blog-posts a {
    text-decoration: none;
    color: black;
}

.recent-blog-posts a:hover {
    color: rgb(10, 150, 129);
}

.image-and-desc {
    display: flex;
    font-style: normal;
    font-family: 'Times New Roman', Times, serif;
    gap: 1rem;
}

.image-and-desc img {
    width: 30%;
}

.only-desc h4 {
    font-size: 17px;
    font-weight: 600;
}

.social-again {
    margin-top: 2rem;
    background-color: rgb(214, 219, 224);
    padding: 1.1rem;
}

.social-again a {
    text-decoration: none;
    color: black;
    font-size: 1.8rem;
    margin: 6px 22px 0 0;
}

.social-again a:hover {
    color: rgb(10, 150, 129);
}

.social-again h3 {
    font-family: 'Times New Roman', Times, serif;
}

.blog-right-section {
    width: 10%;
    height: 100%;
    border: 2px solid #ccc;
    padding: 1.5rem;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.57);
}



/* Contact Page Section CSS */

.contact-section {
    width: 100%;
    height: 100%;
    /* border: 2px solid red; */
    display: flex;
    gap: 2rem;
    margin-top: 5rem;
}

.left-contact-section {
    width: 100%;
    height: 100%;
}

.left-contact-section .box {
    width: 100%;
    background-color: #f6f5f5;
    border-radius: 5px;
    padding-left: 1.5rem;
    padding-top: 1.5rem;
}

.contact-heading {
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.contact-social-again a {
    font-size: 1.6rem;
    margin-right: 1.2rem;
    padding-bottom: 15px;
    text-decoration: none;
    color: black;
}

.contact-social-again a:hover {
    color: rgb(10, 150, 129);
}

.contact-details {
    margin-top: 1rem;
    display: flex;
    width: 80%;
    gap: 1rem;
    padding-bottom: 20px;
}

.contact-email {
    width: 40%;
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 1.6rem;
    padding-left: 1.1rem;
}

.contact-phone {
    width: 40%;
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 1.6rem;
    padding-left: 1.1rem;
}

.jus {
    margin: 1rem 44%;
    width: 15%;
    margin-bottom: 7.5rem;
}

.or-style {
    display: flex;
    gap: 3rem;
    margin: 1.5rem 0;
}

.or-style hr {
    width: 45%;
}

.or-style p {
    font-size: 17px;
    font-weight: 600;
}

.contact-right-section {
    width: 10%;
    height: 100%;
    border: 2px solid #ccc;
    padding: 1.5rem;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.57);
}










@media screen and (max-width: 600px) {
    .navbar-body {
        height: 5rem;
        position: sticky;
        top: 0;
        z-index: 9999;
        background-color: transparent;
        transition: background-color 0.3s ease;
    }

    .navbar-body.scrolled {
        background-color: rgb(202, 201, 201)
            /* Updated background color when scrolled */
    }

    .logo a h1 {
        margin-left: 1rem;
        font-size: 2.2rem;
    }

    .logo-texture img {
        position: absolute;
        top: 3%;
        left: 0%;
        width: 49%;
    }

    .texture-img-on-hire img:nth-child(1),
    .texture-img-on-hire img:nth-child(2),
    .texture-img-on-hire-onaboutpage img:nth-child(1),
    .texture-img-on-hire-onaboutpage img:nth-child(2),
    .texture-img-on-hire-onworkpage img:nth-child(1),
    .texture-img-on-hire-onworkpage img:nth-child(2) {
        display: none;
    }


    .hire {
        background-image: url("textureimage-hire1.png"), url("textureimage-hire1.png");
        background-position: -37%, 127%;
        background-size: contain, contain;
        background-repeat: no-repeat;
        background-blend-mode: difference;
    }

    .MenuButton {
        margin-right: 1rem;
    }

    .MenuButton button {
        display: block;
        background-color: white;
        box-shadow: 0.5px 0.5px 3px grey;
        width: 2rem;
        height: 2rem;
        font-size: 1.35rem;

    }

    .toggle-menu-section {
        display: none;
    }

    .MenuButton i,
    button {
        margin-right: 1.3rem;
    }


    /* Menu button toggle functionality */

    .toggle-menu-section {
        position: fixed;
        top: 0%;
        right: 0%;
        z-index: 777;
        width: 80%;
        height: 102vh;
        background-color: #f3f1f1;
        align-items: center;
        border: 2px solid #ccc;
        box-shadow: -17px 17px 60px grey;
    }

    .toggle-menu-section h6 i {
        background-color: transparent;
        box-shadow: 0 0 0 white;
        margin-right: 0.4rem;
    }

    .welcome {
        width: 100%;
        display: flex;
        gap: 1rem;
        align-items: center;
        background-color: #d1cfcf;
    }

    .welcome-left-heading {
        width: 80%;
        padding: 1.3rem 0 0.7rem 1.3rem;
    }

    .welcome-left-heading h4 {
        font-weight: 700;
    }

    .close-btn {
        width: 20%;
        margin-left: 1.3rem;
        padding-left: 0.4rem;
    }

    .close-btn button {
        display: block;
        background-color: white;
        box-shadow: 0.5px 0.5px 3px grey;
        width: 2rem;
        height: 2rem;
        font-size: 1.35rem;
    }

    .Toggle-options {
        padding: 1.5rem 1px 5px 1.5rem;
        width: 100%;
        height: 100%;
        overflow: scroll;
    }

    .Toggle-options h6 {
        width: 95%;
        font-size: 1.2rem;
        padding: 0.3rem;
    }

    .Toggle-options a {
        text-decoration: none;
        color: var(--primary-color);
    }

    @keyframes slidemenu {
        from {
            transform: translateX(100%);
        }

        to {
            transform: translateX(0%);
        }
    }

    @keyframes slideupmenu {
        from {
            transform: translateX(0%);
        }

        to {
            transform: translateX(100%);
        }
    }

    #toggle-menu {
        display: none;
    }

    .slidemenu {
        animation: slidemenu 0.6s ease-in-out;
    }

    .slideupmenu {
        animation: slideupmenu 0.6s ease-in-out;
    }




    .footer-back-menu {
        width: 100%;
        height: 22rem;
        position: fixed;
        bottom: 0;
    }

    .footer-back-menu a {
        margin-right: 0.5rem;
        text-decoration: none;
        color: white;
    }

    .footer-back-menu a i {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.5rem;
        /* margin-bottom: 0.5rem; */
    }

    .signature-on-menu {
        font-family: "Allura", cursive;
        font-size: 1.5rem;
        font-weight: 600;
        transform: rotate(-8deg);
    }


    .bi-number-circle-fill{
        width: 10px;
        height: 10px;
        background-color: var(--primary-color);
        border-radius: 50%;
        color: white;
        padding-left: 2.5px;
        padding-top: 3.5px;
        padding-bottom: 3.5px;
        font-size: 11px;
    
    }


    /* cartoon image */

    .image-container-cartoon img {
        display: none;
    }

    .image-container-cartoon2 img {
        display: none;
    }

    /* main content section */
    .mainContent {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        gap: 0rem;
        /* border: 2px solid black; */
        margin-top: 3rem;
    }

    .leftContainerSection {
        width: 100%;
        height: 100%;
        margin-bottom: 1rem;
    }

    .leftContainerSection .box {
        width: 100%;
        height: 100%;
        border: 2px solid hsl(0, 0%, 80%);
        text-align: center;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.5);
    }


    .leftContainerSection .box .ProfileImage {
        width: 100%;
        height: 24%;
        margin-bottom: 0.7rem;
        padding-top: 0.6rem;
        /* border: 2px solid purple; */
    }

    .ProfileImage img {
        position: relative;
        width: 54%;
    }

    .socialMediaIcons a {
        font-size: 1.8rem;
    }

    .icon-border {
        width: 2.9rem;
        height: 2.9rem;
        margin: 0 0.6rem;
        padding-top: 2px;
    }

    .person-details {
        line-height: 1.1;
    }

    .person-details:last-child {
        border-bottom: none;
    }

    /* download cv button */
    .btn-clr {
        margin-bottom: 1.8rem;
    }


    .MiddleContainerSection {
        width: 100%;
        height: 100%;
    }

    .about-heading {
        display: flex;
        gap: 1.3rem;
    }

    .about-heading h1 {
        font-weight: 700;
        font-size: 2.5rem;
    }

    .what-i-do h3 {
        font-size: 1.7rem;
    }

    .all-skills {
        display: block;
        margin-bottom: 1rem;
    }

    .skill-set {
        display: block;
        width: 100%;
        height: 20rem;
        padding: 15px;
        margin-bottom: 1rem;
    }

    .skill-left-icon-section {
        width: 18%;
        margin: 0.7rem auto;
    }

    .skill-left-icon-section img {
        width: 100%;
        padding-top: 0.2rem;
    }

    .skills-left-details-section {
        width: 100%;
    }

    .skills-left-details-section h6 {
        font-weight: 700;
        font-size: 1.35rem;
        text-align: center;
    }

    .skills-left-details-section p {
        font-weight: 400;
    }


    /* education section */
    .all-education-section {
        display: block;
        width: 100%;
    }

    .education-section {
        display: flex;
        width: 100%;
        height: 13vh;
        gap: 1.3rem;
        margin-bottom: 0.8rem;
    }

    .education-section i {
        font-size: 2rem;
    }

    /* right section display none for mobile view */
    .RightContainerSection {
        display: none;
    }

    /* hr styling */

    .hr-style {
        width: 60%;
        margin: 0.8rem auto;
    }


    /* Project Section starts */

    .project-section {
        width: 100%;
        padding-left: 0;
        /* border: 3px solid purple; */
    }

    .project-section .box {
        width: 100%;
        height: 100%;
        padding-bottom: 2rem;
    }

    .project-card img {
        width: 100%;
        padding: 0.4rem;
    }

    .project-section .box h4 {
        padding-top: 0.6rem;
        padding-left: 0.7rem;
        line-height: 0.4;
    }

    .project-section .box span {
        font-size: 13.5px;
        padding-left: 0.7rem;
    }

    .tag {
        background-color: var(--primary-color);
        color: white;
        padding: 0.2rem;
        width: 97%;
        margin-bottom: 0.5rem;
    }

    .tag h6 {
        padding-left: 0.7rem;
        padding-top: 0.4rem;
    }

    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        width: 100%;
        height: 100%;
    }



    .view-more {
        font-size: 13px;
        text-decoration: none;
    }

    .youtube-section {
        margin-top: 0.5rem;
        width: 100%;
        height: 100%;
        padding-left: 0;
    }

    .youtube-section .box {
        height: 100%;
    }

    .youtube-section .box h4 {
        width: 96%;
        padding-top: 1rem;
        padding-left: 0.9rem;
        font-size: 17px;
        margin-bottom: 2rem;
    }

    .swiper-slide a {
        text-decoration: none;
        color: var(--primary-color);
    }



    /* Progress CSS */

    .progress-body {
        margin-top: 1.5rem;
        margin-bottom: 2rem;
    }

    .progress-heading {
        background-color: rgba(222, 221, 221, 0.958);
    }

    .progress-heading h3 {
        font-weight: 800;
        font-size: 2rem;
    }

    .leftskillsNames {
        width: 46%;
        padding-top: 0.4rem;
    }

    .leftskillsNames h4 {
        font-size: 15.5px;
    }
    .leftskillsNames i {
        margin-right: 0.4rem;
    }
    .leftskillsNames h4 span {
        margin-right: 0.4rem;
    }

    .progress {
        width: 54%;
    }

    .progress-bar {
        background-color: var(--primary-color) !important;
    }


    /* Blogs CSS */
    .blogs-section {
        margin-top: 1.5rem;
        display: block;
    }

    .blogs-section .box {
        margin-bottom: 1rem;
    }

    .blogs-image img {
        width: 100%;
    }

    .blogs-details h6 {
        font-size: 15px;
        height: 4.1rem;
    }

    .blogs-heading-description h4 {
        font-size: 16.7px;
    }

    .hire {
        width: 100%;
        background-color: var(--secondary-color);
        height: 11rem;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .hire h2 {
        padding-top: 3rem;
        font-size: 1.5rem;
    }

    .hire button {
        position: relative;
        left: 40%;
        margin-top: 0.6rem;
        font-weight: 600;
    }


    /* footer section CSS */
    .footer-bg {
        background-color: var(--primary-color);
        z-index: 999;
    }

    .footer-display {
        display: block;
    }

    .footer-contact p {
        font-size: 13.5px;
        font-weight: 400;
    }

    .signature {
        font-family: "Allura", cursive;
        font-size: 2.5rem;
        padding-top: 1rem;
        transform: rotate(-8deg);
    }

    .follow-me {
        margin-right: 0;
    }

    .follow-me p {
        width: 100%;
        text-align: left;
        font-size: 20px;
        font-weight: 600;
        margin-top: 1rem;
    }

    .follow-me a {
        font-size: 2rem;
        margin: 0.4rem 0.6rem;
    }

    .follow-me a:first-child {
        margin-left: 0;
    }

    .all-rights-reserved p,
    ul {
        font-size: 11px;
        width: 50%;
    }

    .all-rights-reserved ul li a {
        padding: 0 0.3rem;
        text-decoration: none;
    }






    /* About us Page CSS here */

    .about-total-section {
        width: 100%;
        display: block;
        margin-top: 3rem;
        margin-bottom: 2rem;
    }

    .about-content{
        width: 100%;
        height: 100%;
    }
    
    .about-content-section {
        border: 2px solid #ccc;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.57);
    }

    .about-content .introduction h2 {
        padding: 1.5rem;
        font-weight: 700;
        font-size: 1.7rem;
    }

    .about-content .introduction p {
        width: 96%;
        padding-left: 1.5rem;
    }

    .education-and-skills {
        width: 100%;
        display: block;
    }

    .Education {
        width: 100%;
    }

    .Education .box {
        padding-top: 1rem;
        border-radius: 5px;
        margin-top: 1.2rem;
    }

    .Education .box ul {
        width: 96%;
    }

    .Education .box ul li {
        font-size: 14px;
        padding: 0.5rem 0;
    }

    .side-cartoon-image img {
        display: none;
    }

    .ul-skills-set .progress-section .leftskillsNames {
        width: 40%;
        padding-top: 0.5rem;
        padding-bottom: 0.1rem;
    }

    .ul-skills-set .progress-section .leftskillsNames h4 {
        font-size: 14.5px;
    }

    .ul-skills-set .progress-section .progress {
        width: 58%;
        margin-right: 0;
    }

    .contact-about {
        padding: 1.5rem;
    }

    .about-right-section {
        display: none;
    }


    .texture-img-on-hire-onaboutpage img:nth-child(1) {
        position: absolute;
        top: 349%;
        left: -18%;
        width: 56%;
        opacity: 0.2;
        filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
    }

    .texture-img-on-hire-onaboutpage img:nth-child(2) {
        position: absolute;
        top: 351%;
        left: 63%;
        width: 37%;
        opacity: 0.2;
        filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
    }




    /* Work page css starts here ! */

    .op,
    .op2,
    .op3,
    .op4,
    .op5,
    .work-right-section {
        display: none;
    }

    .desc-points li{
        line-height: 1.5;
    }
    .desc-points{
        line-height: normal;
    }

    .work-section {
        width: 100%;
        display: block;
        margin-top: 3rem;
    }

    .work-left-section {
        width: 100%;
    }

    .work-left-section .myproject-heading {
        padding: 1.5rem;
        font-weight: 700;
        font-size: 1.6rem;
    }

    .project-display {
        display: block;
        gap: 0rem;
        padding-left: 1.1rem;
    }

    .project-display .box {
        width: 100%;
        height: 100%;
    }

    .project-display:last-child .box {
        width: 100%;
        height: 100%;
    }

    .self-work {
        font-weight: 400;
        font-size: 12.7px;
    }

    .technologies-used span {
        font-size: 13.5px;
        font-weight: 400;
        color: #3d3d3d;
    }

    .Description-used {
        line-height: 0.5;
    }

    .project-display .box ul li p {
        width: 97%;
    }

    .project-view-more a {
        text-decoration: none;
        color: var(--primary-color);
    }

    .project-view-more a p {
        margin-top: 0.2rem;
        padding-left: 0.2rem;
        font-weight: 600;
    }



    .Presentational-skills {
        padding: 1.1rem;
        margin: 1.5rem;
    }

    .Presentation-section .box {
        width: 100%;
        height: 100%;
        border: 2px solid #ccc;
        border-radius: 5px;
        background-color: white;
    }


    .texture-img-on-hire-onworkpage img:nth-child(1) {
        position: absolute;
        top: 342%;
        left: -20%;
        width: 56%;
        opacity: 0.2;
        filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
    }

    .texture-img-on-hire-onworkpage img:nth-child(2) {
        position: absolute;
        top: 344%;
        left: 64%;
        width: 36%;
        opacity: 0.2;
        filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
    }





    /* Blogs Section CSS */

    .blogsection {
        width: 100%;
        display: block;
        margin-top: 2rem;
        gap: 0;
    }

    .heading-on-carousel {
        position: absolute;
        top: 35%;
        left: 12%;
        width: 72%;
        font-size: 2.4rem;
    }

    .blog-box {
        width: 100%;
        height: 100%;
        border: 0px solid #ccc;
    }

    .blog-image img {
        width: 100%;
        height: 24rem;
        transform: scale(1.06);
        margin-top: 2rem;
        margin-bottom: 0.5rem;

    }

    .blog-left-halfbyhalf {
        display: block;
        gap: 0;
        margin-top: 0;
    }

    .blog-2-boxes {
        width: 100%;
        height: 100%;
        margin-top: 0;
        margin-bottom: 0.8rem;
    }

    .blog-2-boxes a {
        text-decoration: none;
        color: var(--primary-color);
    }

    .blog-2-boxes a:hover {
        color: var(--primary-color);
    }

    .blog-2-boxes img {
        width: 100%;
        height: 100%;
    }

    .blog-style-after-two-blogs-boxes {
        margin-top: 1rem;
        width: 100%;
        display: block;
        gap: 0;
    }

    .left-page-half-blog {
        width: 100%;
        height: 100%;
    }

    .right-page-half-blog {
        width: 100%;
        height: 100%;
    }

    .right-page-half-blog .blog-about {
        width: 100%;
        background-color: rgb(214, 219, 224);
        padding-bottom: 0.5rem;
        margin: 0.5rem 0;
    }

    .blog-about h3 {
        padding: 1.1rem;
        padding-left: 1.5rem;
        padding-bottom: 0;
        font-family: 'Times New Roman', Times, serif;
        font-weight: 800;
    }

    .blog-about p {
        width: 95%;
        padding-left: 1.5rem;
        font-size: 16px;
        font-weight: 500;
    }

    .recent-blog-posts a {
        text-decoration: none;
        color: var(--primary-color);
    }

    .recent-blog-posts a:hover {
        color: rgb(10, 150, 129);
    }

    .image-and-desc {
        display: flex;
        font-style: normal;
        font-family: 'Times New Roman', Times, serif;
        gap: 1rem;
    }

    .image-and-desc img {
        width: 25%;
    }

    .only-desc h4 {
        font-size: 16px;
        font-weight: 600;
    }

    .only-desc span {
        font-size: 13px;
    }

    .social-again {
        margin-top: 2rem;
        background-color: rgb(214, 219, 224);
        padding: 1.1rem;
    }

    .social-again a {
        text-decoration: none;
        color: var(--primary-color);
        font-size: 1.7rem;
    }

    .social-again a:hover {
        color: rgb(10, 150, 129);
    }

    .blog-right-section {
        display: none;
    }



    /* Contact Page Section CSS */

    .contact-section {
        display: block;
        gap: 0;
        margin-top: 2.8rem;
    }

    .contact-social-again a {
        font-size: 1.7rem;
        margin-right: 1.25rem;
        padding-bottom: 15px;
        text-decoration: none;
        color: var(--primary-color);
    }

    .contact-details {
        margin-top: 1rem;
        display: block;
        width: 97%;
        gap: 0;
        padding-bottom: 15px;
    }

    .contact-email {
        width: 97%;
        border: 2px solid #ccc;
        border-radius: 5px;
        padding: 1.6rem;
        padding-left: 1.1rem;
        margin-bottom: 1rem;
    }

    .contact-phone {
        width: 97%;
        border: 2px solid #ccc;
        border-radius: 5px;
        padding: 1.6rem;
        padding-left: 1.1rem;
        margin-bottom: 1rem;
    }

    .download-cv {
        justify-content: center;
        width: 100%;
    }

    .jus {
        margin: 0rem 30%;
        width: 43%;
        margin-bottom: 5rem;
    }

    .or-style {
        display: flex;
        gap: 1.5rem;
        margin: 1.5rem 0;
    }

    .or-style hr {
        width: 40%;
    }

    .or-style p {
        font-size: 17px;
        font-weight: 600;
    }

    .contact-right-section {
        display: none;
    }

}






@media screen and (min-width: 601px) and (max-width: 767px) {


    .navbar-body {
        height: 6.5rem;
        position: sticky;
        top: 0;
        z-index: 9999;
        background-color: transparent;
        transition: background-color 0.3s ease;
    }

    .navbar-body.scrolled {
        background-color: rgb(202, 201, 201)
            /* Updated background color when scrolled */
    }

    .logo a h1 {
        margin-left: 2.4rem;
        font-size: 2.6rem;
    }

    .logo-texture img {
        position: absolute;
        top: 5%;
        left: 4%;
        width: 32%;
    }

    .texture-img-on-hire img:nth-child(1),
    .texture-img-on-hire img:nth-child(2),
    .texture-img-on-hire-onaboutpage img:nth-child(1),
    .texture-img-on-hire-onaboutpage img:nth-child(2),
    .texture-img-on-hire-onworkpage img:nth-child(1),
    .texture-img-on-hire-onworkpage img:nth-child(2) {
        display: none;
    }


    .hire {
        background-image: url("textureimage-hire1.png"), url("textureimage-hire1.png");
        background-position: 6%, 90%;
        background-size: contain, contain;
        background-repeat: no-repeat;
        background-blend-mode: difference;
    }

    .MenuButton {
        margin-right: 2.4rem;
    }

    .MenuButton button {
        display: block;
        background-color: white;
        box-shadow: 0.5px 0.5px 3px grey;
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.4rem;
    }

    .toggle-menu-section {
        display: none;
    }

    .MenuButton i,
    button {
        margin-right: 0.7rem;
    }


    /* Menu button toggle functionality */

    .toggle-menu-section {
        position: fixed;
        top: 0%;
        right: 0%;
        z-index: 777;
        width: 68%;
        height: 102vh;
        background-color: #f3f1f1;
        align-items: center;
        border: 2px solid #ccc;
        box-shadow: -17px 17px 60px grey;
    }

    .toggle-menu-section h6 i {
        background-color: transparent;
        box-shadow: 0 0 0 white;
        margin-right: 0.6rem;
    }

    .welcome {
        width: 100%;
        display: flex;
        gap: 1rem;
        align-items: center;
        background-color: #d1cfcf;
    }

    .welcome-left-heading {
        width: 80%;
        padding: 1.3rem;
        padding-top: 1.8rem;
    }

    .welcome-left-heading h4 {
        font-weight: 700;
        font-size: 1.6rem;
    }

    .close-btn {
        width: 20%;
        margin-left: 0rem;
        padding-left: 0rem;
    }

    .close-btn button {
        display: block;
        background-color: white;
        box-shadow: 0.5px 0.5px 3px grey;
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.8rem;
    }

    .Toggle-options {
        padding: 1.5rem 1px 10px 1.5rem;
        width: 100%;
        height: 100%;
        overflow: scroll;
    }

    .Toggle-options h6 {
        width: 95%;
        font-size: 1.1rem;
        padding: 0.5rem;
    }

    .Toggle-options a {
        text-decoration: none;
        color: var(--primary-color);
    }

    @keyframes slidemenu {
        from {
            transform: translateX(100%);
        }

        to {
            transform: translateX(0%);
        }
    }

    @keyframes slideupmenu {
        from {
            transform: translateX(0%);
        }

        to {
            transform: translateX(100%);
        }
    }

    #toggle-menu {
        display: none;
    }

    .slidemenu {
        animation: slidemenu 0.6s ease-in-out;
    }

    .slideupmenu {
        animation: slideupmenu 0.6s ease-in-out;
    }




    .footer-back-menu {
        width: 90%;
        height: 22rem;
        position: fixed;
        bottom: 0;
    }

    .footer-back-menu a {
        margin-right: 0.5rem;
        text-decoration: none;
        color: white;
    }

    .footer-back-menu a i {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.4rem;
        margin-right: 0.2rem;
        /* padding: 5px; */
    }

    .signature-on-menu {
        font-family: "Allura", cursive;
        font-size: 1.8rem;
        font-weight: 500;
        transform: rotate(-8deg);
    }

    .follow-on-medium-screen {
        padding-top: 1.7rem !important;
        font-size: 1.6rem;
    }




    /* cartoon image */

    .image-container-cartoon img {
        display: none;
    }

    .image-container-cartoon2 img {
        display: none;
    }

    /* main content section */
    .mainContent {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        gap: 0rem;
        /* border: 2px solid black; */
        margin-top: 8rem;
    }

    .leftContainerSection {
        width: 100%;
        height: 100%;
        margin-bottom: 1rem;
    }

    .leftContainerSection .box {
        width: 100%;
        height: 100%;
        border: 2px solid #ccc;
        text-align: center;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.5);
    }


    .leftContainerSection .box .ProfileImage {
        width: 100%;
        height: 11.4rem;
        margin-bottom: 0.7rem;
        /* border: 2px solid purple; */
    }

    .ProfileImage img {
        position: absolute;
        top: -2.4%;
        left: 32.5%;
        width: 35%;
    }


    .socialMediaIcons a {
        font-size: 1.6rem;
    }

    .icon-border {
        width: 2.6rem;
        height: 2.6rem;
        margin: 0 0.6rem;
        padding-top: 0px;
    }

    .person-details {
        line-height: 1.1;
    }

    .person-details:last-child {
        border-bottom: none;
    }

    /* download cv button */
    .btn-clr {
        margin-bottom: 1.8rem;
    }


    .MiddleContainerSection {
        width: 100%;
        height: 100%;
    }

    .about-heading {
        display: flex;
        gap: 1.3rem;
    }

    .about-heading h1 {
        font-weight: 700;
        font-size: 2.5rem;
    }

    .what-i-do h3 {
        font-size: 1.7rem;
    }

    .all-skills {
        display: block;
        margin-bottom: 1rem;
    }

    .skill-set {
        display: block;
        width: 100%;
        height: 20rem;
        padding: 15px;
        margin-bottom: 1rem;
    }

    .skill-left-icon-section {
        width: 18%;
        margin: 0.7rem auto;
    }

    .skill-left-icon-section img {
        width: 100%;
        padding-top: 0.2rem;
    }

    .skills-left-details-section {
        width: 100%;
    }

    .skills-left-details-section h6 {
        font-weight: 700;
        font-size: 1.35rem;
        text-align: center;
    }

    .skills-left-details-section p {
        font-weight: 400;
    }


    /* education section */
    .all-education-section {
        display: block;
        width: 100%;
    }

    .education-section {
        display: flex;
        width: 100%;
        height: 13vh;
        gap: 1.3rem;
        margin-bottom: 0.8rem;
    }

    .education-section i {
        font-size: 2rem;
    }

    /* right section display none for mobile view */
    .RightContainerSection {
        display: none;
    }

    /* hr styling */

    .hr-style {
        width: 60%;
        margin: 0.8rem auto;
    }


    /* Project Section starts */

    .project-section {
        width: 100%;
        padding-left: 0;
        /* border: 3px solid purple; */
    }

    .project-section .box {
        width: 100%;
        height: 100%;
    }

    .project-card img {
        width: 100%;
        padding: 0.4rem;
    }

    .project-section .box h4 {
        padding-top: 0.6rem;
        padding-left: 0.7rem;
        line-height: 0.4;
    }

    .project-section .box span {
        font-size: 13.5px;
        padding-left: 0.7rem;
    }

    .tag {
        background-color: var(--primary-color);
        color: white;
        padding: 0.2rem;
        width: 97%;
        margin-bottom: 1rem;
    }

    .tag h6 {
        padding-left: 0.7rem;
        padding-top: 0.4rem;
    }

    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        width: 100%;
        height: 100%;
    }



    .view-more {
        font-size: 13px;
        text-decoration: none;
    }

    .youtube-section {
        margin-top: 0.5rem;
        width: 100%;
        height: 100%;
        padding-left: 0;
    }

    .youtube-section .box {
        height: 88%;
    }

    .youtube-section .box h4 {
        width: 96%;
        padding-top: 1rem;
        padding-left: 0.9rem;
        font-size: 17px;
        margin-bottom: 2rem;
    }

    .swiper-slide a {
        text-decoration: none;
        color: var(--primary-color);
    }



    /* Progress CSS */

    .progress-body {
        margin-top: 1.5rem;
        margin-bottom: 2rem;
    }

    .progress-heading {
        background-color: rgba(222, 221, 221, 0.958);
    }

    .progress-heading h3 {
        font-weight: 800;
        font-size: 2rem;
    }

    .leftskillsNames {
        width: 42%;
        padding-top: 0.4rem;
    }

    .leftskillsNames h4 {
        font-size: 16px;
    }

    .progress {
        width: 58%;
    }

    .progress-bar {
        background-color: var(--primary-color) !important;
    }


    /* Blogs CSS */
    .blogs-section {
        margin-top: 1.5rem;
        display: block;
    }

    .blogs-section .box {
        margin-bottom: 1rem;
    }

    .blogs-image img {
        width: 100%;
    }

    .blogs-details h6 {
        font-size: 15px;
        height: 4.1rem;
    }

    .blogs-heading-description h4 {
        font-size: 16.7px;
    }

    .hire {
        width: 100%;
        background-color: var(--secondary-color);
        height: 11rem;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .hire h2 {
        padding-top: 3rem;
        font-size: 1.5rem;
    }

    .hire button {
        position: relative;
        left: 40%;
        margin-top: 0.6rem;
        font-weight: 600;
    }


    /* footer section CSS */
    .footer-bg {
        background-color: var(--primary-color);
        z-index: 999;
    }

    .footer-display {
        display: block;
    }

    .footer-contact p {
        font-size: 13.5px;
        font-weight: 400;
    }

    .signature {
        font-family: "Allura", cursive;
        font-size: 2.5rem;
        padding-top: 1rem;
        transform: rotate(-8deg);
    }

    .follow-me {
        margin-right: 0;
    }

    .follow-me p {
        width: 100%;
        text-align: left;
        font-size: 20px;
        font-weight: 600;
        margin-top: 1rem;
    }

    .follow-me a {
        font-size: 2rem;
        margin: 0.4rem 0.6rem;
    }

    .follow-me a:first-child {
        margin-left: 0;
    }

    .all-rights-reserved p,
    ul {
        font-size: 11px;
        width: 50%;
    }

    .all-rights-reserved ul li a {
        padding: 0 0.3rem;
        text-decoration: none;
    }






    /* About us Page CSS here */

    .about-total-section {
        width: 100%;
        display: block;
        margin-top: 3rem;
        margin-bottom: 2rem;
    }

    .about-content{
        width: 100%;
        height: 100%;
    }
    
    .about-content-section {
        border: 2px solid #ccc;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.57);
    }

    .about-content .introduction h2 {
        padding: 1.5rem;
        font-weight: 700;
        font-size: 1.7rem;
    }

    .about-content .introduction p {
        width: 96%;
        padding-left: 1.5rem;
    }

    .education-and-skills {
        width: 100%;
        display: block;
    }

    .Education {
        width: 100%;
    }

    .Education .box {
        padding-top: 1rem;
        border-radius: 5px;
        margin-top: 1.2rem;
    }

    .Education .box ul {
        width: 96%;
    }

    .Education .box ul li {
        font-size: 14px;
        padding: 0.5rem 0;
    }

    .side-cartoon-image img {
        display: none;
    }

    .ul-skills-set .progress-section .leftskillsNames {
        width: 40%;
        padding-top: 0.5rem;
        padding-bottom: 0.1rem;
    }

    .ul-skills-set .progress-section .leftskillsNames h4 {
        font-size: 14.5px;
    }

    .ul-skills-set .progress-section .progress {
        width: 58%;
        margin-right: 0;
    }

    .contact-about {
        padding: 1.5rem;
    }

    .about-right-section {
        display: none;
    }


    .texture-img-on-hire-onaboutpage img:nth-child(1) {
        position: absolute;
        top: 349%;
        left: -18%;
        width: 56%;
        opacity: 0.2;
        filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
    }

    .texture-img-on-hire-onaboutpage img:nth-child(2) {
        position: absolute;
        top: 351%;
        left: 63%;
        width: 37%;
        opacity: 0.2;
        filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
    }




    /* Work page css starts here ! */

    .op,
    .op2,
    .op3,
    .op4,
    .op5,
    .work-right-section {
        display: none;
    }

    .desc-points li{
        line-height: 1.5;
    }
    .desc-points{
        line-height: normal;
    }


    .work-section {
        width: 100%;
        display: block;
        margin-top: 3rem;
    }

    .work-left-section {
        width: 100%;
    }

    .work-left-section .myproject-heading {
        padding: 1.5rem;
        font-weight: 700;
        font-size: 1.6rem;
    }

    .project-display {
        display: block;
        gap: 0rem;
        padding-left: 1.1rem;
    }

    .project-display .box {
        width: 100%;
        height: 100%;
    }

    .project-display:last-child .box {
        width: 100%;
        height: 100%;
    }

    .self-work {
        font-weight: 400;
        font-size: 12.7px;
    }

    .technologies-used span {
        font-size: 13.5px;
        font-weight: 400;
        color: #3d3d3d;
    }

    .Description-used {
        line-height: 0.5;
    }

    .project-display .box ul li p {
        width: 97%;
    }

    .project-view-more a {
        text-decoration: none;
        color: var(--primary-color);
    }

    .project-view-more a p {
        margin-top: 0.2rem;
        padding-left: 0.2rem;
        font-weight: 600;
    }



    .Presentational-skills {
        padding: 1.1rem;
        margin: 1.5rem;
    }

    .Presentation-section .box {
        width: 100%;
        height: 100%;
        border: 2px solid #ccc;
        border-radius: 5px;
        background-color: white;
    }


    .texture-img-on-hire-onworkpage img:nth-child(1) {
        position: absolute;
        top: 342%;
        left: -20%;
        width: 56%;
        opacity: 0.2;
        filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
    }

    .texture-img-on-hire-onworkpage img:nth-child(2) {
        position: absolute;
        top: 344%;
        left: 64%;
        width: 36%;
        opacity: 0.2;
        filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
    }





    /* Blogs Section CSS */

    .blogsection {
        width: 100%;
        display: block;
        margin-top: 2rem;
        gap: 0;
    }

    .heading-on-carousel {
        position: absolute;
        top: 35%;
        left: 12%;
        width: 72%;
        font-size: 2.4rem;
    }

    .blog-box {
        width: 100%;
        height: 100%;
        border: 0px solid #ccc;
    }

    .blog-image img {
        width: 100%;
        height: 24rem;
        transform: scale(1.06);
        margin-top: 2rem;
        margin-bottom: 0.5rem;

    }

    .blog-left-halfbyhalf {
        display: block;
        gap: 0;
        margin-top: 0;
    }

    .blog-2-boxes {
        width: 100%;
        height: 100%;
        margin-top: 0;
        margin-bottom: 0.8rem;
    }

    .blog-2-boxes a {
        text-decoration: none;
        color: var(--primary-color);
    }

    .blog-2-boxes a:hover {
        color: var(--primary-color);
    }

    .blog-2-boxes img {
        width: 100%;
        height: 100%;
    }

    .blog-style-after-two-blogs-boxes {
        margin-top: 1rem;
        width: 100%;
        display: block;
        gap: 0;
    }

    .left-page-half-blog {
        width: 100%;
        height: 100%;
    }

    .right-page-half-blog {
        width: 100%;
        height: 100%;
    }

    .right-page-half-blog .blog-about {
        width: 100%;
        background-color: rgb(214, 219, 224);
        padding-bottom: 0.5rem;
        margin: 0.5rem 0;
    }

    .blog-about h3 {
        padding: 1.1rem;
        padding-left: 1.5rem;
        padding-bottom: 0;
        font-family: 'Times New Roman', Times, serif;
        font-weight: 800;
    }

    .blog-about p {
        width: 95%;
        padding-left: 1.5rem;
        font-size: 16px;
        font-weight: 500;
    }

    .recent-blog-posts a {
        text-decoration: none;
        color: var(--primary-color);
    }

    .recent-blog-posts a:hover {
        color: rgb(10, 150, 129);
    }

    .image-and-desc {
        display: flex;
        font-style: normal;
        font-family: 'Times New Roman', Times, serif;
        gap: 1rem;
    }

    .image-and-desc img {
        width: 25%;
    }

    .only-desc h4 {
        font-size: 16px;
        font-weight: 600;
    }

    .only-desc span {
        font-size: 13px;
    }

    .social-again {
        margin-top: 2rem;
        background-color: rgb(214, 219, 224);
        padding: 1.1rem;
    }

    .social-again a {
        text-decoration: none;
        color: var(--primary-color);
        font-size: 1.7rem;
    }

    .social-again a:hover {
        color: rgb(10, 150, 129);
    }

    .blog-right-section {
        display: none;
    }



    /* Contact Page Section CSS */

    .contact-section {
        display: block;
        gap: 0;
        margin-top: 2.8rem;
    }

    .contact-social-again a {
        font-size: 1.7rem;
        margin-right: 1.25rem;
        padding-bottom: 15px;
        text-decoration: none;
        color: var(--primary-color);
    }

    .contact-details {
        margin-top: 1rem;
        display: block;
        width: 97%;
        gap: 0;
        padding-bottom: 15px;
    }

    .contact-email {
        width: 97%;
        border: 2px solid #ccc;
        border-radius: 5px;
        padding: 1.6rem;
        padding-left: 1.1rem;
        margin-bottom: 1rem;
    }

    .contact-phone {
        width: 97%;
        border: 2px solid #ccc;
        border-radius: 5px;
        padding: 1.6rem;
        padding-left: 1.1rem;
        margin-bottom: 1rem;
    }

    .download-cv {
        justify-content: center;
        width: 100%;
    }

    .jus {
        margin: 0rem 30%;
        width: 43%;
        margin-bottom: 5rem;
    }

    .or-style {
        display: flex;
        gap: 1.5rem;
        margin: 1.5rem 0;
    }

    .or-style hr {
        width: 40%;
    }

    .or-style p {
        font-size: 17px;
        font-weight: 600;
    }

    .contact-right-section {
        display: none;
    }

}





@media screen and (min-width: 768px) and (max-width: 950px) {

    .navbar-body {
        height: 7.5rem;
        position: sticky;
        top: 0;
        z-index: 9999;
        background-color: transparent;
        transition: background-color 0.3s ease;
    }

    .navbar-body.scrolled {
        background-color: rgb(202, 201, 201)
            /* Updated background color when scrolled */
    }

    .logo a h1 {
        margin-left: 4rem;
        font-size: 2.8rem;
    }

    .logo-texture img {
        position: absolute;
        top: 4%;
        left: 5%;
        width: 30%;
    }

    .texture-img-on-hire img:nth-child(1),
    .texture-img-on-hire img:nth-child(2),
    .texture-img-on-hire-onaboutpage img:nth-child(1),
    .texture-img-on-hire-onaboutpage img:nth-child(2),
    .texture-img-on-hire-onworkpage img:nth-child(1),
    .texture-img-on-hire-onworkpage img:nth-child(2) {
        display: none;
    }


    .hire {
        background-image: url("textureimage-hire1.png"), url("textureimage-hire1.png");
        background-position: 6%, 90%;
        background-size: contain, contain;
        background-repeat: no-repeat;
        background-blend-mode: difference;
    }

    .MenuButton {
        margin-right: 3.6rem;
    }

    .MenuButton button {
        display: block;
        background-color: white;
        box-shadow: 0.5px 0.5px 3px grey;
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.6rem;
    }

    .toggle-menu-section {
        display: none;
    }

    .MenuButton i,
    button {
        margin-right: 0.7rem;
    }


    /* Menu button toggle functionality */

    .toggle-menu-section {
        position: fixed;
        top: 0%;
        right: 0%;
        z-index: 777;
        width: 70%;
        height: 102vh;
        background-color: #f3f1f1;
        align-items: center;
        border: 2px solid #ccc;
        box-shadow: -17px 17px 60px grey;
    }

    .toggle-menu-section h6 i {
        background-color: transparent;
        box-shadow: 0 0 0 white;
        margin-right: 0.6rem;
    }

    .welcome {
        width: 100%;
        display: flex;
        gap: 1rem;
        align-items: center;
        background-color: #d1cfcf;
    }

    .welcome-left-heading {
        width: 80%;
        padding: 1.4rem;
        padding-top: 1.8rem;
    }

    .welcome-left-heading h4 {
        font-weight: 700;
        font-size: 1.8rem;
    }

    .close-btn {
        width: 20%;
        margin-left: 0.5rem;
        padding-left: 0rem;
    }

    .close-btn button {
        display: block;
        background-color: white;
        box-shadow: 0.5px 0.5px 3px grey;
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.6rem;
    }

    .Toggle-options {
        padding: 1.5rem 1px 10px 1.5rem;
        width: 100%;
        height: 100%;
        overflow: scroll;
    }

    .Toggle-options h6 {
        width: 95%;
        font-size: 1.56rem;
        padding: 0.5rem;
    }

    .Toggle-options a {
        text-decoration: none;
        color: var(--primary-color);
    }

    @keyframes slidemenu {
        from {
            transform: translateX(100%);
        }

        to {
            transform: translateX(0%);
        }
    }

    @keyframes slideupmenu {
        from {
            transform: translateX(0%);
        }

        to {
            transform: translateX(100%);
        }
    }

    #toggle-menu {
        display: none;
    }

    .slidemenu {
        animation: slidemenu 0.6s ease-in-out;
    }

    .slideupmenu {
        animation: slideupmenu 0.6s ease-in-out;
    }




    .footer-back-menu {
        width: 90%;
        height: 24.6rem;
        position: fixed;
        bottom: 0;
    }

    .footer-back-menu a {
        margin-right: 0.5rem;
        text-decoration: none;
        color: white;
    }

    .footer-back-menu a i {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.6rem;
        margin-right: 0.2rem;
        /* padding: 5px; */
    }

    .signature-on-menu {
        font-family: "Allura", cursive;
        font-size: 2.5rem;
        font-weight: 500;
        transform: rotate(-8deg);
    }

    .follow-on-medium-screen {
        padding-top: 1.7rem !important;
        font-size: 1.6rem;
    }




    /* cartoon image */

    .image-container-cartoon img {
        display: none;
    }

    .image-container-cartoon2 img {
        display: none;
    }

    /* main content section */
    .mainContent {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        gap: 0rem;
        /* border: 2px solid black; */
        margin-top: 8rem;
    }

    .leftContainerSection {
        width: 100%;
        height: 100%;
        margin-bottom: 1rem;
    }

    .leftContainerSection .box {
        width: 100%;
        height: 100%;
        border: 2px solid #ccc;
        text-align: center;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.5);
    }

    .leftContainerSection .box .ProfileImage {
        width: 100%;
        height: 15.5rem;
        margin-bottom: 0.7rem;
        /* border: 2px solid purple; */
    }

    .ProfileImage img {
        position: absolute;
        top: -2.6%;
        left: 32.5%;
        width: 35%;
    }


    .socialMediaIcons a {
        font-size: 1.8rem;
    }

    .icon-border {
        width: 2.8rem;
        height: 2.8rem;
        margin: 0 0.8rem;
        padding-top: 0px;
    }

    .person-details {
        line-height: 1.1;
    }

    .person-details:last-child {
        border-bottom: none;
    }

    .persondetails-medium-screen {
        width: 75%;
        margin-left: 12%;
    }

    /* download cv button */
    .btn-clr {
        margin-bottom: 1.8rem;
    }


    .MiddleContainerSection {
        width: 100%;
        height: 100%;
    }

    .about-heading {
        display: flex;
        gap: 1.3rem;
    }

    .about-heading h1 {
        font-weight: 700;
        font-size: 2.8rem;
    }

    .what-i-do h3 {
        font-size: 1.7rem;
    }

    .all-skills {
        display: block;
        margin-bottom: 1rem;
    }

    .skill-set {
        display: block;
        width: 100%;
        height: 20rem;
        padding: 15px;
        margin-bottom: 1rem;
    }

    .skill-left-icon-section {
        width: 18%;
        margin: 0.7rem auto;
    }

    .skill-left-icon-section img {
        width: 60%;
        padding-top: 0.2rem;
        margin-left: 1.4rem;
    }

    .skills-left-details-section {
        width: 100%;
    }

    .skills-left-details-section h6 {
        font-weight: 700;
        font-size: 1.5rem;
        text-align: center;
    }

    .skills-left-details-section p {
        font-weight: 400;
        font-size: 16px;
    }


    /* education section */
    .all-education-section {
        display: flex;
        width: 100%;
    }

    .education-section {
        display: flex;
        width: 100%;
        height: 13vh;
        gap: 0.8rem;
        margin-bottom: 0.8rem;
    }

    .education-section h5 {
        font-size: 1.3rem;
    }

    .education-section span {
        font-size: 0.8rem;
    }

    .education-section i {
        font-size: 1.7rem;
    }

    /* right section display none for mobile view */
    .RightContainerSection {
        display: none;
    }

    /* hr styling */

    .hr-style {
        width: 60%;
        margin: 0.8rem auto;
    }


    /* Project Section starts */

    .project-section {
        width: 100%;
        padding-left: 0;
        /* border: 3px solid purple; */
    }

    .project-section .box {
        width: 100%;
        height: 90%;
        /* border: 3px solid red; */
    }

    .project-card img {
        width: 100%;
        padding: 0.4rem;
    }

    .project-section .box h4 {
        padding-top: 0.6rem;
        padding-left: 0.7rem;
        line-height: 0.4;
    }

    .project-section .box span {
        font-size: 13.5px;
        padding-left: 0.7rem;
    }

    .tag {
        background-color: var(--primary-color);
        color: white;
        padding: 0.2rem;
        width: 97%;
    }

    .tag h6 {
        padding-left: 0.7rem;
        padding-top: 0.4rem;
    }

    .swiper {
        width: 100%;
        height: 23.6rem;
    }

    .swiper-slide {
        width: 100%;
    }



    .view-more {
        font-size: 13px;
        text-decoration: none;
    }

    .youtube-section {
        margin-top: 0.5rem;
        width: 100%;
        height: 100%;
        padding-left: 0;
    }

    .youtube-section .box {
        height: 88%;
    }

    .youtube-section .box h4 {
        width: 96%;
        padding-top: 1rem;
        padding-left: 0.9rem;
        font-size: 17px;
    }

    .swiper-slide a {
        text-decoration: none;
        color: var(--primary-color);
    }



    /* Progress CSS */

    .progress-body {
        margin-top: 1.5rem;
        margin-bottom: 2rem;
    }

    .progress-heading {
        background-color: rgba(222, 221, 221, 0.958);
    }

    .progress-heading h3 {
        font-weight: 700;
        font-size: 2rem;
    }

    .leftskillsNames {
        width: 30%;
        padding-top: 0.4rem;
    }

    .leftskillsNames h4 {
        font-size: 19px;
    }

    .progress {
        width: 70%;
    }

    .progress-bar {
        background-color: var(--primary-color) !important;
    }


    /* Blogs CSS */
    .blogs-section {
        margin-top: 1.5rem;
        display: block;
    }

    .blogs-section .box {
        margin-bottom: 1rem;
    }

    .blogs-image img {
        width: 100%;
    }

    .blogs-details h6 {
        font-size: 16px;
        height: 4.1rem;
    }

    .blogs-heading-description h4 {
        font-size: 19px;
        width: 97%;
    }

    .blogs-heading-description span {
        font-size: 16.5px;
        width: 97%;
    }

    .hire {
        width: 100%;
        background-color: var(--secondary-color);
        height: 11rem;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .hire h2 {
        padding-top: 3rem;
        font-size: 1.6rem;
    }

    .hire button {
        position: relative;
        left: 44%;
        margin-top: 0.6rem;
        font-weight: 600;
        font-size: 20px;
    }


    /* footer section CSS */
    .footer-bg {
        background-color: var(--primary-color);
        z-index: 999;
    }

    .footer-display {
        display: block;
    }

    .footer-contact p {
        font-size: 13.5px;
        font-weight: 400;
    }

    .signature {
        font-family: "Allura", cursive;
        font-size: 2.5rem;
        padding-top: 1rem;
        transform: rotate(-8deg);
    }

    .follow-me {
        margin-right: 0;
    }

    .follow-me p {
        width: 100%;
        text-align: left;
        font-size: 20px;
        font-weight: 600;
        margin-top: 1rem;
    }

    .follow-me a {
        font-size: 2rem;
        margin: 0.4rem 0.6rem;
    }

    .follow-me a:first-child {
        margin-left: 0;
    }

    .all-rights-reserved p,
    ul {
        font-size: 11px;
        width: 50%;
    }

    .all-rights-reserved ul li a {
        padding: 0 0.3rem;
        text-decoration: none;
    }






    /* About us Page CSS here */

    .about-total-section {
        width: 100%;
        display: block;
        margin-top: 3rem;
        margin-bottom: 2rem;
    }

    .about-content{
        width: 100%;
        height: 100%;
    }
    
    .about-content-section {
        border: 2px solid #ccc;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.57);
    }

    .about-content .introduction h2 {
        padding: 1.5rem;
        font-weight: 700;
        font-size: 1.8rem;
    }

    .about-content .introduction p {
        width: 96%;
        padding-left: 1.5rem;
        font-size: 1.1rem;
    }

    .education-and-skills {
        width: 100%;
        display: block;
    }

    .Education {
        width: 100%;
    }

    .Education .box {
        padding-top: 1rem;
        border-radius: 5px;
        margin-top: 1.2rem;
    }

    .Education .box ul {
        width: 96%;
    }

    .Education .box ul li {
        font-size: 1.1rem;
        padding: 0.5rem 0;
    }

    .side-cartoon-image img {
        display: none;
    }

    .ul-skills-set .progress-section .leftskillsNames {
        width: 35%;
        padding-top: 0.5rem;
        padding-bottom: 0.1rem;
    }

    .ul-skills-set .progress-section .leftskillsNames h4 {
        font-size: 1.3rem;
    }

    .ul-skills-set .progress-section .progress {
        width: 65%;
        margin-right: 0;
    }

    .contact-about {
        padding: 1.5rem;
    }

    .contact-about p {
        font-size: 1.1rem;
    }

    .about-right-section {
        display: none;
    }


    .texture-img-on-hire-onaboutpage img:nth-child(1) {
        position: absolute;
        top: 349%;
        left: -18%;
        width: 56%;
        opacity: 0.2;
        filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
    }

    .texture-img-on-hire-onaboutpage img:nth-child(2) {
        position: absolute;
        top: 351%;
        left: 63%;
        width: 37%;
        opacity: 0.2;
        filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
    }




    /* Work page css starts here ! */

    .op,
    .op2,
    .op3,
    .op4,
    .op5,
    .work-right-section {
        display: none;
    }

    
    .desc-points li{
        line-height: 1.5;
    }
    .desc-points{
        line-height: normal;
    }

    .work-section {
        width: 100%;
        display: block;
        margin-top: 3rem;
    }

    .work-left-section {
        width: 100%;
    }

    .work-left-section .myproject-heading {
        padding: 1.5rem;
        font-weight: 700;
        font-size: 1.6rem;
    }

    .project-display {
        display: block;
        gap: 0rem;
        padding-left: 1.1rem;
    }

    .project-display .box {
        width: 100%;
        height: 100%;
    }

    .project-display:last-child .box {
        width: 100%;
        height: 100%;
    }

    .project-display .box ul li h4 {
        font-size: 1.6rem;
    }

    .self-work {
        font-weight: 400;
        font-size: 1rem;
    }

    .technologies-used {
        font-size: 1.2rem;
    }

    .technologies-used span {
        font-size: 1rem;
        font-weight: 400;
        color: #3d3d3d;
    }

    .Description-used {
        line-height: 0.5;
        font-size: 1.2rem;
    }

    .project-display .box ul li p {
        width: 97%;
        font-size: 1rem;
    }

    .project-view-more a {
        text-decoration: none;
        color: var(--primary-color);
    }

    .project-view-more a p {
        margin-top: 0.2rem;
        padding-left: 0.2rem;
        font-weight: 600;
    }



    .Presentational-skills {
        padding: 1.1rem;
        margin: 1.5rem;
    }

    .Presentation-section .box {
        width: 100%;
        height: 100%;
        border: 2px solid #ccc;
        border-radius: 5px;
        background-color: white;
    }


    .texture-img-on-hire-onworkpage img:nth-child(1) {
        position: absolute;
        top: 342%;
        left: -20%;
        width: 56%;
        opacity: 0.2;
        filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
    }

    .texture-img-on-hire-onworkpage img:nth-child(2) {
        position: absolute;
        top: 344%;
        left: 64%;
        width: 36%;
        opacity: 0.2;
        filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
    }





    /* Blogs Section CSS */

    .blogsection {
        width: 100%;
        display: block;
        margin-top: 2rem;
        gap: 0;
    }

    .heading-on-carousel {
        position: absolute;
        top: 35vw;
        left: 12%;
        width: 72%;
        font-size: 5vw;
    }

    .blog-box {
        width: 100%;
        height: 100%;
        border: 0px solid #ccc;
    }

    .blog-image img {
        width: 100%;
        height: 24rem;
        transform: scale(1.06);
        margin-top: 2rem;
        margin-bottom: 0.5rem;

    }

    .blog-left-halfbyhalf {
        display: block;
        gap: 0;
        margin-top: 0;
    }

    .blog-2-boxes {
        width: 100%;
        height: 100%;
        margin-top: 0;
        margin-bottom: 0.8rem;
    }

    .blog-2-boxes a {
        text-decoration: none;
        color: var(--primary-color);
    }

    .blog-2-boxes a:hover {
        color: var(--primary-color);
    }

    .blog-2-boxes img {
        width: 100%;
        height: 100%;
    }

    .blog-style-after-two-blogs-boxes {
        margin-top: 1rem;
        width: 100%;
        display: block;
        gap: 0;
    }

    .left-page-half-blog {
        width: 100%;
        height: 100%;
    }

    .right-page-half-blog {
        width: 100%;
        height: 100%;
    }

    .right-page-half-blog .blog-about {
        width: 100%;
        background-color: rgb(214, 219, 224);
        padding-bottom: 0.5rem;
        margin: 0.5rem 0;
    }

    .blog-about h3 {
        padding: 1.1rem;
        padding-left: 1.5rem;
        padding-bottom: 0;
        font-family: 'Times New Roman', Times, serif;
        font-weight: 800;
    }

    .blog-about p {
        width: 95%;
        padding-left: 1.5rem;
        font-size: 16px;
        font-weight: 500;
    }

    .recent-blog-posts a {
        text-decoration: none;
        color: var(--primary-color);
    }

    .recent-blog-posts a:hover {
        color: rgb(10, 150, 129);
    }

    .image-and-desc {
        display: flex;
        font-style: normal;
        font-family: 'Times New Roman', Times, serif;
        gap: 1rem;
    }

    .image-and-desc img {
        width: 25%;
    }

    .only-desc h4 {
        font-size: 16px;
        font-weight: 600;
    }

    .only-desc span {
        font-size: 13px;
    }

    .social-again {
        margin-top: 2rem;
        background-color: rgb(214, 219, 224);
        padding: 1.1rem;
    }

    .social-again a {
        text-decoration: none;
        color: var(--primary-color);
        font-size: 1.7rem;
    }

    .social-again a:hover {
        color: rgb(10, 150, 129);
    }

    .blog-right-section {
        display: none;
    }



    /* Contact Page Section CSS */

    .contact-section {
        display: block;
        gap: 0;
        margin-top: 2.8rem;
    }

    .contact-social-again a {
        font-size: 1.7rem;
        margin-right: 1.25rem;
        padding-bottom: 15px;
        text-decoration: none;
        color: var(--primary-color);
    }

    .left-contact-section p {
        width: 97%;
    }

    .contact-details {
        margin-top: 1rem;
        display: block;
        width: 97%;
        gap: 0;
        padding-bottom: 15px;
    }

    .contact-email {
        width: 97%;
        border: 2px solid #ccc;
        border-radius: 5px;
        padding: 1.6rem;
        padding-left: 1.1rem;
        margin-bottom: 1rem;
    }

    .contact-phone {
        width: 97%;
        border: 2px solid #ccc;
        border-radius: 5px;
        padding: 1.6rem;
        padding-left: 1.1rem;
        margin-bottom: 1rem;
    }

    .download-cv {
        justify-content: center;
        width: 100%;
    }

    .jus {
        margin: 0rem 30%;
        width: 43%;
        margin-bottom: 5rem;
    }

    .or-style {
        display: flex;
        gap: 2rem;
        margin: 1.5rem 0;
        justify-content: space-between;
        text-align: center;
    }

    .or-style hr {
        width: 100%;
    }

    .or-style p {
        font-size: 17px;
        font-weight: 600;
    }

    .contact-right-section {
        display: none;
    }

}



@media screen and (min-width: 951px) and (max-width : 1199px) {

    .navbar-body {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: transparent;
        height: 7rem;
    }

    .logo a {
        color: var(--primary-color);
        text-decoration: none;
    }

    .logo a h1 {
        margin-left: 4rem;
        font-size: 3.5rem;
    }

    .logo-texture img {
        position: absolute;
        top: 3.2%;
        left: 5%;
        width: 28%;
    }

    .texture-img-on-hire img:nth-child(1),
    .texture-img-on-hire img:nth-child(2),
    .texture-img-on-hire-onaboutpage img:nth-child(1),
    .texture-img-on-hire-onaboutpage img:nth-child(2),
    .texture-img-on-hire-onworkpage img:nth-child(1),
    .texture-img-on-hire-onworkpage img:nth-child(2) {
        display: none;
    }


    .hire {
        background-image: url("textureimage-hire1.png"), url("textureimage-hire1.png");
        background-position: 6%, 90%;
        background-size: contain, contain;
        background-repeat: no-repeat;
        background-blend-mode: difference;
    }

    .MenuButton button {
        display: none;
    }

    .toggle-menu-section {
        display: none;
    }

    /* cartoon image */

    .image-container-cartoon img {
        position: absolute;
        top: 6.6rem;
        left: 43.5rem;
        width: 12rem;
        filter: drop-shadow(1px 1px 1px rgb(99, 99, 99));
    }

    .image-container-cartoon2 img {
        display: none;
    }

    /* main content section */
    .mainContent {
        /* position: relative; */
        display: flex;
        width: 100%;
        height: 100%;
        gap: 0.5rem;
        /* border: 2px solid black; */
        margin-top: 8rem;
    }

    .leftContainerSection {
        width: 33%;
        height: 100%;
        position: sticky;
        top: 5%;
    }

    .leftContainerSection .box {
        width: 100%;
        height: 100%;
        border: 2px solid #ccc;
        text-align: center;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.5);
    }

    .leftContainerSection .box .ProfileImage {
        width: 100%;
        height: 12.6rem;
        /* border: 2px solid purple; */
        margin-bottom: 0.7rem;
    }

    .ProfileImage img {
        position: absolute;
        top: -11%;
        left: 16%;
        width: 70%;
        border-radius: 5px;
        object-fit: cover;
    }

    .leftContainerSection .box h2 {
        width: 100%;
        font-size: 1.7rem;
    }

    .leftContainerSection .box p {
        width: 80%;
    }


    .socialMediaIcons {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .socialMediaIcons a {
        text-decoration: none;
        color: var(--primary-color);
        font-size: 1.4rem;
    }

    .icon-border {
        border-radius: 5px;
        background-color: #f8f7f7;
        width: 2.2rem;
        height: 2.2rem;
        margin: 0 0.5rem;
        box-shadow: 1px 1px 3px #939393;

    }

    .person-details {
        display: flex;
        padding: 9px 0;
        border-bottom: 1px solid #eeeded;
        width: 100%;
        margin-left: 0px;
        align-items: center;
        text-align: left;
        line-height: 1;
        color: var(--primary-color);
    }

    .person-details .icon-border {
        background-color: #fbfafa;
        width: 2rem;
        height: 2rem;
        font-size: 1.3rem;
        padding: 5px;
        box-shadow: 1px 1px 4px rgb(166, 166, 166);
    }

    .person-details:last-child {
        border-bottom: none;
    }

    .person-details .icon-border a {
        text-decoration: none;
        color: var(--primary-color);
    }

    .person-details .details span {
        font-size: 13px;
    }

    .btn-clr {
        background-color: var(--primary-color) !important;
        color: white !important;
        margin-bottom: 3rem;
    }

    .btn-clr:hover {
        background-color: rgb(10, 150, 129) !important;
        color: white !important;
    }




    .MiddleContainerSection {
        width: 58%;
        height: 100%;
    }

    .about-heading {
        display: flex;
        gap: 1.5rem;
        align-items: center;
        color: var(--primary-color);
    }

    .about-heading h1 {
        font-weight: 700;
    }

    .about-para {
        font-size: 17px;
        font-weight: 400;
        color: #282727;
    }

    .what-i-do {
        margin-top: 2rem;
    }

    .what-i-do h3 {
        font-weight: 700;
    }

    .all-skills {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .skill-set {
        display: block;
        width: 100%;
        height: 25.2rem;
        border: 2px solid #ccc;
        gap: 0px;
        padding: 12px;
    }

    .skill-left-icon-section {
        width: 100%;
        /* background-color: pink; */
        padding-left: 4px; 
        text-align: center;       
    }

    .skill-left-icon-section img {
        width: 22%;
        padding-top: 0.2rem;
        margin-bottom: 0.3rem;
    }

    .skills-left-details-section {
        width: 100%;
        /* background-color: grey; */
    }

    .skills-left-details-section h6 {
        font-weight: 700;
        font-size: 1.2rem;
        text-align: center;
    }

    .skills-left-details-section p {
        font-size: 15.5px;
        font-weight: 440;
        color: #383737;
    }


    /* education section */
    .all-education-section {
        display: flex;
        width: 100%;
        gap: 1rem;
    }

    .education-section {
        display: block;
        width: 100%;
        height: 13rem;
        border: 2px solid #ccc;
        gap: 0rem;
        padding: 11px;
        text-align: center;
    }

    .education-section span {
        font-size: 14px;
    }

    .education-section i {
        font-size: 1.9rem;
        color: var(--primary-color);
    }

    .education-section h5 {
        font-size: 18.5px;
        margin: 0 0;
    }




    .RightContainerSection {
        /* background-color: brown; */
        position: sticky;
        top: 25%;
        width: 9.5%;
        height: 100%;
        justify-content: center;
        align-items: center;
    }

    .RightContainerSection .box {
        width: 100%;
        padding: 0.6rem;
        background-color: rgba(255, 255, 255, 0.5);
    }

    .icon-border-nav-items {
        width: 4rem;
        height: 4rem;
        font-size: 1rem;
        background-color: rgb(235, 234, 234);
        text-align: center;
        border-radius: 5px;
        box-shadow: 1px 1px 3px #ccc;
    }

    .icon-border-nav-items i {
        font-size: 1.6rem;
        padding: 10px 10px 0 10px;
    }

    .icon-border-nav-items h5 {
        font-size: 1.1rem;
    }

    /* Progress CSS */

    .progress-heading h3 {
        font-weight: 700;
        font-size: 2rem;
    }

    .progress-section {
        display: flex;
        width: 100%;
        align-items: center;
        padding-left: 1.1rem;
        padding-right: 1.2rem;
    }

    .progress-section:last-child {
        border-bottom: 0px solid #ccc;
    }

    .leftskillsNames {
        width: 22%;
        padding-top: 0.4rem;
    }

    .leftskillsNames h4 {
        font-size: 18px;
    }

    .progress {
        width: 88%;

    }

    .progress-bar {
        background-color: var(--primary-color) !important;
    }


    /* Blogs CSS */
    .blogs-section {
        margin-top: 1rem;
        width: 100%;
        display: flex;
        gap: 1rem;
        padding-left: 0;
        /* border: 2px solid red; */
    }
    .blogs-section .box {
        border: 2px solid #ccc;
        border-radius: 5px;
        width: 100%;
        height: 100%;
        background-color: white;
    }

    .blogs-image img {
        width: 18.6rem;
        padding: 0.6rem;
        border-radius: 5px;
    }

    /* About us Page CSS here */

    .about-total-section {
        width: 100%;
        display: flex;
        margin-top: 5rem;
        margin-bottom: 2rem;

    }

    .about-content{
        width: 100%;
        height: 100%;
    }
    
    .about-content-section {
        border: 2px solid #ccc;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.57);
    }
    .education-and-skills {
        width: 100%;
        display: block;
        /* border:2px solid green; */
    }

    .Education {
        width: 100%;
        padding: 1.5rem;
        /* border: 3px solid purple; */
    }

    .Education .box {
        width: 100%;
        border: 2px solid #ccc;
        padding-top: 0.8rem;
        margin-top: 1rem;
    }
    .side-cartoon-image img {
        display: none;
    }
    .ul-skills-set .progress-section .leftskillsNames {
        width: 20%;
        padding-top: 0.5rem;
        padding-bottom: 0.26rem;
    }

    .ul-skills-set .progress-section .leftskillsNames h4 {
        font-size: 17px;
        font-weight: 500;
        padding-left: 0.2rem;
    }

    .ul-skills-set .progress-section .progress {
        width: 75%;
        margin-right: 0.5rem;
    }

    .contact-about {
        padding: 1.5rem;
    }

    .about-right-section {
        position: sticky;
        top: 3%;
        width: 11%;
        height: 100%;
        border: 2px solid #ccc;
        justify-content: center;
        align-items: center;
        padding: 1rem;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.57);
    }

    /* Work page css starts here ! */

    .op, .op2, .op3, .op4, .op5 {
        display: none;
    }

    .desc-points li{
        line-height: normal;
    }
    .desc-points{
        line-height: normal;
    }


    .work-section {
        width: 100%;
        display: flex;
        gap: 0.5rem;
        margin-top: 5rem;
    }

    .work-left-section {
        width: 95%;
        height: 100%;
    }

    .work-left-section .myproject-heading {
        padding: 1.5rem;
        font-weight: 700;
        color: var(--primary-color);
    }

    .project-display .box {
        width: 50%;
        height: 100%;
        border: 2px solid #ccc;
        border-radius: 5px;
        margin-bottom: 1rem;
        background-color: rgb(252, 251, 251);
    }

    .project-display:last-child .box {
        width: 49.4%;
        height: 10rem;
        border: 2px solid #ccc;
        border-radius: 5px;
        margin-bottom: 1rem;
    }

    .work-right-section {
        position: sticky;
        top: 5%;
        width: 11%;
        height: 100%;
        border: 2px solid #ccc;
        padding: 1rem;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.57);
    }

    /* Blogs Section CSS */

    .blogsection {
        width: 100%;
        height: 100%;
        display: flex;
        margin-top: 2.3rem;
        gap: 1rem;

    }

    .heading-on-carousel {
        position: absolute;
        top: 32vw;
        left: 18%;
        width: 60%;
        color: white;
        font-weight: 800;
        font-size: 5.4vw;
        font-family: 'Times New Roman', Times, serif;
    }

    .blog-box {
        width: 100%;
        height: 32.5rem;
        border: 0px solid #ccc;
        border-radius: 5px;
    }

    .blog-image img {
        width: 100%;
    }

    .h3-blog-heading {
        margin-top: 2rem;
        font-size: 2rem;
        font-family: var(--primary-font);
    }

    .blog-left-halfbyhalf {
        display: flex;
        gap: 2rem;
        margin-top: 2.5rem;
    }

    .blog-2-boxes {
        width: 100%;
        margin-top: 2rem;
        border: 2px solid #ccc;
    }

    .blog-2-boxes img {
        width: 100%;
        height: 20rem;
    }

    .author-name {
        font-size: 12.5px;
        color: #6a6a6a;
        margin: 0 0 4px 0;
    }

    .blog-style-after-two-blogs-boxes {
        margin-top: 2rem;
        width: 100%;
        display: flex;
        gap: 2rem;
    }

    .left-page-half-blog {
        width: 68%;
        height: 100%;
        /* border: 2px solid purple; */

    }

    .left-page-half-blog h3 {
        font-style: italic;
        font-family: 'Times New Roman', Times, serif;
    }

    .left-page-half-blog h1 {
        font-size: 3.7rem;
        font-weight: 700;
        font-family: 'Times New Roman', Times, serif;
    }

    .right-page-half-blog {
        position: sticky;
        top: 0;
        width: 32%;
        height: 100%;
    }

    .image-and-desc {
        display: flex;
        font-style: normal;
        font-family: 'Times New Roman', Times, serif;
        gap: 0.5rem;
    }

    .image-and-desc img {
        width: 30%;
    }

    .only-desc h4 {
        font-size: 17px;
        font-weight: 600;
    }

    .social-again {
        margin-top: 1rem;
        background-color: rgb(214, 219, 224);
        padding: 0.2rem;
    }

    .blog-right-section {
        width: 11%;
        height: 100%;
        padding: 1rem;
    }



    /* Contact Page Section CSS */

    .jus {
        margin: 1rem 40%;
        width: 20%;
        margin-bottom: 7.5rem;
    }

    .contact-right-section {
        width: 11%;
        height: 100%;
        border: 2px solid #ccc;
        padding: 1rem;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.57);
    }



}