@font-face {
    font-family: 'Cairo-Bold';
    src: url('fonts/Cairo-Bold.eot');
    src: url('fonts/Cairo-Bold.eot?#iefix') format('embedded-opentype'),
    url('fonts/Cairo-Bold.woff2') format('woff2'),
    url('fonts/Cairo-Bold.woff') format('woff'),
    url('fonts/Cairo-Bold.ttf')  format('truetype'),
    url('fonts/Cairo-Bold.svg#Cairo-Bold') format('svg');
}

@font-face {
    font-family: 'Cairo-Regular';
    src: url('fonts/Cairo-Regular.eot');
    src: url('fonts/Cairo-Regular.eot?#iefix') format('embedded-opentype'),
    url('fonts/Cairo-Regular.woff2') format('woff2'),
    url('fonts/Cairo-Regular.woff') format('woff'),
    url('fonts/Cairo-Regular.ttf')  format('truetype'),
    url('fonts/Cairo-Regular.svg#Cairo-Regular') format('svg');
}

@font-face {
    font-family: 'FuturaBT-Book';
    src: url('fonts/FuturaBT-Book.eot');
    src: url('fonts/FuturaBT-Book.eot?#iefix') format('embedded-opentype'),
    url('fonts/FuturaBT-Book.woff2') format('woff2'),
    url('fonts/FuturaBT-Book.woff') format('woff'),
    url('fonts/FuturaBT-Book.ttf')  format('truetype'),
    url('fonts/FuturaBT-Book.svg#FuturaBT-Book') format('svg');
}

@font-face {
    font-family: 'FuturaBT-Heavy';
    src: url('fonts/FuturaBT-Heavy.eot');
    src: url('fonts/FuturaBT-Heavy.eot?#iefix') format('embedded-opentype'),
    url('fonts/FuturaBT-Heavy.woff2') format('woff2'),
    url('fonts/FuturaBT-Heavy.woff') format('woff'),
    url('fonts/FuturaBT-Heavy.ttf')  format('truetype'),
    url('fonts/FuturaBT-Heavy.svg#FuturaBT-Heavy') format('svg');
}
@font-face {
    font-family: 'Tajawal-Bold';
    src: url('fonts/Tajawal-Bold.eot');
    src: url('fonts/Tajawal-Bold.eot?#iefix') format('embedded-opentype'),
    url('fonts/Tajawal-Bold.woff2') format('woff2'),
    url('fonts/Tajawal-Bold.woff') format('woff'),
    url('fonts/Tajawal-Bold.ttf')  format('truetype'),
    url('fonts/Tajawal-Bold.svg#Tajawal') format('svg');
}


@font-face {
    font-family: 'Abril Display BL';
    src: url('fonts/newFont/AbrilDisplay-Bold.woff2') format('woff2'),
        url('fonts/newFont/AbrilDisplay-Bold.woff') format('woff');
    font-weight: 900;
}

@font-face {
    font-family: 'AbrilText-SemiBold';
    src: url('fonts/newFont/AbrilDisplay-SemiBold.woff2') format('woff2'),
        url('fonts/newFont/AbrilDisplay-SemiBold.woff') format('woff');
    font-weight: 900;
}

