@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: "Work Sans", sans-serif;
    color: #333333;
}
/* =================================================== Common css begins  ===================================================*/
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
/* =================================================== Common css ends  ===================================================*/

/* =================================================== Header CSS Begins ===================================================*/
.pf-portfolio-header {
    height: 74px;
    position: fixed;
    z-index: 999;
    width: 100%;
    background-color: #FFFFFF;
}
.pf-header-container{
    height: 100%;
    padding: 30px 0 14px 0;
}
.pf-header-wrap {
    max-width: 1090px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}
ul.pf-header-nav {
    display: inline-flex;
}
.pf-header-nav li {
    margin-left: 94px;
}
.pf-header-nav li a {
    padding: 12px 0;
    cursor: pointer;
    display: block;
    font-size: 14px;
    color: #898989;
    font-weight: 500;
    line-height: 16.42px;
    position: relative;
}
.pf-header-nav li a:hover {
    color: #333333;
}
.pf-header-nav li a.pf-nav-active  {
    color: #333333;
}
.material-symbols-outlined.pf-hamburger {
    display: none;
    font-size: 30px;
    cursor: pointer;
    line-height: normal;
}
@media only screen and (min-width: 1520px) { 
    .pf-header-nav li a {
        font-size: 16px;
        line-height: 26px;
    }
}
@media only screen and (max-width: 1080px) {
    .pf-header-nav li {
        margin-left: 60px;
    }
}
@media only screen and (max-width: 768px) {
    .pf-header-wrap {
        width: 85%;
    }
    .material-symbols-outlined.pf-hamburger {
        display: block;
    }
    ul.pf-header-nav {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 74px;
        left: -100%;
        text-align: center;
        transition: all 0.5s;
        background-color: #ffffff;
        overflow-y: auto;
        gap: 40px;
        padding: 40px 0;
        flex-direction: column;
    }
    ul.pf-header-nav li {
        display: block;
        line-height: 30px;
    }
    ul.pf-header-nav.show {
        left: 0;
    }
    .pf-header-nav li {
        margin-left: 0;
    }
}
/* =================================================== Header CSS Ends ===================================================*/
/* =================================================== Banner CSS Begins ===================================================*/
.pf-banner {
    padding-top: 74px;
}
.pf-banner-container {
    max-width: 1090px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding: 76px 0 102px 0;
    border-bottom: 1px solid #333333;
}
.pf-about-banner {
    max-width: 735px;
    padding-top: 36px;
}
.pf-about-banner p {
    margin-top: 24px;
    margin-bottom: 24px;
    font-size: 34px;
    font-weight: 500;
    line-height: 41px;
    font-family: "Fraunces", serif;
}
.pf-about-banner p span {
    color: #1877F2;
}
.pf-about-banner .pf-banner-country {
    font-size: 16px;
    line-height: 18px;
    font-weight: 400;
}
.pf-exp-wrap {
    display: flex;
    gap: 23px;
}
.pf-exp-wrap img {
    max-width: 244px;
    height: 430px;
}
@media only screen and (max-width: 1280px) {
    .pf-about-banner {
        max-width: 480px;
    }
}
@media only screen and (max-width: 998px) {
    .pf-banner-container {
        flex-wrap: wrap;
        justify-content: center;
    }
    .pf-about-banner {
        max-width: 540px;
    }
}
@media only screen and (max-width: 580px) {
    .pf-exp-wrap {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* =================================================== Banner CSS Ends ===================================================*/
/* ===================================================  Fun things CSS Begins ===================================================*/
.pf-fun-things-wrap {
    padding: 80px 0;
    max-width: 1090px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    align-items: center;
}
.pf-fun-things-content {
    max-width: 384px;
}
.pf-fun-things-content div {
    margin: 24px 0 16px 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 37px;
}
.pf-fun-things-content p {
    font-size: 16px;
    line-height: 26px;
    font-weight: 300;
    color: #797979;
}
.pf-fun-things-img-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pf-fun-things-img-cont {
    display: flex;
    gap: 10px;
}
.pf-fun-things-img-wrap img {
    width: 224px;
    height: auto; 
}
.pf-fun-things-mobileImg1, .pf-fun-things-mobileImg2 {
    padding: 38px 18px 0 18px;
    display: flex;
    position: relative;
    width: 260px;
    height: 288px;
    overflow: hidden;
} 
.pf-fun-things-mobileImg1 {
    background-color: #FFEDED;
}
.pf-fun-things-mobileImg2 {
    background-color: #FBE9FF;
}
.pf-fun-things-mobileImg1 img {
    border-radius: 40px;
}
.pf-fun-things-mobileImg1 img, .pf-fun-things-mobileImg2 img {
    /* clip-path: inset(0px 0px 201px 0); */
    position: absolute;
}
.pf-fun-things-mobileImg2 img {
    border-radius: 36px;
}
.pf-fun-things-mobileImg3{
    background-color: #E1F2FF;
    width: 530px;
    display: flex;
    justify-content: center;
    padding-bottom: 46px;
    position: relative;
    height: 246px;
    overflow: hidden;
}
.pf-fun-things-mobileImg3 img {
    width: 238px;
    height: auto;
    position: absolute;
    clip-path: inset(272px 0px 0px 0);
    margin-top: -271px;
    border-radius: 42px;
}
.pf-fun-things-img-wrap button {
    margin-top: 10px;
    width: 100%;
    max-width: 530px;
    text-align: center;
    padding: 20px 0;
    font-size: 16px;
    line-height: 19px;
    font-weight: 300;
    color: #FFFFFF;
    background-color: #1877F2;
    border: 1px solid #1877F2;
    letter-spacing: 1px;
    cursor: pointer;
}
.pf-fun-things-img-wrap button:hover {
    opacity: 0.9;
}
@media only screen and (max-width: 998px) { 
    .pf-fun-things-wrap {
        flex-direction: column;
    }
}
@media only screen and (max-width: 580px) { 
    .pf-fun-things-img-cont {
        flex-direction: column;
        align-items: center;
    }
    .pf-fun-things-mobileImg1, .pf-fun-things-mobileImg2 {
        display: flex;
        justify-content: center;
        width: 300px;
    }
    .pf-fun-things-mobileImg3 {
        max-width: 300px;
    }
    .pf-fun-things-mobileImg3 img {
        width: 224px;
        clip-path: inset(242px 0px 0px 0);
        margin-top: -242px;
    }
    .pf-fun-things-img-wrap button  {
        max-width: 300px;
    }
}
@media only screen and (max-width: 320px) { 
    .pf-fun-things-mobileImg1, .pf-fun-things-mobileImg2 {
        width: 220px;
    }
    .pf-fun-things-mobileImg3 {
        max-width: 220px;
    }
    .pf-fun-things-img-wrap img {
        width: 200px;
    }
    .pf-fun-things-mobileImg3 img {
        width: 200px;
        clip-path: inset(194px 0px 0px 0);
        margin-top: -194px;
    }
}
/* =================================================== Fun things CSS Ends ===================================================*/
/* ===================================================  Projects CSS Begins ===================================================*/
.pf-projects-wrap {
    padding: 60px 0;
    max-width: 1090px;
    width: 90%;
    margin: 0 auto;
}
.pf-project-header {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    margin-bottom: 82px;
}
.pf-projects-list {
    max-width: 916px;
    width: 90%;
    margin: 0 auto;
}
.pf-projects-item {
    margin-bottom: 60px;
}
.pf-project-title a {
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 28px;
    color: #000000;
}
.pf-project-title.pf-comming-soon {
    display: flex;
    align-items: center;
    gap: 28px;
}
.pf-project-time-span {
    font-size: 14px;
    font-weight: 300;
    line-height: 16px;
    color: #1877F2;
    margin-bottom: 16px;
}
.pf-project-cont {
    margin-top: 16px;
}
.pf-projects-content {
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    color: #797979;
    margin-top: 16px;
    letter-spacing: .5px;
}
.pf-project-board-img {
    cursor: pointer;
}
.pf-project-board-img img {
    width: 100%;
    height: auto;
}
.pf-project-board-img img:hover {
    opacity: .8;
}
.pf-interLib-work-prog-btn {
    background-color: #292929;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #FFFFFF;
    border-radius: 6px;
    /* position: absolute;
    right: 28%;
    top: 50%;
    transform: translate(50%, -50%);    */
}
@media only screen and (min-width: 1520px) { 
    .pf-projects-content, .pf-project-time-span {
        font-size: 16px;
        line-height: 26px;
    }
}
@media only screen and (max-width: 998px) {  
    .pf-project-title a {
        font-size: 28px;
    }
    .pf-project-title.pf-comming-soon{
        flex-direction: column;
        gap: 14px;
    }
}
@media only screen and (max-width: 576px) { 
    .pf-project-title a {
        font-size: 25px;
        line-height: 35px;
    }
}

/* =================================================== Footer css Begins ===================================================  */
.pf-footer {
    margin-bottom: 60px;
}
.pf-footer-wrap {
    max-width: 985px;
    width: 90%;
    margin: 0 auto;
    border-top: 1px solid #333333;
    padding-top: 60px;
}
.pf-footer-content {
    font-size: 32px;
    line-height: 42px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 50px;
    max-width: 680px;
}
.pf-footer-contact {
    display: inline-flex;
    align-items: center;
    gap: 90px;
}
.pf-footer-contact a {
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    color: #898989;
    /*margin-bottom: 50px;*/
}
.pf-footer-contact a:hover {
    text-decoration: underline;
}
.pf-footer-note, .pf-footer-note a {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #898989;
}
.pf-footer-note a {
    text-decoration: underline;
}
@media only screen and (min-width: 1520px) { 
    .pf-footer-contact a, .pf-footer-note, .pf-footer-note a  {
        font-size: 16px;
        line-height: 26px;
    }
}
@media only screen and (max-width: 668px) { 
    .pf-footer-content{ 
        font-size: 28px;
        line-height: 36px;
    }
    .pf-footer-contact { 
        gap: 60px;
    }
}
@media only screen and (max-width: 576px) { 
    .pf-footer-contact { 
        gap: 32px;
    }
}
/* =================================================== Footer css Ends ===================================================  */