@font-face {
    font-family: Cairo-Regular;
    src: url(css/fonts/Cairo-Regular.ttf);
}

.sectionHeader>.sectionTitle {
    font-size: 22px !important;
}

.sectionHeader>.sectionDescription {
    font-size: 18px !important;
}

navbar-brand {
    color: #2a76b0;
}

.nav-item>a {
    font-family: Cairo, sans-serif !important;
}

body {
    font-family: Cairo, sans-serif !important;
}

.accountButton {
    font-size: 39px !important;
}

.langaugeCurrencyButton {
    font-family: Cairo, sans-serif !important;
    color: white;
}

.langaugeCurrencyContainer {
    font-family: Cairo, sans-serif !important;
    padding-right: 0px;
    width: 250px;
}

.langaugeCurrencyContainer>form {
    width: 100% !important;
    height: 100%;
}

.currencySelector {
    width: 100% !important;
}

.languageSelector {
    width: 100% !important;
}

.langaugeCurrencyButton {
    position: relative !important;
    text-align: left;
}

.jumbotron {
    position: relative;
    background: #000 url("../imgs/bgbanner.png") center center !important;
    background-size: 100% 100% !important;
}

i {
    font-size: 20px !important;
}

a>i {
    font-size: 30px !important;
}

.popover-header {
    font-family: Cairo, sans-serif !important;
}

select#gender option[value="BHD"] {
    background-image: url("imgs/BHD.png") !important;
}

select#gender option[value="USD"] {
    background-image: url(imgs/USD.png);
}

select>#currencyGroupSelect>option[value="BHD"] {
    background-image: url();
}

select#currencyGroupSelect option[value="USD"] {
    background-image: url();
}

.form-control {
    border: 0;
    border-left: 1px solid #e9e9e9;
}

.searchBar {
    background-color: white !important;
    height: 60px;
    border-radius: 50px;
    align-self: center;
    padding-top: 6px !important;
}


/* aligning the search button to the left */

.searchButtonCol {
    text-align: left;
}

.searchFilter {
    width: 100% !important;
    background-color: white;
}

