*{
    margin: 0%;
    padding: 0%;
    font-family: sans-serif;
    box-sizing: border-box;
    font-size: 62.5%;
}
/* -----------page 0--------------- */
.c1{
    position: relative;
    width: 100%;
    height: 75rem;
    background:  black;
}
/* ------------nave bar----------- */
nav{
    display: flex;
    width: 84%;
    margin: auto;
    padding:  2rem 0;
    text-align: center;
    justify-content: space-between;
}
nav ul li{
    display: inline-block;
    list-style: none;
    margin:  1rem 2rem;
    text-align: center;
    font-size: 5rem;
    /* justify-content: space-between; */
}
nav ul li a{
    text-decoration: none;
    color: gold;
    font-weight: bolder;
}
img{
    width:  20%;
}
/* img:hover{
    width: 30%;
    transition: transform 0.5s;
} */
nav ul li :hover{
    border-bottom: solid gold;
    font-size: 5.5rem;
    transition: transform 1s;
}
.c2{
    margin-top: 6%;
    margin-left: 8%;
    /* text-align: center; */
}
.c2 h1{
    font-size: 5rem;
    color:  white;
    margin-bottom: 2rem;
}
.c2 a{
    text-decoration: none;
    color:  black;
    font-size:  1.5rem;
    background: white;
    padding: 1rem 1.8rem;
    display: inline-block;
    margin: 3rem 0;
    border-radius: 0.5rem;
}
span{
    color: gold;
    font-size: 5rem;
    font-family: 'Tulpen One', cursive;
}
/* span:hover{
    box-shadow:0 0 1rem gold, 0 0 2rem gold, 0 0 5rem gold, 0 0 10rem gold,0 0 20rem gold ;
    background-color: gold;
    color: black;
    font-size: 7rem; 
    transition: transform 0.5s;
     
} */
.c2 p{
    font-size: 2rem;
    color: white;
}
/* .c2 p:hover{
     text-shadow:  0 0 1rem gold, 0 0 2rem gold, 0 0 5rem gold, 0 0 10rem gold,0 0 20rem gold;
     transition: transform 0.5s;
}
.c2 a:hover{
    background-color: gold;
    color: black;
    box-shadow: 0 0 1rem gold, 0 0 2rem gold, 0 0 5rem gold, 0 0 10rem gold,0 0 20rem gold;
    transition: transform 0.5s;
} */
.box1{
    float: left;
    width: 60%;
}
.box2{
    float: left;
    width: 25%;
    background: url(anoop.jpg);
    background-size: cover;
    background-position: top;
    border-radius: 50%;
    animation: animate 0.5 linear infinite;
    border: 1rem solid gold;

}
/* .box2:hover{
    box-shadow:  0 0 1rem gold, 0 0 2rem gold, 0 0 5rem gold, 0 0 10rem gold,0 0 20rem gold;
    transition: transform 0.5s;
} */
 
