@font-face {
    font-family: Raj;
    src: url(fonts/Rajdhani-Regular.ttf);
}

/*   Body Edits */
/*--------------------------*/
body{
    background-color: rgb(15, 15, 15);
    font-family: Raj;
    line-height: 1.2em;
    color: rgb(185, 185, 185);
    margin: 0%;
    overflow-y: hidden;
    overflow-x: hidden;
    }

/*   CSS Grids */
/*--------------------------*/
.grid-container{
    display:grid;
    grid-template-columns: 30% 70%;
    /* grid-template-rows: 30% 30% 30% ; */
    grid-gap: 1px;
}
.grid-column1{
    align-items: center;
    grid-gap: 0px;
    padding: 80px;
}
.grid-column2{
    display:grid;
    grid-template-columns: 60% 40%;
    grid-template-rows:20vh 40vh 40vh;
    background-color: #333333;
    grid-gap: 0px;
    padding: 0px;
    grid-template-areas: 
    "itemA itemA"
    "itemB itemB"
    "itemD itemD";
}
.grid-itemA{
    grid-area: itemA;
    position: relative;
    background-color:rgb(15, 15, 15);
}
.grid-itemB{
    grid-area: itemB;
    position: relative;
    background-color:rgb(15, 15, 15);
}
.grid-itemC{
    grid-area: itemC;
    position: relative;
    background-color:rgb(15, 15, 15);
}
.grid-itemD{
    grid-area: itemD;
    position: relative;
    background-color:rgb(15, 15, 15);
}
.grid-itemE{
    grid-area: itemE;
    position: relative;
    background-color:rgb(15, 15, 15);
}
.grid-itemF{
    grid-area: itemF;
    position: relative;
    background-color:rgb(15, 15, 15);
}

/* Images & HOVER */
.imgItem{
    object-fit:contain;
    object-position: ;
    height: 100%;
    opacity: .2;
}
.imgItemA{
    opacity: .2;
    transition: .5s ease;
}
.imgItem2d{
    opacity: .75;
    transition: .5s ease;
}
.imgTextA{
    object-fit:contain;
    object-position: ;
    Width: 100%;
    opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;    
}
.imgTextA1{
    object-fit:contain;
    object-position: ;
    Width: 100%;
    opacity: 0;     
    
}
.imgTextD1{
    object-fit:contain;
    object-position: ;
    opacity: 0;     
    
}
.imgItem2a{
    object-fit:contain;
    object-position: ;
    height: 100%;
    opacity: .2;
    transition: .5s ease;
}

/* .houseItem{
    object-fit: fill;
} */

.grid-itemA:hover .imgItemA {
    opacity: 1;
  }
.grid-itemA:hover .imgTextA {
    opacity: 0;
  }
.grid-itemA:hover .imgTextA1 {
    opacity: 1;
  }
  .grid-itemC:hover .imgItem2a {
      opacity: 1;
    }
    .grid-itemC:hover .imgTextC {
        opacity: 0;
        transition: .5s ease;
    }
    .grid-itemD:hover .imgItem2d {
        opacity: 1;
    }
    .grid-itemD:hover .imgTextD {
        opacity: 0;
        transition: .5s ease;
    }
    .grid-itemD:hover .imgTextD1 {
        opacity: 1;
        transition: .5s ease;
      }
    


/* Image TEXTS */
.imgTextA{
    position:absolute;
    top: 80%;
    left: 5%;
    font-size: 30px;
    font-family: Raj;
    font-style: ;
    color: darkorange;
}
.imgTextA1{
    position:absolute;
    top: 80%;
    left: 5%;
    font-size: 30px;
    font-family: Raj;
    color:  rgb(255, 255, 255);
}
.imgTextD{
    position:absolute;
    top: 80%;
    left: 5%;
    font-size: 30px;
    font-family: Raj;
    font-style: ;
    color: darkorange;
}
.imgTextD1{
    position:absolute;
    top: 80%;
    left: 5%;
    font-size: 30px;
    font-family: Raj;
    color:  rgb(255, 255, 255);
}
.imgTextB{
    position: absolute;
    top: 90%;
    left: 5%;
    font-size: 30px;
    font-family: Raj;
    color: darkorange;
}
.imgTextC{
    position: absolute;
    top: 80%;
    left: 5%;
    font-size: 30px;
    font-family: Raj;
    color: darkorange;
}

.imgTextE{
    position: absolute;
    top: 80%;
    left: 5%;
    font-size: 30px;
    font-family: Raj;
    color: #fff;
}
.imgTextF{
    position: absolute;
    top: 80%;
    left: 5%;
    font-size: 30px;
    font-family: Raj;
    color: #fff;
}
/* HOVER IMAGE SETTINGS*/



/*   Navigation Bar */
/*--------------------------*/
    /* .topnav{
        background-color: #333;
        overflow: hidden;
        margin: 0;
    }

    .topnav a{
        float: left;
        color: ghostwhite;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 18;
        font-family: 'Bebas Neue', cursive; 
    }
    .topnav a:hover{
        background-color: darkorange;
        color:#333;
        
    } */
/*   Body Edits Labels */
/*--------------------------*/
h1{
    font-family: Raj, cursive;
    color: darkorange;
    border: orange;
}
h3{
    font-family: Raj, cursive;
    color: darkorange;
}

footer{
    font-size: small;
    font-family: Raj;
    color: ghostwhite;
}
a{
    color: orange;
}

/**/