@import url('https://fonts.googleapis.com/css2?family=Unbounded&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@600&display=swap');
*{
    margin: 0;
    padding: 0;
}

html{
    scroll-behavior: smooth;
}


#home{
    background: rgba(0, 0, 0, 0.4) url(navinmishraimgs/main.jpg);
    height: 100vh;
    background-size: cover;
    background-blend-mode: darken;
    background-position-x: center;
}

.nav {
    width: 100%;
    height: 65px;
    position: fixed;
    line-height: 65px;
    text-align: center;
    z-index: 10;
}

.nav div.logo {
    float: left;
    width: auto;
    height: auto;
    padding-left: 3rem;
}

.nav div.logo a {
    text-decoration: none;
    color: #fff;
    font-size: 2rem;
    font-family: 'Oswald', sans-serif;
    cursor: default;
}

.nav div.logo a:hover {
    color: #ffffff;
}

.nav div.main_list {
    height: 65px;
    float: right;
}

.nav div.main_list ul {
    width: 100%;
    height: 65px;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Josefin Sans', cursive;
}

.nav div.main_list ul li {
    width: auto;
    height: 65px;
    padding: 0;
    padding-right: 3rem;
}

.nav div.main_list ul li a {
    text-decoration: none;
    color: #fff;
    line-height: 65px;
    font-size: 1.6rem;
    transition: 0.2s linear;

}

.nav div.main_list ul li a:hover {
    color: #dbdedc;
    transition: 0.2s linear;
}

.nav {
    padding-top: 10px;
    padding-bottom: 10px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}


.maintexts {
    /* float: right; */
    /* position: absolute; */
    /* bottom: 28px; */
    right: 53px;
    color: white;
    text-align: center;
    padding-top: 89px;
}

p.maintitle {
    font-size: 3rem;
    font-family: 'Kanit', sans-serif;
}
p.minititle {
    font-size: 1.4rem;
    font-family: 'Poppins', sans-serif;
}

#work {
    background: rgb(9 25 36);
    position: relative;
    color: white;
    padding: 13px;
}

#work img{
    cursor: pointer;
}

.line {
    width: 3px;
    height: 95%;
    background: black;
    position: absolute;
    left: 50%;
}

p.sectitle {
    font-family: 'Raleway', sans-serif;
    font-size: 2.3rem;
    text-align: center;
    padding: 16px;
    
}

p.workscontainerdivtitle {
    text-align: center;
    font-size: 1.4rem !important;
    font-family: 'Kanit', sans-serif;
    font-weight: 700;
    margin: 5px 0;
    font-style: italic;
}

.tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
}

button.tabsBtn {
    padding: 12px 25px;
    border: 4px solid rgb(9 25 36);
    font-size: 1.15rem;
    border-radius: 10px;
    background: #444B6E;
    color: white;
    font-family: 'Kanit';
}

button.tabsBtnActive {
    padding: 12px 25px;
    border-radius: 10px 10px 0px 0px !important;
    background: #E3D8F1;
    border-bottom: none !important;
    color: black;
    transition: linear 0.2s;
}

.swiper{
    width: 90%;
    height: fit-content;
    background: #E3D8F1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black !important;
} 


.swiper .swiper-pagination-bullet {
    background-color: #615f5f !important;
}

swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
}

.swiper .swiper-pagination-bullet-active {
     background: black !important;
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color)); 
}

.workscontainerdiv {
    padding: 34px;
}

.workscontainerdiv img {
    filter: grayscale(90%);
    transition: 0.2s linear;
}

.workscontainerdiv img:hover{
    filter: grayscale(0);
    transition: 0.2s linear;
    box-shadow: 4px 4px 18px 0px rgb(34, 34, 34);
}

section#about {
    /* display: flex; */
    padding: 0px 6vw;
    background: #181717;
    color: white;
}

