@import url("../css/fonts.css");



html,body{
    margin: 0%;
    box-sizing: border-box;
    overflow-x: hidden;
}


:root{

    /* declaring colors */
    --text-grey:#3f4954 ;
    --text-light:#686666da;
    --bg-color:#0f0f0f;
    --white:#ffffff;
    --midnight:#104f55;

    /* declaring gradients */
    --sky:linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);

    /* declaring fonts */
    --Abel:"Abel" , cursive;
    --Anton:"Anton" , cursive;
    --Josefin:"Josefin" , cursive;
    --Lexend:"Lexend" , cursive;
    --Livvic:"Livvic" , cursive;
  
    /* Box Shadow for blog item*/
    --shadow:0 15px 20px rgba(0,0,0,0.2);

}


/* Global Classes */

a{
    text-decoration: none;  
    color: var(--text-grey); 
}

.flex-row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

ul{
    list-style-type: none;
}


h1{
    font-family: var(--Lexend);
    font-size: 2.5rem;
}

h2{
    font-family: var(--Lexend);
}

h3{
    font-family: var(--Abel);
    font-size: 1.3rem;
}

button.btn{
    border: none;
    border-radius: 2rem;
    padding: 1rem 3rem;
    font-size: 1rem;
    font-family: var(--Livvic);
    cursor: pointer;
}

span{
    font-family: var(--Abel);
}

.container{
    margin: 0 5vw;
}

.text-grey{
    color: var(--text-grey);
}

p{
    font-family: var(--Lexend);
    color: var(--text-light);
}

/* -x- Global Classes -x- */


/* -------------------------navbar ------------------------------*/
.nav{
    background-color: white;
    padding: 0 2rem;
    height: 0rem;
    min-height: 10vh;
    overflow: hidden;
    
}

.nav .nav-menu{
    justify-content: space-between;
}

/* border */
.nav-menu{

    /* border: 1px solid red; */

}
/* border */

.nav .toggle-collapse{
    
    position: absolute;
    top: 0%;
    width: 90%;
    cursor: pointer;
    display: none;
    

}

.nav .toggle-collapse .toggle-icon{
    /* border: 1px solid; */
    display: flex;
    justify-content: flex-end;
    padding: 1.8rem 0;
}

.nav .toggle-collapse .toggle-icon i{
    font-size: 1.4rem;
    color: var(--text-grey);
      
}

.collapse{
    height: 30rem;
}

.nav .nav-items{
    display: flex;
    margin: 0;
}

.nav .nav-items .nav-link{
    padding: 1.6rem 1rem;
    position: relative;
    font-family: var(--Abel);
    font-size: 1.1rem;
}

.nav .nav-items .nav-link:hover{
    background-color: var(--midnight); 
}


.nav .nav-items .nav-link:hover a{
    color: var(--white);
}



.nav .nav-brand a{
    padding: 1rem 0;
    display: block;
    /* border: 1px solid; */
    font-family: var(--Lexend);
    font-size: 1.6rem;

}

.nav .social{
    padding: 1.4rem 0;
}


.nav .social i{
    padding: 0.2rem;
}


.nav .social i:hover{
    color: #a1c4cf;
}

/* -x- navbar -------------------------------------------------*/


/*    -------------------- MAIN --------------------------------*/


/* Site-Title */

main .site-title{
    /* border: 1px solid red; */
    background: url("../images/Background-image.png");
    background-size: cover;
    height: 110vh;
    display: flex;
    justify-content: center;
}

main .site-title .title-contents{
    /* border: 1px solid green; */
    padding-top: 10rem;
    text-align: center;
    color: var(--white);
}

main .site-title h3,h1{
    margin: .3rem;
   
}

main .site-title .btn{
    margin: 1.8rem;
    background: var(--sky);
}

main .site-title .btn:hover{
    
    background: transparent;
    border: 1px solid var(--white);
    color: var(--white);
}


/* x Site-Title x */




/* OWL carousel for blog --------------*/

main .blog{
    /* border: 3px solid; */
    background: url("../images/Abract01.png");
    background-repeat: no-repeat;
    background-position: right;
    height: 100vh;
    width: 100%;
    background-size: 65%;

}

main .blog .container{
    /* border: 1px solid blue;  */
    margin: 0 5vw;
    padding: 10px;
  
    
}

main .blog .blog-post{
    /* border: 1px solid red; */
    padding-top: 6rem;
   
}

/* blog item styling */

main .blog .blog-content{
   
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 80%;
    margin: 3rem 2rem;
    box-shadow: var(--shadow);
}

