*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
@font-face {
    font-family: crimsom-regular;
    src: url('/font/CrimsonText-Regular.ttf')  format('truetype');
}

ul {
    margin-bottom: 0px !important;
}
.display-flex {
    display: flex;
}
.flex-column {
    flex-direction: column;
}
.flex-center-horizontal {
    justify-content: center;
}
.flex-center-verticle {
    align-items: center;
}
.align-right {
    align-items: flex-end;
}
.ml10 {
    margin-left: 10px;
}
.mt5 {
    margin-top: 5px;
}
.mt50 {
    margin-top: 50px;
}
.mr10 {
    margin-right: 10px;
}
.r20 {
   position: relative;
   right: 20px; 
}

.r30 {
    position: relative;
    right: 30px; 
 }
 /* header starts */
 .burger-container {
    display: none;
}
.mobile-menu-container {
    display: none;
}
 .header {
    width: 100%;
    position: fixed;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid #ddd;
    height: 75px;
    background: #fff;
    z-index: 100;
 }
 .header-margin {
    width: 100%;
    height: 90px;
 }

 .logo {
    font-family: 'Sacramento', cursive;
    font-size: 50px;
    font-weight: 600;
    letter-spacing: 1px;
}
.logo a {
    color: #59a8d7;
    text-decoration: none;
}
.lgf {
    width: 60px;
    border-radius: 5px;
    margin-right: 10px;
}
.header-middle {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* header ends */

/* mobile menu */
.mobile-menu-container {
    z-index: 100;
    position: fixed;
    top: 90px;
    padding: 20px;
    background: #ec8b0f;
    width: 250px;
    min-height: 25%;
    border-radius: 4px;
    font-family: crimsom-regular;
}
.close-btn {
    position: absolute;
    right: 20px;
    top: 15px;
}
.mobile-menu-container ul li{
    padding:7px 0px;
    font-size: 25px;
    font-weight: bold;
}
.mobile-menu-container ul a{
    color: #fff;
    text-decoration: none;
}
.mobile-menu-container ul{
    list-style: none;
}
.mmbtn {
    padding: 0px 5px;
    margin-right: 5px;
}
/* mobile menu ends */

/* main body starts */
.main {
    width: 100%;
    height: 70vh;
}
.intro {
    font-size: 100px;
    font-family: 'Poiret One', cursive;
}
.iam {
    color: #ec8b0f;
    font-weight: bold;
}
.typed-description {
    font-size: 60px;
    font-family: 'Poiret One', cursive;
    margin-top: 30px;
}
.quote-swiper-container {
    margin-top: 50px;
    font-family: crimsom-regular;
}

.quote-swiper-container h1 {
    font-size: 30px;
    color: #1a1a1a;
    text-align: center;
}
.quote-Swiper {
    width: 90%;
    height: 600px;
}
.quote-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.quote-slide-color1 {
    background: #da680b;
}
.quote-slide-color2 {
    background: #0baada;
}
.quote-slide-color3 {
    background: #da0b95;
}
.quote-slide-color4 {
    background: #fa5818;
}
.quote-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.quote-img {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    object-fit: cover;
}
.quote-desc {
    padding: 10px;
}
.quote-desc p {
    font-size: 27px;
    color: #fff;
    text-align: center;
}
/* main body ends */

/* profile section css */
.profile-container {
    background: #ec8b0f;
    padding-top:10px;
    padding-bottom: 10px;
    font-family: crimsom-regular;
}
.personal-details {
    display: flex;
    justify-content: center;
    align-items: center;
}
.ijhar-img {
    border-radius: 5px;
    width: 280px;
}
.details-section {
    color: #fff;
    margin-left: 15px;
}
.title {
    font-size: 37px;
    margin-bottom: 20px;
}
.tbd {
    font-size: 20px;
}
.tbd td {
    padding: 3px;

}
.profile-social {
    padding: 10px;
}
.profile-social a{
    color: #ffffff;
}
.social-btn {
    font-size: 22px !important;
    padding: 4px;
}
/* profile section css ends here */

/* skill section */
.tech-loader-container {
    height: 35px;
    border: 1px solid #ddd;
    margin-top: 10px;
    border-radius: 4px;
}
.loader-bar {
    height: 35px;
    background: #ec8b0f;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}
.skill-title,.home-social-con-title {
    color: #ec8b0f;
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 20px;
}
.skill{
    padding-left: 15px;
    font-family: crimsom-regular;
    width: 100%;
    margin-top: 45px;
}
.tech-card {
    margin-bottom: 15px;
    padding: 20px;
}

.tech-skill{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
}
.skill-wrapper {
    width: 80%;
    margin-top: 20px;
}
/* skill section ends*/

/* footer section */
.footer {
    width: 100%;
    min-height: 70px;
    background: #1a1a1a;
    font-family: 'Poiret One', cursive;
    color:#fff;
    font-size: 20px;
    margin-top: 25px;
}

.footer-menu-items {
    font-family: crimsom-regular;
    margin-top: 5px;
}
.footer-menu-items ul {
    display: flex;
}
.footer-menu-items ul a {
    text-decoration: none;
    color: #fff;
}
.footer-menu-items ul li {
    list-style-type: none;
    padding: 0px 7px;
}
/* footer section ends */

/* blog list */
.blog-container {
    min-height: 84vh;
    font-family: 'Poiret One', cursive;
}
.blog-list-container {
    display: grid;
    grid-template-columns: 80% 20%;
}
.blog-list-image-container {
    display: flex;
    justify-content: end;
}
.blog-list-image {
    width: 80px;
    border-radius: 4px;
}
.blog-title {
    color: #fff;
    font-size: 50px;
    margin-bottom: 20px;
    font-weight: bold;
    margin-top: 10px;
    display: flex;
    background: #ec8b0f;
    padding: 7px 20px;
    border-radius: 4px;
}
.blog-list {
    display: flex;
    flex-direction: column;
}
.blog {
    padding: 10px;
    background: #ededed;
    border-radius: 4px;
}
.blog-list-read-details {
    font-size: 16px;
    color: #646363;
    margin-top: 30px;
}
.blog:not(:last-child) {
    margin-bottom: 20px;
}
.blog {
    font-size: 25px;
}
.blog a {
    color: #464646;
    text-decoration: none;
}
.blog p {
    word-break: break-all;
}
.blog-detail-dot {
    position: relative;
    top: -4px;
    margin: 0px 7px;
}

.blg {
    display: flex;
    justify-content: center;
    border-bottom: 2px solid #f5a133;
    font-size: 40px;
}
.blog-question {
    display: flex;
    justify-content: center;
}
/* blog list */

/* header nav */
.header-right {
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-right ul {
    display: flex;
}
.header-right ul a {
    text-decoration: none;
    color: #878787;
}
.header-right ul li {
    font-size: 20px;
    font-family: crimsom-regular;
    list-style-type: none;
    display: inline-block;
    padding: 0px 12px;
    font-weight: bold;
}
.header-right ul a:hover {
    color: #ec8b0f;
}
.header-right ul li:hover {
    cursor: pointer;
    color:#ec8b0f;
}
.active-navli{
    color: #ec8b0f;
}
.active-nava{
    color: #ec8b0f !important;
}
.right-menu-icon {
    text-align: center;
}
.rt-menu {
    display: flex !important;
    flex-direction: column;
}
/* header nav ends */

/* about page */
.about-container, .contact-container {
    font-family: 'Poiret One', cursive;
    display: flex;
    justify-content: center;
}
.contact-container {
    margin-bottom: 40px;
}
.about {
    width: 75%;
}
.page-title {
    margin-top: 15px;
}
.page-title h1 {
    border-top:2px solid #ec8b0f;
    border-left:2px solid #ec8b0f;
    border-right:2px solid #ec8b0f;
    color: #ec8b0f;
    display: inline-block;
    padding:7px 12px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 35px;
}
.pt {
    border-bottom: 2px solid #ec8b0f;
}
.about-sub-title {
    font-size: 26px;
}
.iamijhar {
    margin-top: 15px;
}
.qualification,.my-role {
    font-family: crimsom-regular;
}
.qualification {
    margin-top: 60px;
}
.about-typed-description {
    font-size: 18px;
}
.qualification-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    margin-top: 20px;
}
.qbox {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 3px;
}
.qboxt {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}
.qboxd {
    width: 60%;
    font-size: 18px;
    margin-top: 10px;
    text-align: center;
}
.qbox1 {
    border: 1px solid #59a8d7;
    color: #59a8d7;
}
.qbox3 {
    border: 1px solid #000;
    color: #000;
}
.qbox2 {
    border: 1px solid #ec8b0f;
    color: #ec8b0f;
}
.my-role {
    margin-top: 60px;
}
.role-list {
    font-size: 23px;
    margin-top: 20px;
}
.role-list ul {
    width: 60%;
    list-style: none;
}
.role-list li {
    padding:15px 0px;
    border-bottom: 1px solid #ec8b0f;
}
.company-list ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    font-weight: 500;
}
.company-list ul li{
    width: 200px;
    height: 200px;
    margin:10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    color: #000;
    border-radius: 4px;
    text-align: center;
}
.company-list ul li:first-child{
    margin-left: 0px !important;
}
/* about page ends */

/* resume container */
.resume-container {
    position: fixed;
    z-index: 100;
    bottom: 60px;
    right: 20px;
    background: #59a9d7b4;
    font-family: 'Poiret One', cursive;
    padding:20px;
    border-radius: 4px;
    animation: resume-anim 1s ease 0s infinite reverse both;

}
.resume-container a {
    text-decoration: none;
    color: #0e0d0d;
    font-weight: 600;
}
/* resume section ends */

/* contact page */

/* contact details */
.contact-detail {
    font-family: crimsom-regular;
}
.contact {
    display: flex;
    justify-content: end;
}
.contact-cont {
    width: 70%;
}
.coem-title {
    font-size: 50px;
    color: #ec8b0f;
    margin-bottom: 20px;
}
.con, .email {
    font-size: 30px;
}

.num-t {
    width: 170px;
    display: inline-block;
    font-weight: 600;
}

.contact-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 62.5vh;
}
.coem:last-child {
    margin-top: 20px;
}
.em, .num {
    padding: 7px 0px;
}
.social-title {
    display: inline-block;
    width: 150px;
    padding: 15px 10px;
    text-align: center;
    border-radius: 4px;
    font-size: 20px;
}
.social-title a {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
}
.linkedin {
    background: #0a66c2;
}
.github {
    background: #22272e;
}
.stackover {
    background: #da680b;
}
.home-socail-media {
    margin-top: 40px;
}
.social-home-display {
    display: flex;
    justify-content: center;
}
.home-social-width {
    width: 80%;
    font-family: crimsom-regular;
}
.home-social {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
/* contact details end */
@keyframes resume-anim {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.3);
	}

	100% {
		transform: scale(1);
	}
}
/* resume container ends */

