@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

body{
    font-family: 'Lato', sans-serif;
    font-size:18px;
}
a:hover{
    text-decoration: none;
}


/* typography */

h1{
    font-size:60px;
    font-weight:900;
    line-height:80px;
}
h2{
    font-size:30px;
    font-weight:700;
    line-height:48px;
}

h3 a {
    font-size: 40px;
    font-weight: 300;
    padding-top: 0px;

}

h3 a:hover {
    color: #676767;

}


h4{
    font-size:22px;
    font-weight:400;
    
}

h2, h4, p{
    color:#676767;
}
h4, p{
    line-height:32px;
}

h4 a{
    color: #2B2B2B;

}


h4 a:hover{
    color: #757575;
}




@media (max-width: 1024px) {
    h1{
        font-size:35px;
        line-height:45px; 
    }
    h1 img{
        width: 35px;
    }
    h2{
        font-size:22px;
        line-height:30px;
    }
    h4{
        font-size:22px;
    }
    p{
        font-size:14px;
    }
    h4, p{
    line-height:24px;
    }
}

@media (max-width: 768px) {
    h1{
        font-size:30px;
        line-height:45px; 
    }
    h1 img{
        width: 35px;
    }
    h2{
        font-size:22px;
        line-height:30px;
    }
    h4{
        font-size:22px;
    }
    br{
        display:none;
    }
}

/* text colors */
.primery_text{
    color:#2B2B2B;
}
.secondary_text{
    color:#676767;
}
.text-dark-unimoni{
    color:#343a40;

}

.text-white-jo-menu{
    color:#ffffff !important;

}

.text-white-joovo{
    color:#ffffff !important;

}

.edu_text_head{
    color:#2B2B2B;
    font-size:20px;
    line-height: 26px;
}

.edu_text{
    color:#2B2B2B;
    font-size:16px;
    line-height: 26px;
}

.edu_text_sec{
    color:#2B2B2B !important;
    font-size:18px !important;
    font-weight: normal !important;
   
}

.list-style li {
    
}
.list-style li span{
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 14px;
    line-height: 11px;
    font-weight: 600;
    padding: 10px;
}


/* project BG's */

.ikea{
    background-color:#FFF0E0;
}
.ikea-dark{
    background-color:#1A1312;
}

.about-grey{
    background-color:#F2F2F2;
}

.swych{
    background-color:#FFEAF4;
}

.swych-dark{
    background-color:#2d2b2c;
}

.unimoni{
    background-color:#E5F4FD;
}

.unimoni_dark{
    background-color:#234593;
}

.joovo{
    background-color:#2735AA;
}

.joovo_list{
    background-color:#D1D0F0;
}

.joovo_orange{
    background-color:#1c1e25;
}

.swych_big_text{
color:#D83888;
}

.unimoni_big_text{
    color:#30489E;
    }

.joovo_big_text{
color:#ff5800;

}

.ikea_big_text{
    color:#1C1211;
    
    }

.contact{
background: #2B2B2B;
border: 0;
padding: 10px 28px;
color: #fff;
transition: 0.4s;
}

.contact:hover{
    background: #757575;
    border: 0;
    padding: 10px 28px;
    color: #fff;
    transition: 0.4s;
    }

.cover-container{
    height:100vh;
background-image:
        linear-gradient(
            to right,
            white 80%,
            #2B2B2B 20%
        );
}
@media (max-width: 1440px) {
    .cover-container{
        background-image:
        linear-gradient(
            to right,
            white 70%,
            #2B2B2B 30%
        )
    }
}
@media (max-width: 992px) {
    .cover-container{
        height: auto;
        background-image:
        linear-gradient(
            to top,
            white 65%,
            #2B2B2B 35%
        )
    }
    .textcenter{
        text-align: center;
    }

    .mb-3, .my-3 {
        margin-bottom: 1rem !important;
    }

    .mt-0, .my-0 {
        margin-top: 0 !important;
    }
    
}
@media (max-width: 667px) {
    .cover-container{
        height: auto;
        background-image:
        linear-gradient(
            to top,
            white 75%,
            #2B2B2B 25%
        )

    }

    .cover-container-about{
        height: auto;
        background-image:
        linear-gradient(
            to top,
            white 100%,
            
        )

    }
   
    .textcenter{
        text-align: center;
    }

    .mb-3, .my-3 {
        margin-bottom: 1rem !important;
    }

    .mt-0, .my-0 {
        margin-top: 0 !important;
    }
    
    .mt-5, .my-5 {
        margin-top: 3rem !important;
    }

    .img-fluid {
        max-width: 100%;
        height: auto;
    }

}
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}
@-webkit-keyframes unfill {
    0%{
        width: 100%;
        height:100%;
        background: red;
    }
    50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 0%;
    height: 1px;
  }
}