.d{
    clear: both;
}
p{
    color: white;
}
.back{
    font-size: 5rem;
    text-transform: uppercase;
    text-shadow:  0 0 1rem gold, 0 0 2rem gold, 0 0 5rem gold, 0 0 10rem gold,0 0 20rem gold;
}
/* -----------------page 1--------------------- */
.page1{
    position: relative;
    height: 100rem;
    width: auto;
    background-color: black;
    color: white;
    border: 0.5rem solid black;
}
.page1 .left{
    position: absolute;
    right: 5%;
    height: 90%;
    top: 50%;
    width: 35%;
    transform: translateY(-50%);
    /* background-color:  pink; */
}
.box{
    height: 33.33%;
    width: 100%;
    /* background-color: ; */
    border-top: 0.4rem solid gold;
}
.left>.box>h4{
    font-size: 3.0rem;
}
/* .left>.box>h4:hover{
    color: gold;
    text-shadow: 0 0 1rem gold, 0 0 2rem gold, 0 0 5rem gold, 0 0 10rem gold,0 0 20rem gold ;
    font-size: 4rem;
    transition: transform 0.5s;
} */
.left>.box>h1{
    font-size: 5.0rem;
    /* padding: 20px; */
}
/* .left>.box>h1:hover{
   text-shadow:    0 0 5rem gold, 0 0 10rem gold,0 0 20rem gold;
   color: gold;
   font-size:7rem;
   transition: transform 0.5s;
} */
.circle{
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    /* height: 10vh; */
    float: right;
    background-color: cyan;
    border-radius: 50%;
     /* padding: 20px; */
     /* padding-bottom: 50px; */
     top: 0%;
     bottom: 0;
}
.circle:hover{
    box-shadow:0 0 1rem gold, 0 0 2rem gold, 0 0 5rem gold, 0 0 10rem gold,0 0 20rem gold ;
    background-color: gold;
    color: black;
    transition: transform 0.5s;

     

}
.circle i{
    color: white;
    font-size: 3.5rem;
     
}
.text1{
    margin: 5rem 5rem;
    height: 30%;
    width: 50%;
    position: absolute;
    z-index: 9;
}
.text1 h1{
    font-size: 7.0rem;
    margin-top: 2.0rem;
    /* border-bottom: 5px solid black ; */
    text-decoration-line:underline ;
    /* padding: 20px; */
    /* background-color: gray; */
}
/* .text1 h1:hover{
    background-color: gold;
    color: black;
    box-shadow: 0 0 1rem gold, 0 0 2rem gold, 0 0 5rem gold, 0 0 10rem gold,0 0 20rem gold;
    font-size: 9rem;
    transition: transform 0.5s; */
}
.text1 h4{
    font-size: 1.8rem;
    color: white;
    font-weight: 500;
    width: 70%;
    margin-top: 2rem;
    /* border: 2px solid black; */
    /* padding: 30px; */
}
/* .text1 h4:hover{
    box-shadow:0 0 1rem gold, 0 0 2rem gold, 0 0 5rem gold, 0 0 10rem gold,0 0 20rem gold ;
    background-color: gold;
    color: black;
    font-size: 2.2rem;
    transition: transform 0.5s; */
}
.text1 h5{
   color: red;
   transform: rotate(-20deg);
   position: absolute;
   left: -2%;
   font-weight: 800;
   font-size: 2rem;
}
/* .text1 h5:hover{
    font-size: 3rem;
    transition: transform 0.5s;
     
} */
/* --------------------------page 2----------------- */
#achivment{
    position: relative;
    background-color: black;
    border: .5rem solid black;
}
.box3{
    float: left;
    width: 30%;
    /* border: .2rem solid red; */
}  
.box4{
    float: left;
    width: 70%;
    /* border: .2rem solid red; */
    font-size: 2.7rem;
    /* font-weight: bold; */
}
.gallery img{
    width:   40rem;
    /* height: 1000%; */
}
.gallery{
    margin: 1rem;
    /* width:    100%; */
}
.c{
    clear: both;
}
.z2,.z1,.z3,.z4,.z5,.z6,.z7,.z8{
    /* background-color: lightgreen; */
    font-size: 2rem;
    padding: 2rem;
   color:  black;
}
.z2,.z1,.z3,.z4,.z5,.z6,.z7,.z8:hover{
    background-color: black;
}
/* p:hover{
    color: #fcda69;
    text-shadow:  0 0 1rem gold, 0 0 2rem   ;
    font-size: 3rem;
    transition: transform 0.5s;
} */
p{
    font-size: 2rem;
    color:  white;

}
h2{
    background-color: gold;
    font-size: 3rem;
    text-align: center;
}
/* h2:hover{
    
    box-shadow:0 0 1rem  cyan, 0 0 2rem  cyan, 0 0 5rem  cyan, 0 0 10rem  cyan,0 0 20rem  cyan ;
    background-color:  cyan;
    color: black;
   font-size: 5rem; 
    transition: transform 0.5s; 
} */
.heading h1{
    text-align: center;
    background-color: white;
    color: black;
    text-transform: capitalize;
    padding: 1rem;
    font-size: 5rem;
    
}
.heading h1:hover{
    box-shadow:0 0 1rem gold, 0 0 2rem gold, 0 0 5rem gold, 0 0 10rem gold,0 0 20rem gold ;
    background-color: gold;
    color: black;
/*     font-size: 7rem; */
    transition: transform 0.5s;
}
.bot a{
    text-decoration: none;
    color:  white;
    font-size:  1.5rem;
    background: red;
    padding: 1rem 1.8rem;
    display: inline-block;
    border-radius: 0.5rem;
    margin-left:  45%; 
}
.bot a:hover{
    background-color:  cyan;
    color: black;
    box-shadow: 0 0 1rem   cyan, 0 0 2rem    cyan, 0 0 5rem    cyan, 0 0 10rem    cyan,0 0 20rem    cyan;
}
/* ------------------footer---------------- */
.footer{
    text-align: center;
    color: aliceblue;
    background-color: gray;
    /* margin-top: 7.5rem; */
    position: sticky;
    bottom: 0%;
    /* padding: 50px; */
    font-size: 1.6rem;
}
.footer:hover{
     
    box-shadow:0 0 1rem  cyan, 0 0 2rem  cyan, 0 0 5rem  cyan, 0 0 10rem  cyan,0 0 20rem  cyan ;
    background-color:  cyan;
    color: black;
/*     font-size: 2.5rem; */
}
/* --------------------------media----------- */
@media(max-width:998px){
    *{
        font-size:  60.5%;
        /* height: 62.5%; */
    }
}
@media(max-width:780px){
    *{
        font-size:45.5%;
    }
}
@media(max-width: 450px){
    *{
        font-size:25.5%;
    }
    .gallery img{
        width: 25rem;
    }
    .box2{
        width: 30%;
    }
}@media(max-width:290px){
    *{
        font-size:15.5%;
    }
}