/* navbar start */

body{
    width: 100vw;
    height: 100vh;
}
.productline{
  position: sticky;
  top: 0px;
  background-color: #FFFFFF;
  z-index: 1;
}
.line {
    border-bottom: 2px solid rgb(198, 197, 197);
    margin-top: 3px;
    width: 100%;
    z-index: 1;
}
.lineb {
    margin-bottom: 10px;
    position: sticky;
    top: 60px;
    z-index: 1;
}

.utility{
    width: 100%;
    background-color: #F4F5F8;
    height: 30px;
}
.outnav{
    height: 60px;
    width: 100%;

}
.navimg{
    width: 100%;
}
.ainnav{
    text-decoration: none;
    color: white;
}
.ainnav:hover{
    text-decoration: underline;
}
.midout{
    gap: 2vw;
}
.midout2{
    gap: 1vw;
}
.logocasio{
    height: 60px;
}
.searchbox{
    background-color: black;
    border: black 0px solid;
    border-bottom: white 1px solid;
    margin: 0px;
}
.searchbox:focus{
    outline: none;
    cursor: default;
}
.searchbtn{
    border: black 0px solid;
    background-color: black;
    color: white;
    border-bottom: white 1px solid;
    margin: 0px;
}

.ainnav2{
    color: black;
    text-decoration: none;
}

.outercontainer{
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* flex-direction: column; */
    top: 0px;
}
.sett{
  position: relative;
    width: 1600px;
}


/* navbar-end */


/* footer start */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display:ital@0;1&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Shojumaru&family=ZCOOL+KuaiLe&display=swap");

#container-fluid {
    background-color: rgb(240, 238, 238);
    color: black;
    justify-content: center;
    height: auto;
    margin: 30px;
    width: 1600px;
    margin: auto;
}
#medvv{
  font-weight: 500px;
  margin-top: 20px;
  margin-bottom: 20px;
}

#container-fluid>div:nth-child(1) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 20px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 20px 0 0 50px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 200px;
    padding-top: 50px;
}

@media screen and (max-width>=2000px) {
    .foot1 {
        display: none;
    }
}

#container-fluid>div:nth-child(3) {
    display: flex;
    gap: 30px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
    cursor: pointer;
}



.foot1,
hr {
    display: none;
}






@media screen and (max-width: 767px) {


    #container-fluid>div:nth-child(1) {
        display: none;
    }

    .dropdown {
        display: none;
    }

    .dropdown,
    hr {
        display: block;
        margin: 20px;
        cursor: pointer;
    }

    .vibbtn {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 150px;
        cursor: pointer;
    }

    .dropdown li {
        display: none;
    }

    .social {
        margin: 20px;
        cursor: pointer;
        font-size: 20px;
    }


    .social {
        padding: 10px;
        margin: 10px;
        gap: 10px;
    }

    .span2 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        text-align: center;
        justify-content: center;
    }
}

.span2 {
    margin-left: 10px;
    display: flex;
    flex-direction: row;
    gap: 30px;
    font-size: 10px;
    margin-left: 50px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
    cursor: pointer;
}

.gr {
    color: #5a5a5a;
    ;
}

#vibh1 {
    font-size: 20px;
    font-weight: 1000px;
    margin-left: 20px;
}

#vibh2 {
    font-size: 20px;
    font-weight: 1000px;
    margin-left: 20px;
}
/* footer end*/
/* middle */



/* styles for watch cards */
.watch-card-out{
  display: inline-block;
  width: 75%;
}

.content0 {

    display: flex;
    flex-wrap: wrap;
    width: 100%;
    font-family: "Noto Sans JP", sans-serif;
    /* position: relative;
    z-index: -1 */
}
.black-background{
  height: 120px;
  color: white;
  background-color: black;
}

.card{
    margin: 10px;

}
.brand_id{
  padding-left: 10px;
}

.card-body1{
    font-size: 15px;
    padding-left: 10px;

}
.card-title{
  padding: 10px;
}
.make-line{
  display: flex;
  justify-content: space-between;
  padding: 10px;
}


