/* GENERAL */
.txt-orng {
    color: #dd2503 !important;
}

.txt-antoni {
    font-family: "antoniobold" !important;
}

p {
    margin: 0px;
}

.thb-btn {
    background-color: #ed2603 !important;
    color: white !important;
    border: 0px !important;
}

.thb-btn:hover {
    background-color: #dd2503 !important;
    color: white !important;
    border: 0px !important;
}

.main, .featured-articles {
    display: flex;
    justify-content: center;
}

.full {
    width: 100%;
}

.box {
    width: 1600px;
    max-width: 1700px;
    padding: 0 40px;
    margin: 0 auto;
}

.c-lang {
    min-width: 75px !important;
}

.back-icon-btn img {
    width: 1.2rem;
}

.c-main {
    background-image: none !important;
}

/* HEADER */
header {
    /* background-color: #dd2503; */
    display: flex  !important;
    justify-content: center;
}

.c-hdr {
    background-image: none !important;
    background-color: #ed260300 !important;
}

.js-lang__main span {
    color: #000000 !important;
}

.js-lang__options span {
    color: #ffffff !important;
}

.c-hdr .c-hdr__nav__desktop a, .c-hdr .c-hdr__nav__desktop a:hover, .c-hdr .c-hdr__nav__desktop a.active {
    padding: 5px 12px !important;
    border-radius: 5px;
    border: none !important;
    text-shadow: 0 0 0px #fedd0800, 0 0 0px #fedd0800;
}

.c-hdr .c-hdr__nav__desktop a {
    color: #000000 !important;
}

.c-hdr .c-hdr__nav__desktop a:hover, .c-hdr .c-hdr__nav__desktop a.active {
    color: #ffffff !important;
    background-color: #ed2603;
}

.c-hdr .c-hdr__nav__desktop a:hover:before, .c-hdr .c-hdr__nav__desktop a.active:before {
    content: '';
    height: 2px;
    width: 100%;
    background-color: #fedd0800 !important;
    position: absolute;
    bottom: 0;
}

.c-hdr .c-hdr__nav__desktop {
    justify-self: center;
}

.c-hdr .c-lang .c-lang__main:after {
    background-image: url(../images/i-arrow__down--orng.svg) !important;
}

#js-hdr__mobile__nav ul li a.active {
    background: #ffffff00 !important;
    color: #FFC300 !important;
}

.c-hdr__mobile__nav {
    background-color: #000000f5 !important;
}

.c-hdr__mobile__nav {
    z-index: 300;
}

/* FOOTER */
.footer-contact, .footer-soc {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
}

.footer-soc li {
    display: inline-flex;
    gap: 5px;
}

.footer-soc li p {
    color: white;
    margin: 0;
}

.footer-soc li img {
    width: 25px;
}

.c-ftr__upper .footer-soc .c-ftr__icon{
    padding-left: 5px;
    margin-bottom: 0;
}

.c-hdr .c-hdr__logo, .footer-logo {
    width: 235px !important;
    max-width: 300px !important;
}