/* single page blogs */
.single-blog-container {
    display: grid;
    grid-template-columns: 1.3fr 2fr 1.3fr;
    font-family: crimsom-regular;
}
.single-blog-midlle {
    min-height: 81vh;
    padding: 10px 20px;
    font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #292929;
}
.single-blog-midlle h1 {
    word-spacing: 4px;
    letter-spacing: 2px;
    font-size: 30px;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 2px solid #22272e;
    font-style: normal;
    line-height: 1.4;
    color: #6e6e6e !important;
}
.desc-blog {
    padding-top: 10px;
}
.desc-blog p {
    font-size: 21px;
    font-style: normal;
    word-break: break-all;
    line-height: 30px;
    word-spacing: 2.5px;
    margin-bottom: 30px;
}
.single-side-menu {
    display: flex;
    justify-content: end;
    padding-top: 20px;
    padding-right: 30px;
    position: sticky;
    top: 89px;
}
.single-side-menu ul a {
    text-decoration: none;
    color: #292929;
    font-size: 25px;
    font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.single-side-menu ul a:hover {
    color: #da680b;
}
.single-side-menu .bb {
    border-bottom: 1px solid #da680b;
}
.single-side-menu ul li {
    list-style-type: none;
    padding: 7px 5px;
}
.mobile-view-blog-nav {
    display: none;
}

/* single page blogs end */

/* 404 error page */
.page-does-not-exists {
    min-height: 81vh;
}
._404-contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 70vh;
}
._404-contents h1{
    color: #da680b;
    font-size: 100px;
}
._404-contents p{
    word-wrap: break-word;
    padding: 10px;
}
/* 404 error page ends here */
@media screen and (max-width: 820px) {
    .main{
        height: 55vh;
    }
    .header-left {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .burger-container {
        display: inline-block;
    }
    .br-icon {
        font-size: 30px;
    }
    .intro{
        font-size: 80px;
    }
    .typed-description {
        font-size: 45px;
    }
    .logo {
        font-size: 35px;
    }
    .header {
        grid-template-columns: 1fr 2fr 1fr;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .header-right {
        display: none;
    }
    .title {
        font-size: 30px;
    }

    .about {
        width: 85%;
    }
    .qualification-box {
        grid-template-columns: 1fr 1fr;
    }
    .qboxt {
        text-align: center;
        font-size: 22px;
        font-weight: 600;
    }
    .role-list {
        font-size: 20px;
    }
    .role-list ul {
        width: 100%;
    }
    .company-list ul li {
        width: 140px;
        height: 140px;
    }
    .company-list ul li:first-child {
        margin-left: 10px !important;
    }
    .contact-detail-container {
        display: flex;
        justify-content:center;
    }
    .contact {
        justify-content: left;
    }
    .contact-detail {
        grid-template-columns: 1fr;
        width: 85%;
        min-height: 68vh;
    }
    .single-blog-container {
        grid-template-columns: 1.3fr 3fr;
    }
    .single-blog-midlle h1 {
        font-size: 25px;
        line-height: 1.3;
    }
    .desc-blog p {
        margin-bottom: 25px;
        font-size: 23px;
    }

    .blog-list-read-details {
        margin-top: 20px;
    }
}

@media screen and (max-width: 480px) {
    .lgf {
        width: 55px;
    }
    .header {
        grid-template-columns: 1fr 4fr;
    }
    
    .header-middle {
        justify-content: start;
    }
    .intro {
        font-size: 60px;
    }
    .iam {
        text-align: center;
    }
    .typed-description {
        text-align: center;
        font-size: 35px;
    }
    .personal-details {
        display: block;
    }
    .resume-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .skill-wrapper {
        width: 90%;
    }
    .details-section {
        margin-top: 10px;
    }
    .image-section {
        display: flex;
        justify-content: center;
    }
    .ijhar-img {
        width: 345px;
    }
    .title {
        font-size: 25px;
    }
    .tech-skill{
        grid-template-columns: 1fr;
    }
    .blog {
        font-size: 18px;
        margin-bottom: 25px !important;
    }
    .blog-list-container div {
        padding-right: 10px;
    }
    .blog-list-image {
        width: 65px;
        height: 65px;
    }
    .blog-list-read-details {
        font-size: 15px;
    }
    .about {
        width: 90%;
    }
    .qualification-box {
        grid-template-columns: 1fr;
    }
    .qboxt {
        text-align: center;
        font-size: 22px;
        font-weight: 600;
    }
    .role-list {
        font-size: 20px;
    }
    .role-list ul {
        width: 100%;
    }
    .company-list ul li {
        width: 140px;
        height: 140px;
    }
    .company-list ul li:first-child {
        margin-left: 10px !important;
    }
    .company-list ul{
        justify-content: center;
    }
    .contact-social-media {
        margin-top: 20px;
    }
    .home-social {
        justify-content: center;
    }
    .home-social .social-title {
        width: 100%;
        margin-bottom: 10px;
    }
    .coem-title {
        font-size: 30px;
    }
    .contact-detail {
        width: 90%;
    }

    .con, .email {
        font-size: 18px;
    }
    .contact-cont {
        width: 100%;
    }
    .num-t {
        width: 100px;
    }
    .contact-social-btn {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .contact-social-btn .social-title {
        width: 100%;
        margin-bottom: 10px;
    }
    .single-blog-container {
        grid-template-columns: 1fr;
    }
    .single-blog-left {
        background: #0e0d0d;
        height: 100vh;
        width: 56%;
        position: fixed;
        z-index: 10;
        color: #fff;
        display: none;
        margin-top: -43px;
    }
    .single-blog-left .close-btn {
        padding: 4px;
        z-index: 12;
    }
    .single-side-menu ul a {
        color: #fff;
    }
    .single-side-menu {
        display: flex;
        justify-content: start;
        padding-top: 00px;
        padding-right: 00px;

    }
    .mobile-view-blog-nav {
        display: block;
        padding-left: 5px;
        position: sticky;
        top: 95px;
        font-size: 25px;
    }
    .blog-nav-side-btn {
        padding:10px;
        background: #da680bc4;
        color: #fff;
        border-radius: 4px;
    }
    .quote-Swiper {
        height: 450px;
    }
}