@media only screen and (max-width: 767px) {
    .jumbotron>.display-4 {
        font-size: 1.5rem;
    }
    .searchButtonCol {
        font-size: 10px !important;
        text-align: right;
        margin-top: 10px;
    }
    .searchButtonCol>searchButton {
        height: 100%;
    }
    .searchBar {
        background-color: transparent !important;
        padding: 3px !important;
    }
    .searchBarSelectCol {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .searchBarInputCol {
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 5px;
    }
    .form-control {
        /* border-radius: 50px !important; */
    }
    .searchBar>select {
        /* border-radius: 50px !important; */
        width: 100% !important;
    }
}

.custom-select {
    border: none;
    font-family: Cairo, sans-serif !important;
}

.searchButton {
    font-size: 18px;
    font-weight: 600;
    padding: 0 40px;
    margin-left: 1px;
    outline: none;
    border-radius: 50px;
    height: 100%;
}

.dropdown-menu {
    width: 100%;
}

.searchBar>input {
    border-left: 1px solid #e9e9e9;
}


/* Override bootstrap row  */

.searchBar>.row {
    border-radius: 20px !important;
}


/* Override bootstrap row paddings */

.offerCard {
    position: relative;
    height: 194px;
    width: 255px;
    background-color: black;
}

.cardContainer {
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    width: 100%;
}

.offerButton {
    background-color: #8dc63f;
    border-radius: 10px;
    color: white;
}

.card {
    border-style: none;
}


/* ---------------------------------- */


/* Small Category Boxes
------------------------------------- */

.categories-boxes-container {
    /* width: calc(100% + 20px); */
    width: 100%;
    right: -10px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.category-small-box {
    /* float: right; */
    background-color: #f2f2f2;
    border-radius: 4px;
    margin: 20px 20px 0 0;
    padding: 22px 20px;
    text-align: center;
    color: #777;
    transition: 0.4s;
    transform: scale(1);
    width: 161px !important;
    height: 134px !important;
}


/* Hover Animation */

.category-small-box:hover {
    background-color: #66676b;
    color: #fff;
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.1);
}

.category-small-box:hover h4 {
    font-size: 17px;
}

.category-small-box h4 {
    font-size: 16px;
    color: #333;
    transition: 0.4s;
    line-height: 22px;
    margin-top: 8px;
}

.category-small-box i {
    font-size: 35px !important;
    height: 40px;
    display: inline-block;
    margin-top: 20px;
}

.category-small-box:hover h4 {
    color: #fff;
}


/* Media Queries For Small Category Boxes */

@media (max-width: 768px) {
    .category-small-box {
        width: calc(100% * (1/2) - 21px);
    }
}

@media (min-width: 768px) {
    .category-small-box {
        width: calc(100% * (1/3) - 21px);
    }
}

@media (min-width: 992px) {
    .category-small-box {
        width: calc(100% * (1/3) - 21px);
    }
}

@media (min-width: 1240px) {
    .category-small-box {
        width: calc(100% * (1/6) - 21px);
    }
}


/* .owl-item {
    margin-left: auto;
    margin-right: auto;
} */

@media only screen and (min-width:1200px) {
    .owl-prev {
        position: absolute;
        top: 30%;
        right: 2% !important;
        background-color: transparent !important;
        color: #2a76b0 !important;
    }
    .owl-next {
        position: absolute;
        top: 30%;
        left: 2% !important;
        background-color: transparent !important;
        color: #2a76b0 !important;
    }
}

.owl-prev {
    position: absolute;
    top: 30%;
    right: 5%;
    background-color: transparent !important;
    color: #2a76b0 !important;
}

.owl-next {
    position: absolute;
    top: 30%;
    left: 5%;
    background-color: transparent !important;
    color: #2a76b0 !important;
}


/* .owl-prev i,
.owl-next i {
    transform: scale(1, 6);
    color: #ccc;
} */


/* ---------------------------------- */


/* End Small Category Boxes
------------------------------------- */


/* ---------------------------------- */


/* Offers Listing
------------------------------------- */

.listingOffer {
    height: 194px;
    width: 255px;
    position: relative;
    border-radius: 4px;
    background-image: url(https://img.newatlas.com/mvoice-g2-smartwatch-10.png?auto=format%2Ccompress&ch=Width%2CDPR&fit=crop&h=347&q=60&rect=0%2C0%2C1420%2C799&w=616&s=1a6f45a6b3ef57e43dc3028eb68dc0ed);
    background-size: cover !important;
    overflow: hidden;
}

.darkOverlay {
    height: 194px;
    width: 255px;
    background-color: rgba(35, 35, 37, 0.2);
    position: absolute;
}

.listingOfferContent {
    padding: 10px;
    position: relative;
    text-align: right;
    line-height: 0.1px;
}

.listingOfferContent-down {
    margin-top: 125px;
}


/* To change ribbon color just change top border color. */

.typeRibbon {
    width: 0;
    height: 0;
    border-top: 50px solid #ffd800;
    border-right: 50px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
}

.darkOverlay>.ribbonButton {
    position: absolute;
    top: 0px;
    left: 0px;
    color: red;
}

.darkOverlay>.ribbonButton>i {
    font-size: 18px !important;
    position: absolute;
    top: 5px;
    left: 5px;
}

.listingOfferButton {
    background-color: #8dc63f;
    border-radius: 50px;
    color: white;
    height: 30px;
    padding-bottom: 10px;
    margin-top: 90px;
    position: absolute;
}

.listingOfferButton>span {
    margin: auto;
}

.productName {
    font-size: 12px;
    margin-top: 50%;
    position: relative;
    width: 90%;
    height: 100%;
}

.productName::first-line {
    font-size: 18px;
}

.listingOfferContent>p {
    font-size: 11.8px !important;
}

.like-outlined,
.like-filled {
    position: absolute;
    bottom: 23px;
    left: 10px;
    color: white;
}

.like-outlined,
.like-filled>i {
    font-size: 25px !important;
}

.like-outlined2,
.like-filled2 {
    position: absolute;
    top: 0px;
    right: 15px;
    font-size: 30px;
    color: red;
}


/* ---------------------------------- */


/* End Offer Listing
------------------------------------- */


/* ---------------------------------- */


/* Company boxes begin
------------------------------------- */

.companyContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.companyBox {
    height: 194px;
    /* width: calc(100% * (1/4) - 21px); */
    /* 
    width: 255px; */
    border-radius: 4px;
    box-shadow: 0px 1px 8px 0 rgba(0, 0, 0, 0.07), 0px 2px 2px 0 rgba(0, 0, 0, 0.07);
    padding: 0px 5px 0px 5px;
    margin: 10px;
}

.companyBox>img {
    margin: auto;
}

.companyBox>.alignmentImage {
    top: 0;
    left: 0;
}

.contentToCenter {
    /* margin-left: auto;
    margin-right: auto; */
}

.card-img-overlay>.like-outlined2,
.like-filled2 {
    position: absolute;
    top: 0px;
    right: 5px;
    font-size: 20px;
    color: #c7003d;
}

.card-img-overlay>.ribbonButton {
    position: absolute;
    top: 0px;
    left: 0px;
    color: red;
}

.card-img-overlay>.ribbonButton>i {
    font-size: 18px !important;
    position: absolute;
    top: 5px;
    left: 5px;
}

@media only screen and (max-width: 500px) {
    .companyBox {
        width: calc(100% * (1/2) - 21px);
    }
    .companyContainer {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    .companySection {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
}

.listing-company {
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 90% auto !important;
    background-color: white !important;
}

.moreButton {
    background-color: #8dc63f;
    color: white;
    border-radius: 50px;
}