/* CSS Document */
*,::after,::before{ margin: 0; padding: 0;}

:root{
    --primary-color:#E4D00A;
    --dark-color:#000000;
    --light-dark-color-1:#3B3B3B;
    --light-color:#FFFFFF;
    --light-ash-color:#F4F4F7;

    --primary-font:"DM Sans", sans-serif;

    --uc--font-size-14: clamp(14px, 0.729vw, 14px);
    --uc--font-size-16: clamp(14px, 0.833vw, 16px);
    --uc--font-size-18: clamp(14px, 0.938vw, 18px);
    --uc--font-size-20: clamp(14px, 1.042vw, 20px);
    --uc--font-size-23: clamp(16px, 1.198vw, 23px);
    --uc--font-size-24: clamp(17px, 1.250vw, 24px);
    --uc--font-size-27: clamp(19px, 1.406vw, 27px);
    --uc--font-size-30: clamp(21px, 1.563vw, 30px);
    --uc--font-size-35: clamp(21px, 1.823vw, 35px);
    --uc--font-size-40: clamp(20px, 2.083vw, 40px);
    --uc--font-size-49: clamp(25px, 2.552vw, 49px);
    --uc--font-size-60: clamp(30px, 3.125vw, 60px);
    --uc--font-size-70: clamp(32px, 3.646vw, 70px);

}

body{ width:100%; padding:0; margin:0; background:#fff;  font-family: var(--primary-font); color: var(--dark-color); font-size: var(--uc--font-size-16);}
ul{ padding:0; margin:0; list-style:none; }
@media screen and (min-width: 1300px) { .container{ max-width:1394px; } }

a{ display: inline-block; text-decoration: none;}

/* accessibility */
:focus-visible {outline: 3px solid red;outline-offset: 2px;}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid red; outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }




h1, h2, h3, h4, h5, h6, p{ font-weight: 400; padding: 0; margin: 0;}

.img-fluid{ width: 100%;}
.img-fluid-cover{ height: 100%; width: 100%; object-fit: cover; object-position: center;}

[class^="button-"]{ transition: 0.3s ease-in-out; background-color: var(--dark-color); color: var(--light-color); padding: clamp(14px, 1.042vw, 20px) clamp(18px, 1.302vw, 25px); font-size: var(--uc--font-size-20); font-weight: 500; border-radius: 12px; box-shadow: 0px 7px 31px 0px rgba(1, 2, 2, 0.21)}
.button-play{ box-shadow: none; border-radius: 0; background-color: transparent; color: var(--dark-color); display: flex; align-items: center; gap: 14px; padding: 0;}
.button-play svg{ width: clamp(30px, 3.125vw, 60px); height: clamp(30px, 3.125vw, 60px);}
.button-1{ text-align: center;}
[class^="button-"]:hover{ transition: 0.3s ease-in-out; transform: translateY(-3px);}



.title-1 { font-size: var(--uc--font-size-70); font-weight: 800; line-height: 1.1429;}
.title-2{ font-size: var(--uc--font-size-60); font-weight: 800; line-height: 1.1429;}

.sub-title-1{ padding: clamp(11px, 0.781vw, 15px) clamp(15px, 1.563vw, 30px); background-color: var(--primary-color); display: inline-block; border-radius: 100px; font-size: var(--uc--font-size-20); font-weight: 700; margin-bottom: clamp(13px, 1.302vw, 25px);}