.appear-animate #about us .container.relative .section-text.mb-50.mb-sm-20 .row .col-md-4.col-sm-6.mb-sm-50.mb-xs-30 blockquote p {font-size: 15px;}

/* YouTube Responsive CSS for HubSpot */
.hs-responsive-embed-youtube {
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
padding-top: 25px;
height: 0;
}

.hs-responsive-embed-youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%!important;
height: 100%!important;
}

.hidden{display:none;visibility:hidden;}
#myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 0;
}
    @media only screen and (min-device-width : 360px) and (max-device-width : 640px){
    #myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 0;
    object-fit:cover !important;}}
    @media only screen and (min-device-width : 320px) and (max-device-width : 568px){
    #myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 0;
    object-fit:cover !important;}}
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
    #myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 0;
    object-fit:cover !important;}}
    @media only screen and (min-device-width : 1024px) and (max-device-width : 1366px){
    #myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 0;
    object-fit:cover !important;}}

/* --- Navigation logo -------------------------------------------------
   The source logo-white.png is black artwork centred in a large
   transparent margin, so inside the template's 118px box the signature
   itself rendered only ~58px wide and vanished against the dark hero
   video. logo-nav-white.png is that same artwork cropped to its content
   and recoloured white; the drop shadow keeps it legible over both the
   video and the grey nav shown after scrolling. */
.nav-logo-wrap .logo{
    max-width: 300px;
    height: 75px;
}
.nav-logo-wrap .logo img{
    max-height: 60px;
    max-width: 100%;
    width: auto;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.nav-logo-wrap .logo.small-height img{
    max-height: 52px;
}
@media (max-width: 767px){
    .nav-logo-wrap .logo img{
        max-height: 42px;
    }
}

/* --- House of Kamal Group ---------------------------------------------
   The three brand logos ship with different backgrounds (black, transparent
   and cream), so each card keeps its own logo's background rather than
   forcing them onto one colour and leaving visible edges. The width cap
   matters for The Weavers Code, whose source art is only 261px wide —
   letting it scale past that would blur it. */
.group-brands{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.group-brands > div{
    display: flex;
}
.group-brand{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 170px;
    padding: 30px 25px;
    border: 1px solid rgba(0,0,0,.09);
}
.group-brand img{
    max-width: 240px;
    max-height: 90px;
    width: auto;
    height: auto;
}
.group-brand.brand-hok{
    background: #000;
    border-color: #000;
}
.group-brand.brand-camala{
    background: #fff;
}
.group-brand.brand-weavers{
    background: rgb(235,229,219);
    border-color: rgba(0,0,0,.06);
}
@media (max-width: 767px){
    /* Bootstrap 3 gives col-sm-* no width below 768px, so as flex items the
       cards would size to their logos and come out uneven — pin them full
       width instead. */
    .group-brands > div{
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
    .group-brand{
        min-height: 140px;
    }
}