.tranform-on-hover:hover{
    transform: scale(1.07);
    transition: 0.6s;
}
.border-on-hover:hover{
    border: 1px solid black !important;
    transition: border 0.3s ease !;
}

.watch-background {
    background-color: #f7f8fa;
}

/* end of styles for watch cards */



         /* menu filtering  css start    */
         * {
            margin: 0;
            padding: 0;
          }

          .con {
            max-width: 25%;
            margin: 30px;
            display: inline-block;
            /* position: sticky;
            top: 70px; */
            font-family: "Noto Sans JP", sans-serif;
          }
          .scroll-bg {
            background: white;
            width: 325px;
            height: auto;
            position: sticky;
            top: 70px;

          }

          .scroll-div {
            width: 325px;
            background: white;
            height: 690px;
            overflow: auto;
            overflow-y: scroll;
            position: sticky;
            top: 70px;
          }

          .scroll-object > p {
            color: black;
          }

          label {
            display: block;
          }

          .content {
            padding: 50px 10px 0 50px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            font-size: 9pt;

          }

          button::after {
            content: " ";
            width: 5px;
            color: black;
          }

          .card {
            border: none;
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 0;
          }

          .gap-1 {
            margin: 0;
            padding: 0;
            gap: 3rem !important;
          }

          .content .vertical {
            margin-left: 150px;
          }

          .gap-1 > .btn {
            color: black;
            background-color: white;
            border: none;
            padding: 0;
            margin: 0;
            font-size: 9pt;
            font-weight: bold;
          }

          .btn > span {
            margin-left: 140px;
          }

          .btn > .time {
            margin-left: 110px;
          }

          .btn > .water {
            margin-left: 65px;
          }

          .btn > .char {
            margin-left: 125px;
          }

          .btn > .sen {
            margin-left: 125px;
          }

          .btn > .ser {
            margin-left: 175px;
          }

          .btn > .fun {
            margin-left: 145px;
          }

          .sort {
            font-weight: bold;
          }

          .card > label {
            display: flex;
            justify-content: space-between;
          }

          .span-inside {
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .horizontal {
            margin: 0;
          }

          .show > .card-btn {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 5px;
          }

          .card-body > .digital-btn {
            padding: 6.5px 12px;
            width: max-content;
            margin-bottom: 10px;
            border: none;
          }

          .card-body > .digital-btn:focus {
            border: 2px solid;
          }

          .colors-wrap {
            border: 1px solid gray;

            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }

          .wrap-1 {
            display: inline-block;
            height: 43px;
            width: 43px;

            margin: 4px;
            background-color: black;
          }

          .card-btn .wrap-1:nth-of-type() {
            background-color: red;
          }

          .back-color {
            text-align: center;
            color: gray;
          }

          .colors-wrap:focus {
            border: 2px solid black;
          }

          .colors-wrap > .c-2 {
            background-color: skyblue;
          }

          .colors-wrap > .c-3 {
            background-color: green;
          }

          .colors-wrap > .c-4 {
            background-color: red;
          }

          .colors-wrap > .c-5 {
            background-color: beige;
          }

          .colors-wrap > .c-6 {
            background-color: purple;
          }

          .colors-wrap > .c-7 {
            background-color: white;
          }

          .colors-wrap > .c-8 {
            background-color: gray;
          }

          .colors-wrap > .c-9 {
            background-color: yellow;
          }

          .colors-wrap > .c-10 {
            background-color: orange;
          }

          .colors-wrap > .c-11 {
            background-color: pink;
          }

          .colors-wrap > .c-12 {
            background-color: whitesmoke;
          }

          .colors-wrap > .c-13 {
            background-color: silver;
          }

          .colors-wrap > .c-14 {
            background-color: gold;
          }

          .foot-btn {
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .foot-btn-1 {
            padding: 7.5px 53px;
            border: 0.5px solid gray;
          }

          .foot-btn-1:focus {
            border: 2px solid black;
          }

          /* menu filtering  css end  */


    .main-menu-card{
      display: flex;
      position: relative;
    }