/** brand-section **/

.brand-section{
  position: relative;
}

.brand-section .sec-title{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-section .inner-container{
  margin: 0px 5px;
}

.brand-section .brand-block{
  padding: 0px 10px;
}

.brand-section .pattern-layer .pattern-1{
  position: absolute;
  left: 100px;
  top: -300px;
  width: 1090px;
  height: 1090px;
  background-repeat: no-repeat;
  z-index: -1;
}

.brand-section .pattern-layer .pattern-2{
  position: absolute;
  top: -200px;
  right: 0px;
  width: 1048px;
  height: 1090px;
  background-repeat: no-repeat;
}

.brand-block-one .inner-box{
  position: relative;
  display: block;
  text-align: center;
  margin-bottom: 20px;
}

.brand-block-one .inner-box a{
  position: relative;
  display: inline-block;
  width: 100%;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 5px;
  padding: 47px 20px 42px 20px;
}

.brand-block-one .inner-box a:hover{
  border-color: #fff;
  box-shadow: 0px 10px 50px 0px #00000012;
  transform: scale(1.3);
  z-index: 1;
}

.brand-block-one .inner-box .image{
  position: relative;
  display: block;
  margin-bottom: 20px;
}

.brand-block-one .inner-box span{
  position: relative;
  display: block;
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  color: var(--title-color);
}


/** rtl-css **/



/** responsive-css **/

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

}

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

}

@media only screen and (max-width: 767px){
  .brand-section{
    padding: 65px 0px 40px 0px;
  }
}

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

}

@media only screen and (max-width: 499px){
  .brand-section .sec-title{
    display: block;
  }
}













































/* ------------------------------------------------------------------ *
 * Project additions — the brand strip as a carousel.
 *
 * These live here, in the theme's own module sheet, rather than in the
 * Vite override sheet: this file is served straight off disk, so it
 * takes effect on upload with no build step. brand-carousel.js is
 * shipped the same way, for the same reason.
 *
 * Logos vary wildly in aspect ratio, so each sits in a fixed box.
 * ------------------------------------------------------------------ */

.brand-block-one .inner-box figure.image {
    display: grid;
    place-items: center;
    height: 74px;
    margin-bottom: 10px;
}

.brand-block-one .inner-box figure.image img {
    max-width: 100%;
    width: auto;
    object-fit: contain;
    max-height: 64px;
}

/*
 * The `brand_logos` builder block carries bare logos rather than linked brand
 * cards. In a grid the columns held them in line; as carousel items they need
 * their own box, or a tall logo drags the row height around as the strip moves.
 */
.brand-section .brand-block .brand-logo {
    display: grid;
    place-items: center;
    height: 90px;
    margin: 0;
}

.brand-section .brand-block .brand-logo img {
    max-width: 100%;
    width: auto;
    max-height: 80px;
    object-fit: contain;
}

/*
 * Pre-init fallback. The strips ship without the `owl-carousel` class, because
 * owl.css hides it until owl adds `owl-loaded` — see brand-carousel.js. This
 * is what the markup looks like on its own: the same row, at the same counts
 * owl steps through, just without the sliding. Once owl loads, its own
 * `.owl-carousel.owl-loaded { display: block }` outranks the flex here, and the
 * child selector stops matching because the blocks move inside `.owl-item`.
 */
.brand-carousel {
    display: flex;
    flex-wrap: wrap;
}

.brand-carousel > .brand-block {
    flex: 0 0 auto;
    width: 50%;
}

@media (min-width: 768px) {
    .brand-carousel > .brand-block {
        width: 33.3333%;
    }
}

@media (min-width: 992px) {
    .brand-carousel > .brand-block {
        width: 16.6666%;
    }
}

@media (min-width: 1200px) {
    .brand-carousel > .brand-block {
        width: 14.2857%;
    }
}

/*
 * Carousel arrows. The template's brand strip is a static grid, so there is no
 * existing placement to inherit; `.nav-style-one` is deliberately not reused,
 * as it parks its buttons above the section, where the "all brands" link
 * already sits.
 */
.brand-carousel .owl-nav {
    margin: 0;
}

.brand-carousel .owl-nav button {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    line-height: 44px;
    margin: 0;
    transform: translateY(-50%);
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    font-size: 10px;
    color: var(--title-color);
    transition: all 300ms ease;
}

.brand-carousel .owl-nav button:hover {
    border-color: var(--theme-color, #d2001a);
    background: var(--theme-color, #d2001a);
    color: #fff;
}

.brand-carousel .owl-nav .owl-prev {
    left: -14px;
}

.brand-carousel .owl-nav .owl-next {
    right: -14px;
}

/* Physical offsets, so they follow the arrows when the direction flips. */
[dir="rtl"] .brand-carousel .owl-nav .owl-prev {
    left: auto;
    right: -14px;
}

[dir="rtl"] .brand-carousel .owl-nav .owl-next {
    right: auto;
    left: -14px;
}

/*
 * Owl disables an arrow when there is nothing further that way. With six
 * brands in seven slots that is both of them, and two dead buttons flanking a
 * strip that cannot move reads as broken.
 */
.brand-carousel .owl-nav button.disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}