@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
html {
  scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: 0;
    background: linear-gradient(90deg, #f96c13 0%, #E91E63 50%, #6400ff 100%);
	color: #7c8391;
    font-size: 15px;
    font-family: "Poppins", sans-serif;
	transition: all 0.5s;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
}
h1, h2 {
    color: #212121;
}
.disabbled {
    pointer-events: none;
    opacity: 0.5;
}
.for-mobile {
    display: none;
}
.main-title {
    font-size: 24px;
    font-weight: 400;
    position: relative;
    margin: 0;
    margin-bottom: 30px;
    padding-bottom: 10px;
    color: #212121;
}
.main-title:before {
    position: absolute;
    content: "";
    height: 3px;
    width: 75px;
    background: linear-gradient(-90deg, #f9a313 0%, #e2175c 50%, #0352b0 100%);
    bottom: 0px;
}
.sub-title {
    font-size: 20px;
    font-weight: 400;
    position: relative;
    margin: 0;
    margin-bottom: 20px;
    padding-bottom: 5px;
    color: #212121;
}
.sub-title:before {
    position: absolute;
    content: "";
    height: 2px;
    width: 25px;
    background: #f96c13;
    bottom: 0;
}
.img-responsive {
    width: 100%;
}
/* styles for Header section started */
.header {
    top: 40px;
    position: fixed;
	z-index: 50;
    width: 100%;
	transition: all 0.5s;
    transition-delay: 0.5s;
}
.header .container {
    transition: all 0.5s;
    transition-delay: 0s;
}
.header.fixed {
    top: 0;
    transition: all 0.5s;
    transition-delay: 0s;
}
.header.hide {
    opacity: 0;
    top: -70px;
}
.header.fixed .container {
    max-width: 100%;
	transition: all 0.5s;
	transition-delay: 0.5s;
}
.header nav.navbar {
    width: calc(100% - 20px);
    display: inline-grid;
    grid-auto-flow: column;
    justify-content: space-between;
    background: #212121;
    border-radius: 50px;
    padding: 10px;
	transition: all 0.5s;
}
header.header.fixed nav.navbar {
    border-radius: 0px;
}
.nav-item-left {
    display: inline-grid;
    grid-auto-flow: column;
    grid-column-gap: 10px;
}
.nav-item-right {
    display: inline-grid;
    grid-auto-flow: column;
    grid-column-gap: 10px;
}
.nav-item-right .nav-item {
    padding: 0px;
    background: #212121;
    border-radius: 50px;
    color: #fff;
    width: 46px;
    height: 46px;
    text-align: center;
    display: grid;
    align-items: center;
    justify-content: center;
}
.nav-item-right .nav-item a {
    height: 21px;
}
.nav-item {
	padding: 10px 20px;
	background: #212121;
	border-radius: 50px;
	color: #fff;
    text-decoration: none;
    font-size: 14px;
    line-height: 26px;
}
.nav-item-left .nav-item.home {
    padding: 0px;
    border-radius: 50px;
    color: #fff;
    width: 46px;
    height: 46px;
    text-align: center;
    display: grid;
    align-items: center;
    justify-content: center;
}
.active {
    background: #F96C13;
}
/* styles for Intro section started */
.intro-section {
    background: #ffffff;
    padding-top: 106px;
    text-align: center;
    margin-top: 10px;
}
.intro-section .intro-caption {
    font-size: 75px;
    font-weight: 600;
    margin-top: 10px;
    color: #212121;
}
.intro-section .intro-caption span.color-caption {
    color: #F96C13;
}
.intro-section .small-caption {
    font-size: 50px;
    font-weight: 200;
    line-height: 50px;
    color: #212121;
}
.intro-blocks {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-top: 30px;
    position:relative;
    z-index: 0;
}
.intro-blocks:before {
    content: "";
    position: absolute;
    background: url(../images/intro-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}
.intro-blocks .quotes {
    width: 330px;
    font-size: 14px;
    left: 40px;
    text-align: left;
    position: relative;
}
.intro-blocks .quotes span {
    position: relative;
    display: inline-block;
}
svg#quote-bg {
    fill: #f96c13;
    position: absolute;
    width: 30px;
    left: -40px;
    top: -7px;
}
.intro-blocks .experience-quote {
    width: 330px;
    text-align: right;
    line-height: 20px;
    font-size: 14px;
    transform: translate(0px, 100px);
}
.intro-blocks .experience-quote span {
    font-size: 50px;
    font-weight: 600;
    transform: translate(-5px, 24px);
    display: inline-block;
    color: #092c4c;
}
.intro-blocks .experience-quote span sup {
    color: #f96c13;
    font-weight: 400;
    font-size: 30px;
    color: #f96c13;
}
.intro-img {
    margin: auto;
}
/* styles for About section started */
.about-section {
    background: #250156;
    overflow: hidden;
    position: relative;
    padding: 0 0 350px;
}
.about-section .about-bg-top {
    position: absolute;
    width: 100%;
}
.about-section .about-bg-bottom {
    width: 100%;
    position: absolute;
    bottom: -10px;
}
.about-block {
    position: relative;
    padding: 50px;
    color: #fff;
    line-height: normal;
    z-index: 0;
}
.about-block:before {
    position: absolute;
    content: "";
    background: #F96C13;
    background: linear-gradient(125deg, rgb(227 88 0) 0%, rgba(255, 151, 0, 1) 100%);
    background: linear-gradient(150deg, #f96c13 0%, #E91E63 50%, #6400ff 100%);
    box-shadow: -25px 50px 50px color(srgb 0 0 0 / 0.4);
    border-radius: 50px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}
.about-block .sub-title:before {
    background: #ffffff;
}
.about-section h1.main-title {
    color: #fff;
}
.about-section h1.main-title:before {
    background: #fff;
}
.about-section h2.sub-title {
    font-size: 20px;
    font-weight: 400;
    position: relative;
    margin: 0;
    margin-bottom: 20px;
    padding-bottom: 5px;
    color: #ffffff;
}
.skills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 14px;
}
.skills .skill-list {
    display: list-item;
    margin-left: 25px;
    margin-bottom: 5px;
}
.skills-block {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr 1fr;
    margin-top: 40px;
}
.mac-img {
    position: relative;
    margin-top: 55px;
    margin-bottom: -250px;
    z-index: 0;
}
.mac-img:before {
    position: absolute;
    content: "";
    top: 50px;
    bottom: 30px;
    right: -50px;
    left: 50px;
    z-index: -1;
    background: #000000;
    border-radius: 50px;
    filter: blur(30px);
    opacity: 0.8;
}
.mac-img .skills {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    font-size: 14px;
    background: #090908;
}
.mac-data {
    position: absolute;
    top: -20px;
    left: 25px;
    right: 25px;
    transform: translate(0, 50%);
}
/* styles for Experience section started */
.experience-section {
    background: #fff;
    padding: 100px 0;
    position: relative;
    z-index: 0;
}
.experience-title {
    width: 120px;
    opacity: 0.5;
}
.experience-columns {
    display: grid;
    grid-template-columns: 200px 1fr;
}
.company-timeline {
    margin-top: 75px;
}
.company {
    display: grid;
    grid-template-columns: 350px 80px 1fr;
}
.company-name {
    font-size: 18px;
    font-weight: 400;
    position: relative;
    margin-bottom: 10px;
    color: #212121;
}
.duration {
    font-size: 14px;
    display: list-item;
    margin-left: 25px;
}
.designation {
    font-size: 18px;
    font-weight: 400;
    position: relative;
    margin-bottom: 10px;
    color: #212121;
}
.skills-used {
    font-size: 14px;
    margin-bottom: 50px;
}
.company-number {
    background: #092C4C;
    width: 38px;
    height: 38px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    border: 4px solid #fff;
    box-shadow: 0px 3px 9px rgb(0 0 0 / 25%);
    font-weight: 300;
    font-size: 18px;
    margin-top: -10px;
    position: relative;
}
.company-number.active {
    background: #092C4C;
}
.company-number:after {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    border-radius: 50px;
    background: #B0B0B0;
    top: -5px;
    right: -5px;
    border: 2px solid #fff;
}
.company-number.active:after {
    background: #06BD00;
    animation: pulse 0.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% {        
        background: #f96c13;
    }
    50% {        
        background: #ececec;
    }
}
.company .company-number .company-hover-info {
/*    display: none; */
    background: #e31d6b;
    position: absolute;
    left: -350px;
    right: -10px;
    padding: 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: normal;
    bottom: -80px;
    box-shadow: 0px 5px 9px lch(0 0 0 / 0.3);
    z-index: 1;
    transition: all 0.5s;
}
.company .company-number .company-hover-info:after {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    transform: rotate(45deg);
    background: #e31d6b;
    top: -10px;
    right: 20px;
    z-index: 1;
    transition: all 0.5s;
}
.company:hover .company-number .company-hover-info {
    display: block; 
}
.position-skills {
    position: relative;
}
.company-timeline .company .position-skills:before {
    position: absolute;
    content: "";
    width: 2px;
    left: -60px;
    top: 0;
    bottom: 0;
    border-left: 3.5px dashed #B0B0B0;
    z-index: -1;
}
.company-timeline .company .position-skills.no-track:before {
    width: 0px;
    border-left: 0;
}
/* styles for projects section started */
.projects-top-section {
    padding: 50px 0 0;
    background: #F96C13;
    background: linear-gradient(125deg, rgb(227 88 0) 0%, rgba(255, 151, 0, 1) 100%);
}
.projects-top-section p {
    font-size: 17vw;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    color: #fff;
    text-shadow: 2px 2px 25px rgb(0 0 0 / 10%);
    text-align: center;
    transform: translate(0px, 7.5vw);
}
.projects-section {
    padding: 100px 0;
    background: #f5f5f5;
    background-attachment: fixed;
}
.projects-section h1.main-title {
    margin-bottom: 50px;
}
.thumb-img {
    position: relative;
    width: calc(33% - 10px);
    padding: 5px;
    display: inline-block;
}
/* styles for Experience section started */
.contact-section {
    padding: 10px;
    background: #2d2d2d;
    background: linear-gradient(125deg, #000000 0%, #2d2d2d 100%);
    color: #d2d2d2;
}
.contact-section p {
    padding: 0;
    margin: 0;
    font-size: 13px;
}
.footer-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.portfolio-thumb {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    grid-column-gap: 20px;
}
.thumb-img {
    position: relative;
    width: calc(100% - 30px);
    padding: 15px 15px 60px 15px;
    display: inline-block;
    border-radius: 15px;
    background: #fff;
    z-index: 0;
    box-shadow: -8px 10px 20px color(srgb 0 0 0 / 0.2);
    transition: all 0.5s;
}
.thumb-img img {
    border: 1.5px solid #e3e3e3;
}
.small-title {
    font-size: 18px;
    font-weight: 400;
    position: relative;
    margin-bottom: 10px;
    color: #212121;
}
.thumb-img p {
    font-size: 14px;
}
.blur-text {
    filter: blur(3px);
}
.thumb-img .read-more {
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    margin-top: 10px;
    transition: all 0.2s;
    cursor: pointer;
    color: #3d3d3d;
    background: #fff;
    border: 2px solid #F96C13;
    position: absolute;
    bottom: 15px;
    left: 15px;
    display: inline-block;
    text-decoration: none;
}
.thumb-img .read-more:hover {
    transition: all 0.2s;
    color: #fff;
    background: #F96C13;
    border: 2px solid #F96C13;
}


.user-research {
    background: #fff;
    margin-top: -50px;
}
.user-research .sub-title {
    margin-top: 40px;
    margin-bottom: 30px;
}
.design-skills {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 50px;
    justify-content: space-between;
    align-items: center;
    grid-auto-columns: 1fr 2fr;
}
.design-skills .skills-container {
    display: grid;
    grid-column-gap: 50px;
    justify-content: end;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 50px;
}
.design-skills .skills-thumb {
    text-align: center;
}
.design-skills .skills-thumb .img-thumb {
    max-width: 40px;
    margin-bottom: 5px;
    border: 2px solid #f96c13;
    padding: 15px;
    border-radius: 10px;
}
.design-skills .skills-thumb p {
    margin: 0;
    font-size: 14px;
    color: #666;
}
.img-container img {
    box-shadow: 25px 25px 30px lch(0 0 0 / 0.35);
    border-radius: 20px;
}

.research-communication {
    background: #f96c13  linear-gradient(150deg, #f96c13 0%, #E91E63 50%, #6400ff 100%);
    padding: 100px 0;
    margin-top: 100px;
}
.research-communication .sub-title {
    margin-top: 0;
    margin-bottom: 50px;
    font-size: 70px;
    line-height: 70px;
    color: #fff;
    font-weight: 100;
}
.research-skills .sub-title:before {
    height: 4px;
    width: 65px;
}
.research-skills {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 50px;
    justify-content: space-between;
    align-items: center;
    grid-auto-columns: 1fr 1fr;
}
.research-skills .research-img {
    float: right;
    max-width: 450px;
    width: 100%;
}
.research-skills .skills-container {
    display: grid;
    grid-column-gap: 50px;
    justify-content: end;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
}
.research-skills .skills-thumb {
    text-align: center;
    margin: 20px 0;
}
.research-skills .skills-thumb .img-thumb {
    max-width: 40px;
    margin-bottom: 5px;
    border: 2px solid #ffffff;
    padding: 15px;
    border-radius: 10px;
}
.research-skills .skills-thumb p {
    margin: 0;
    font-size: 14px;
    color: #fff;
}
.communication-skills {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 50px;
    justify-content: space-between;
    align-items: center;
    grid-auto-columns: 1fr 1fr;
    margin-top: 100px;
}
.communication-skills .communication-img {
    max-width: 450px;
    width: 100%;
}
.communication-skills .sub-title {
    margin-top: 0;
    margin-bottom: 50px;
    text-align: right;
    font-size: 55px;
}
.communication-skills .sub-title:before {
    right: 0;
    height: 4px;
    width: 65px;
}
.communication-skills .research-img {
    max-width: 380px;
    width: 100%;
}
.communication-skills .skills-container {
    display: grid;
    grid-column-gap: 50px;
    justify-content: end;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
}
.communication-skills .skills-thumb {
    text-align: center;
    margin: 20px 0;
}
.communication-skills .skills-thumb .img-thumb {
    max-width: 40px;
    margin-bottom: 5px;
    border: 2px solid #ffffff;
    padding: 15px;
    border-radius: 10px;
}
.communication-skills .skills-thumb p {
    margin: 0;
    font-size: 14px;
    color: #fff;
}
.grey {
    background: #f5f5f5;
}
.about-section.white {
    padding: 0 0 100px;
}
.about-section.white .about-block {
    margin-top: 25px;
    color: #3d3d3d;
    min-height: 350px;
}
.about-section.white .about-block:before {
    background: #f5f5f5;
}
.about-section.white .about-block h1.main-title {
    color: #212121;
}
.about-section.white .about-block h1.main-title:before {
    background: linear-gradient(-90deg, #f9a313 0%, #e2175c 50%, #0352b0 100%);
}
.project-work {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
}
.project-work .work-thumb {
    border: 10px solid #fff;
    border-radius: 25px;
    box-shadow: -5px 10px 30px #00000066;
    overflow: hidden;
}
.portfolio-section {
    margin-top: 10px;
    padding-top: 130px;
    padding-bottom: 100px;
    background: #f5f5f5;
}
.portfolio-work {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 50px;
    align-items: center;
    grid-auto-columns: 50% calc(50% - 50px);
    margin-bottom: 50px;
    background: #fff;
    padding: 15px 15px 10px 15px;
    border: 1.5px solid #e3e3e3;
    border-radius: 4px;
}
.portfolio-work.reverse {
    grid-auto-columns: calc(50% - 50px) 50%;
}
.portfolio-content {
    max-width: 450px;
    margin: auto;
}
.portfolio-content .read-more {
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    margin-top: 10px;
    transition: all 0.2s;
    cursor: pointer;
    color: #3d3d3d;
    background: #fff;
    border: 2px solid #F96C13;
    display: inline-block;
    text-decoration: none;
}
.portfolio-content .read-more:hover {
    transition: all 0.2s;
    color: #fff;
    background: #F96C13;
    border: 2px solid #F96C13;
}
@media (max-width: 992px) {
    .container {
        padding: 0 30px;
    }
    p {
        font-size: 14px;
    }
    .intro-blocks {
        justify-content: center;
    }
    .intro-blocks .quotes, .intro-blocks .experience-quote {
        display: none;
    }
    .skills-block {
        grid-auto-flow: row;
    }
    .design-skills {
        grid-column-gap: 20px;
    }
    .design-skills .skills-container {
        grid-column-gap: 10px;
        grid-template-columns: 1fr 1fr;
        grid-row-gap: 30px;
    }
    .research-communication .sub-title, .communication-skills .sub-title {
        margin-bottom: 10px;
        font-size: 45px;
        line-height: 50px;
        font-weight: 200;
    }
    .experience-columns {
        display: block;
    }
    .experience-title {
        display: none;
    }
} 
@media (max-width: 991px) {
    .for-mobile {
        display: block;
    }
    .for-web {
        display: none;
    }
    p {
        font-size: 12px;
    }
    .main-title {
        font-size: 16px;
    }
    .sub-title {
        font-size: 14px;
    }
    .design-skills {
        grid-auto-flow: row;
    }
    .skills {
        grid-template-columns: 1fr;
        font-size: 12px;
    }
    .design-skills .img-container {
        padding: 0 50px 100px;
    }
    .design-skills .skills-container {
        grid-row-gap: 100px;
    }
    .design-skills .skills-thumb .img-thumb {
        max-width: 100px;
        margin-bottom: 0px;
        border: 3px solid #f96c13;
        padding: 25px;
    }
    .research-communication {
        padding: 100px 30px;
    }
    .research-skills .skills-thumb .img-thumb,
    .communication-skills .skills-thumb .img-thumb {
        max-width: 100px;
        margin-bottom: 0px;
        border: 3px solid #ffffff;
        padding: 25px;
    }
    .design-skills .skills-thumb p,
    .research-skills .skills-thumb p,
    .communication-skills .skills-thumb p {
        font-size: 12px;
    }
    .user-research {
        margin-top: 0;
    }
    .research-skills {
        display: block;
    }
    .research-skills .research-img,
    .communication-skills .communication-img {
        float: unset;
        max-width: unset;
        width: 100%;
    }
    .research-communication .sub-title, 
    .communication-skills .sub-title {
        margin-bottom: 50px;
        font-size: 18px;
        line-height: normal;
        font-weight: 300;
        text-align: left;
    }
    .research-skills .skills-container,
    .communication-skills .skills-container {
        align-items: normal;
        margin-top: 50px;
    }
    .research-communication .sub-title:before,
    .communication-skills .sub-title:before {
        right: auto;
        left: 0;
        height: 6px;
        bottom: -10px;
    }
    .experience-section {
        padding: 100px 30px;
    }
    .company {
        display: block;
        position: relative;
    }
    .company:before {
        position: absolute;
        content: "";
        width: 2px;
        left: 20px;
        top: 20px;
        bottom: -80px;
        border-left: 3.5px dashed #B0B0B0;
        z-index: -1;
    }
    .company-info, 
    .position-skills {
        padding-left: 80px;    
    }
    .company-timeline .company .position-skills:before {
        display: none;
    }
    .designation {
        font-size: 14px;
        color: #f96c13;
        margin: 20px 0 10px;
    }
    .duration, .skills-used {
        font-size: 12px;
    }
    .company-number {
        margin-top: 0;
        position: absolute;
        top: 10px;
        left: 0;
    }
}