/* Catamaran font moved to HTML for performance */
a {
font-size: 1rem;
color: #747474;
text-decoration: none;
}
.btn:focus {
box-shadow: none;
outline: none;
}
/*== Basic Setup ========================*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-rendering: optimizeLegibility;
/* font-family: Helvetica,Arial,sans-serif;; */
font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
}
html {
font-size: 87.5%;
scroll-behavior: smooth;
}
/* ===================== Top Wrapper ========================= */
.right_box.d-flex span {
color: #fff;
font-size: 13px;
}
.top_wrapper {
background-color: #206385;
}
.top_wrapper .container {
padding: .4rem 0;
}
.top_wrapper .container>div.d-flex {
flex-wrap: wrap;
}
.top_wrapper .left_box {
color: #fff;
font-size: 1rem;
display: flex;
width: 54%;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
position: relative;
}
.top_wrapper .left_box .customerCare {
width: 20rem;
}
.top_wrapper .left_box .customerCare a {
color: #fff;
}
.top_wrapper .left_box .check_shipping_rules {
text-align: right;
}
.top_wrapper .right_box {
text-align: right;
justify-content: flex-end;
width: 46%;
}
.top_wrapper .right_box .linkBox {
text-transform: capitalize;
font-weight: 500;
}
.top_wrapper .right_box .language_wrapp {
width: 11rem;
margin-left: auto;
}
.top_wrapper .right_box .language_wrapp select {
background-color: transparent;
color: #747474;
width: 100%;
border: 1px solid #747474;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url(../images/icons/Vector.png);
background-repeat: no-repeat;
background-position-x: 90%;
background-position-y: 8px;
background-size: .8rem;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
.linkBox .showLogInPage {
border: 1px solid #ffffff29;
padding: 3px 6px;
border-radius: 4px;
color: #fff;
transition: all .4s ease-in-out;
}
.linkBox .showLogInPage:hover {
border: 1px solid #ffffff29;
box-shadow: inset 0 30px 0 0 #ffffff29;
color: #fff;
}
.linkBox .showSignUpPage {
border: 1px solid #ffffff59;
padding: 3px 6px;
border-radius: 4px;
background-color: #ffffff59;
color: #fff;
transition: all .4s ease-in-out;
}
.linkBox .showSignUpPage:hover {
border: 1px solid #3333;
background-color: #3333;
color: #fff;
}
.log_details_menu .linkBox .showLogInPage,
.log_details_menu .linkBox .showSignUpPage {
width: 6rem;
display: block;
text-align: center;
margin-right: .5rem;
font-size: 1rem;
font-weight: 600;
background: #9ccce3;
color: #fff;
}
.log_details_menu .linkBox .showLogInPage:hover,
.log_details_menu .linkBox .showSignUpPage:hover {
text-decoration: none;
}
/*=========== Top Header Wrapper =========================*/
.top_header__wrapper {
background-color: #36a5de;
padding: 0;
}
.top_header__wrapper .navbar-toggler {
width: 30px;
height: 21px;
padding: 0%;
position: relative;
margin-right: 2px;
display: none;
}
.top_header__wrapper .navbar-toggler span {
width: 100%;
height: 2px;
border-radius: .3rem;
background-color: #fff;
display: block;
transition: all .3s ease-in-out;
}
.top_header__wrapper .navbar-toggler span::before,
.top_header__wrapper .navbar-toggler span::after {
content: '';
height: 2px;
width: 100%;
border-radius: 2px;
background-color: #fff;
transition: all .4s ease-in-out;
position: absolute;
top: 1px;
left: 0;
}
.top_header__wrapper .navbar-toggler span::after {
bottom: 1px;
top: auto;
}
.top_header__wrapper .navbar-toggler:hover span {
background-color: #000;
}
.top_header__wrapper .navbar-toggler:hover span::before,
.top_header__wrapper .navbar-toggler:hover span::after {
background-color: #000;
}
.top_header__wrapper .container {
display: flex;
flex-direction: row;
position: relative;
}
.top_header__wrapper .myNavBarButtom {
width: 320px;
display: flex;
align-items: center;
}
.top_header__wrapper .myNavBarButtom a {
display: block;
padding: 4px;
}
.top_header__wrapper .logo {
width: auto;
height: 34px;
}
.top_header__wrapper .right_wrapp {
text-align: right;
justify-content: flex-end;
padding: .8rem 0;
width: calc(100% - 320px);
align-items: center;
position: relative;
}
.left_wrapp.d-flex.free_delivery_details {
display: block !important;
color: #fff;
position: absolute;
left: auto;
right: 0;
top: 2.8rem;
}
.left_wrapp.d-flex.free_delivery_details span {
font-size: .85rem;
font-weight: 600;
display: block;
}
/* Helvetica,Arial,sans-serif; */
.top_header__wrapper .right_wrapp .search_box {
width: 18rem;
background-color: #fff;
border-radius: 1rem;
-webkit-border-radius: 1rem;
-moz-border-radius: 1rem;
-ms-border-radius: 1rem;
-o-border-radius: 1rem;
}
.top_header__wrapper .right_wrapp .btn-box {
display: flex;
}
.top_header__wrapper .right_wrapp .search_box .input {
width: calc(100% - 3rem);
height: 2.6rem;
padding-left: 1rem;
font-size: .9rem;
color: #747474;
border: none;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
}
.top_header__wrapper .right_wrapp .search_box .searh_btn {
font-size: 1.1rem;
width: 3rem;
}
.top_header__wrapper .right_wrapp .search_box .searh_btn .fa {
color: #747474;
}
.top_header__wrapper .right_wrapp .like_wrapp,
.top_header__wrapper .right_wrapp .cart_wrapp {
width: 4rem;
text-align: center;
position: relative;
padding-top: .6rem;
}
.top_header__wrapper .right_wrapp .like_wrapp .icon,
.top_header__wrapper .right_wrapp .cart_wrapp .icon {
width: 1.5rem;
height: 1.4rem;
}
.top_header__wrapper .right_wrapp .like_wrapp span,
.top_header__wrapper .right_wrapp .cart_wrapp span {
font-size: .9rem;
/*background: #FF784E;*/
background: #eaeaea;
width: 1.3rem;
height: 1.3rem;
position: absolute;
top: 0rem;
right: 0.7rem;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
/* after login */
a#navbarDropdown {
color: #fff;
padding: 0%;
}
a#navbarDropdown img {
border-radius: 50%;
width: 30px;
height: 30px;
}
.cus-dropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
}
ul.cus-dropdown-menu {
display: none;
background: #fff;
position: absolute;
/* z-index: 9999; */
z-index: 9998;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.178);
padding: 5px 0;
top: 110%;
/* left: -4rem; */
}
ul.mobileLogContent {
left: -4rem !important;
}
ul.cus-dropdown-menu::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-bottom: 0.5em solid #fff;
border-right: 0.5em solid transparent;
border-top: 0;
border-left: 0.5em solid transparent;
position: absolute;
top: -7px;
left: auto;
right: 19px;
}
ul.cus-dropdown-menu li {
padding: 0 12px;
}
ul.cus-dropdown-menu li a {
padding: 0.25rem 1rem;
color: #549022 !important;
text-align: left;
font-size: 14px;
border-bottom: 1px solid #efefef;
}
/*===== Back Top Btn Styles =============*/
#btnBackTop {
position: fixed;
bottom: 9rem;
right: 2.7rem;
width: 2.5rem;
height: 2.6rem;
/*background-color: #FF784E;*/
background-color: rgba(169, 210, 135, 1);
border-radius: .2rem;
-webkit-border-radius: .2rem;
-moz-border-radius: .2rem;
-ms-border-radius: .2rem;
-o-border-radius: .2rem;
padding: .5rem .6rem;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
#btnBackTop:hover {
background-color: #747474;
}
@media (max-width: 991px) {
.top_header__wrapper .logo {
width: auto;
height: 28px;
}
.top_header__wrapper .top_wrapper {
padding-bottom: .5rem;
}
.top_header__wrapper .bottom_wrapper .logo {
width: auto;
height: 25px;
}
}
.mobileUserBtnBox {
display: none;
}
.mobileUserBtnBox .nav-link {
width: 27px;
height: 27px;
border-radius: 50%;
color: #fff;
margin-left: 5px;
}
.mobileUserBtnBox .nav-link .fa {
font-size: 1.4rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*========= Responsive Styles =============*/
@media (max-width: 991.99px) {
.top_wrapper .left_box {
width: 60%;
display: flex;
position: relative;
}
.top_wrapper .right_box {
width: 40%;
}
.top_wrapper .left_box .check_shipping_rules {
position: absolute;
top: 0;
right: 0;
left: auto;
width: auto;
}
.left_wrapp.d-flex.free_delivery_details {
display: flex !important;
justify-content: center;
position: relative !important;
top: 0;
left: 76% !important;
}
.left_wrapp.d-flex.free_delivery_details span {
font-size: .75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .03rem;
}
}
@media (max-width: 766.99px) {
.navbar-toggler {
display: block !important;
}
}
@media (max-width: 767px) {
.mobileUserBtnBox {
display: block;
position: relative;
top: 8px;
}
.top_wrapper .left_box {
display: block;
}
.top_wrapper .right_box {
align-items: center;
justify-content: center;
}
.top_wrapper .left_box .customerCare a,
.top_wrapper .left_box .customerCare,
.top_wrapper .left_box .check_shipping_rules {
font-size: .85rem;
}
/* ----------main menu ----------------- */
.top_wrapper .right_box {
display: none !important;
}
.top_wrapper .left_box {
width: 100%;
display: flex;
position: relative;
}
.left_wrapp.d-flex.free_delivery_details {
left: 52% !important;
}
/*---*/
.top_header__wrapper {
padding: 8px 0 13px 0px;
}
.top_header__wrapper.fixed-top {
padding: 8px 0 11px 0;
}
.top_header__wrapper .myNavBarButtom {
width: 160px;
}
.top_header__wrapper .logo {
height: 22px !important;
}
.top_header__wrapper .right_wrapp {
padding: 0%;
width: calc(100% - 160px);
position: unset;
/* justify-content: center; */
}
.mobile_search_button_div {
position: relative;
top: 4px;
}
.top_header__wrapper .right_wrapp .like_wrapp,
.top_header__wrapper .right_wrapp .cart_wrapp {
width: 3rem;
}
.top_header__wrapper .right_wrapp .like_wrapp span,
.top_header__wrapper .right_wrapp .cart_wrapp span {
right: 0;
width: 16px;
height: 16px;
font-size: 10px;
}
.top_header__wrapper .right_wrapp .search_box {
position: absolute;
top: 110%;
right: 0;
z-index: 999;
width: 100%;
box-shadow: 0 10px 17px rgba(0, 0, 0, 0.2);
border: 1px solid #c4c4c4;
border-radius: 4rem;
overflow: hidden;
background-color: #fff;
display: none;
}
.top_header__wrapper .right_wrapp .search_box .input {
background-color: transparent;
width: calc(100% - 2.4rem);
color: #474747;
font-weight: 500;
font-family: 'Poppins', sans-serif;
}
.top_header__wrapper .right_wrapp .search_box .searh_btn {
font-size: 1.1rem;
width: 2.5rem;
background: #099;
height: 2.5rem;
border-radius: 50%;
}
.top_header__wrapper .right_wrapp .search_box .searh_btn .fa {
color: #fff;
}
.log_details_menu .linkBox {
display: flex;
justify-content: center;
margin-top: 1.5rem;
margin-bottom: .8rem;
}
.log_details_menu .linkBox span {
display: none;
}
.log_details_menu .rigtht-links .nav-link {
font-size: 1rem;
font-weight: 500;
color: #fff;
border-bottom: 1px solid #eee;
padding: .6rem 1rem;
}
.log_details_menu .linkBox .showLogInPage,
.log_details_menu .linkBox .showSignUpPage {
font-weight: 500;
background: #9ccce375;
}
}
/*__576__*/
@media (max-width: 575.99px) {
.top_wrapper .left_box {
width: 100%;
}
.top_wrapper .left_box .customerCare {
width: 155px;
}
.top_wrapper .left_box .check_shipping_rules {
text-align: center !important;
}
.top_wrapper .left_box {
display: flex !important;
justify-content: space-between;
}
.top_wrapper .left_box .customerCare a {
font-size: .95rem;
}
.top_wrapper .left_box .customerCare,
.top_wrapper .left_box .check_shipping_rules {
text-align: left;
font-size: .92rem;
padding: 0 .5rem;
}
.top_wrapper .left_box .check_shipping_rules {
position: static;
width: auto;
}
.top_wrapper .left_box .check_shipping_rules {
text-align: right !important;
padding-right: .4rem;
}
.left_wrapp.d-flex.free_delivery_details {
left: 0 !important;
display: block !important;
text-align: right;
padding-right: 1rem;
}
ul.cus-dropdown-menu {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
right: auto;
top: 112%;
left: -5rem;
max-width: 9rem;
}
ul.cus-dropdown-menu::after {
border-right: 0.5em solid transparent;
border-left: 0.5em solid transparent;
border-top: 0;
border-bottom: 0.5em solid #fff;
position: absolute;
top: -7px;
left: auto;
right: 5px;
}
}