@font-face {
    font-family: 'AbrilText-Regular';
    src: url('fonts/newFont/AbrilDisplay-Regular.woff2') format('woff2'),
        url('fonts/newFont/AbrilDisplay-Regular.woff') format('woff');
}
:root {
    /* --primary_color: rgb(96,195,172);
    --secondary_color: rgb(47,48,104) */
    --secondary_color: rgb(38, 52, 98);
    /*  var(--secondary_color) */
    --primary_color: rgb(187, 154, 97);
    /* #d02027 */
    --black_color: rgb(45, 45, 45)
}
html, body{margin: 0; padding: 0; height: 100%}
body{height: 100%; -webkit-touch-callout: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; font-smoothing: antialiased}
body.no-scroll{overflow: hidden}
ul{list-style: none}
ul, li{margin: 0; padding: 0}
a{text-decoration: none; color: inherit}
*{margin: 0; padding: 0; box-sizing: border-box}
h1, h2, h3, h4{font-weight: normal}
img{border: none}
.mobile{display: none !important}
.hidden{display: none}
.small_letters {text-transform: lowercase}
.page{padding: 0 0 200px 0;}
.main-container{padding: 0 200px}
.btn{width: 190px; height: 50px; display: block; background-color: var(--primary_color); color: #FFFFFF; font-size: 14px; font-family: 'AbrilText-Regular'; text-align: center; line-height: 48px; text-transform: uppercase; /* border-bottom-right-radius: 15px; */ transition: .5s; border: 1px solid var(--primary_color); z-index: 1; position: relative; outline: none}
.btn.transparent{background-color: transparent; color: var(--primary_color)}
.btn:hover{background-color: #FFFFFF; color: var(--primary_color)}
.btn.transparent:hover{background-color: var(--primary_color); color: #FFFFFF}
.vertical-align{position: absolute; top: 50%; transform: translateY(-50%)}
.section-title{font-size: 40px; color: var(--primary_color); font-family: 'brilText-SemiBold'}
/* rebrand */
/* .section-title:after{content: ''; width: 309px; border-top: 2px solid var(--secondary_color); display: block; margin: 20px 0 0 0} */
.clear{clear: both}
.page-cover{height: 442px; margin: 13px 0 0 0; position: relative;
    /* 2024 */
    /* margin:14px 80px 0 80px; */}
.page-title{font-family: 'Abril Display BL'; color: var(--secondary_color); font-size: 68px; line-height: 82px; text-align: center;padding-top: 180px;}
.page-title::after{
/*    content: '';*/
    width: 100px;
    border-top: 1px solid var(--primary_color);
    margin: 60px auto 0 auto;
    display: block;

}




input.alert, textarea.alert, .input_container.alert .toggle {border-color: #F04549!important;}
label.alert {color: #F04549!important;}
.file-drop-area.alert {border-color: #F04549!important;}


header{padding: 9px 200px; height: 125px; font-size: 0}
/* header.article-header{border-bottom: 1px solid #D5D5D5} */
header .logo{height: 81px; width: 117px; /* height: 130px; width: 132px; */ background: url('/assets/images/logo.png?1') no-repeat center; background-size: contain; display: inline-block; vertical-align: middle; transition: .5s}
header .logo:hover{opacity: .6}
header .menu{width: calc(100% - 150px); display: inline-block; vertical-align: middle; text-align: right}
header .menu .top-menu{height: 42px}
header .menu .top-menu .social{margin: 0 25px 0 0; display: inline-block; vertical-align: top}
header .menu .top-menu .social li{display: inline-block; margin: 0 10px 0 0}
header .menu .top-menu .social li:last-child{margin: 0}
header .menu .top-menu .social li a{width: 24px; height: 24px; display: block}
header .menu .top-menu .social li.linkedin a{background: url('/assets/images/linkedin-icon.svg') no-repeat center; background-size: contain}
header .menu .top-menu .social li.facebook a{background: url('/assets/images/facebook-icon.svg') no-repeat center; background-size: contain}
header .menu .top-menu .social li.instagram a{background: url('/assets/images/instagram-icon.svg') no-repeat center; background-size: contain}
header .menu .top-menu .social li.twitter a{background: url('/assets/images/X.svg') no-repeat center; background-size: contain}
header .menu .top-menu .social li.youtube a{background: url('/assets/images/youtube-icon.svg') no-repeat center; background-size: contain}
header .menu .top-menu .switch-language{display: inline-block; vertical-align: top}
.switch-language{text-align: center; z-index: 1; position: relative;color:var(--secondary_color)}
.switch-language .toggle{font-size: 18px; font-family: 'AbrilText-Regular'; text-transform: uppercase; transition: .5s}
.switch-language .toggle:hover{color: rgba(0, 0, 0, .6)}
.switch-language .toggle:after{content: '\f0d7'; font-family: FontAwesome; font-size: 18px; color: var(--secondary_color); display: inline-block; margin: 0 0 0 10px; transition: .5s}
.switch-language .toggle.active:after{transform: rotate(-180deg) translateY(2px)}
.switch-language ul{background-color: var(--secondary_color); margin: 5px 0 0 0; visibility: hidden; opacity: 0; transition: .5s; text-align: center}
.switch-language ul.active{visibility: visible; opacity: 1}
.switch-language ul li a{color: #FFFFFF; display: block; padding: 3px 10px; transition: .5s; font-size: 15px; font-family: 'AbrilText-Regular'; text-transform: uppercase; border: 1px solid var(--secondary_color)}
.switch-language ul li a:hover{background-color: #FFFFFF; color: var(--secondary_color)}
header .menu .top-menu .separator{font-size: 18px; font-family: 'AbrilText-Regular'; display: inline-block; margin: 0 20px; vertical-align: top}
header .menu .top-menu .search-icon{width: 24px; height: 24px; display: inline-block; background: url('/assets/images/search-icon.png') no-repeat center; background-size: contain; text-align: left}
header .menu .lower-menu nav{display: inline-block; vertical-align: middle}
header .menu .lower-menu nav ul li{display: inline-block; margin: 0 55px 0 0}
header .menu .lower-menu nav ul li:last-child{margin: 0}
header .menu .lower-menu nav ul li a{font-family: 'AbrilText-Regular'; font-size: 18px; display: block; position: relative;
    color: var(--secondary_color);
    font-weight: 900;
}

header .menu .lower-menu nav ul li a:before{
content: '';
position: absolute;
width: 100%;
/* Change border from 1 & change the color */
border-top: 2px solid #d02027;
left: 0;
/* Change the bottom from -5 */
bottom: -7px;
visibility: hidden;
opacity: 0;
/* change the transition from .5s */
transition: .3s
}


header .menu .lower-menu nav ul li a:hover:before{visibility: visible; opacity: 1; transform: translateY(-3px)}
header .menu .lower-menu .shop-now{font-size: 12px; font-family: 'AbrilText-Regular'; color: #FFFFFF; background-color: var(--primary_color); text-align: center; display: inline-block; vertical-align: middle; width: 125px; height: 42px; margin: 0 0 0 30px; text-transform: uppercase; line-height: 42px; /* border-bottom-right-radius: 15px; */ transition: .5s}
header .menu .lower-menu .shop-now:hover{letter-spacing: 1px}


/*Homepage*/
/* 2024 */
/* .homepage .page-cover{margin: 14px 0 0 0 ;} */
.homepage .page-cover{margin: 14px 180px 0 180px;}

.homepage .page-cover, .homepage .page-cover ul, .homepage .page-cover ul li{height: 950px} /***mussab**/

@media only screen and (max-width : 1920px) {
.homepage .page-cover, .homepage .page-cover ul, .homepage .page-cover ul li{height: 692px} /***mussab**/
}



.homepage .page-cover ul li{position: relative}
.homepage .page-cover ul li:before{content: ''; position: absolute; background-color: rgba(0, 0, 0, .08); width: 100%; height: 100%; top: 0; left: 0}

.homepage .page-cover ul li h2{color: #000000; font-size: 43px; line-height: 65px; font-family: 'AbrilText-Regular'; margin: 0 0 30px 0; width: 55%}

.homepage .page-cover .owl-carousel .owl-dots{position: absolute; bottom: 30px; width: 100%}
.homepage .page-cover .owl-carousel .owl-dots button.owl-dot{border: 1px solid #FFFFFF}
.homepage .page-cover .owl-carousel .owl-dots button.owl-dot.active{border: none}
.homepage .about{padding: 90px 0 90px 200px; font-size: 0}
.homepage .about .container-left{width: calc(100% - 180px); margin: 0 180px 0 0; display: inline-block; vertical-align: top}
.homepage .about .container-left p{font-size: 24px; line-height: 40px; font-family:  'Times New Roman', Times, serif; margin: 40px 0;color: var(--secondary_color);}
.homepage .about figure{width: 55%; height: 500px; display: inline-block; vertical-align: top}
.homepage .products{padding: 85px 0 100px 0; margin: -55px 0 0 0}
.homepage .products h3{color: #FFFFFF; font-size: 120px; font-family: 'AbrilText-Regular'; text-transform: uppercase; margin: 20px 200px}
.homepage .products figure{height: 550px; margin: 20px 0}
.homepage .products .owl-carousel .owl-dots{position: absolute; bottom: 100px; width: 100%}
.homepage .products .owl-carousel .owl-nav{text-align: center}
/*.homepage .products .owl-carousel .owl-nav:after{content: 'Drag to move'; display: block; color: var(--secondary_color); font-family: 'AbrilText-Regular'; font-size: 24px; margin: 10px 0 0 0}*/
.homepage .products .owl-carousel .owl-nav .owl-prev, .homepage .products .owl-carousel .owl-nav .owl-next{bottom: 0; top: initial; transform: none; position: relative}
.homepage .products .owl-carousel .owl-nav .owl-prev{left: initial; margin: 0 35px 0 0}
.homepage .products .owl-carousel .owl-nav .owl-next{right: initial}
.homepage .brands{padding: 20px 0 10px 0;background-color: #f1f0ec;}
/* .homepage .brands .section-title{text-align: center} */
.homepage .brands .section-title:after{margin: 20px auto 0 auto}
.homepage .brands ul{padding: 0 125px; text-align: center; margin: 30px auto 50px auto}
.homepage .brands ul li{display: inline-block; width: 230px; height: 230px; vertical-align: middle}
.homepage .brands ul li figure{background-repeat: no-repeat; background-size: contain; background-position: center; width: 100%; height: 100%}
.homepage .brands .btn{margin: 50px auto 0 auto}
.homepage .news{margin: 80px 0 80px 0;}
.homepage .news .section-title:after{width: 425px}
.homepage .news .articles{margin: 50px 0 0 0; font-size: 0}
.homepage .news .articles .article-1{width: 100%; margin: 0}
.homepage .news .articles .article-1 .details{background-color: #f1f0ec; height: 350px;}
.homepage .news .owl-carousel .owl-dots{margin: 50px 0 0 0}
.our_product_container {padding: 0}
.our_product_container .section-title {padding: 0 0 0 200px}
.our_product_container .li {position: relative}
.our_product_container .btn {margin: 0 0 0 200px; display: inline-block;position: absolute; bottom: 10%;}

.article-1{float: left; margin: 0 8% 0 0}
.article-1:nth-child(3n){margin: 0}
.article-1 figure{height: 295px; width:100%;background-repeat: no-repeat; background-position: center; background-size: cover; position: relative}
.article-1.video figure:after{content: ''; width: 28px; height: 34px; position: absolute; top: 50%; transform: translateY(-50%); background: url('/assets/images/play-icon.png') no-repeat center; background-size: contain; left: 0; right: 0; margin: auto}


.article-1 .details{/* border-bottom-right-radius: 50px; */ padding: 35px 40px}
.article-1 .details h3{font-size: 24px; font-family: 'AbrilText-SemiBold'; line-height: 30px}
.article-1 .details .date-container{margin: 15px 0 0 0}
.article-1 .details .date-container span{font-size: 18px; color: var(--secondary_color); font-family: 'AbrilText-Regular'; display: inline-block; width: 50%; vertical-align: top}
.article-1 .details .date-container span.tag{text-align: right}
.article-1 .details p{font-size: 24px; line-height: 30px; font-family: 'AbrilText-Regular'; margin: 25px 0 0 0}
.article-1 .details .btn{margin: 25px 0 0 0 !important}

.article-2{width: 49%; float: left; margin: 0 2% 55px 0}
.article-2:nth-child(even){margin: 0 0 55px 0}
.article-2 a{display: block}
.article-2 figure{height: 490px; position: relative; background-repeat: no-repeat; background-size: cover; background-position: center}
.article-2 figure:after{content: ''; width: 28px; height: 34px; position: absolute; top: 50%; transform: translateY(-50%); background: url('/assets/images/play-icon.png') no-repeat center; background-size: contain; left: 0; right: 0; margin: auto}
.article-2 .details{padding: 35px 0 20px 0}
.article-2 .details h3{font-size: 24px; line-height: 30px; font-family: 'AbrilText-Regular'}
.article-2 .details p{font-size: 24px; line-height: 30px; font-family: 'AbrilText-Regular'; margin: 20px 0 0 0}

.homepage .news .btn{margin: 50px auto 0 auto}
.owl-carousel .owl-dots{text-align: center; text-align-last: center}
.owl-carousel .owl-dots button.owl-dot{width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--secondary_color); margin: 0 10px 0 0; outline: none; transition: .2s}
.owl-carousel .owl-dots button.owl-dot:last-child{margin: 0}
.owl-carousel .owl-dots button.owl-dot:hover{border: 1px solid var(--primary_color) !important; background-color: var(--primary_color)}
.owl-carousel .owl-dots button.owl-dot.active{border: 1px solid var(--primary_color) !important; background-color: var(--primary_color)}
.owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next{width: 14px; height: 28px; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; position: absolute; top: calc(50% - 34px); outline: none; transform: translateY(-50%); transition: .2s}
.owl-carousel .owl-nav .owl-prev:hover, .owl-carousel .owl-nav .owl-next:hover{opacity: .5}
.owl-carousel .owl-nav .owl-prev span, .owl-carousel .owl-nav .owl-next span{display: none}
.owl-carousel .owl-nav .owl-prev{background-image: url('/assets/images/arrow-left.png') !important; left: -50px}
.owl-carousel .owl-nav .owl-next{background-image: url('/assets/images/arrow-right.png') !important; right: -50px}
/*End Homepage*/


/*About Page*/
.about-page{padding: 0}
.about-page .page-cover{background: url('/assets/images/about-page-cover.jpg?1') no-repeat center; background-size: cover}
.about-page .goals{margin: 90px 0 130px 0; font-size: 0}
.about-page .goals .section-title{width: calc(30% - 60px); margin: 0 60px 0 0; display: inline-block; vertical-align: top}
.about-page .goals .text{width: calc(35% - 90px); margin: 0 90px 0 0; display: inline-block; vertical-align: top}
.about-page .goals .text:last-child{margin: 0 0 0 90px}
.about-page .goals .text h3{font-size: 24px; font-family: 'AbrilText-Regular'; margin: 0 0 30px 0}
.about-page .goals .text p{font-size: 24px; font-family: 'AbrilText-Regular'; line-height: 30px}
.about-page .goals ul{text-align: justify; text-align-last: justify; padding: 0 175px; font-size: 0; margin: 100px 0 0 0}
.about-page .goals ul li{display: inline-block; vertical-align: middle; color: var(--primary_color); font-size: 36px; font-family: 'AbrilText-Regular'; width: 33.33%; text-align: center; text-align-last: center}
.about-page .goals ul li > div{height: 140px; margin: 0 0 30px 0; position: relative}
.about-page .goals ul li > div figure{background-repeat: no-repeat; background-position: center; background-size: contain; margin: auto; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0}
.about-page .goals ul li.date figure{width: 64px; height: 138px; background-image: url('/assets/images/building-icon.png')}
.about-page .goals ul li.workers figure{width: 80px; height: 115px; background-image: url('/assets/images/workers-icon.png')}
.about-page .goals ul li.countries figure{width: 195px; height: 110px; background-image: url('/assets/images/countries-icon.png')}
.about-page .profile{font-size: 0; padding: 80px 0 100px 0}
.about-page .profile figure{width: 40%; height: 560px; background: url('/storage/files_uploads/AJLAN-HOME-PAGE-V1_1701179755_1701354088_1712188009.jpg') no-repeat center; background-size: cover; display: inline-block; vertical-align: top;border-radius: 5px;}
/*2024*/
.about-page .profile .container-right{width: calc(50% - 180px); display: inline-block; vertical-align: top; margin: 102px 0 0 0px}
.about-page .profile .container-right p{font-size: 24px; line-height: 40px; font-family: 'AbrilText-Regular'; margin: 50px 0 0 0;color: var(--secondary_color);}
.about-page .certificates{padding: 0 0 200px 0}
.about-page .certificates .section-title{text-align: center}
.about-page .certificates .section-title:after{margin: 20px auto 0 auto}
.about-page .certificates ul{margin: 40px 0 0 0}
.about-page .certificates ul li{display: inline-block; vertical-align: top; height: 235px; width: 100%}
.about-page .certificates ul li figure{width: 100%; height: 100%}
.about-page .certificates .owl-carousel .owl-dots{margin: 50px 0 0 0}
.about-page .companies{padding: 0 0 80px 0}
.about-page .companies .section-title{text-align: center}
.about-page .companies .section-title:after{margin: 20px auto 0 auto}
.about-page .companies ul{margin: 30px 0 0 0}
.about-page .companies ul li{display: inline-block; vertical-align: top; height: 230px; width: 100%}
.about-page .companies ul li figure{width: 100%; height: 100%}
.about-page .wall-of-fame{padding: 80px 0 100px 0; background-color: #f1f0ec ;/* background-image: url('/assets/images/wall-of-fame-bg.png'); */ background-repeat: no-repeat; background-size: cover; background-position: center; background-color: #EEEEEE}
.about-page .wall-of-fame .section-title{text-align: center}
.about-page .wall-of-fame .section-title:after{margin: 20px auto 0 auto}
.about-page .wall-of-fame .lists{margin: 65px 0 0 0; text-align: center}
.about-page .wall-of-fame .lists .list{margin: 0 0 90px 0}
.about-page .wall-of-fame .lists .list:last-child{margin: 0}
.about-page .wall-of-fame .lists .list h3{font-family: 'AbrilText-Regular'; font-size: 26px; color: var(--secondary_color); line-height: 40px}
.about-page .wall-of-fame .lists .list p{font-family: 'AbrilText-Regular'; font-size: 24px; color: var(--secondary_color)}
.about-page .wall-of-fame .lists .list ul{margin: 40px 0 0 0}
.about-page .wall-of-fame .lists .list ul li{display: inline-block; vertical-align: middle; margin: 0 72px}
.about-page .wall-of-fame .lists .list ul li figure{width: 130px; height: 130px; border-radius: 50%; background-repeat: no-repeat; background-size: cover; background-position: center top; margin: auto}
.about-page .leadership{padding: 60px 0 135px 0}
.about-page .leadership ul{margin: 44px 0 0 0; font-size: 0}
.about-page .leadership ul li{width: 23.5%; display: inline-block; vertical-align: top; margin: 0 2% 0 0; text-align: center}
.about-page .leadership ul li:nth-child(4){margin: 0}
.about-page .leadership ul li figure{height: 415px; background-repeat: no-repeat; background-position: center; background-size: contain}
.about-page .leadership ul li h3{font-family: 'AbrilText-Regular'; color: var(--secondary_color); font-size: 20px; margin: 45px 0 0 0}
.about-page .leadership ul li span{font-family: 'AbrilText-Regular'; color: var(--primary_color); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; margin: 15px 0 0 0; display: block}
.about-page .leadership ul li p{font-family: 'AbrilText-Regular'; font-size: 18px; color: rgba(55, 47, 41, .6); margin: 30px 0 0 0; line-height: 30px}
/*End About Page*/


/*Brands Page*/
.brands-page{padding: 0}
.brands-page .page-cover{background: url('/assets/images/brands-page-cover.jpg?1') no-repeat center; background-size: cover}
.brands-page .filters{text-align: center; margin: 135px 0 0 0; font-size: 0}
.brands-page .filters li{display: inline-block; vertical-align: top}
.brands-page .filters li a{font-size: 18px; color: var(--secondary_color); font-family: 'AbrilText-Regular'; padding: 10px 28px; display: block; transition: .5s; /* border-bottom-right-radius: 15px */}
.brands-page .filters li.active a, .brands-page .filters li:hover a{background-color: var(--primary_color); color: #FFFFFF}
.brands-page .lists{margin: 55px 0 0 0}
.brands-page .lists .list{margin: 0 0 135px 0}
.brands-page .lists .list.hide{display: none}
.brands-page .lists .list h3{font-size: 36px; color: var(--secondary_color); font-family: 'AbrilText-Regular'}
.brands-page .lists .list h3:after{content: ''; width: 275px; border-top: 2px solid var(--secondary_color); display: block; margin: 20px 0 0 0}
.brands-page .lists .list ul{margin: 25px 0 0 0; font-size: 0}
.brands-page .lists .list ul li{width: 25%; padding: 0 30px 70px 0; display: inline-block; vertical-align: top; margin: 0 0 25px 0}
.brands-page .lists .list ul li:nth-child(4n){padding-right: 0}
.brands-page .lists .list ul li figure{height: 120px; background-repeat: no-repeat; background-size: contain; background-position: center}
/*End Brands Page*/


/*Contact Page*/
.contact-page .page-cover{background: url('/assets/images/web1.jpg') no-repeat center; background-size: cover}
.contact-page .contact{margin: 130px 0 0 0; font-size: 0}
.contact-page .contact .container{width: calc(50% - 170px); display: inline-block; vertical-align: top}
.contact-page .contact .container-left{margin: 0 170px 0 0}
.contact-page .contact .container-left .contact-info{margin: 30px 0 0 0}
.contact-page .contact .container-left .contact-info p{font-size: 24px; line-height: 30px; font-family: 'AbrilText-Regular'; padding: 0 90px 0 0; margin: 0 0 25px 0}
.contact-page .contact .container-left .contact-info p.strong{font-family: 'AbrilText-Regular'}
.contact-page .contact .container-left .contact-info ul{margin: 45px 0 0 0}
.contact-page .contact .container-left .contact-info ul li{display: inline-block; margin: 0 15px 0 0; width: 35px; height: 35px}
.contact-page .contact .container-left .contact-info ul li a{display: block; height: 100%; transition: .5s}
.contact-page .contact .container-left .contact-info ul li a:hover{opacity: .6}
.contact-page .contact .container-left .contact-info ul li.linkedin a{background: url('/assets/images/linkedin-icon.svg') no-repeat center; background-size: contain}
.contact-page .contact .container-left .contact-info ul li.facebook a{background: url('/assets/images/facebook-icon.svg') no-repeat center; background-size: contain}
.contact-page .contact .container-left .contact-info ul li.instagram a{background: url('/assets/images/instagram-icon.svg') no-repeat center; background-size: contain}
.contact-page .contact .container-left .contact-info ul li.twitter a{background: url('/assets/images/X-icon-02.svg') no-repeat center; background-size: contain}
.contact-page .contact .container-left .contact-info ul li.youtube a{background: url('/assets/images/youtube-icon.svg') no-repeat center; background-size: contain}
.contact-page .contact .container-left .map{margin: 35px 0 0 0}
.contact-page .contact .container-right{margin: 0 0 0 170px}
.contact-page .contact .container-right form{margin: 30px 0 0 0}
form.contact-form label{font-size: 16px; font-family: 'AbrilText-Regular'; margin: 0 0 10px 0; display: block}
form.contact-form label.text{font-size: 18px; margin: 0 0 15px 0}
form.contact-form label span{color: var(--primary_color)}
form.contact-form input[type='text'], form.contact-form input[type='email'], form.contact-form textarea{width: 100%; border-radius: 5px; border: 1px solid var(--secondary_color); padding: 10px 0 10px 20px; outline: none; font-size: 16px; color: #000000; font-family: 'AbrilText-Regular'; background-color: transparent}
form.contact-form input[type='text'], form.contact-form input[type='email']{margin: 0 0 30px 0; height: 45px}

form.contact-form .radios-block{margin: 0 0 75px 0}
form.contact-form .radio-buttons{margin: 0 0 30px 0}
form.contact-form .radio-buttons .radio-button{display: inline-block; margin: 0 35px 0 0}
form.contact-form .radio-buttons .radio-button.block{display: block; margin: 0 0 15px 0}
form.contact-form .radio-buttons .radio-button.other{margin: 50px 0 0 0}
form.contact-form .radio-buttons .radio-button.other input[type="text"]{margin: 15px 0 0 0}
form.contact-form .radio-buttons .radio-button input[type="radio"]{display: inline-block; vertical-align: middle; cursor: pointer; outline: none}
form.contact-form .radio-buttons .radio-button label{font-size: 18px; color: var(--secondary_color); display: inline-block; margin: 0 0 0 5px; vertical-align: middle; cursor: pointer}

form.contact-form .select-container{position: relative; margin: 0 0 30px 0}
form.contact-form .select-container.active{z-index: 1}
form.contact-form .select-container .toggle{width: 100%; border-radius: 5px; border: 1px solid var(--secondary_color); padding: 10px 0 10px 20px; outline: none; font-size: 16px; color: #B4B4B4; font-family: 'AbrilText-Regular'; background-color: #FFFFFF; display: block; position: relative}
form.contact-form .select-container .toggle:after{content: ''; position: absolute; color:var(--secondary_color); width: 20px; height: 10px; background: url('/assets/images/arrow-down-grey.png') no-repeat center; background-size: contain; right: 10px; top: 15px; transition: .5s}
form.contact-form .select-container.active .toggle:after{transform: rotate(-180deg)}
form.contact-form .select-container ul{position: absolute; width: 100%; background-color: #FFFFFF; border: 1px solid var(--secondary_color); border-radius: 5px; top: 40px; opacity: 0; visibility: hidden; transition: .5s; max-height: 160px; overflow-y: scroll}
form.contact-form .select-container.active ul{opacity: 1; visibility: visible}
form.contact-form .select-container ul li{border-bottom: 1px solid var(--secondary_color); transition: .5s}
form.contact-form .select-container ul li:last-child{border-bottom: none}
form.contact-form .select-container ul li a{font-size: 16px; font-family: 'AbrilText-Regular'; display: block; padding: 10px 0 10px 20px}
form.contact-form .select-container ul li:hover{background-color: var(--primary_color)}
form.contact-form .select-container ul li:hover a{color: #FFFFFF}

form.contact-form input::-webkit-input-placeholder, form.contact-form textarea::-webkit-input-placeholder{color: #B4B4B4; font-size: 18px}
form.contact-form input:-moz-placeholder, form.contact-form textarea:-moz-placeholder{color: #B4B4B4; font-size: 18px}
form.contact-form input::-moz-placeholder, form.contact-form textarea::-moz-placeholder{color: #B4B4B4; font-size: 18px}
form.contact-form input:-ms-input-placeholder, form.contact-form textarea:-ms-input-placeholder{color: #B4B4B4; font-size: 18px}
form.contact-form textarea{min-height: 145px; max-height: 145px; min-width: 100%; max-width: 100%; resize: none}
form.contact-form .btn{margin: 30px 0 0 0; float: right}
/*End Contact Page*/


/*Products Page*/
.products-page .page-cover{background: url('/assets/images/products-page-cover.jpg?1') no-repeat center; background-size: cover}
.products-page ul{margin: 130px 0 0 0; font-size: 0}
.products-page ul li{display: inline-block; vertical-align: top; width: 23.5%; 
    /* 2024 */
    margin: 0 9% 0 0; height: 566px; position: relative}
.products-page ul li:last-child{margin: 0}
.products-page ul li > div{text-align: center; width: 100%; margin-top: 10px}
.products-page ul li > div h3{font-size: 36px; font-family: 'AbrilText-Regular';color: var(--secondary_color);}
.products-page ul li > div .btn{margin: 15px auto 0 auto}
/*End Products Page*/


/*News Page*/
.news-page{padding: 0 0 65px 0}
.news-page .page-cover{background: url('/assets/images/news-page-cover.jpg') no-repeat center; background-size: cover}
.news-page .section{margin: 130px 0 0 0; font-size: 0}
.news-page .section-header{position: relative; z-index: 1}
.news-page .section:last-of-type{margin: 0}
.news-page .section .section-title{display: inline-block}
.news-page .articles{margin: 55px 0 0 0}
.news-page .articles .article-1{margin: 0 0 110px 10%; width: 35%; display: inline-block; float: none; vertical-align: top}
.news-page .articles .article-1:nth-child(3n){margin: 0 0 110px 10%;}


.news-page .articles .article-1 figure{height: 290px}
.news-page .articles .article-1 .details{padding: 40px 0}
.news-page .years-select{font-size: 18px; color: var(--secondary_color); font-family: 'AbrilText-Regular'; width: 230px; float: right; margin: 14px 0 0 0; position: relative; z-index: 1}
.news-page .years-select .toggle{height: 55px; border-radius: 30px; border: 1px solid var(--secondary_color); display: block; padding: 17px 0 17px 35px; position: relative}
.news-page .years-select .toggle:after{content: ''; width: 15px; height: 8px; background: url('/assets/images/arrow-down.png') no-repeat center; background-size: contain; position: absolute; right: 25px; top: 23px; transition: .5s}
.news-page .years-select.active .toggle:after{transform: rotate(-180deg)}
.news-page .years-select ul{background-color: #FFFFFF; position: absolute; width: 100%; border-radius: 30px; border: 1px solid var(--secondary_color); opacity: 0; visibility: hidden; transition: .5s}
.news-page .years-select.active ul{opacity: 1; visibility: visible}
.news-page .years-select ul li a{display: block; padding: 10px 0 10px 35px; transition: .5s}
.news-page .years-select ul li a:hover{background-color: var(--secondary_color); color: #FFFFFF}
.news-page .years/* -select ul li:first-child a{border-top-left-radius: 30px; border-top-right-radius: 30px}
.news-page .years-select ul li:last-child a{border-bottom-left-radius: 30px; border-bottom-right-radius: 30px} */
/*End News Page*/


/*Article Page*/
.article-page{padding: 65px 0 190px 0}
.article-page article.main .back-to-news{color: var(--secondary_color); font-size: 18px; font-family: 'AbrilText-Regular'; display: block; margin: 50px 0 20px 0}
.article-page article.main .back-to-news:before{content: ''; width: 7px; height: 14px; background: url('/assets/images/arrow-left.png') no-repeat center; background-size: contain; display: inline-block; margin: 0 10px 0 0}
.article-page article.main .date{color: var(--secondary_color); font-size: 18px; font-family: 'AbrilText-Regular'; display: block; margin: 10px 0 0 0}
.article-page article.main .article-container{margin: 70px 0 0 0; font-size: 0}
.article-page article.main .article-container .container-left{width: 60%; display: inline-block; vertical-align: top}
.article-page article.main .article-container .container-left .article-images, .article-page article.main .article-container .container-left .article-images li{height: 630px}
.article-page article.main .article-container .container-left .article-images li figure{height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center}
.article-page article.main .article-container .container-left .article-images .owl-nav .owl-prev{left: 15px; top: 50%; background-image: url('/assets/images/arrow-left-white.png') !important}
.article-page article.main .article-container .container-left .article-images .owl-nav .owl-next{right: 15px; top: 50%; background-image: url('/assets/images/arrow-right-white.png') !important}
.article-page article.main .article-container .container-left .text{margin: 35px 0 0 0}
.article-page article.main .article-container .container-left .text h2, .article-page article.main .article-container .container-left .text p{font-size: 24px; line-height: 30px; margin: 0 0 30px 0}
.article-page article.main .article-container .container-left .text h2{font-family: 'AbrilText-Regular'}
.article-page article.main .article-container .container-left .text p{font-family: 'Times New Roman', Times, serif}
.article-page article.main .article-container .container-left .text a{color: var(--primary_color); text-decoration: underline}
.article-page article.main .article-container .container-right{width: calc(40% - 180px); margin: 0 0 0 180px; display: inline-block; vertical-align: top}
.article-page article.main .article-container .container-right .next-article h2{color: var(--secondary_color); font-family: 'AbrilText-Regular'; font-size: 36px; margin: 0 0 25px 0}
.article-page article.main .article-container .container-right .next-article .article-1{margin: 0; float: none}
.article-page article.main .article-container .container-right .next-article .article-1 .details{padding: 25px 0}
.article-page article.main .article-container .container-right .next-article .article-1 .details p{margin: 20px 0 0 0}

.article-page .section-title {width:50%}
/*End Article Page*/


/*Suggestions Page*/
.suggestions-page .page-cover{background: url('/assets/images/suggestions-page-cover.jpg') no-repeat center; background-size: cover}
.suggestions-page .suggestions-form{margin: 130px 0 0 0; font-size: 0}
.suggestions-page .suggestions-form .container-left, .suggestions-page .suggestions-form .container-right{display: inline-block; vertical-align: top}
.suggestions-page .suggestions-form .container-left{width: 40%; margin: 30px 0 0 0}
.suggestions-page .suggestions-form .container-right{width: calc(60% - 180px); margin: 30px 0 0 180px}
.suggestions-page .suggestions-form .container-right figure{height: 575px; background: url('/assets/images/suggestions_bg.jpg') no-repeat center; background-size: cover}
/*End Suggestions Page*/


/*Careers Page*/
.careers-page{padding: 0 0 115px 0}
.careers-page .page-cover{background: url('/assets/images/web1.jpg') no-repeat center; background-size: cover}
.careers-page .jobs-list{margin: 130px 0 0 0; font-size: 0}
.careers-page .jobs-list li{width: 28%; margin: 0 8% 85px 0; display: inline-block; padding: 40px; background-color: #EFEFEF; /* border-bottom-right-radius: 50px; */ min-height: 230px; vertical-align: top}
.careers-page .jobs-list li:nth-child(3n){margin: 0 0 85px 0}
.careers-page .jobs-list li h3{font-size: 24px; font-family: 'AbrilText-Regular'}
.careers-page .jobs-list li span{font-size: 24px; line-height: 30px; font-family: 'AbrilText-Regular'; margin: 15px 0 25px 0; display: block}
/*End Careers Page*/


/*Job Details Page*/
.job-details-page{padding: 100px 0 125px 0; font-size: 0}
.job-details-page .main-container{max-width: 1600px; margin: auto}
.job-details-page .container-left, .job-details-page .container-right{display: inline-block; vertical-align: top}
.job-details-page .container-left{width: 35%; margin: 80px 0 0 0; padding: 40px 0 0 0}
.job-details-page .container-left .details{margin: 40px 0 0 0}
.job-details-page .container-left .details h3{font-size: 24px; font-family: 'AbrilText-Regular'; margin: 0 0 20px 0}
.job-details-page .container-left .job-details ul li{display: inline-block; vertical-align: top; font-size: 18px; line-height: 30px; font-family: 'AbrilText-Regular'}
.job-details-page .container-left .job-details > div {font-size: 18px; line-height: 30px; font-family: 'AbrilText-Regular'}
.job-details-page .container-left .job-details ul li:nth-child(odd){width: 40%}
.job-details-page .container-left .job-details ul li:nth-child(even){width: 60%}
.job-details-page .container-left .job-requirements ul{list-style: disc; padding: 0 0 0 20px}
.job-details-page .container-left .job-requirements ul li{font-size: 18px; line-height: 30px; font-family: 'AbrilText-Regular'}
.job-details-page .container-left .job-requirements > div {font-size: 18px; line-height: 30px; font-family: 'AbrilText-Regular'}
.job-details-page .container-right{width: calc(65% - 180px); margin: 80px 0 0 180px}
.job-details-page .container-right form{padding: 40px 50px; background-color: #EFEFEF; /* border-bottom-right-radius: 50px */}
.job-details-page .container-right form .section-title{margin: 0 0 30px 0}
.job-details-page .container-right form .btn{float: none; width: 100%; margin: 40px 0 0 0}
form.contact-form .file-drop-area{position: relative; width: 100%; padding: 10px 20px; border: 1px dashed var(--secondary_color); /* border-radius: 5px;  */transition: 0.2s; font-size: 18px; color: #B4B4B4; font-family: 'AbrilText-Regular'; height: 112px}
form.contact-form .fake-btn{text-decoration: underline}
form.contact-form .file-input{position: absolute; left: 0; top: 0; height: 100%; width: 100%; cursor: pointer; opacity: 0; margin: 0; padding: 0}
form.contact-form .text-container{display: block}
form.contact-form .notice{font-size: 18px; font-family: 'AbrilText-Regular'; color: var(--secondary_color); margin: 10px 0 0 0}
/*End Job Details Page*/


/*Texts Page*/
.texts-page{padding: 0 0 150px 0; background-color: #f1f0ec; /* background: url('/assets/images/wall-of-fame-bg.png') no-repeat center; background-size: cover */}
.texts-page .main-container{max-width: 1600px; margin: auto}
.texts-page.terms .page-cover{background: url('/assets/images/web1.jpg') no-repeat center; background-size: cover}
.texts-page.privacy .page-cover{background: url('/assets/images/web1.jpg') no-repeat center; background-size: cover}
.texts-page .text{margin: 80px 0 0 0}
.texts-page .text .date{font-size: 18px; line-height: 21px; font-family: 'AbrilText-Regular'; color: var(--primary_color); display: block; margin: 0 0 10px 0}
.texts-page .text h3, .texts-page .text p, .texts-page .text li{font-size: 24px; line-height: 30px; margin: 0 0 30px 0}
.texts-page .text h3{font-family: 'AbrilText-Regular'}
.texts-page .text p, .texts-page .text li{font-family: 'AbrilText-Regular'; margin: 0 0 25px 0}
.texts-page .text li{list-style-position: inside}
.texts-page .text ol{padding: 0 0 0 20px; margin: 40px 0 0 0}
.texts-page .text ul{list-style: disc; padding: 0 0 0 20px; margin: 40px 0 0 0}
.texts-page .text a{color: var(--primary_color); text-decoration: underline}
/*End Texts Page*/


/*Static Pages*/
.static-page{text-align: center; /* background-image: url('/assets/images/wall-of-fame-bg.png'); background-repeat: no-repeat; background-size: cover;    background-position: center;  */background-color: #f1f0ec}
.static-page h1{color: var(--secondary_color); font-family: 'AbrilText-Regular'; font-size: 68px; line-height: 82px}
.static-page.page-not-found .main-container{padding: 50px 200px 0 200px}
.static-page.page-not-found figure{width: 1000px; height: 600px; background: url('/assets/images/404-bg.png') no-repeat center; background-size: contain; margin: auto; position: relative}
.static-page.page-not-found h1{position: relative; margin: -175px 0 0 0}
.static-page p{font-size: 24px; line-height: 30px; color: var(--secondary_color); font-family: 'AbrilText-Regular'; margin: 35px auto 0 auto; width: 50%}
.static-page.thank-you{height: calc(100vh - 125px); padding: 0}
.static-page.thank-you .main-container{position: absolute; top: calc(50% + 60px); transform: translateY(-50%); width: 100%}
.static-page .btn{margin: 50px auto 0 auto}
/*End Static Pages*/


/*Customer Info Page*/
.customer-info-page{/* background: url('/assets/images/wall-of-fame-bg.png') center; background-size: contain */background-color: #f1f0ec}
.customer-info-page .page-cover{background: url('/assets/images/web1.jpg') no-repeat center; background-size: cover}
.customer-info-page .customer-info-form{margin: 120px 0 0 0; padding: 0 0 200px 0; font-size: 0}
.customer-info-page .customer-info-form .section-title{margin: 0 0 30px 0}
.customer-info-page .customer-info-form .container-left, .customer-info-page .customer-info-form .container-right{display: inline-block; vertical-align: top}
.customer-info-page .customer-info-form .container-left{width: calc(48% - 90px); margin: 0 90px 0 0}
.customer-info-page .customer-info-form .container-right{width: calc(52% - 90px); margin: 0 0 0 90px}
.customer-info-page form.contact-form input[type='text'], .customer-info-page form.contact-form input[type='email'], .customer-info-page form.contact-form textarea{background-color: #FFFFFF}
.customer-info-page form.contact-form .btn{margin: 80px 0 0 0}
/*End Customer Info Page*/


/*Traders Questionnaire Page*/
.traders-questionnaire-page{/* background: url('/assets/images/wall-of-fame-bg.png') center; background-size: contain */background-color: #f1f0ec}
.traders-questionnaire-page .page-cover{background: url('/assets/images/web1.jpg') no-repeat center; background-size: cover}
.traders-questionnaire-page .traders-questionnaire-form{margin: 150px 0 0 0; padding: 0 0 200px 0; font-size: 0}
.traders-questionnaire-page .traders-questionnaire-form .section-title{margin: 0 0 30px 0}
.traders-questionnaire-page .traders-questionnaire-form .container-left, .traders-questionnaire-page .traders-questionnaire-form .container-right{display: inline-block; vertical-align: top}
.traders-questionnaire-page .traders-questionnaire-form .container-left{width: calc(48% - 90px); margin: 0 90px 0 0}
.traders-questionnaire-page .traders-questionnaire-form .container-right{width: calc(52% - 90px); margin: 0 0 0 90px}
.traders-questionnaire-page form.contact-form input[type='text'], .traders-questionnaire-page form.contact-form input[type='email'], .traders-questionnaire-page form.contact-form textarea{background-color: #FFFFFF}
.traders-questionnaire-page form.contact-form .btn{margin: 80px 0 0 0}
/*End Traders Questionnaire Page*/


/*Distributors Data Page*/
.distributors-data-page{/* background: url('/assets/images/wall-of-fame-bg.png') center; background-size: contain */background-color: #f1f0ec}
.distributors-data-page .page-cover{background: url('/assets/images/web1.jpg') no-repeat center; background-size: cover}
.distributors-data-page .distributors-form{margin: 140px 0 0 0; font-size: 0}
.distributors-data-page .distributors-form .section-title{margin: 0 0 30px 0}
.distributors-data-page .distributors-form .container-left, .distributors-data-page .distributors-form .container-right{display: inline-block; vertical-align: top}
.distributors-data-page .distributors-form .container-left{width: calc(50% - 180px); margin: 0 180px 0 0}
.distributors-data-page .distributors-form .container-right{width: 50%}
.distributors-data-page .distributors-form .container-right figure{width: 100%; height: 575px; background: url('/assets/images/dsc_236_3.jpg') no-repeat center; background-size: cover}
.distributors-data-page .contact-form textarea{margin: 0 0 30px 0}
.distributors-data-page form.contact-form input[type='text'], .distributors-data-page form.contact-form input[type='email'], .distributors-data-page form.contact-form textarea{background-color: #FFFFFF}
/*End Distributors Data Page*/


/*FAQ Page*/
.faq-page{/* background: url('/assets/images/wall-of-fame-bg.png') center; background-size: contain */background-color: #f1f0ec; background-attachment: fixed}
.faq-page .page-cover{background: url('/assets/images/sideimg.jpg') no-repeat center; background-size: cover}
.faq-page .faq{margin: 70px auto 0 auto; max-width: 1260px; padding: 0 40px}
.faq-page .faq > li{margin: 0 0 60px 0; position: relative; padding: 0 0 0 30px}
.faq-page .faq > li .question:before{content: ''; width: 10px; height: 20px; background: url('/assets/images/arrow-right-black.png') no-repeat center; background-size: contain; position: absolute; left: 0; top: 5px; transition: .35s}
.faq-page .faq > li.active .question:before{transform: rotate(90deg)}
.faq-page .faq > li .question a{font-size: 24px; line-height: 32px; font-family: 'AbrilText-Regular'}
.faq-page .faq > li .answer{display: none}
.faq-page .faq > li .answer p{margin: 30px 0 0 0; font-size: 24px; line-height: 32px; color: var(--secondary_color); font-family: 'AbrilText-Regular'}
.faq-page .faq > li .answer *{font-size: 24px; line-height: 32px; color: var(--secondary_color); font-family: 'AbrilText-Regular'}
.faq-page .faq > li .answer ul {list-style: disc}
.faq-page .faq > li li {margin: 20px}
/*End FAQ Page*/


/*Work With Page*/
.work-with-page{background-color: #f1f0ec/* background: url('/assets/images/wall-of-fame-bg.png') center; background-size: contain */}
.work-with-page .page-cover{background: url('/assets/images/work-with-page-cover.png') no-repeat center; background-size: cover}
.work-with-page .brands{margin: 140px 0 0 0; font-size: 0}
.work-with-page .brands li{width: 12.5%; padding: 0 30px 0 0; display: inline-block; vertical-align: top; margin: 0 0 25px 0}
.work-with-page .brands li:nth-child(8n){padding: 0}
.work-with-page .brands li figure{height: 160px; background-repeat: no-repeat; background-size: contain; background-position: center}
/*End Work With Page*/


footer{background: #213466;/* background:url('/assets/images/web3.jpg'); */ padding: 35px 200px 20px 200px; font-size: 0; position: relative}
footer .container{display: inline-block; vertical-align: top}
footer .container.address{width: 29%; padding: 0 50px 0 0}
footer .container.menu{width: 53%}
footer .container.social{float: right}
footer .container.address .logo{width: 275px; height: 140px; background: url('/assets/images/white_logo.png') no-repeat left; background-size: contain; display: block; margin: 0 0 20px 0}
footer .container.address p{color: #FFFFFF; font-size: 17px; line-height: 21px; font-family: 'AbrilText-Regular'; margin: 0 0 30px 0}
footer .container.address p:last-child{margin: 0}
footer .container.menu ul li{display: inline-block; width: 50%; vertical-align: top; margin: 0 0 20px 0}
footer .container.menu ul li a{color: #FFFFFF; font-size: 17px; font-family: 'AbrilText-Regular'}
footer .container.social p{font-size: 24px; color: #FFFFFF; font-family: 'AbrilText-Regular'}
footer .container.social ul{margin: 15px 0 0 0}
footer .container.social ul li{display: inline-block; margin: 0 15px 0 0}
footer .container.social ul li:last-child{margin: 0}
footer .container.social ul li a{width: 40px; height: 40px; display: block}
footer .container.social ul li.linkedin a{background: url('/assets/images/linkedin-icon-white.png') no-repeat center; background-size: contain}
footer .container.social ul li.facebook a{background: url('/assets/images/facebook-icon-white.png') no-repeat center; background-size: contain}
footer .container.social ul li.instagram a{background: url('/assets/images/instagram-icon-white.png') no-repeat center; background-size: contain}
footer .container.social ul li.twitter a{background: url('/assets/images/X.svg') no-repeat center; background-size: contain}
footer .container.social ul li.youtube a{background: url('/assets/images/youtube-icon-white.svg') no-repeat center; background-size: contain}
footer .copyrights{margin: 40px 0 0 0; text-align: center}
footer .copyrights p{color: #FFFFFF; font-size: 18px; font-family: 'AbrilText-Regular'}
footer .copyrights p a{text-decoration: underline}
footer a{transition: .5s}
footer a:hover{opacity: .6}
footer .to-top{width: 72px; height: 72px; background: url('/assets/images/back-to-top.png') no-repeat center; background-size: contain; position: absolute; top: -36px; left: 0; right: 0; margin: auto}


.search-overlay{position: fixed; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, .95); z-index: 9; display: none}
.search-overlay .close{position: absolute; width: 30px; height: 30px; background: url('/assets/images/close-icon.png') no-repeat center; top: 25px; right: 25px}
.search-overlay .main-container{max-width: 1600px; margin: auto; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; padding: 0}
.search-overlay form{width: calc(100% - 400px); margin: auto; position: relative}
.search-overlay form input{width: 100%; height: 50px; /* border-radius: 5px;  */border: 1px solid var(--secondary_color); padding: 10px 50px 10px 20px; outline: none; font-size: 16px; color: #000000; font-family: 'AbrilText-Regular'; background-color: transparent}
.search-overlay form input::-webkit-input-placeholder{color: #B4B4B4; font-size: 18px}
.search-overlay form input:-moz-placeholder{color: #B4B4B4; font-size: 18px}
.search-overlay form input::-moz-placeholder{color: #B4B4B4; font-size: 18px}
.search-overlay form input:-ms-input-placeholder{color: #B4B4B4; font-size: 18px}
form.search-form input.required::-webkit-input-placeholder{color: var(--primary_color) !important}
form.search-form input.required:-moz-placeholder{color: var(--primary_color) !important}
form.search-form input.required::-moz-placeholder{color: var(--primary_color) !important}
form.search-form input.required:-ms-input-placeholder{color: var(--primary_color) !important}
.search-overlay form .submit{position: absolute; width: 25px; height: 25px; background: url('/assets/images/search-icon.png') no-repeat center; background-size: contain; right: 15px; top: 12px}


.fade-in{opacity: 0; visibility: hidden; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fade-in; animation-name: fade-in}
@-webkit-keyframes fade-in{
    0%{opacity: 0; visibility: hidden; -webkit-transform: translateY(40px)}
    100%{opacity: 1; visibility: visible; -webkit-transform: translateY(0)}
}

@keyframes fade-in{
    0%{opacity: 0; visibility: hidden; transform: translateY(40px)}
    100%{opacity: 1; visibility: visible; transform: translateY(0)}
}


@media only screen and (max-width : 1800px) {
    footer .container.menu{width: 45%}
    .homepage .about .container-left{width: calc(100% - 80px); margin: 0 80px 0 0}
    /*.homepage .page-cover ul li h2{width: 50%}*/
    .about-page .profile .container-right{width: calc(50% - 80px); margin: 0 0 0 80px}
    .about-page .goals ul{padding: 0 100px}
    .about-page .goals .section-title{width: calc(30% - 30px); margin: 0 30px 0 0}
    .about-page .goals .text{width: calc(35% - 45px); margin: 0 45px 0 0}
    .contact-page .contact .container{width: calc(50% - 120px)}
    .contact-page .contact .container-left{margin: 0 120px 0 0}
    .contact-page .contact .container-right{margin: 0 0 0 120px}
    .article-page article.main .article-container .container-right{width: calc(40% - 120px); margin: 0 0 0 120px}
    .contact-page .contact .container-left .contact-info p{padding: 0 50px 0 0}
    .products-page ul li{height: 500px}
    .news-page .articles .article-1{width: 30%; margin: 0 5% 110px 0}
    .article-page article.main .article-container .container-left .article-images, .article-page article.main .article-container .container-left .article-images li{height: 550px}
    .article-1 figure{height: 260px}
    .suggestions-page .suggestions-form .container-right{width: calc(60% - 120px); margin: 30px 0 0 120px}
    .careers-page .jobs-list li{width: 30%; margin: 0 5% 85px 0}
    .job-details-page .container-right{width: calc(65% - 120px); margin: 80px 0 0 120px}
}


@media only screen and (max-width : 1600px) {
    footer .container.address p, footer .container.menu ul li a, footer .container.social p{font-size: 16px}
    footer .copyrights p{font-size: 17px}
    footer .container.address .logo{width: 220px; height: 125px}
    .homepage .about .container-left{width: calc(45% - 40px); margin: 0 40px 0 0}
    .homepage .brands ul li{width: 200px; height: 200px}
    /*.homepage .page-cover ul li h2{width: 60%}*/
    .about-page .profile .container-right{width: calc(50% - 40px); margin: 0 0 0 40px}
    .about-page .goals ul{padding: 0}
    .about-page .goals .section-title{width: calc(35% - 30px); margin: 0 30px 0 0}
    .about-page .goals .text{width: calc(32.5% - 45px); margin: 0 45px 0 0}
    .about-page .leadership ul li figure{height: 370px}
    .brands-page .lists .list ul li{padding-right: 10px}
    .contact-page .contact .container{width: calc(50% - 70px)}
    .contact-page .contact .container-left{margin: 0 70px 0 0}
    .contact-page .contact .container-right{margin: 0 0 0 70px}
    .products-page ul li{height: 420px}
    .news-page .articles .article-1{width: 43%; margin: 0 2% 110px 46px}
    .news-page .articles .article-1:nth-child(3n) {
        margin: 0 2% 110px 46px;
    }
    .article-page article.main .article-container .container-right{width: calc(40% - 70px); margin: 0 0 0 70px}
    .article-page article.main .article-container .container-left .article-images, .article-page article.main .article-container .container-left .article-images li{height: 500px}
    /* .article-1 figure{height: 220px} */
    .suggestions-page .suggestions-form .container-right{width: calc(60% - 70px); margin: 30px 0 0 70px}
    .careers-page .jobs-list li{width: 32%; margin: 0 2% 40px 0}
    .careers-page .jobs-list li:nth-child(3n){margin: 0 0 40px 0}
    .job-details-page .container-right{width: calc(65% - 70px); margin: 80px 0 0 70px}
    .distributors-data-page .distributors-form .container-right figure{height: 450px}
    .work-with-page .brands li{padding: 0 10px 0 0}
    
}


@media only screen and (max-width : 1440px) {
    .main-container{padding: 0 120px}
    .our_product_container {padding: 0}
    .our_product_container .section-title {padding: 0 0 0 120px}
    .our_product_container .btn {margin: 0 0 0 120px}
    .homepage .products h3 {margin: 20px 0 0 120px}
    .static-page.page-not-found .main-container{padding: 50px 120px 0 120px}
    .homepage .about{padding: 90px 0 0 120px ;}
    /*.homepage .page-cover ul li h2{width: 58%}*/
    header{padding: 20px 120px}
    footer{padding: 80px 120px 20px 120px}
    footer .container.social ul li{margin: 0 8px 0 0}
    footer .container.menu{width: 53%}
    .products-page ul li{height: 400px}
    .distributors-data-page .distributors-form .container-left{width: calc(50% - 80px); margin: 0 80px 0 0}
}


@media only screen and (max-width : 1280px) {
    .homepage .page-cover, .homepage .page-cover ul, .homepage .page-cover ul li{height: 450px;width:96%;margin-left: 2%;} 
    .main-container{padding: 0 50px}
    .our_product_container{padding: 0}
    .our_product_container .section-title {padding: 0 0 0 50px}
    .our_product_container .btn {margin: 0 0 0 50px}
    .homepage .products h3 {margin: 20px 0 0 50px}
    .static-page.page-not-found .main-container{padding: 30px 50px 0 50px}
    .homepage .about{padding: 90px 0 90px 50px}
    header{padding: 9px 50px}
    header .menu .lower-menu nav ul li{margin: 0 35px 0 0}
    footer{padding: 80px 50px 20px 50px}
    footer .container.address .logo{width: 180px; height: 105px}
    footer .container.social ul li a{width: 35px; height: 35px}
    footer .container.address p{margin: 0 0 20px 0}
    .owl-carousel .owl-nav .owl-prev{left: -30px}
    .owl-carousel .owl-nav .owl-next{right: -30px}
    .homepage .brands ul{padding: 0 100px}
    .homepage .about .container-left{width: calc(100% - 30px); margin: 0 30px 0 0}
    .section-title{font-size: 42px}
    .section-title:after{width: 240px}
    .homepage .news .section-title:after{width: 300px}
    
    .homepage .page-cover ul li h2{font-size: 31px; line-height: 49px}
    
    .homepage .products h3{font-size: 100px}
    .about-page .goals .section-title{width: calc(30% - 30px)}
    .about-page .goals .text{width: calc(35% - 45px)}
    .about-page .profile .container-right{width: calc(50% - 40px); margin: 88px 0 0 45px}
    
    .about-page .goals ul li{font-size: 30px}
    .about-page .profile, .about-page .certificates{padding: 80px 0 100px 0}
    .about-page .goals{margin: 90px 0 100px 0}
    .about-page .leadership{padding: 0 0 120px 0}
    .about-page .leadership ul{margin: 44px 0 0 0}
    .about-page .leadership ul li figure{height: 300px}
    .about-page .leadership ul li h3{font-size: 18px}
    .about-page .leadership ul li span{font-size: 13px}
    .about-page .leadership ul li p{font-size: 16px}
    .about-page .leadership{padding: 40px 0 120px 0}
    .brands-page .filters{margin: 75px 0 0 0}
    .brands-page .lists .list{margin: 0 0 75px 0}
    .brands-page .lists .list h3{font-size: 32px}
    .brands-page .lists .list ul li figure{height: 125px}
    .contact-page .contact{margin: 100px 0 0 0}
    .contact-page .contact .container{width: calc(50% - 50px)}
    .contact-page .contact .container-left{margin: 0 50px 0 0}
    .contact-page .contact .container-right{margin: 0 0 0 50px}
    .products-page ul li > div h3{font-size: 32px}
    .news-page .section{margin: 80px 0 0 0}
    .news-page .articles .article-1{width: 41%; margin: 0 2% 50px 62px}
    .news-page .articles .article-1:nth-child(3n){margin: 0 2% 50px 62px}
    .article-2 figure{height: 400px}
    .article-page article.main .article-container .container-right{width: calc(40% - 50px); margin: 0 0 0 50px}
    .article-page article.main .article-container .container-right .next-article .article-1 figure{height: 250px;}
    .suggestions-page .suggestions-form .container-right{width: calc(60% - 50px); margin: 30px 0 0 50px}
    .suggestions-page .suggestions-form{margin: 80px 0 0 0}
    .careers-page .jobs-list{margin: 80px 0 0 0}
    .job-details-page{padding: 50px 0 125px 0}
    .job-details-page .container-left{width: 40%}
    .job-details-page .container-right{width: calc(60% - 70px)}
    .search-overlay form{width: calc(100% - 200px)}
    .static-page.page-not-found figure{width: 900px; height: 650px}
    .customer-info-page .customer-info-form, .traders-questionnaire-page .traders-questionnaire-form{margin: 100px 0 0 0}
    .distributors-data-page .distributors-form{margin: 100px 0 0 0}
    .distributors-data-page .distributors-form .container-right figure{height: 400px}
    .work-with-page .brands li figure{height: 125px}
    .work-with-page .brands{margin: 100px 0 0 0}
    .article-page .section-title {width:66%}
    footer .container.menu{width: 51%}
}


@media only screen and (max-width : 1100px) {
    footer .container.menu{width: 47%}
    footer .container.address p, footer .container.menu ul li a, footer .container.social p{font-size: 19px}
    footer .copyrights p{font-size: 15px}
    .homepage .brands ul{padding: 0 50px}
    .homepage .about .container-left p{font-size: 22px; line-height: 36px}
    /*.homepage .page-cover ul li h2{width: 58%}*/
    .about-page .profile .container-right p{font-size: 22px; line-height: 36px}
    .about-page .goals .section-title{width: calc(35% - 30px); margin: 0 30px 0 0}
    .about-page .goals .text{width: calc(32.5% - 45px); margin: 0 45px 0 0}
    .brands-page .lists .list ul li figure{height: 100px}
    .products-page ul li{height: 320px}
    .products-page ul li > div h3{font-size: 30px}
    .news-page .articles .article-1 figure{height: 225px}
    .article-page article.main .article-container .container-right .next-article .article-1 figure{height: 225px}
    .suggestions-page .suggestions-form .container-right figure{height: 500px}
    .work-with-page .brands li figure{height: 100px}
}


@media only screen and (max-width : 1000px) {
    .section-title{font-size: 24px; line-height: 30px}
    .section-title:after{width: 275px; margin: 10px 0 0 0}
    .page{padding: 0 0 65px 0}
    .desktop{display: none !important}
    .mobile{display: block !important}
    header .logo:hover{opacity: 1}
    header.article-header{border: none}
    .btn:hover{background-color: var(--primary_color); color: #FFFFFF}
    .btn.transparent:hover{background-color: transparent; color: var(--primary_color)}
    footer a:hover{opacity: 1}
    .owl-carousel .owl-dots button.owl-dot:hover{border: 1px solid var(--secondary_color) !important; background: transparent}
    .owl-carousel .owl-dots button.owl-dot.active:hover{border: 1px solid var(--primary_color) !important; background-color: var(--primary_color)}
    .homepage .page-cover .owl-carousel .owl-dots button.owl-dot:hover{border: 1px solid #FFFFFF !important}
    .homepage .page-cover .owl-carousel .owl-dots button.active.owl-dot:hover{border: 1px solid var(--primary_color) !important}
    .owl-carousel .owl-nav .owl-prev:hover, .owl-carousel .owl-nav .owl-next:hover{opacity: 1}


    .main-container{padding: 0 15px}
    .our_product_container {padding: 0}
    .our_product_container .btn {margin: 35px 0 0 15px}
    .homepage .products h3 {margin: 20px 0 0 15px}
    .page-cover{margin: 0 0 0px 0; height: 227px}
    .page-title{font-size: 40px; line-height: 48px; padding: 70px 15px; text-align: left}
    .page-title::after{
        /*content: '';*/
        width: 150px;
        border-top: 1px solid var(--primary_color);
        margin: 24px 0 0 0;
        display: block;
    
    }

    header{height: 95px; padding: 20px 15px}
    header .logo{width: 95px; height: 55px}
    header .menu{display: none}
    header .toggle-mobile-menu{width: 28px; height: 20px; background: url('/assets/images/mobile-menu-icon.png') no-repeat center; background-size: contain; position: absolute; right: 15px; top: 35px}
    header .mobile-menu{position: fixed; background-color: #FFFFFF; width: 100%; height: calc(100% - 95px); z-index: 9; top: 95px; left: -100%; transition: .5s}
    header .mobile-menu.active{left: 0}
    header .mobile-menu .container{overflow: auto; -webkit-overflow-scrolling: touch; bottom: 0; left: 0; position: absolute; z-index: 99; right: 0; top: 0; height: auto; padding: 15px 20px 50px 20px}
    header .mobile-menu .container .switch-language{width: 60px; float: right; height: 40px}
    header .mobile-menu .container .switch-language .toggle{font-size: 15px}
    header .mobile-menu .container .switch-language .toggle:after{position: relative; top: 2px}
    header .mobile-menu .container form{margin: 0 0 40px 0; position: relative}
    header .mobile-menu .container form input{/* border-radius: 5px; */ width: 100%; height: 45px; border: 1px solid var(--secondary_color); padding: 0 0 0 10px; font-size: 16px; font-family: 'AbrilText-Regular'; outline: none}
    header .mobile-menu .container form input::-webkit-input-placeholder{color: #B4B4B4; font-size: 18px}
    header .mobile-menu .container form input:-moz-placeholder{color: #B4B4B4; font-size: 18px}
    header .mobile-menu .container form input::-moz-placeholder{color: #B4B4B4; font-size: 18px}
    header .mobile-menu .container form input:-ms-input-placeholder{color: #B4B4B4; font-size: 18px}
    header .mobile-menu .container form .submit{width: 20px; height: 20px; background: url('/assets/images/search-icon.png') no-repeat center; background-size: contain; position: absolute; right: 12px; top: 12px}
    header .mobile-menu .container nav ul li{margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid rgba(0, 0, 0, .2)}
    header .mobile-menu .container nav ul li:last-child{margin: 0; padding: 0 0 20px 0; border-bottom: none}
    header .mobile-menu .container nav ul li a{font-size: 20px; font-family: 'AbrilText-Regular'}
    header .mobile-menu .container .btn{margin: 45px auto 0 auto}


    /*Homepage*/
    .homepage .page-cover, .homepage .page-cover ul, .homepage .page-cover ul li{height: 233px}
    .homepage .page-cover ul li h2{font-size: 17px; line-height: 28px; width: 70%}
    .homepage .about{padding: 30px 15px 0 15px}
    .homepage .about .container-left{display: block; width: 100%; margin: 0 0 50px 0}
    .homepage .about .container-left p{font-size: 16px; line-height: 20px; margin: 30px 0 40px 0}
    .homepage .about figure{width: 100%; height: 300px}
    .homepage .products{padding: 110px 0 25px 0; margin: -75px 0 0 0}
    /*.homepage .products .section-title{color: #FFFFFF}*/
    /*.homepage .products .section-title:after{border-top: 2px solid #FFFFFF}*/
    .homepage .products h3{font-size: 55px}
    .homepage .products figure{height: 240px; margin: 25px 0 0 0}
    /*.homepage .products .owl-carousel .owl-dots{bottom: 75px}*/
    .homepage .products .owl-carousel .owl-dots {display: none}
    .owl-carousel .owl-dots button.owl-dot{width: 12px; height: 12px}
    .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next{width: 9px; height: 18px}
    .homepage .products .owl-carousel .owl-nav:after{font-size: 15px; margin: 5px 0 0 0}
    .homepage .products .owl-carousel .owl-nav{margin: 25px 0 0 0}
    .homepage .products .owl-carousel .owl-nav .owl-prev{margin: 0 25px 0 0}
    .homepage .brands{padding: 40px 0 70px 0}
    .homepage .brands .section-title:after{width: 122px; margin: 10px auto 0 auto}
    .homepage .brands ul{padding: 0; text-align: center; text-align-last: center}
    .homepage .brands ul li{width: 122px; height: 122px}
    .homepage .brands .owl-nav, .homepage .articles .owl-nav{display: none}
    .homepage .brands .btn{margin: 45px auto 0 auto}
    .homepage .news .section-title:after{width: 275px}
    .homepage .news .articles{margin: 45px 0 0 0}
    .article-1 figure{height: 235px}
    .article-1.video figure:after{width: 35px; height: 42px}
    .article-1 .details{padding: 30px}
    .article-1 .details h3{font-size: 19px}
    .article-1 .details .date-container{margin: 10px 0 0 0}
    .article-1 .details .date-container span{font-size: 14px}
    .article-1 .details p{margin: 15px 0 0 0}
    .article-page .section-title {width:100%}
    .homepage .news .owl-carousel .owl-dots{margin: 25px 0 0 0}
    .homepage .news .btn{margin: 45px auto 0 auto}
    /*End Homepage*/


    /*About Page*/
    .about-page{padding: 0}
    .about-page .goals{margin: 50px 0 0 0}
    .about-page .goals .section-title{width: 52%; margin: 0}
    .about-page .section-title:after{width: 185px}
    .about-page .goals .text{display: block; width: 100%; margin: 35px 0 0 0}
    .about-page .goals .text h3{font-size: 18px; margin: 0 0 15px 0}
    .about-page .goals .text p{font-size: 16px; line-height: 20px}
    .about-page .goals ul{margin: 60px 0 0 0}
    .about-page .goals ul li{width: 50%; font-size: 24px; line-height: 30px; padding: 0 35px; margin: 0 0 40px 0; vertical-align: top}
    .about-page .goals ul li.date figure{width: 38px; height: 84px}
    .about-page .goals ul li.workers figure{width: 58px; height: 84px}
    .about-page .goals ul li.countries{width: 100%; margin: 0}
    .about-page .goals ul li.countries figure{width: 150px; height: 84px}
    .about-page .goals ul li > div{height: auto; margin: 0 0 15px 0}
    .about-page .goals ul li > div figure{position: relative; top: initial; transform: none}
    .about-page .profile{padding: 50px 0 60px 0}
    .about-page .profile .container-right{display: block; margin: 0; width: 100%}
    .about-page .profile figure{display: block; margin: 35px 0 0 -15px; width: calc(100% + 30px); height: 285px}
    .about-page .profile .container-right p{font-size: 16px; line-height: 20px; margin: 35px 0 0 0}
    .about-page .certificates, .about-page .companies{padding: 0 0 50px 0}
    .about-page .certificates ul{margin: 15px 0 0 0}
    .about-page .certificates ul li{height: 105px}
    .about-page .certificates .owl-carousel .owl-nav{margin: 75px 0 0 0}
    .about-page .companies .owl-carousel .owl-nav{margin: 50px 0 0 0}
    .about-page .owl-carousel .owl-nav{text-align: center; margin: 75px 0 0 0}
    .about-page .owl-carousel .owl-nav .owl-prev, .about-page .owl-carousel .owl-nav .owl-next{bottom: 0; top: initial; transform: none; position: relative; width: 14px; height: 28px}
    .about-page .owl-carousel .owl-nav .owl-prev{left: initial; margin: 0 35px 0 0}
    .about-page .owl-carousel .owl-nav .owl-next{right: initial}
    .about-page .owl-carousel .owl-dots{position: absolute; width: 100%; bottom: 60px}
    .about-page .companies ul{margin: 15px 0 0 0}
    .about-page .companies ul li{height: 140px}
    .about-page .wall-of-fame{padding: 50px 0 85px 0}
    .about-page .wall-of-fame .lists{margin: 40px 0 0 0}
    .about-page .wall-of-fame .lists .list{margin: 0 0 45px 0}
    .about-page .wall-of-fame .lists .list h3{font-size: 18px;}
    .about-page .wall-of-fame .lists .list p{font-size: 16px; line-height: 20px}
    .about-page .wall-of-fame .lists .list ul{margin: 25px 0 0 0}
    .about-page .wall-of-fame .lists .list ul li{margin: 0 0 20px 0}
    .about-page .wall-of-fame .lists .list ul li:nth-child(3n+2){margin: 0 25px 20px 25px}
    .about-page .wall-of-fame .lists .list ul li figure{width: 92px; height: 92px}
    .about-page .leadership{padding: 60px 0 125px 0}
    .about-page .leadership ul li{width: 100%; display: block; margin: 0 0 45px 0}
    .about-page .leadership ul li figure{height: 370px}
    .about-page .leadership ul li h3{font-size: 20px; margin: 35px 0 0 0}
    .about-page .leadership ul li span{font-size: 14px}
    .about-page .leadership ul li p{font-size: 18px}
    /*End About Page*/


    /*Brands Page*/
    .brands-page{padding: 0}
    .brands-page .filters{margin: 30px 0 0 0}
    .brands-page .filters li{margin: 0 0 10px 0}
    .brands-page .filters li a{padding: 10px 20px}
    .brands-page .filters li:hover a{background-color: #FFFFFF; color: var(--secondary_color)}
    .brands-page .filters li.active:hover a{background-color: var(--primary_color); color: #FFFFFF}
    .brands-page .lists{margin: 50px 0 0 0}
    .brands-page .lists .list h3{font-size: 24px}
    .brands-page .lists .list h3:after{width: 166px; margin: 10px 0 0 0}
    .brands-page .lists .list ul{margin: 20px 0 0 0}
    .brands-page .lists .list{margin: 0 0 65px 0}
    .brands-page .lists .list ul li{width: 50%; padding: 10px; margin: 0 0 15px 0}
    .brands-page .lists .list ul li figure{height: 95px}
    /*End Brands Page*/


    /*Contact Page*/
    .contact-page{padding: 0 0 125px 0}
    .contact-page .contact{margin: 55px 0 0 0}
    .contact-page .contact .container{display: block; width: 100%}
    .contact-page .contact .container-left{margin: 0 0 60px 0}
    .contact-page .contact .section-title:after{width: 165px}
    .contact-page .contact .container-left .contact-info p{font-size: 18px; line-height: 21px; padding: 0}
    .contact-page .contact .container-left .contact-info ul{margin: 35px 0 0 0}
    .contact-page .contact .container-left .contact-info ul li{width: 32px; height: 32px}
    .contact-page .contact .container-left .contact-info ul li a:hover{opacity: 1}
    .contact-page .contact .container-right{margin: 0}
    form.contact .btn{margin: 40px 0 0 0}
    /*End Contact Page*/


    /*End Products Page*/
    .products-page{padding: 0 0 80px 0}
    .products-page ul{margin: 40px 0 0 0}
    .products-page ul li{width: 48%; margin: 0 4% 135px 0; height: 265px}
    .products-page ul li:nth-child(even){margin: 0 0 85px 0}
    /*.products-page ul li > div{bottom: -50px}*/
    .products-page ul li > div h3{font-size: 18px}
    .products-page ul li > div .btn{width: 100%}
    /*End Products Page*/


    /*News Page*/
    .news-page .section{margin: 60px 0 0 0}
    .news-page .section-title:after{width: 165px}
    .news-page .years-select{float: none; margin: 20px 0 0 0; width: 165px}
    .news-page .years-select .toggle{height: 40px; padding: 9px 0 9px 25px}
    .news-page .years-select .toggle:after{top: 15px; right: 20px}
    .news-page .years-select ul li a{padding: 10px 0 10px 25px}
    .news-page .years-select ul li a:hover{background-color: #FFFFFF; color: var(--secondary_color)}
    .news-page .articles{margin: 60px 0 0 0}
    .news-page .articles .article-1{width: 100%; margin: 0 0 80px 0; float: none; display: block}
    .news-page .articles .article-1:nth-child(3n){ margin: 0 0 80px 0;}

    .news-page .articles .article-1 figure{height: 245px}
    .news-page .articles .article-1 .details{padding: 30px 0}
    .news-page .articles .article-1 .details h3{font-size: 18px}
    .news-page .articles .article-1 .details p{font-size: 16px; line-height: 20px}
    .news-page .articles .article-1 .details .btn{margin: 15px 0 0 0 !important}
    .news-page .section:last-of-type{margin: 85px 0 0 0}
    .news-page .articles .article-2{float: none; width: 100%; margin: 0 0 55px 0}
    .article-2 figure{height: 230px}
    .article-2 figure:after{width: 35px; height: 42px}
    .article-2 .details{padding: 25px 0}
    .article-2 .details h3{font-size: 18px}
    .article-2 .details p{font-size: 16px; line-height: 20px; margin: 15px 0 0 0}
    /*End News Page*/


    /*Article Page*/
    .article-page{padding: 15px 0 90px 0}
    .article-page article.main .back-to-news{font-size: 14px}
    .article-page .section-title:after{width: 165px}
    .article-page article.main .date{font-size: 14px}
    .article-page article.main .article-container{margin: 25px 0 0 0}
    .article-page article.main .article-container .container-left, .article-page article.main .article-container .container-right{width: 100%; display: block; margin: 0}
    .article-page article.main .article-container .container-left{margin: 0 0 80px 0}
    .article-page article.main .article-container .container-left .article-images, .article-page article.main .article-container .container-left .article-images li{height: 265px}
    .article-page article.main .article-container .container-left .article-images{width: calc(100% + 30px); margin: 0 -15px}
    .article-page article.main .article-container .container-left .article-images .owl-nav{position: relative; margin: 15px 0 0 0; text-align: center}
    .article-page article.main .article-container .container-left .article-images .owl-nav .owl-prev, .article-page article.main .article-container .container-left .article-images .owl-nav .owl-next{position: relative; top: initial; transform: none; width: 14px; height: 28px; margin: 0 25px}
    .article-page article.main .article-container .container-left .article-images .owl-nav .owl-prev{left: initial; background-image: url('/assets/images/arrow-left.png') !important}
    .article-page article.main .article-container .container-left .article-images .owl-nav .owl-next{right: initial; background-image: url('/assets/images/arrow-right.png') !important}
    .article-page article.main .article-container .container-left .text{margin: 90px 0 0 0}
    .article-page article.main .article-container .container-left .text h2{font-size: 18px; margin: 0 0 20px 0}
    .article-page article.main .article-container .container-left .text p{font-size: 16px; line-height: 20px; margin: 0 0 20px 0}
    .article-page article.main .article-container .container-right .next-article h2{font-size: 24px; margin: 0 0 20px 0}
    .article-page article.main .article-container .container-right .next-article .article-1 figure{height: 230px}
    .article-page article.main .article-container .container-right .next-article .article-1 .details{padding: 35px 0 25px 0}
    .article-page article.main .article-container .container-right .next-article .article-1 .details h3{font-size: 18px}
    .article-page article.main .article-container .container-right .next-article .article-1 .details p{font-size: 16px; line-height: 20px}
    .article-page article.main .article-container .container-right .next-article .article-1 .details .btn{margin: 40px 0 0 0 !important}
    /*End Article Page*/


    /*Suggestions Page*/
    .suggestions-page .section-title:after{width: 165px}
    .suggestions-page .suggestions-form{margin: 50px 0 0 0}
    .suggestions-page .suggestions-form .container-left, .suggestions-page .suggestions-form .container-right{width: 100%; display: block; margin: 0}
    .suggestions-page .suggestions-form .container-left{margin: 0 0 70px 0}
    .suggestions-page .suggestions-form .container-left form{margin: 50px 0 0 0}
    .suggestions-page .suggestions-form .container-right figure{height: 335px}
    /*End Suggestions Page*/


    /*Careers Page*/
    .careers-page .jobs-list{margin: 40px 0 0 0}
    .careers-page .jobs-list li{width: 100%; display: block; margin: 0 0 30px 0 !important; min-height: initial; padding: 25px 40px}
    .careers-page .jobs-list li h3{font-size: 18px}
    .careers-page .jobs-list li span{font-size: 16px; margin: 10px 0 20px 0; line-height: 20px}
    /*End Careers Page*/


    /*Job Details Page*/
    .job-details-page{padding: 40px 0 65px 0}
    .job-details-page .section-title:after{width: 165px}
    .job-details-page .container-left, .job-details-page .container-right{display: block; width: 100%; margin: 0}
    .job-details-page .container-left{margin: 55px 0 0 0; padding: 0}
    .job-details-page .container-left .details{margin: 25px 0 0 0}
    .job-details-page .container-left .details.job-requirements{margin: 40px 0 0 0}
    .job-details-page .container-left .details h3{font-size: 18px; margin: 0 0 15px 0}
    .job-details-page .container-left .job-details ul li, .job-details-page .container-left .job-requirements ul li{font-size: 16px; line-height: 25px}
    .job-details-page .container-right{margin: 30px 0 0 0}
    .job-details-page .container-right form{width: calc(100% + 30px); margin: 0 -15px; padding: 20px 15px 55px 15px}
    form.contact-form .file-drop-area{height: 160px}
    /*End Job Details Page*/


    /*Texts Page*/
    .texts-page{background: url('/assets/images/static-pages-bg.png') no-repeat center; background-size: cover}
    .texts-page .text{margin: 25px 0 0 0}
    .texts-page .text .date{font-size: 14px; line-height: 16px; margin: 0 0 5px 0}
    .texts-page .text h3{font-size: 18px; line-height: 21px; margin: 0 0 25px 0}
    .texts-page .text p, .texts-page .text li{font-size: 16px; line-height: 20px}
    /*End Texts Page*/


    /*Static Pages*/
    .static-page{min-height: calc(100vh - 95px); padding: 0}
    .static-page.page-not-found .main-container{padding: 70px 15px}
    .static-page.page-not-found figure{width: 100%; height: 220px; margin: 0 0 0 -20px}
    .static-page h1{font-size: 31px; line-height: 38px}
    .static-page.page-not-found h1{margin: 20px 0 0 0}
    .static-page.page-not-found .btn{margin: 60px auto 0 auto}
    .static-page.thank-you .btn{margin: 45px auto 0 auto}
    .static-page.thank-you h1{font-size: 40px; line-height: 48px}
    .static-page p{font-size: 16px; line-height: 20px; width: 100%; margin: 15px 0 0 0}
    .static-page.thank-you .main-container{top: calc(50% + 45px) !important}
    /*End Static Pages*/


    /*Customer Info Page*/
    .customer-info-page .customer-info-form{margin: 55px 0 0 0; padding: 0 0 140px 0}
    .customer-info-page .customer-info-form .container-left, .customer-info-page .customer-info-form .container-right{width: 100%; display: block; margin: 0}
    form.contact-form .radios-block{margin: 0 0 30px 0}
    form.contact-form .radio-buttons .radio-button.other{margin: 30px 0 0 0}
    .customer-info-page form.contact-form .btn{margin: 30px 0 0 0}
    form.contact-form .select-container ul li:hover{background-color: #FFFFFF}
    form.contact-form .select-container ul li:hover a{color: #000000}
    /*End Customer Info Page*/


    /*Traders Questionnaire Page*/
    .traders-questionnaire-page .traders-questionnaire-form{margin: 55px 0 0 0; padding: 0 0 140px 0}
    .traders-questionnaire-page .traders-questionnaire-form .container-left, .traders-questionnaire-page .traders-questionnaire-form .container-right{width: 100%; display: block; margin: 0}
    .traders-questionnaire-page form.contact-form .btn{margin: 30px 0 0 0}
    /*End Traders Questionnaire Page*/


    /*Distributors Data Page*/
    .distributors-data-page{padding: 0 0 125px 0}
    .distributors-data-page .distributors-form{margin: 55px 0 0 0}
    .distributors-data-page .distributors-form .container-left, .distributors-data-page .distributors-form .container-right{display: block; width: 100%; margin: 0}
    .distributors-data-page .contact-form .btn{margin: 0}
    .distributors-data-page .distributors-form .container-right{margin: 75px 0 0 0}
    .distributors-data-page .distributors-form .container-right figure{height: 275px}
    /*End Distributors Data Page*/


    /*FAQ Page*/
    .faq-page .faq{margin: 50px auto 0 auto; padding: 0}
    .faq-page .faq > li{margin: 0 0 40px 0; padding: 0 0 0 25px}
    .faq-page .faq > li .question a, .faq-page > .faq li .answer *{font-size: 20px; line-height: 28px}
    .faq-page .faq > li .question:before{width: 8px; height: 16px; top: 7px}
    .faq-page .faq > li .answer p{margin: 20px 0 0 0}
    /*End FAQ Page*/


    /*Work With Page*/
    .work-with-page .page-title{font-size: 34px; line-height: 44px}
    .work-with-page .brands{margin: 50px 0 0 0}
    .work-with-page .brands li{width: 33.33%; padding: 0 10px; margin: 0 0 15px 0}
    .work-with-page .brands li figure{height: 95px}
    /*End Work With Page*/


    .search-overlay form{width: calc(100% - 25px)}


    footer{padding: 60px 15px 30px 15px}
    footer .container{width: 100% !important; display: block; margin: 0 0 40px 0; padding: 0 !important}
    footer .container.address .logo{width: 170px; height: 95px; margin: 0 auto}
    footer .container.address p{display: none}
    footer .container.menu ul li{margin: 0 0 20px 0; padding: 0 24px 0 0}
    footer .container.address p, footer .container.menu ul li a, footer .container.social p{font-size: 18px}
    footer .container.social{float: none; text-align: center}
    footer .container.social ul{margin: 18px 0 0 0}
    footer .container.social ul li{margin: 0 15px 0 0}
    footer .copyrights p{font-size: 16px; line-height: 22px; color: #D5D5D5}
    footer .copyrights p span{display: none}
}
@media only screen and (max-width : 600px) {
    .homepage .page-cover, .homepage .page-cover ul, .homepage .page-cover ul li{height: 250px;width:100%;margin-left:0px;} 
}

@media only screen and (max-height: 600px) {
    .static-page.thank-you .main-container{top: 65%}
    
}



/* new style */


/* ----------------------------------- */
/* Add a black background color to the top navigation */
.topnav {
    position: relative;
    /* left:65px; */
    overflow: hidden;
    height: 300px;
    font-family: 'AbrilText-SemiBold';
}

@media screen and (max-width: 1181px) {
    .topnav {
        position: relative;
        /* left:23px; */
        overflow: hidden;
        height: 300px;
    }
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: var(--secondary_color);
    text-align: center;
    padding: 60px 16px;
    text-decoration: none;
    font-size: 20px;
}

@media screen and (max-width: 1280px) {
    .topnav a {
        float: left;
        color: var(--secondary_color);
        text-align: center;
        padding: 60px 11px;
        text-decoration: none;
        font-size: 20px;
    }

}

/* Change the color of links on hover */
.topnav a:hover {

    color: var(--primary_color);
}

/* Add a color to the active/current link */
.topnav a.active {

    color: var(--black_color);
}

/* Centered section inside the top navigation */
.topnav-centered a {
    float: none;
    position: absolute;
    /*  top: 2%; */
    left: 44%;
    transform: translate(-50%, -50%);
}

/* Right-aligned section inside the top navigation */
.topnav-right {
    float: right;
    position: relative;

}

/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
@media screen and (max-width: 1179px) {

    .topnav a,
    .topnav-right {
        display: none;
    }

    .topnav-centered a {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
    }
}

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



.dropdown {
    float: left;
    overflow: hidden;
    margin-top: 46px;
}

/* Dropdown button */
.dropdown .dropbtn {
    font-size: 20px;
    border: none;
    outline: none;
    color: var(--secondary_color);
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    /* Important for vertical align on mobile phones */
    margin: 0;
    /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.dropdown:hover .dropbtn {
    color: var(--primary_color);
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff3e3;
    min-width: 160px;
    overflow-y: scroll;
    height: 280px;
  /*   padding-top: 20px; */
    z-index: 999999;
}

/* Links inside the dropdown */
.dropdown-content a {
    float: none;
    color: var(--secondary_color);
    background-color: #fbf7ef;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #eadecb;
    color: var(--primary_color);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content {
    display: none;
    position: absolute;
    /*background-color: #d3d7dfba;  */
    /* background-color: #d3d7dfb0;  */
    background-color: #d3d7df;
    min-width: 220px;
    z-index: 1;

}

.dropdown-content a {

    padding: 4px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    color: #263462;
}


.dropdownco:hover .dropdown-content {
    display: block;
}

/* new style */




.about-page .vision {
    min-height: 829px;
    background: url('/assets/images/unsplash_bg_new.jpg') no-repeat center;
    background-size: cover
}

.about-page .vision .details {
    width: 469px;
    background: #f1f0ecbd;
    padding: 44px;
    top: 80px;
    position: relative;
    border-radius: 9px;
}

/* background: url('/assets/images/vision-details-bg.jpg') no-repeat center; background-size: cover; */
.about-page .vision .details .section-title {
    margin: 0 0 10px 0
}

.about-page .vision .details p {
    font-size: 21px;
    color: var(--secondary_color);
    line-height: 32px;
    margin: 0 0 30px 0;
    font-family: 'Times New Roman', Times, serif
        /* 'brilText-SemiBold' */
}

.about-page .vision .details .sub_text p {
    margin: 0
}

@media only screen and (max-width: 1080px) {
    .about-page .vision {
        background: none;
        height: auto;
        min-height: 1px
    }

    .about-page .vision .main-container {
        padding: 0
    }

    .about-page .vision .details {
        width: 100%;
        padding: 70px 35px 30px 35px;
        top: initial
    }

    .about-page .vision .details p {
        font-size: 20px;
        line-height: 36px
    }
}