main .blog-content .blog-title{
    
    padding: 2rem 0;
}


main .blog-content .btn-custom{
    padding: .7rem 2rem;
    background: var(--sky);
    margin: .5rem;
}

main .blog-content .blog-title span{
    display: block;
}


/* x blog item styling x */


/* x OWL carousel for blog end---------- */




/* owl carousel navigation styling */

section .container .owl-nav{ /*ye "owl-nav" wali class humne khud nai banai yeh khud se ban jaati hai*/

position: absolute;
top: 0%;
margin: 0 auto;
width: 100%;
}

section .container .owl-nav .owl-prev .owl-nav-previous,
section .container .owl-nav .owl-next .owl-nav-next{
    background: transparent;
    color: var(--text-grey);
    font-size: 2rem;


}

/* removing hover effect from behind the navigation icons */
.owl-theme .owl-nav [class*=owl-]:hover{
    background: transparent;
    color: var(--midnight); /*this code of line is not working and i dont know why*/  
}
 



/* this code is also helping to remove hover effect, but i don't prefer it, u can uncomment and use: */
/* section .container .owl-nav .owl-prev,
section .container .owl-nav .owl-next:hover{
    background: transparent !important;
} */



/* owl carousel navigation styling end*/



/* -----------Site Content------------ */

main .site-content{
    /* border: 1px solid blue; */
    display: grid;
    grid-template-columns: 70% 30%;
}

main .post-content{
    /* border: 2px solid; */
    width: 100%;
   
}

main .post-image{
     

}

main .post-title{
    
}

main .site-content .post-content .post-image,.post-title{
    padding: 1rem 2rem;
    position: relative;
   
    
}

main .site-content .post-content .post-image .post-info{
    background: var(--sky);
    padding: 1rem;
    position: absolute;
    bottom: 0%;
    left: 20vw;
    border-radius:3rem ;

}

main .site-content .post-content .post-image .post-info span{
    margin:0 .5rem;
}

main .site-content .post-content .post-image>div{
    overflow: hidden;
}

main .site-content .post-content .post-image .img{
    width: 100%;
    transition: all 1s ease;
}

main .site-content .post-content .post-image .img:hover{

transform: scale(1.3);

}

main .post-content .post-title a{
    font-family: var(--Anton);
    font-size: 1.5rem;
}

main .post-content .post-title .post-btn{
    border-radius: 0 ;
    padding: .7rem 1.5rem;
    background: var(--sky);
}

main .site-content .pagination{
    justify-content: center;
    color: var(--text-grey);
    margin: 4rem 0;
}

main .site-content .pagination a{
    padding: .6rem .9rem;
    border-radius:2rem ;
    margin:0 .3rem ;
    font-family: var(--Lexend);
    
    
}

main .site-content .pagination a.pages{
    background: var(--text-grey);
    color: var(--white);
}


/* -----x------Site Content-----x----- */



/* ------------Side Bar Section------------ */ 


/* Category styling: */
main .site-content .sidebar-section .category-list{
    font-family: var(--Livvic);
}

main .site-content .sidebar-section .category-list .list-items{
    display: flex;
    justify-content: space-between;
    width: 70%;
    background: var(--sky);
    border-radius:3rem ;
    margin: .8rem 0;
    padding: .4rem 1rem;
}

main .site-content .sidebar-section .category-list .list-items a{
    color: black;
}
/* Category styling end */




/* 'popular Posts' section's post's Styling  */

main .site-content .sidebar-section .popular-posts .post-content{
    padding: 1rem 0;

}                                        

main .site-content .sidebar-section .popular-posts h2{
    padding-top:8rem ;
}

main .site-content .sidebar-section .popular-posts .post-info{ 
    /* yeh tamaam values hum overwrite krrhe hain : */
    padding: .4rem .1rem;
    /* ye uper phele se positioned hua wa hai islye isko phr sey position nahi lagai humne , srf bottom , top , left etc ki values change ki hain : */
    bottom: 0rem;
    left: 1.5rem; 
    /* --- */
    border-radius:0rem ;
    background: var(--white);
    
}

main .site-content .sidebar-section .popular-posts .post-title a{
    font-size: 1rem;
}

/* -x- 'popular Posts' section's post's Styling  */              


/* Newsletter : */

main .site-content .sidebar-section .newsletter{
    /* border: 1px solid; */
    padding-top:10rem;
}