.nav-link{
    font-size:14px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #aaa;
  height: 1px;
  animation: unfill 1s forwards;
  -webkit-animation: unfill 1s forwards;
  -moz-animation: unfill 1s forwards;
}
.fill ul li a {
    position: relative;
    transition: all 0.5s;
}
.fill ul li a:after {
  text-align: left;
  content: '.';
  margin: 0;
  opacity: 0;
}
.fill ul li a:hover {
  color: #333 !important;
  z-index: 1;
}
.fill ul li a:hover:after {
  z-index: -10;
  animation: fill 0.5s forwards;
  -webkit-animation: fill 0.5s forwards;
  -moz-animation: fill 0.5s forwards;
  opacity: 1;
}

.banner{
    margin:8em 0; 
}
@media (max-width: 1024px) {
 .banner{
    margin:1em 0; 
}

.mt-5, .my-5 {
    margin-top: 3rem !important;
}
}
.banner-content h1{
    font-weight:900;
}
@media (max-width: 992px) {
.banner-content .photo img{
        width: 25%;
        border-radius:50%;
        height: auto;
    }
}
}
.photo{
    transition: ease all 0.2s;
    overflow:hidden
}
.photo .aalap:hover{
    box-shadow:50px 70px 100px rgba(0,0,0,0.4);
    transform: scale(1.01) rotate(1deg);
    transition: ease all 0.2s;
}
.photo .linked_in{
    right:-12%;
    top:0;
    bottom:0;
}
@media (max-width: 768px) {
    .photo .linked_in{
        right: 0;
        top: 0;
        bottom: 0px;
        /* border-radius: 0 !important; */
        left: 0;
        width: 8% !important;
        padding: 2px;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto !important;
        margin-bottom: 0 !important;
        background: #333;
    }
}
@media (max-width: 414px) {
    .photo .linked_in{
        bottom: 10px;
    }
}

.project-box:hover{
    box-shadow:0px 12px 15px rgba(0,0,0,0.1);
    overflow:hidden;
}
/* .project-box:hover img{
    transform: rotate(1deg);
    transition: ease all 0.2s;
} */
.project_banner{
    height:90vh;
}
@media (max-width: 768px) {
 .project_banner{
    height:auto;
}   
}
.project_banner img{
    height:60%;
    
}
@media (max-width: 1024px) {
 .project_banner img{
    height:60%;

    
}

.project_banner{
    height:auto;
}

.home-scrolled-up{
    background-image:none;
    background-color: #2B2B2B;


}
}

@media (max-width: 1024px){

    .photo .linked_in{
        right: 0;
        top: 0;
        bottom: 0px;
        /* border-radius: 0 !important; */
        left: 0;
        width: 8% !important;
        padding: 2px;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto !important;
        margin-bottom: 0 !important;
        background: #333;
    }
    .list-style li {
    
    }
    .list-style li span{
        width: 30px;
        height: 30px;
        text-align: center;
        font-size: 14px;
        line-height: 11px;
        font-weight: 600;
        padding: 10px;
        margin-top: 5px;
    }

    .img-fluid {
        max-width: 100%;
        height: auto;
    }

}

.project-brief-contnet h5{
    font-size:14px !important;
    font-weight:600;
    color:#676767;
    line-height:24px;       
}

.project-brief-contnet p, .list-style li{
    font-size:18px !important;
    line-height:35px;
    color:black;
}

.home-smart-scroll, .ikea-smart-scroll, .swych-smart-scroll, .unimoni-smart-scroll, .joovo-smart-scroll{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
  }

.home-scrolled-down, .ikea-scrolled-down, .swych-scrolled-down, .unimoni-scrolled-down, .joovo-scrolled-down{
    transform:translateY(-100%); transition: all 0.3s ease-in-out;
    background-color:none !important;
 }
 .home-scrolled-up, .ikea-scrolled-up, .swych-scrolled-up, .unimoni-scrolled-up, .joovo-scrolled-up{
    transform:translateY(0); transition: all 0.3s ease-in-out;
 }
 .home-scrolled-up{ background-image:linear-gradient(to right,white 80%, #2B2B2B 20%) !important;}
 
 @media (max-width: 1024px) {
     .home-scrolled-up{
     background-image:linear-gradient(to right,white 70%, #2B2B2B 30%) !important;
     }
 }
 
 @media (max-width: 768px) {
     .home-scrolled-up{
     background-image: none !important;
     background-color: #2B2B2B !important;
     }
 }
 
 / Added !important /
 .ikea-scrolled-up{ background-color:#FFF0E0 !important;}
 .swych-scrolled-up{ background-color:#FFEAF4 !important;}
 .unimoni-scrolled-up{ background-color:#E5F4FD !important;}
 .joovo-scrolled-up{ background-color:#292FB1 !important;}
 
 / Edited to fix navigation issue /
.about .aalap{height:250px;}

.gradient_text{
    background: -webkit-linear-gradient(left,#ff8a00,#e52e71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition:ease all 0.5s;
}
.gradient_text:hover{
    background: -webkit-linear-gradient(right,#ff8a00,#e52e71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition:ease all 0.5s;
}

.subpages_container{
    min-height: calc(100vh - 170px);
}