/* *{
    padding: 0;
    margin: 0;
} */
.greyColor{
    font-weight: bold;
    margin: 80px;
    display: flex;
    margin-top: 60px;
    margin-bottom: 150px;
    color: gray;
}

#part1{
    display: grid;
    grid-gap:20px;
    width: 90%;
    
    margin: 80px;
    margin-top: -100px;
    grid-template-columns: auto auto;
    grid-template-rows: 200px 200px;
    grid-template: "left1 right1"
                   "left2 right2";
}

.left1{
    grid-area: left1;
    border: 1px solid rgb(197, 193, 193);
    margin-right: 20px;
    margin-bottom: 20px;
}
.left2{
    grid-area: left2;
    border: 1px solid  rgb(197, 193, 193);
    margin-right: 20px;
    margin-top: 20px;
}
.right1{
    grid-area: right1;
    border: 1px solid  rgb(197, 193, 193);
    margin-left: 20px;
    margin-bottom: 20px;
}
.right2{
    grid-area: right2;
    border: 1px solid  rgb(197, 193, 193);
    margin-left: 20px;
    margin-top: 20px;
}
#part1 img {
    width:30%;
    height: 200px;
    margin: 20px;
    float: left;
}
.part11{
    display: grid;
    float: left;
    grid-template-rows: 80px 80px 80px;
    width: 63%;
}
.part11 h2{
    margin-top: 20px;
    font-weight: normal;
}
.para1{
    margin-top: 0px;
    width: 100%;
    margin-left: 0px;
    font-weight: lighter;

}
.para2{
    margin-top: 40px;
    width: 40%;
    margin-left: 0px;
    
    color: blue;
}
.para3{
    margin-top: 30px;
    width: 100%;
    margin-left: 0px;
    font-weight: lighter;
}



#part2{
    display: grid;
    grid-gap: 20px;
    width: 90%;
    height: 450px;
    margin: 80px;
    grid-template-columns: auto auto;
    grid-template-rows: 50px 50px 50px 50px;
    grid-template: "left right";
    
    
}


.part21{
    grid-area: left;
    float: left;
    margin-right: 20px;
    
    
}
.part22{
    grid-area: right;
    
    float: left;
    margin-left: 20px;
   
}
.part21 img{
    width: 100%;
    height: 250px;
   
}
.part22 img{
    width: 100%;
    height: 250px;
}
.border{
    border: 4px solid teal;
    height: 180px;
    width: 0;
    margin-top: 18px;
    float: left;
    
}
.border1{
    border: 4px solid teal;
    height: 100px;
    width: 0;
    margin-top: 18px;
}
.part221{
    display: grid;
    float: left;
    grid-template-rows: 80px 80px ;
    width: 90%;
}
.part221 h2{
    margin-top: 20px;
    font-weight: normal;
    margin-left: 20px;
    font-size: 30px;
}
.para21{
    margin-top: 30px;
    width: 100%;
    margin-left: 20px;
    font-size: 20px;
    color: rgb(31, 29, 29);
    font-family:'Times New Roman';
    font-weight: lighter;

}
#part2 h4{
    color: blue;
    margin-top: 220px;
    font-weight: lighter;
}
.part222 h2{
    margin-top: -105px;
    font-weight: normal;
    margin-left: 30px;
    font-size: 30px;
}
.para223{
    margin-top: 30px;
    width: 100%;
    margin-left: 30px;
    font-size: 20px;
    color: rgb(31, 29, 29);
    font-family:'Times New Roman';
    font-weight: lighter;
}
/* .link{
    color: blue;
    margin-top: -100px;
    font-weight: lighter;
} */
/* ajinkya */
#header
{display:flex;
    flex-direction: row;
      
        width:100%;
        height:20%;
        justify-content: space-between;
}
    .box{
        width:8%;
        height:4%;
    
        text-align: center;
        margin:.5%;
        font-size: 110%;
    }
    #font{font-family: 'Potta One', cursive;
    font-size:20px ;
    font-weight:700}

    .box:nth-child(3){
        width:60%;
        }
    .box:nth-child(1), .box:nth-child(2),.box:nth-child(4),.box:nth-child(5){
        margin-top: 2%;
     }
     #tags{
         display:flex;
         flex-direction: row;
         width:70%;
         height:20%;
         
        padding:1%;
        margin:auto;

     }
     .box2{ 
        width:11%;
        height:4%;
    
    
        text-align: center;
        margin-top: 1%;
        font-size: 110%;
    }
    .box2:nth-child(2),.box2:nth-child(3){
        width:20%
    }
     
    #signup_box{padding:1%;
width:100%;
text-align: center;
    }
    #signup_box>h1{font-size:200%;}
    #signup_box>p{font-size:130%;}
    #email{width:20%;
        height:20%;
        font-size: 110%;
    }
    button{
        width:10%;
        height:20%;
        background-color: black;
        color: white;
        font-size: 110%;
    }
    #featured_box{height:30%;
        width:100%;
        padding:2%; 
        display: flex;
    }
    
   
    .box3{
        
        width:100%;
        height:10%;
       
        margin-top: 5%;
        clear:both;
        float: right;
    
    }
    
   /* ram */

