@media all and (min-width:950px){
    #nav_top{
        visibility: hidden;
        display: none;
    }
    #navbar{
        visibility: visible;
    }
    body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}

#navbar {
background-color: #2c1338;
height: 90px;
display: grid;
margin: auto;
grid-template-columns: 10% 65% 20%;
width: 100%;
position: sticky;
top: 0;
z-index: 9999;
}

#navbar>#image {
height: 90px;
/* margin-right: 2%; */
/* border: 2px solid red; */
}

#image>img {
width: 100%;
height: 90px;
}

#nav-menu {
/* border: 2px solid green; */
display: flex;
}

#nav-menu>li {
display: flex;
text-align: center;
justify-content: center;
margin-top: 8px;
}

a {
text-decoration: none;
}

#nav-menu>li>a {
color: white;
font-size: 18px;
}

#nav-menu>li>a:hover {
color: #E57CD8;
}
#bookingSignup{
width: 7rem;
color: white;
margin-right: 25px;
}
#bookingLogin{
width: 3rem;
color: white;
margin-left: -10px;
}

#nav_right {
/* border: 2px solid wheat; */
margin-bottom: 15px;
display: flex;
justify-content: space-between;
/* margin-right: 30px; */
}
#nav_right>div:hover {
color: #E57CD8;
cursor: pointer;
}

#nav_right>button {
background-color: #FCE5D8;
padding: 10px 20px;
border-radius: 50px;
height: 50px;
margin-top: 10px;
color: rgb(227, 89, 229);
font-weight: bold;
font-size: 16px;
}

#nav_right>button:hover {
background-color: #a77fba;
}

                            /* drop_down-3 */
#drop_down-3 {
display: none;
color: black;
cursor: pointer;
/* position: relative; 
top: 30px; */
z-index: 999;
line-height: 2.5rem;
left: 100px;
width: 1000px;
height: 200px;
/* border: 3px solid red;  */
background-color: bisque;
}



#career:hover #drop_down-3 {
position: absolute;
/* cursor: pointer; */
top: 90px;
left: 0;
width: 100%;
display: block;
/* border: 3px solid blue; */
background-color: #FCE5D8;
color: black;
}

#box {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
/* border: 2px solid red; */
text-align: left;
width: 95%;
margin: auto;

}

#drop_down-3>h2 {
text-align: left;
margin-left: 40px;
margin-top: 20px;
font-size: 18px;
color: grey;
}

#left_box {
display: flex;
gap: 20px;
margin-left: 20px;
/* border: 2px solid rgb(0, 255, 115); */
}

#left_box>div>img {
margin-top: 30px;
}

#left_box>div+div {
width: 100%;
/* border: 2px solid red; */
}

#right_box {
display: flex;
gap: 20px;
/* border: 2px solid rgb(224, 234, 34); */
}

#right_box>div>img {
margin-top: 30px;
}

#right_box>div+div {
width: 100%;
/* border: 2px solid green; */
}

#right_box>div+div>p,
#left_box>div+div>p {
color: grey;
margin-top: -10px;
}


                                         /* drop_down-2 */
#drop_down-2 {
display: none;
color: black;
cursor: pointer;
/* position: relative; 
top: 30px; */
z-index: 999;
left: 100px;
/* width: 1000px; */
line-height: 2.5rem;
height: 350px;
/* border: 3px solid red;  */
background-color: #FCE5D8;
text-align: left;

}



#track:hover #drop_down-2 {
position: absolute;
cursor: pointer;
top: 90px;
left: 0;
width: 100%;
display: block;
/* border: 3px solid blue; */
background-color: #FCE5D8;
color: black;
}

#drop_down-2>h2 {
color: grey;
margin-left: 30px;
margin-top: 20px;
font-size: 18px;
}

#drop_down-2 #cont {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 30px;
}

#cont>div {
display: flex;
gap: 30px;
margin-left: 20px;
}

#cont>div>div>img {
margin-top: 30px;
}

#cont>div>div+div {
width: 300px;
}

#cont>div>div+div>p {
color: grey;
margin-top: -10px;
}

#direc {
background-color: white;
color: black;
padding: 4px 15px;

width: 90%;
margin: auto;

}

#direc:hover {
background-color: rgb(224, 180, 224);
/* font-family: ; */
}

                                         /* drop_down-1 */

#drop_down-1 {
display: none;
color: black;
cursor: pointer;
/* position: relative; 
top: 30px; */
z-index: 9999;
left: 100px;
/* width: 1000px; */
line-height: 2rem;
height: 550px;
/* border: 3px solid red;  */
background-color: #FCE5D8;
text-align: left;

}

#product:hover #drop_down-1 {
position: absolute;
cursor: pointer;
top: 90px;
left: 0;
width: 100%;
display: block;
/* border: 3px solid blue; */
background-color: #FCE5D8;
color: black;
/* display: flex;*/
gap: 30px;
display: grid;
grid-template-columns: repeat(2, 1fr);
}

/* #drop_down-1>#left_product{
/* border: 2px solid green; */
/* } */ 


#drop_down-1>#left_product>#grid_product {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px 20px;
/* border: 2px solid yellowgreen; */
margin-left: 20px;
}

#drop_down-1>#left_product>h1 {
color: grey;
margin-left: 30px;
margin-top: 20px;
margin-bottom: 30px;
font-size: 18px;
}

#grid_product>div {
display: flex;
gap: 15px;
/* border: 2px solid blue; */
}

