@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Nanum+Gothic:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Nanum+Gothic:wght@400;700;800&family=Roboto:wght@100;300;400;500;700;900&display=swap');


@font-face {
  font-family: "DM";
  src: url("./fonts/DMSerifDisplay-Regular.ttf")format("truetype");
  font-weight: normal;
  font-style: normal;
}


/* setting all 'a' tags text decoration to none */
* a{
  text-decoration: none;
  color: rgb(26, 26, 26);
}





/* Change width of vertical scrollbar */
::-webkit-scrollbar {
  width: 1.5px;
  height: 1.5px;
}

/* Change background color of scrollbar */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* Change color of scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: #363636;
}


::placeholder{
  color: rgb(255, 255, 255);
  opacity: 1;
  font-weight: 300;
  font-size: 15px;
  height: 50px;
  /* padding: 10px; */
}
*{
  /* overflow-x: hidden; */
  /* font-family: 'Nanum Gothic', sans-serif; */
  font-family: 'Roboto', sans-serif;
}





body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.bg-color{
    background-color: #FF9803;
}

.btn:focus {
  outline: none;
  box-shadow: none;
}
input:focus{
    outline: none;
}


.navbar-main{
    height: 100px;
}

.search-box{
    background-color: #737373;
}

.navbar-sub {
    margin: auto;
    border: none;
    background-color: #F0CA89;
    /* height: 40px; */
  }
  
  .navbar-nav .nav-link {
    margin-right: 20px;
  }


  .navbar-sub a{
    color: black;
    font-weight: 300;
    font-size: 17px;
    text-decoration: none;
  }



  /* SETTING PADDINGS */

  @media screen and (max-width: 3600px) {
    .header_x, .nav_x, .subnav_x, .sections_wrapper, footer{
      padding: 0 210px;
    }
  }

  @media screen and (max-width: 2500px) {
    .header_x, .nav_x, .subnav_x, .sections_wrapper, footer{
      padding: 0 161px;
    }
  }

  @media screen and (max-width: 1900px) {
    .header_x, .nav_x, .subnav_x, .sections_wrapper, footer{
      padding: 0 113px;
    }
  }





  /* SETTING PADDINGS  fs done*/

  @media screen and (max-width: 3600px) {
    .header_x, .nav_x, .subnav_x, .sections_wrapper, footer{
      padding: 0 210px;
    }
    .nav_x{
      height: 100px; 
      margin-top: 29px;
    }
    .nav_x .nav_right img{
      width: 28px;
    }
    .nav_x .navbar_brand img{
      width: 280px;
    }
    .nav_x a{
      font-size: 20px;
    }
    .nav_x .nav_item_right_images img{
      width: 38px;
    }
  }

  @media screen and (max-width: 2500px) {
    .header_x, .nav_x, .subnav_x, .sections_wrapper, footer{
      padding: 0 161px;
    }
    .nav_x{
      height: 90px; 
      margin-top: 29px;
    }
    .nav_x .nav_right img{
      width: 28px;
    }
    .nav_x .navbar_brand img{
      width: 250px;
    }
    .nav_x a{
      font-size: 18px;
    }
    .nav_x .nav_item_right_images img{
      width: 28px;
    }
  }

  @media screen and (max-width: 1900px) {
    .header_x, .nav_x, .subnav_x, .sections_wrapper, footer{
      padding: 0 113px;
    }
    .nav_x{
      height: 75px; 
      margin-top: 22px;
    }
    .nav_x_right{
      height: 39px;
      margin-top: 29px;
    }
    .nav_x .nav_right img{
      width: 28px;
    }

    .nav_x .navbar_brand img{
      width: 200px;
    }

    .nav_x a{
      font-size: 16px;
    }
    .nav_x .nav_item_right_images img{
      width: 22px;
    }
  }






  /* -----HEADER----- */

  .header_x{
    background-color: #FF9803;
  }

  @media screen and (max-width: 3600px) {
      .header_x{
        font-size: 22px;
        height: 50px;
      }
      .header_social_icons img{
        width: 30px;
      }
      .header_x .call_logo{
        width: 40px;
        margin-right: 20px;
      }
  }

  @media screen and (max-width: 2500px) {
      .header_x{
        font-size: 18px;
        height: 40px;
      }
      .header_social_icons img{
        width: 20px;
      }
      .header_x .call_logo{
        width: 30px;
        margin-right: 15px;
      }
  }

  @media screen and (max-width: 1900px) {
      .header_x{
        font-size: 16px;
        height: 35px;
      }
      .header_social_icons img{
        width: 18px;
      }
      .header_x .call_logo{
        width: 25px;
        margin-right: 10px;
      }
  }



  /* -----SUB_NAV-----  fs done*/
  .subnav_x .sub{
    margin: auto;
    border: none;
    background-color: #F0CA89;
    height: 100%;
  }

  @media screen and (max-width: 3600px) {
    .subnav_x{
      height: 50px;
      margin-bottom: 44px;
      margin-top: 44px;
      font-size: 20px;
      font-weight: 300;
    }
    .subnav_x .links_container{
      gap: 60px;
    }
  }
  @media screen and (max-width: 2500px) {
    .subnav_x{
      height: 45px;
      margin-top: 0px;
      margin-bottom: 30px;
      font-size: 18px;
      font-weight: 300;
    }
    .subnav_x .links_container{
      gap: 40px;
    }
  }
  @media screen and (max-width: 1900px) {
    .subnav_x{
      height: 35px;
      margin-top: 0px;
      margin-bottom: 30px;
      font-size: 15px;
      font-weight: 300;
    }
    .subnav_x .links_container{
      gap: 24px;
    }
  }
    
    
  






  /* -----PRODUCT DESC----- */

  .prod_desc, .pagination{

    @media screen and (max-width: 3600px) {
      padding : 0 87px;
    }

    @media screen and (max-width: 2500px) {
      padding : 0 57px;
    }

    @media screen and (max-width: 1900px) {
      padding : 0 50px;
    }
}


  /* ---ABOUT PRODUCT (PRODUCT DESC LEFT SECTION) */

  .about_product{
    /* flex : 1; */
    @media screen and (max-width: 3600px) {
      width : 708px;
      margin-right : 205px;
    }
    @media screen and (max-width: 2500px) {
      width : 531px;
      margin-right : 153px;
    }
    @media screen and (max-width: 1900px) {
      width : 378px;
      margin-right : 109px;
    }
  }

  @media screen and (max-width: 3600px) {
    .pagination{
      font-size : 24px;
      color : gray;
    }
    .about_product .product_image img{
      width: 708px;
      height: 708px;
    }
    .about_product .small_img img{
        width: 126px;
        height: 126px;
    }
    .about_product .delivery img{
      width: 350px;
    }
    .about_product .more_details{
      font-size : 30px;
    }
    .about_product .more_details img{
      width : 40px;
    }
    .about_product .product_availability{
      font-size : 25px;
    }
    .about_product .address{
      font-size : 36px;
    }
    .about_product .address img{
      width: 48px;
    }
    .about_product .about_product_text h4{
      color: gray;
      font-size: 32px;
    }
    .about_product .about_product_text p{
      font-weight: 300;
      font-size: 24px;
    }
  }

  @media screen and (max-width: 2500px) {
    .pagination{
      font-size : 18px;
      color : gray;
    }
    .about_product .product_image img{
      width: 323px;
      height: 3239px;
    }
    .about_product .small_img img{
        width: 94px;
        height: 94px;
    }
    .about_product .more_details{
      font-size : 23px;
    }
    .about_product .more_details img{
      width : 35px;
    }
    .about_product .delivery img{
      width: 300px;
    }
    .about_product .product_availability{
      font-size : 18px;
    }
    .about_product .address{
      font-size : 27px;
    }
    .about_product .address img{
      width: 40px;
    }
    .about_product .about_product_text h4{
      color: gray;
      font-size: 25px;
    }
    .about_product .about_product_text p{
      font-weight: 300;
      font-size: 18px;
    }
  }

  @media screen and (max-width: 1900px) {
    .pagination{
      font-size : 13px;
      color : gray;
    }
    .about_product .product_image img{
      width: 378px;
      height: 378px;
    }
    .about_product .small_img img{
        width: 67px;
        height: 67px;
    }
    .about_product .more_details{
      font-size : 16px;
    }
    .about_product .more_details img{
      width : 22px;
    }
    .about_product .delivery img{
      width: 300px;
    }
    .about_product .product_availability{
      font-size : 14px;
    }
    .about_product .address{
      font-size : 19px;
    }
    .about_product .address img{
      width: 28px;
    }
    .about_product .about_product_text h4{
      color: gray;
      font-size: 17px;
    }
    .about_product .about_product_text p{
      font-weight: 300;
      font-size: 13px;
    }
  }


    /* ---PRODUCT INFO(PRODUCT PRICE COLOR SIZE MOREINFO) */

    .product_info{
      flex: 1;
    }

    @media screen and (max-width: 3600px) {
      .product_info{
          margin-right: 126px;
      }
      .product_name{
        font-size: 40px;
      }
      .product_present_price{
        font-size: 48px;
      }
      .product_actual_price{
        font-size: 35px;
      }
      .discount_percentage{
        font-size: 30px;
      }
      .save_percentage{
        font-size: 43px;
      }
      .taxes_text{
        font-size : 31px;
      }
      .delivery_info{
        font-size : 33px;
      }
      .product_property{
        font-size : 30px;
      }
      .color_circle{
        height:50px;
        width:50px;
      }
      .colors_container{
        gap: 24px;
      }
      .product_action{
        font-size : 25px;
        height: 74px;
        width: 229px;
      }
      .product_action i{
        font-size: 35px;
      }
      .product_action_buy{
        font-size : 34px;
      }
      .offers img{
        width: 200px;
      }
      .product_more_info{
        font-size : 28px;
      }
      .product_more_info h5{
        font-size : 38px;
      }
      .recommended_product_card{
        font-size: 25px;
      }
      .recommended_products h3{
        font-size: 48px;
      }
      .recommended_product_card img{
        width: 180px;
        height: 180px;
      }
      .recommended_product_card .offer, .recommended_product_card .rating{
        font-size: 20px;
      }


    }
    @media screen and (max-width: 2500px) {
      .product_info{
          margin-right: 94px;          
      }
      .product_name{
        font-size: 30px;
      }
      .product_present_price{
        font-size: 46px;
      }
      .product_actual_price{
        font-size: 30px;
      }
      .discount_percentage{
        font-size: 22px;
      }
      .save_percentage{
        font-size: 32px;
      }
      .taxes_text{
        font-size : 24px;
      }
      .delivery_info{
        font-size : 25px;
      }
      .product_property{
        font-size : 24px;
      }
      .color_circle{
        height:40px;
        width:40px;
      }
      .colors_container{
        gap: 18px;
      }
      .product_action{
        font-size : 20px;
        height: 60px;
        width: 190px;
      }
      .product_action i{
        font-size: 28px;
      }
      .product_action_buy{
        font-size : 27px;
      }
      .offers img{
        width: 150px;
      }
      .product_more_info{
        font-size : 21px;
      }
      .product_more_info h5{
        font-size : 28px;
      }
      .recommended_product_card{
        font-size: 18px;
      }
      .recommended_products h3{
        font-size: 30px;
      }
      .recommended_product_card img{
        width: 134px;
        height: 134px;
      }
      .recommended_product_card .offer, .recommended_product_card .rating{
        font-size: 12px;
      }


    }
    @media screen and (max-width: 1900px) {
      .product_info{
          margin-right: 67px;
      }
      .product_name{
        font-size: 23px;
      }
      .product_present_price{
        font-size: 32px;
      }
      .product_actual_price{
        font-size: 24px;
      }
      .discount_percentage{
        font-size: 18px;
      }
      .save_percentage{
        font-size: 22px;
      }
      .taxes_text{
        font-size : 17px;
      }
      .delivery_info{
        font-size : 18px;
      }
      .product_property{
        font-size : 18px;
      }
      .color_circle{
        height:25px;
        width:25px;
      }
      .colors_container{
        gap: 16px;
      }
      .product_action{
        font-size : 12px;
        height: 40px;
        width: 120px;
      }
      .product_action i{
        font-size: 14px;
      }
      .product_action_buy{
        font-size: 17px;
      }
      .offers img{
        width: 100px;
      }
      .product_more_info{
        font-size : 16px;
      }
      .product_more_info h5{
        font-size : 21px;
      }
      .recommended_product_card{
        font-size: 15px;
      }
      .recommended_products h3{
        font-size: 26px;
      }
      .recommended_product_card img{
        width: 97px;
        height: 97px;
      }
      .recommended_product_card .offer, .recommended_product_card .rating{
        font-size: 10px;
      }




    }



    .recommended_product_card:hover{
      box-shadow: 3px 2px 15px -6px rgba(156,156,156,1);
    }
    
    .recommended_product_card{
      cursor: pointer;
    }





  /* -----SECTIONS (similar products, similar products from other brands, ratings and reviews, q and q)----- */


  .section_heading h1{
    font-family: 'DM', sans-serif;


    @media screen and (max-width: 3600px) {
      font-size: 100px;
    }
    @media screen and (max-width: 2500px) {
      font-size: 70px;
    }
    @media screen and (max-width: 1900px) {
      font-size: 42px;
    }
    
  }





  /* -----REVIEWS AND RATINGS----- */

  .review_description{
    font-weight: 300;
  }
  .review_user{
    color: gray;
  }
  .review_heading{
    font-family: 'DM', sans-serif;
  }
  .review_rating span{
    background-color: #f18d00;
    color: white;
  }

  @media screen and (max-width: 3600px) {
    .review_images img{
      width: 140px;
      height: 140px;
    }
    .progress_x{
      border-radius: 0px;
      height: 24px;
    } 
    .review_rating{
      font-size : 35px;
    } 
    .review_heading{
      font-size : 52px;
    } 
    .review_user{
      font-size : 24px;
    }
    .review_description p{
      font-size : 25px;
    }
    .review_top{
      font-size: 30px;
    }
    .review_top_middle .total_rating{
      font-size: 131px;
    }
    .review_top .review_top_middle img{
      width: 50px;
    }
    .review_top .review_top_right h2{
      font-size: 57px;
    }
    .review_top .review_top_right textarea{
      font-size: 20px;
    }
  }

  @media screen and (max-width: 2500px) {
      .review_images img{
        width: 104px;
        height: 104px;
      }
      .progress_x{
        border-radius: 0px;
        height: 18px;
      } 
      .review_rating{
        font-size : 28px;
      }
      .review_heading{
        font-size : 39px;
      }
      .review_user{
        font-size : 20px;
      }
      .review_description p{
        font-size : 22px;
      }
      .review_top{
        font-size: 22px;
      }
      .review_top_middle .total_rating{
        font-size: 90px;
      }
      .review_top .review_top_middle img{
        width: 50px;
      }
      .review_top .review_top_right h2{
        font-size: 43px;
      }
      .review_top .review_top_right textarea{
        font-size: 20px;
      }
  }

  @media screen and (max-width: 1900px) {
    .review_top{
      font-size: 16px;
    }
    .progress_x{
      border-radius: 0px;
      height: 12px;
    } 
    .review_top_middle .total_rating{
      font-size: 70px;
    }
    .review_top .review_top_middle img{
      width: 30px;
    }
    .review_top .review_top_right h2{
      font-size: 30px;
    }
    .review_top .review_top_right textarea{
      font-size: 18px;
    }
    .review_images img{
      width: 74px;
      height: 74px;
    }
    .review_rating{
      font-size : 15px;
    } 
    .review_heading{
      font-size : 28px;
    } 
    .review_user{
      font-size : 14px;
    } 
    .review_description p{
      font-size : 18px;
    }
  }



  /* -----QUESTION AND ANSWERS----- */

  @media screen and (max-width: 3600px) {
    .q_a{
      font-size: 30px;
    }
    .question_user{
      font-size: 22px;
      font-weight: 300;
    }
  }

  @media screen and (max-width: 2500px) {
    .q_a{
      font-size: 24px;
    }
    .question_user{
      font-size: 20px;
      font-weight: 300;
    }
  }

  @media screen and (max-width: 1900px) {
    .q_a{
      font-size: 18px;
    }
    .question_user{
      font-size: 14px;
      font-weight: 300;
    }
  }



  /* -----FOOTER CSS SECTION----- */
  
  footer {
    background-color: #FF9803;
    color: black;
  }

  .footer_logo_image img {
    width: 400px;
  }
  .footer_social_icons img {
    width: 40px;
  }
  footer a {
    font-weight: 300;
    color: black;
  }
  .footer_phone_number h3 {
    font-weight: bold;
    font-size: 28px;
  }
  .footer_sub img {
    width: 50px;
    height: 50px;
  }
  .footer_sub p {
    font-weight: 300;
  }
  .footer_sub h3 {
    font-size: 52px;
  }
  .footer_bottom {
    font-size: 30px;
  }

  
  @media screen and (max-width: 3600px) {
    .footer_logo_image img {
      width: 400px;
    }


    .footer_social_icons img {
      width: 26px;
    }
    footer a {
      font-size: 16px;
    }
    .footer_phone_number h3 {
      font-size: 30px;
    }
    .footer_sub img {
      width: 25px;
      height: 25px;
    }
    .footer_sub p {
      font-size: 16px;
    }
    .footer_sub h3 {
      font-size: 24px;
    }
    .footer_bottom {
      font-size: 16px;
    }
    .footer_logo_image img {
      width: 230px;
    }

  }
  
  @media screen and (max-width: 2500px) {
    .footer_logo_image img {
      width: 260px;
    }
    .footer_social_icons img {
      width: 32px;
    }
    footer a {
      font-size: 18px;
    }

    .footer_sub img {
      width: 32px;
      height: 32px;
    }
    .footer_sub p {
      font-size: 18px;
    }
    .footer_sub h3 {
      font-size: 24px;
    }
    .footer_bottom {
      font-size: 18px;
    }
  }
  
  @media screen and (max-width: 1900px) {
    .footer_social_icons img {
      width: 26px;
    }
    footer a {
      font-size: 16px;
    }
    .footer_phone_number h3 {
      font-size: 30px;
    }
    .footer_sub img {
      width: 25px;
      height: 25px;
    }
    .footer_sub p {
      font-size: 16px;
    }
    .footer_sub h3 {
      font-size: 24px;
    }
    .footer_bottom {
      font-size: 16px;
    }
    .footer_logo_image img {
      width: 230px;
    }
  }


