@font-face{
    font-family: "Trans-light";
    src: url(./fonts/Transcend\ Light.otf);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.main-container{
    background: #FFFDEC;
}

.home-container{
    /* background:linear-gradient(rgba(39, 58, 78,0.3),rgba(39, 58, 78,0.4),black),url("./Images/Home-Container.jpeg"); */
    background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3),#000),url(./Images/Home-Container.jpeg);
    width: 100%; 
    height:100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

nav{
    background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5),rgba(39,58,78,0.7));
    width: 100%;
    height: 60px;
    position: relative;
    display: grid;
    grid-template-areas: "logos auto auto auto auto auto auto auto auto auto auto auto auto options icons";
}

#check{
    display: none;
}

.active{
    color: #ffda43;
}

#logo{
    line-height: 60px;
    padding: 0px 60px;
    grid-area: logos;
    color: #ffda43;
    user-select: none;
}

nav h2{
    font-weight: 500;
    font-size: 2rem;
    letter-spacing: 5px;
}

#icon{
    display: none;
    font-size: 30px;
    line-height: 60px;
    grid-area: icons;
}

#option{
    grid-area: options;
}

nav ul{
    text-align: end;
    line-height: 60px;
}

nav ul li{
    display: inline-block;
}
nav ul li a{
    margin-right: 30px;
    color: #fff;
    font-size: 1rem;
    font-family: "Trans-light";
    text-decoration:none ;
}

nav ul li a:hover{
    color: #ffda43;
    transition: all .5s;
}


.home-section{
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    top: 30%;
}

.home-section h1{
    font-weight: 500;
    font-size: 60px;
    letter-spacing: 5px;
    color: #fff;
}

.home-section h1 span{
    color: #ffda43;
}

.home-section h6{
    color: #fff;
    font-size: 1.5rem;
    line-height: 40px;
    letter-spacing: 5px;
    font-weight: 400;
}
.btn{
    display:grid;
    justify-content: center;
    align-items: center;
}
.home-section button{
    width: 150px;
    height: 40px;
    border: 2px solid #555;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    align-content: center;
    margin: 20px 0px;
    font-size: 0.7rem;
    letter-spacing: 3px;
    padding: 0px 10px;
}

.home-section button:hover{
    color: #ffda43;
    border: 1px solid #ffda43;
    transition: all .5s;
}

/* --------------------portfolio----------------------- */
.portfolio{
    width: 100%;
    /* background: red; */
}