#grid_product>div>div:nth-child(1) {
/* border: 2px solid pink; */
width: 10%;
margin-top: 10px;
}

#grid_product img {
width: 100%;
}

#grid_product>div>div:nth-child(2) {
/* border: 2px solid rgb(92, 233, 186); */
width: 350px;
}

#grid_product>div>div:nth-child(2)>h3 {
font-size: 18px;
margin-top: -3px;
}

#grid_product>div>div:nth-child(2)>p {
font-size: 15px;
color: gray;
margin-top: -10px;
}

#input_toggle {
background-color: white;
color: black;
padding: 3px 12px;
width: 80%;
margin: auto;

}

#input_toggle:hover {
background-color: rgb(224, 180, 224);
/* font-family: ; */
}


/* #drop_down-1>#right_product {
/* border: 2px solid orangered; */
/* width: 40%; */
/* } */ 

#right_product>h3 {
color: grey;
margin-left: 30px;
margin-top: 20px;
margin-bottom: 30px;
font-size: 18px;
}

#right_product>#track_box {
width: 90%;
/* border: 1px solid blueviolet; */
margin: auto;
}

#track_box {
display: grid;
grid-template-columns: repeat(1, fr);
gap: 20px;
}

#track_box>div {
display: flex;
gap: 20px;
}

#track_box>div>div:nth-child(1) {
margin-top: 15px;
width: 10%;
/* border: 1px solid orange; */
}

#track_box img {
width: 100%;
}

#track_box>div>div:nth-child(2) {
margin-top: 10px;
/* border: 1px solid orange; */
width: 80%;
}

#track_box>div>div:nth-child(2)>h3 {
font-size: 18px;
margin-top: -3px;
}

#track_box>div>div:nth-child(2)>p {
font-size: 15px;
color: gray;
margin-top: -10px;
}








/* /* media querry  */

@media screen and (min-width: 950px) and (max-width: 1200px) {
body{
width: 100%;
top:0;
left: 0;
right: 0;
}
#nav_top{
visibility: hidden;
display: none;
}
#navbar{
visibility: visible;
top: 0;
}

#product:hover #drop_down-1 {

gap: 30px;
display: grid;
grid-template-columns: repeat(1, 1fr);
}

#track_box {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}


#drop_down-1 {
height: 800px;
}
#drop_down-2 #cont {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 30px;
}

#drop_down-2 {
height: 550px;

}
#drop_down-3 {
height: 250px;

}

}
}
    @media all and (max-width:950px){
        #nav_top{
            visibility: visible;
        }
        #navbar{
            visibility: hidden;
            display: none;
        }
    body{
        margin: 0;
    }
    #res_navbar{
        background-color: #FCE5D8;
        display: flex;
        width: 100%;
        position: fixed;
        z-index: 9999;
        top: 0;
    }
    #toggl{
        color: #E57CD8;
        font-weight: bolder;
        margin-left: 1rem;
    }
    #dropdown{
        display: inline-block;
        cursor: pointer;
        margin: auto;
        margin-right: 2rem;
    }
    .bar1,.bar2,.bar3{
        width: 35px;
        height: 5px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
    }
    .change .bar1{
        -webkit-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-9px, 6px);
    }
    .change .bar2{
        opacity: 0;
    }
    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -8px);
    }
    .sticky{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
    #details,#product_info,#track_info,#career_info{
        visibility: hidden;
        background-color: #FCE5D8;
        margin-top: 2rem;
        z-index: 9999;
        padding: 1rem;
        width: 100%;
        height: 100%;
        line-height: 3.5rem;
        text-align: center;
        overflow: scroll;
    }#details>div{
        cursor: pointer;
        width: 15%;
        font-size: large;
        text-align: left;
    }
    #free{
        border: none;
        background-color: #E57CD8;
        color: white;
        font: 16px "GT Haptik Medium", sans-serif;
        padding: 14px 25px;
        border-radius: 25px;
        cursor: pointer;
    }
    #login{
        cursor: pointer;
    }
    #product_info,#track_info,#career_info{
        text-align: left;
    }
    #product_info>div,#track_info>div,#career_info>div{
        display: flex;
        line-height: 4rem;
        text-align: left;
        gap: .5rem;
        justify-content: center;
        align-items: center;
        height: 5rem;
        margin: auto;
        margin-bottom: 20px;
        cursor: pointer;
    }
    #product_info>div>div>h4:hover,#track_info>div>div>h4:hover,#career_info>div>div>h4:hover{
        font-style: italic;
    }
    #product_info>h3,#track_info>h3,#career_info>h3{
        color: grey;
        margin-left: 1rem;
    }
    #product_info>div>img,#track_info>div>img,#career_info>div>img{
        width: 2.5rem;
        margin-left: 0px;
    }
    #product_info>div>div>h4,#track_info>div>div>h4,#career_info>div>div>h4{
        margin-top: .5rem;
        margin-bottom: -2.5rem;
    }
    #product_info>div>div>p,#track_info>div>div>p,#career_info>div>div>p{
        color: grey;
    }
    #back_product,#back_track,#back_career{
        border: none;
        background: transparent;
        font-size: larger;
        cursor: pointer;
        margin-left: 1rem;
        margin-bottom: -1.5rem;
    }
    #statement{
        background-color: white;
        width: 85%;
        padding: 0px 20px;
        margin: auto;
        height: 50px;
    }
}