/* Footer End */
  




    /* -----PRODUCT MAIN CARD----- */
    .card_x .offer span{
      background-color: rgb(221, 0, 0);
    }
  
    .card_x .product_like{
     cursor: pointer;
  }
  
  
    @media screen and (max-width: 3600px) {
      .card_x{
        width: 430px;
        font-size: 30px;
      }
  
      .card_x .offer{
        font-size: 18px;
      }
  
      .card_x .product_image{
        width: 430px;
        height: 430px;
      }
  
      .card_x .product_name{
        font-size: 30px;
      } 
    }
  
    @media screen and (max-width: 2500px) {
      .card_x{
        width: 322px;
        font-size: 20px;
      }
  
      .card_x .offer{
        font-size: 16px;
      }
  
      .card_x .product_image{
        width: 322px;
        height: 322px;
      }
  
      .card_x .product_name{
        font-size: 30px;
      }
    }
  
    @media screen and (max-width: 1900px) {
        .card_x{
          width: 230px;
          font-size: 18px;
        }
  
        .card_x .offer{
          font-size: 14px;
        }
  
        .card_x .product_image{
          width: 230px;
          height: 230px;
        }
  
        .card_x .product_name{
          font-size: 22px;
        }
    }






  .filter_class li>a{
    background-color: rgb(231, 231, 231);
    color: black;
    text-decoration: none;
  }

  .footer_logo img{
    width: 300px;
  }

  .card_x button:hover{
    background-color: #f18d00;
    color: white;
    border: 1px white solid;
}