.abtimgdiv{
    /* width: 66%; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.aboutimg {
    width: 50%;
    margin: 0 30px;
    border-radius: 10px;
    box-shadow: 4px 4px 18px 0px #717071;
}

.abouttxtsdiv {
    width: 50%;
}

p.abtd1 {
    font-family: 'Prompt', sans-serif;
    font-size: 1.1rem;
    word-spacing: 4px;
    margin: 10px 10px;
}

div.abtd2{
    display: none;
}

.abtnumsdiv {
    display: flex;
    margin: 30px 0;
    justify-content: center;
    align-items: center;
}

p.abtnumsmini {
    font-size: 1.2rem;
    color: #c3c3c3;
    font-family: 'Josefin Sans';
    margin-right: 48px;
}

.abtnums {
    font-size: 4rem;
    margin: 0 10px 0 20px;
    font-family: 'Raleway';
}

.abtnumsminiL {
    margin-right: 0;

}

#shoots{
    background: #413C58;
    color: white;
}

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

img.logos {
    width: 7vw;
    height: 7vw;
    border-radius: 20%;
    margin: 26px 39px;
    background: #0093DD;
}


.socials {
    font-family: 'Montserrat';
}

.socialstitle{
    font-size: 2rem;
    font-family: 'Raleway';
    text-align: center;
}

.socials span{
    padding-bottom: 0 !important;
    margin: auto;
}

.socials i{
        font-size: 42px;
}

a.sociallinks{
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.finfo {
    display: flex;
    padding: 30px 60px;
}

.socialm1{
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
}

.sa1{
    color: palevioletred !important;
}


.socialm2{
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
}

.sa2{
    color: rgb(0, 38, 255) !important;
}

.socialm3{
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
}

.sa3{
    color: gold !important;
}

.socialm4{
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
}

.sa4{
    color: #1977f3 !important;
}

.socialm5{
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
}

.sa5{
    color: #0a66c2 !important;
}

.contactinfo {
    display: flex;
    justify-content: space-around;
    padding: 40px;
}

.contactinfo span {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#contact i {
    font-size: 2.0rem;
    margin: 17px 0;
}

.contactinfo span {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2rem;
    font-family: 'Montserrat';
}

#contact {
    padding: 10px;
    background: #181922;
    color: white;
}

.credits {
    text-align: center;
    padding: 16px;
}

.credits p{
    font-family: 'Poppins';
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.credits span {
    font-family: 'Josefin Sans';
    font-size: 1.3rem;
}




















/* Media qurey section */

@media only screen and (max-width: 1168px) {
    .finfo{
        flex-direction: column;
        font-size: 1rem;
        padding: 0px !important;
    }
    .socials span{
        margin: 18px auto;
    }
    .abtimgdiv{
        flex-direction: column;
    }
    p.abtd1{
        margin-top: 30px;
    }
    .aboutimg{
        width: 100%;
    }
    .workscontainerdiv img {
        filter: grayscale(0%);
        transition: 0.2s linear;
    }
}

@media only screen and (max-width: 500px) {
    .main_list{
        display: none;
    }
    nav{
        text-align: center;
        font-size: 20px;
    }
    .maintitle {
        font-size: 2.6rem !important;
    }
}

@media only screen and (max-width: 900px){
    .workscontainerdiv div{
        flex-direction: column;
        align-items: center;
    }
    .workscontainerdiv div img{
        width: 80% !important;
    }
    
}

@media only screen and (max-width: 800px){
    img.logos {
        width: 16vw;
        height: 16vw;
        border-radius: 20%;
        margin: 26px 39px;
        background: #0093DD;
    }
    .abtnumsdiv{
        flex-direction: column;
        align-items: center;
        margin: 10px 0 40px;
    }
    .abtnums{
        margin: 10px 0 5px !important;

    }
    .abtnumsmini{
        margin-right: 0 !important;
    }
    .credits p{
        font-size: 1rem !important;
    }
    .credits span{
        font-size: 1rem;
    }
}

@media only screen and (max-width: 800px){
    .contactinfo{
        flex-direction: column;
        padding: 0 !important;
    }
    .contactinfo span{
        margin: 20px 0;
    }
    .maintexts{
        position: absolute;
        bottom: 28px;
    }
}

@media only screen and (max-width: 507px){
    .wkcat{
        padding: 14px 14px !important;
        font-size: 0.8rem !important;
    }

}

@media only screen and (max-width: 400px) {
    img.logos {
        width: 20vw;
        height: 20vw;
        border-radius: 20%;
        margin: 26px 39px;
        background: #0093DD;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .container {
        margin: 0;
    }
}

@media screen and (max-width:768px) {
    .nav div.logo {
        margin-left: 0px !important;
        float: none !important;
        padding-left: 0 !important;
    }
    .nav div.main_list {
        width: 100%;
        height: 0;
        overflow: hidden;
    }
    .nav div.show_list {
        height: auto;
        display: none;
    }
    .nav div.main_list ul {
        flex-direction: column;
        width: 100%;
        height: 100vh;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: #111;
        /*same background color of navbar*/
        background-position: center top;
    }
    .nav div.main_list ul li {
        width: 100%;
        text-align: right;
    }
    .nav div.main_list ul li a {
        text-align: center;
        width: 100%;
        font-size: 3rem;
        padding: 20px;
    }
    .nav div.media_button {
        display: block;
    }
    
    #home{
        /* background: rgba(0, 0, 0, 0.4) url(navinmishraimgs/main3.jpg) !important; */
        height: 100vh;
        background-size: cover !important;
        background-blend-mode: darken;
        background-position-x: 75%;
    }
}

@media screen and (max-width: 420px) {
    .maintitle{
        font-size: 2.2rem !important;
    }
    .minititle{
        font-size: 1.1rem !important;
    }
    .tabs {
        display: flex;
        align-items: center;
        justify-content: center !important;
    }
    button.tabsBtnActive {
        padding: 12px 23px;
    }
    button.tabsBtn {
        padding: 12px 12px;
    }
    #work{
        padding: 0;
    }
}

.affix {
    padding: 0;
    background-color: #676868;
}

.myH2 {
	text-align:center;
	font-size: 4rem;
}
.myP {
	text-align: justify;
	padding-left:15%;
	padding-right:15%;
	font-size: 20px;
}
@media all and (max-width:700px){
	.myP {
		padding:2%;
	}
    .abtd2{
        display: block !important;
    }
    #abtdPhone{
        display: block !important;
        margin-bottom: 5px;
    }
    .abtd1{
        display: none;
    }
    button.showmore {
        margin-left: 10px;
        background: none;
        border: 2px white solid;
        color: white;
        padding: 5px 10px;
        border-radius: 8px;
        font-family: 'Raleway';
    }
}