.portfolio-container{
    /* width: 98%; */
    /* margin: 20px auto 0 auto; */
    margin: auto;
    /* border-radius: 10px; */
    background:linear-gradient(149deg, #192247 0%, #210e17 96.86%);
    padding: 15px;
}

.portfolio-title{
    color: #fff;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 80px;
    text-align: center;
}

.portfolio-box{
    width: 100%;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
}

.portfolio-box .box{
    position: relative;
    border-radius: 5px;
    color: #000;
    height: 400px;
    overflow: hidden;
}

.portfolio-box .box:hover .intro{
    bottom: 0;
    transition: all 1s;
}

.img1{
    background: url(./Images/1.jpg);
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    box-shadow: 0px 1px 0px #fff;
}

.img2{
    background: url(./Images/2.jpg);
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    box-shadow: 0px 1px 0px #fff;
}

.img3{
    background: url(./Images/3.jpg);
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
     object-fit: cover;
     box-shadow: 0px 1px 0px #fff;
}

.box .portfolio-inner-title span{
    position: absolute;
    width: 100%;
    font-size: 1.5rem;
    line-height: 40px;
    bottom: 0;
    background:linear-gradient(149deg, #192247 0%, #210e17 96.86%);
    text-align: center;
    font-family: "Trans-light";
    color: #fff;
}
.intro{
    background:linear-gradient(rgba(39, 58, 78,0.3),rgba(39, 58, 78,0.4),black);
    position: absolute;
    bottom: -500px;
    height: 100%;
    text-align: center;
    align-content:center;
    color: #fff;
    padding: 0px 20px;
    font-size: .9rem;
}

/* --------------about----------- */
.about{
    width: 100%;
}

.about-conatiner{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    /* width: 98%; */
    /* border-radius: 10px; */
    background:linear-gradient(149deg, #192247 0%, #210e17 96.86%);
    /* box-shadow: 2px 2px 5px #555,2px 2px 4px #555; */
    /* margin: 15px auto 0 auto; */
}
.about-box{
    min-height: 100%;
    height: 500px;
}
.about-box img{
    width: 100%;
    height: 100%;
    padding: 15px;
    object-fit: cover;
}

.about-box-1{
    height: 100%;
    padding: 15px;
}
.about-box-1 .first{
    margin-top: 8px;
}

.about-box-1 h5{
     font-weight: 500;
     font-size: 2rem;
     color: #fff;
     font-family: "Trans-light";
}

.about-box-1 h6{
    margin-top: 70px;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 40px;
    color: #fff;
    font-family: "Trans-light";
}

.about-box-1 p{
    font-size: 0.8rem;
    font-weight: 100;
    color: lightgray;
    text-align: justify;
    font-family: "Trans-thin";
}

/* -----book container--- */

.book{
    width: 100%;
}

.book-container{
    /* width:98%; */
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    /* margin: 15px auto 0 auto; */
    /* border-radius: 10px; */
    background:linear-gradient(149deg, #192247 0%, #210e17 96.86%);
}

.book-box-1{
    height: 100%;
    padding: 15px;
}

.book-box-1 h2{
    font-size: 2rem;
    font-weight: 500;
    color: rgb(255,255, 255);
}

.book-box-1 p{
    font-size: .9rem;
    color: #fff;
    font-weight: 500;
    margin-top: 8px;
    text-align: justify;
}

.book-box-1 span{
    display: block;
    font-size: 3rem;
    color: #fff;
    margin-top: 10px;
    font-weight: 500;
}

.book-box-1 button{
    width: 100px;
    height: 40px;
    align-content: center;
    border-radius: 5px;
    border: 1px solid #555;
    background: #fff;
    outline: none;
    color: #000;
}

.book-box-1 button:hover{
    background: #000;
    transition: all .5s;
}
.book-box-2{
    width: 100%;
    height: 345px;
    min-height: 100%;
    padding: 15px;
}
.book-box-2 img{
    height: 100%;
    width: 100%;
    padding: 0;
    background: lightgrey;
    border-radius:10px ;
    object-fit: cover;
}


/* ----Gallery container-- */
.gallery{
    width: 100%;
}
.gallery-container{
    /* width: 98%; */
    /* margin: 15px auto 0 auto; */
    /* border-radius: 10px; */
    display: grid;
    grid-gap: .2rem;
    padding: 15px;
    background:linear-gradient(149deg, #192247 0%, #210e17 96.86%);
    grid-template-columns: repeat(4,1fr);
} 
.gallery-box{
    min-height: 200px;
    height: 200px;
    background: #fff;
}
.gallery-box img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* background: #ffda43; */
}

.gallery-box:nth-child(1){
    /* background: #ffda43; */
}
.gallery-box:nth-child(2){
     grid-column: 2 / span 2 ;
}

.gallery-box:nth-child(3){
    /* background: #ffda43; */
}

.gallery-box:nth-child(4){
    height: 404px;
    grid-row: 2 / span 4;
}
.gallery-box:nth-child(9){
    height: 404px;
    grid-column-start: 4;
    grid-row: 2 / span 4;
}
.gallery-box:nth-child(5){
    grid-column-start: 2;
    grid-row: 2;
}
.gallery-box:nth-child(6){
    grid-column-start: 3;
    grid-row: 2;
}
.gallery-box:nth-child(7){
    grid-column-start: 2;
    grid-row: 3/span 3;
}
.gallery-box:nth-child(8){
    grid-column-start: 3;
    grid-row: 3/span 3;
}


/* -----------blog container------------- */

.blog{
    width: 100%;
}
.blog-container{
    display: grid;
    grid-template-columns: 1fr;
    /* width: 98%; */
    background:linear-gradient(149deg, #192247 0%, #210e17 96.86%);
    /* border-radius: 10px; */
    padding: 15px;
    /* margin: 15px auto 0 auto;    */
}
.blog-container #block{
     padding-top: 0;
}
.blog-container #block1{
    padding-bottom: 0;
}
.blog-slider{
    height: 100vh;
    overflow: auto;
}
::-webkit-scrollbar{
    width: 0;
}

.blog-title{
    color: #fff;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 50px;
    text-align: center;
}

.blog-box{
   display: grid;
   grid-template-columns: repeat(auto-fit , minmax(300px,1fr));
   padding: 0px 0px 15px 0px;
}

.blog-box-items{
    height: 300px;
    background-color: lightgrey;
}
.blog-items-1{
    padding: 10px;
}

.blog-items-2{
    padding: 10px;
}
.blog-box-items img{
   height: 100%;
   width: 100%;
   object-fit: cover;
}

.blog-user{
    position: relative;
}
.blog-user i{
    font-size: 2.2rem;
    display: inline-block;
}
.blog-user span{
    font-size: .97rem;
    position: absolute;
    display: inline-block;
}
.blog-user small{
    position: absolute;
    top:19px;
    font-size: .7rem;
}

.blog-details{
    margin-top: 40px;
}

.blog-details h2{
  font-size: 1.5rem;
  line-height: 60px;
  font-weight: 500;
}

.blog-details p{
    font-family: "Trans-light";
    font-size: .8rem;
    color: #555;
    line-height: 20px;
}

.blog-details hr {
  width: 100%;
  margin-top: 65px;
}

.blog-views{
    display: grid;
    position: relative;
}

.views-show{
    font-family: "trans-light";
    font-size: .7rem;
}
#cmd{
    margin-left: 5px;
}
.views-show small{
    font-size: .7rem;
}
.views{
    position: absolute;
    right: 0;
    font-size: 1.3rem;
    color: #000;
}
.views:hover{
    color: red;
}

/* ----------contact container---------- */

.contact{
    width: 100%;
    background: #000;
}
.contact-container{
    /* width: 99%; */
    /* margin: 15px auto 0 auto; */
    display: grid;
    grid-template-columns: repeat(auto-fit , minmax(300px , 1fr));
    /* border-radius: 10px;  */
}
.contact-box{
    height: 580px;
}
.contact-box-1{
    height: 580px;
    padding: 15px;
}
.contact-box-2{
    padding: 15px;
    height: 580px;
    width: 100%;
}
.contact-box img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.contact-box h2{
    font-weight: 500;
    font-size: 1.8rem;
    color: #fff;
}

.contact-box h6{
    font-weight: 500;
    font-size: .8rem;
    color: #fff;
}

.input-container{
    margin: 20px auto;
}
form label{
    display: block;
    margin-top: 10px;
    color: #fff;
    margin-bottom: 5px;
}
form input{
    width: 100%;
    height: 40px;
    border: 1px solid #fff;
    background: #555;
}
form textarea{
    width: 100%;
    height: 100px;
    padding: 5px 15px;
    outline: none;
    background-color: #555;
    border: 1px solid #fff;
}
form button{
    background: #555;
    color: #fff;
    font-size: 1.1rem;
    padding: 0px 20px;
    width: 130px;
    height: 40px;
    border: none;
    outline: none;
    border-radius: 5px;
    margin-top: 10px;
}
form button:hover{
    background: #000;
    transition: all .5s;
}

input{
    padding: 0px 15px;
    outline: none;
}



/* ---------contact-details------------- */
.contact-details{
    display: grid;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 3px 0 0 0 ;
    padding: 20px 0;
    background: #000;
}

.contact-icons{
    width: 100%;
    text-align: center;
}

.contact-icons i{
    font-size: 2rem;
    cursor: pointer;
    color: #fff;
}
.footer{
    width: 100%;
    margin-top:10px;
}
.footer p{
    font-size: .9rem;
    color: #fff;
}

.bxl-pinterest-alt:hover{
    color: red;
    transition: all .5s;
}

.bxl-twitter:hover{
    color: rgb(109, 169, 192);
    transition: all .5s;
}
.bxl-facebook-circle:hover{
    color: navy;
    transition: all .5s;
}
.bxl-instagram-alt:hover{
    background: -webkit-linear-gradient(#515bda,#8134af,#dd2a7b,#feda77,#f58529);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all .5s;
}