.card_x button{
  border: 1px solid black; 
  padding: 3px 40px;
  background-color: white;
  transition: 0.2s;
}

  

.color_circle.selected {
  border: 2px solid rgb(0, 0, 0);
}


.product_details_tag.selected {
  /* border: 2px solid rgb(0, 0, 0); */
  background-color: #f18d00;
  color: white;
  /* border: 1px solid white; */
  border: none;
}

.product_details_tag{
  border: 1px solid gray;
  cursor: pointer;
}





/* small image popup effect */

.small_img {
  position: relative;
  display: inline-block;
  transition: 0.3s;
}

.small_img:hover{
  transform: scale(1.3);
  z-index: 2;
}













    /* -----PRODUCT MAIN CARD----- */
  
  .card_y{
    cursor: pointer;
      padding: 0;
  }
  
  
  
    @media screen and (max-width: 3600px) {
      .card_y{
        width: 404px;
        font-size: 30px;
        background-color: peachpuff;
        overflow: hidden;
        height: 100%;
        padding-bottom: 50px;
      }
  
  
      .card_y .product_image{
        width: 404px;
        height: 404px;
      }
  
      .card_y .product_name{
        font-size: 30px;
      } 
    }
  
    @media screen and (max-width: 2500px) {
      .card_y{
        width: 303px;
        font-size: 18px;
        background-color: peachpuff;
        overflow: hidden;
        height: 100%;
        padding-bottom: 40px;
      }
  
      .card_y .offer{
        font-size: 16px;
      }
  
      .card_y .product_image{
        width: 303px;
        height: 303px;
      }
  
      .card_y .product_name{
        font-size: 24px;
      }
    }
  
    @media screen and (max-width: 1900px) {
        .card_y{
          width: 215px;
          font-size: 16px;
          background-color: peachpuff;
          overflow: hidden;
          height: 100%;
          padding-bottom: 20px;
        }
  

        .card_y .product_image{
          width: 215px;
          height: 215px;
        }
  
        .card_y .product_name{
          font-size: 18px;
        }
    }
  
  
  
    .card_y button:hover{
      background-color: #f18d00;
      color: white;
      border: 1px white solid;
  }
  
  .card_y button{
    border: 1px solid black; 
    padding: 3px 40px;
    /* background-color: white; */
    background-color: transparent;
    transition: 0.2s;
  }