/* HOME */
.banner {
    background-image: url(../images/newbanner.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    padding: 0% 0px;
    display: flex;
    justify-content: center;
    background-color: #ed2603;
    background-position: 40% center;
}

.hero-con {
    background-color: #ed2603;
}

.hero-con h2 {
    color: white;
}

.hero-leftcon {
    height: 290px;
    background-image: url(../images/newbanner-m.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    background-position: center center;
}

.hero-rightcon {
    padding: 45px 50px;
}

.categories {
    gap: 2rem;
}

.category {
    cursor: pointer;
    color: black;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
}

.category:hover, .category>p:hover {
    background-color: #ed2603;
    color: white;
}

.product-con {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(6, 1fr); 
    align-items: end;
}

.product-item img {
    width: 150px;
}

/* PRODUCT */
.c-product__inner__content video {
    width: 100%;
}

.c-wysywyg p {
    color: black !important;
}

.product-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
}

.active {
    background: #ed2603;
    color: white;
}

.product-con {
    padding-top: 4rem;
}

.prod-wrap > .img-wrap {
    background-image: url(../images/product-bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    align-content: center;
    justify-items: center;
    min-height: 31rem;
}

.prod-wrap > .img-wrap > .image img {
    width: auto;
    max-width: 400px;
    max-height: 300px;
}

.prod-wrap > .img-wrap > .image {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.prod-wrap > .des-wrap {
    display: flex;
    align-self: center;
}

.description p iframe {
    width: 100%;
}

/* ARTICLES */
.articles-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.grid-row-span-2 {
    grid-row: span 2;
}

article .image {
    width: 100%;
    max-width: 150px;
    height: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

article .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

article:first-child {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

article:first-child .image {
    width: 100%;
    max-width: 100%;
    height: 200px;
}

article:first-child .content h6 {
	font-size: clamp(20px, 2.2vw, 25px);
}

/* EVENTS */
.event-container, .endo-container, .product-container {
    margin: auto;
    padding-block: 70px;
}

.event-info img {
    width: 100%;
}

.event-heading {
    margin-bottom: 1rem;
}

.event-subheader {
    font-size: 20px;
}

.event-item, .endorser, .product {
    grid-template-columns: 80px 1fr 250px .5fr;
    gap: 2rem;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 25px 15px;
    border-radius: 5px;
    background: white;
}

.event-item:last-child {
    border-bottom: none;
  }

.event-item:nth-child(odd) {
    grid-template-columns: 80px 1fr .5fr 250px;
}

.event-item:nth-child(odd) .event-img {
    order: 2;
    text-align: left;
}

.event-date {
    text-align: center;
    font-weight: bold;
    color: red;
    font-size: 32px;
}

.event-date span {
    display: block;
    font-size: 64px;
}

.event-content {
    padding-right: 6rem;
}

.event-title, .prod-title {
    font-size: clamp(25px, 2.5vw, 48px);
    font-weight: bold;
}

.event-subtitle, .endo-subtitle, .prod-subtitle {
    color: red;
    font-size: clamp(14px, 1vw, 32px);
    font-style: italic;
}

.event-details {
    font-size: clamp(14px, 1vw, 32px);
}

.hidden {
    display: none;
}

/* ENDORSER */
.c-endorser__card__img {
    background-image: linear-gradient(#fe792152, #ed260367), url(../images/endo-thumbnail.png) !important;
    border: none !important;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.c-endorser__card__img img {
    top: 10px !important;
}

.c-endorser__card:hover, .c-endorser__card.active {
    background-image: linear-gradient(to bottom, #ffffff, #ffffff) !important;
}

.endo-wrap {
    margin: 0 auto;
}

.endo-wrap > .img-wrap {
    background-image: url(../images/endorser-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    align-content: end;
    justify-items: center;
    min-height: 31rem;
    overflow: hidden;
}

.endo-wrap > .img-wrap > .image img {
    width: auto;
    padding-top: 3rem;
}

.endo-wrap > .img-wrap > .image {
    display: flex;
    justify-content: center;
    position: relative;
}

.endo-name {
    font-size: 25rem;
    color: #FFC300;
    line-height: 23rem;
    translate: -10% 0%;
    rotate: -20deg;
    opacity: 36%;
}

.endo-wrap > .des-wrap {
    display: flex;
    align-self: center;
}

.endorser-name {
    font-size: clamp(20px, 2vw, 30px);
    text-transform: capitalize;
}

.c-endorser__card__iWrap {
    padding: 0px !important;
}

.c-endorser__card {
    height: 270px !important;
}

/* Lazy load */
@keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .c-endorser__card {
    display: none !important;
  }
  
  .c-endorser__card.fade-in {
    display: block !important;
    animation: fadeInUp 0.5s ease forwards;
  }

/****************** RESPONSIVE ***********************/
@media (min-width: 992px) { 
    .hero-leftcon {
        height: auto !important;
        width: 60%;
    }

    .c-wysywyg p {
        color: white !important;
    }

    .category {
        font-size: 16px;
    }
}

@media (min-width: 1700px) { 
    .hero-leftcon {
        height: 365px; 
    }

    .hero-leftcon {
        background-image: none;
    }

    .banner {
        padding: 1.5% 0;
        background-size: cover;
    }

    .hero-con {
        background-color: rgba(255, 0, 0, 0);
    }
}

@media (max-width: 1200px) { 
    .c-hdr {
        grid-template-columns: 1fr 4fr auto !important;
        justify-items: center !important;
        /* grid-template-areas: 'logo menu lang' !important; */
    }

    .c-hdr .c-hdr__nav__desktop {
        grid-area: unset !important;
    }
}

@media (max-width: 1400px) {
    .product-con {
        grid-template-columns: repeat(3, 1fr);
    }

    .event-content {
        padding-right: 1rem;
    }
}

@media (max-width: 768px) {
    .articles-wrap {
        display: flex;
        flex-direction: column;
    }

    article {
		gap: 1rem;
    }

    article .image {
        height: auto;
    }

    .product-con {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-rightcon {
        padding: 45px 40px;
    }

    .product-item img {
        width: 100px;
    }

    header .box {
        padding: 5px 10px;
    }
    
    footer .box {
        padding: 0px 5px;
    }

    .product-con {
        padding-top: 2rem !important;
    }

    .event-item {
        grid-template-columns: .5fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 
        "event-img event-date"
        "event-img event-content"
        "event-img event-info";
    }

    .event-date { grid-area: event-date; }
    .event-content { grid-area: event-content; }
    .event-img { grid-area: event-img; }
    .event-info { grid-area: event-info; }

    .event-item:nth-child(odd) {
        grid-template-columns: .5fr 1fr;
    }
    
    .event-content {
        padding-right: 0;
    }

    .event-date {
        display: none;
    }

    .event-subtitle {
        display: none;
    }

    .grid-r-span-2 {
        grid-row: span 2;
      }

    .endo-wrap > .img-wrap {
        overflow: unset;
        overflow-y: clip;
        margin-bottom: 1rem;
    }
}