.second{
    width:50%;
    height:30%;
    float:right;
    justify-content: space-between;
}
.first{height:100%;
    clear: both;
float:left;
margin-left:5%;}
#freshcont,#takingoffcont,#homecont,#nearcont,#explorecont
{
    
    height: 600px;
    
}
#freshcont>p,#takingoffcont>p,#homecont>p,#nearcont>p,#explorecont>p
{
    margin-left: 130px;
    color: rgb(85, 82, 82);
}
#fresh,#takingoff,#home,#near
{
    margin-top: 20px;
    display: flex;
    max-width: 1200px;
    float: left;
    overflow-x: scroll;
    margin-left: 120px;
}
#fresh div,#takingoff>div,#home>div,#near>div
{
    width: 400px;
    margin-left: 20px;
    
}
.clear
{
    clear: both;
}
.line
{
    height: 0.5px;
    background-color: rgb(114, 111, 111);
}
#explore
{
    margin-top: 20px;
    display: flex;
    float: left;
    margin-left: 120px;
}
#explore>div
{
    width: 300px;
    height: 500px;
    margin-left: 20px;
}
#explore>div>img
{
    width: 100%;
    height: 60%;
}
/* bhanu */
.sideH{
    color:grey;
    width:91%;
    margin:auto;
  }
#cont{
  display:grid;
  grid-template-columns: 20% 20% 20% 20%; 
  width:91%;
  /* height:90%; */
  gap:3%;
  margin: auto;
  grid-template: "a b c d" "a1 b1 c1 d1";
}
#cont>div{
  /* border:solid black; */
  height: 55vh;    
  
}
#A{
   background-image: url("https://ksr-ugc.imgix.net/assets/031/762/379/6e4c5fc2ddeb649ff57a684a009644fd_original.png?ixlib=rb-2.1.0&w=700&fit=max&v=1608142137&auto=format&frame=1&lossless=true&s=ceff7a3e1431e5058c8f19aeb80dc9e1");
   background-size:contain;
   grid-area: a;
}  
#B{
    background-image:url("https://ksr-ugc.imgix.net/assets/031/755/267/c625c10b46408fa8beb2bce279bfb10e_original.png?ixlib=rb-2.1.0&w=700&fit=max&v=1608072481&auto=format&frame=1&lossless=true&s=c0cea3f96b9d603d04140dca2ffabfa1");
    background-size:contain;
    grid-area: b;
}
#C{
    background-image: url("https://ksr-ugc.imgix.net/assets/031/177/159/78d513020e363f5f3483d48678cb3453_original.jpg?ixlib=rb-2.1.0&w=700&fit=max&v=1603807761&auto=format&frame=1&q=92&s=341f2f6662ee94de42ca45ce4032e480");
    background-size: contain;
    grid-area: c;
}
#D{
    background-image: url("https://ksr-ugc.imgix.net/assets/030/834/837/90bf0c6bf6ba888fcd8f35a3a85c1709_original.png?ixlib=rb-2.1.0&w=700&fit=max&v=1601587562&auto=format&frame=1&lossless=true&s=37227094bc3841e0aa64cebd3c882466");
    background-size: contain;
    grid-area: d;
}
#A1{
    grid-area: a1;
}
#B1{
    grid-area: b1;
}
#C1{
    grid-area: c1;
}
#D1{
    grid-area: d1;
}
@media (max-width:1024px){
    #cont{
        grid-template: "a b" "a1 b1" "c d" "c1 d1";
    }
}    
/*left responsive height*/ 

#bCont, #zineQ{
    display:grid;
    grid-template-columns: 49% 49%;
    gap:2%;
    width: 91%;
    margin: auto;        
}
#bCont>div,#zineQ>div{
   height:38vh;
   font-size: 20px;
   
}
#imgBlack{
    background-image: url("https://blog.hdwallsource.com/wp-content/uploads/2014/11/black-wallpaper-27635-28354-hd-wallpapers.jpg");
    background-size: contain;
    /* width:100%; */
}
#imgZine{
    background-image: url("https://ksr-ugc.imgix.net/assets/032/004/209/88ca1f65d5badfbb12744873670691d4_original.png?ixlib=rb-2.1.0&crop=faces&w=1024&h=576&fit=crop&v=1610563289&auto=format&frame=1&q=92&s=6a5c411057e6b53a163c5050e3b1e9ba");
    background-size: cover;  
        }
@media  (max-width:1024px){
    #imgBlack{
        grid-area: bi;
    }
    #bText{
        grid-area: bt;
    }
    #bCont{
        grid-template:"bi" "bt";
    }
    #zineQ{
        display: flex;
        flex-direction: column; 
    }
}
#pageLinks{
    display: flex;
    width:91%;
    margin: auto;
}
#pageLinks>div{
    margin-right:2%;
}
@media (max-width: 800px){
    #pageLinks{
        display: grid;
        
    }
}
#foot{
    display: grid;
    grid-template-rows: repeat(7);
    grid-template-columns: repeat(3,30%);
    width: 80%;
    margin: auto;
}
#foot>div{   
    margin-bottom: 4px;
    
}
#logo{
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 2%;
}
#logo>div{
    padding: 2%;
}
#logo select{
    padding: 10px;
}
#logo img{
    width:40px;
}
@media (max-width: 1024px){
    #logo{
        display: flex;
        flex-direction: column;
    }
}
#policy{
    display:flex;
    width:91%;
    margin: auto;
}
#policy>div{
    margin-right: 2%;
}
@media(max-width: 800px){
    #policy{
        display: grid;
        grid-template-columns: repeat(2, 30%);
    }
}