main .site-content .sidebar-section .newsletter .form{
    /* border: 1px solid green; */
    padding: .5rem 3rem;
    display: flex;
    flex-direction: column;



}

main .site-content .sidebar-section .newsletter .input-field{
    height: 1.9rem;
    padding: .3rem .5rem;
    font-family: var(--Lexend);
    font-size: 1rem;
}

main .site-content .sidebar-section .newsletter .form-btn{
    background: var(--sky);
    border-radius: 0rem;
    margin: 1rem 0rem;
    padding:1rem;
}

.site-content .sidebar-section{
    /* border: 1px solid; */
}

/* Popular Tags : */

main .site-content .sidebar-section .popular-tags{
    /* border: 1px solid var(--midnight); */
    padding-top: 3rem;
    padding-bottom: 3rem;
}

main .site-content .sidebar-section .popular-tags .tags .tag{
    background: var(--sky);
    border-radius:3rem ;
    padding: .4rem 1rem;
    margin: .4rem .3rem;
    

}



/* -------x-----Side Bar Section------x------- */




/* --------------------------MAIN-------------------------------------*/



/* ------------------Footer ---------------------*/

footer{
    height: 100%;
    
    background: var(--bg-color);
    position: relative;
}

footer .container{
    
    display: grid;
    grid-template-columns: repeat(4,1fr);
    
}

footer .container h2{
    color: white;
}

footer .container>div{
    
    padding: 3rem .9rem;
}

footer .newsletter .form{
    
    
    /* display: inline-block; */
}


footer .newsletter .form input{
    padding: .5rem .7rem;
    border: none;
    background: transparent;
    color: var(--white);
    font-family: var(--Josefin);
    font-size: 1rem;
    background-color: black ;
    outline: none;

}



footer .newsletter .form button{
    border: none;
    padding: .5rem .7rem;
    background: var(--sky);
    cursor: pointer;
}




footer .container .instagram div > img{
    display: inline-block;
    margin: .3rem .4rem;
    width: 25%;
    height: 50%;


}

footer .container .follow-us a{
    color: var(--white);
    padding: .4rem;

}

footer .copyright{
    justify-content: center;
    font-family: var(--Josefin);
}

footer .copyright span{
    color: var(--white);
    font-family: var(--Josefin);
}

footer .move-up{
    position: absolute;
    right: 6%;
    top: 50%;

    
}
/* 
footer .move-up span{

} */

footer .move-up i{
    color: var(--midnight);
    font-size: 2rem;
}

footer .move-up i:hover{
    color: white;
    cursor: pointer;
    
}



/* ------------x------Footer --------------x-------*/






/* media query (less than or equal to 1130px) */

@media (max-width:1130px){
    main .site-content .post-content .post-image .post-info{
        left: 2rem;
        bottom: 1.2rem;
        border-radius:0% ;
    }

    main .site-content .sidebar-section .popular-posts .post-info{
        display: none !important;
    }
}







/* media query (less than or equal to 1100px) */

@media (max-width:1100px){
    footer .container{
    
        
        grid-template-columns: repeat(2,1fr);
        
    }
}






/* media query (less than or equal to 760px) */

    @media (max-width:760px) {

        .nav .nav-menu, .nav .nav-items{
            flex-direction: column;
        }
        
        .nav .toggle-collapse{
            display: initial;
        }

        main .site-content{
            
            grid-template-columns:repeat(1, 1fr);
        }

        footer .container{
    
        
            grid-template-columns: repeat(1,1fr);
            
        }
    }








/* media query (less than or equal to 530px) */

@media (max-width:530px){
    main .blog{
        height: 125vh;
    }

    main .site-content .post-content .post-image .post-info{
        position: initial;
        
        
    }

    main .site-content .post-content .post-image .post-info span{
       font-size: 1rem;
    }

    footer .copyright{
        padding: 0 1.4rem;
        text-align: center;
        line-height: 2rem;
    }

    
}








/* media query (less than or equal to 460px) */

@media (max-width:460px){


    main .site-content .post-content .post-image .post-info{
        /* position: initial; */
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(1,1rem);
        grid-column-gap: .2rem ;
        padding: .2rem 1rem;
        
        
        
    }

    main .site-content .post-content .post-image .post-info span:nth-child(1){
    
     display: none;
      
      
       
    }
    
    main .site-content .post-content .post-image .post-info span{
    
       font-size: .8rem;
       
       
       
    }


   
    

}


/* media query (less than or equal to 320px) */

@media (max-width:320px){
    nav .toggle-collapse{
        width: 80% !important;
    }
}