@charset "utf-8";
/***
    The new CSS reset - version 1.8.5 (last updated 14.6.2023)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
    - The "html" attribute is exclud, because otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
 */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
    cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-inline-size: 100%;
    max-block-size: 100%;
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
    -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
    -webkit-appearance: revert;
    appearance: revert;
}

/* preformatted text - use only for this feature */
:where(pre) {
    all: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
    color: unset;
}

/* remove default dot (•) sign */
::marker {
    content: initial;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
    display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
    -webkit-user-drag: element;
}

/* Revert Modal native behavior */
:where(dialog:modal) {
    all: revert;
}

/* Custom styles */

body,
html {
    font-family: 'Inter', sans-serif;
}

.container {
    display: flex;
    min-height: 100vh;
    background: white;
    padding: 50px;
}

@media (max-width:1480px) {
    .container {
        padding: 30px;
    }
}

@media (max-width:768px) {
    .container {
        padding: 20px;
    }
}

@media (max-width:640px) {
    .container {
        padding: 10px;
    }
}

.container__inner {
    position: relative;
    min-height: 100%;
    width: 100%;
    background-image: url('../img/bkg.jpg');
    /*background-size: cover;*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
}

@media (max-width:1260px) {
    .container__inner {
        background-position: bottom 50% left 30%;
    }
}

@media (max-width:1070px) {
    .container__inner {
        background-position: bottom 50% left 40%;
    }
}

@media (max-width:1035px) {
    .container__inner {
        background-position: bottom 50% left 39%;
    }
}

@media (max-width:980px) {
    .container__inner {
        background-position: bottom 80% left 35%;
        text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
    }
}


.container__inner::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
content: '';
}


.bkg-o {
    position: absolute;
    width: 1000px;
    height: 928px;
    bottom: -120px;
    left: -120px;
    background-image: url('../img/bkg_o.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
}

@media (max-width:2180px) {
    .bkg-o {
        width: 900px;
        height: 835px;
        bottom: -120px;
        left: -120px;
    }
}

@media (max-width:1815px) {
    .bkg-o {
        width: 700px;
        height: 650px;
        bottom: -120px;
        left: -120px;
    }
}

@media (max-width:1096px) {
    .bkg-o {
        width: 500px;
        height: 464px;
        bottom: -140px;
        left: -120px;
    }
}

@media (max-width:768px) {
    .bkg-o {
        width: 300px;
        height: 278px;
        bottom: -100px;
        left: -100px;
    }
}

.container__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 100%;
    color: white;
}

.container__content-inner {
    position: relative;
    top: -100px;
}

@media (max-width:2180px) {
    .container__content-inner {
        position: relative;
        top: -100px;
    }
}

@media (max-width:1480px) {
    .container__content-inner {
        /*position: relative;*/
        /*top: -100px;*/
    }
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 190px;
    line-height: 130px;
}

@media (max-width:2180px) {
    h1 {
        font-size: 170px;
        line-height: 110px;
    }
}

@media (max-width:1480px) {
    h1 {
        font-size: 150px;
        line-height: 100px;
    }
}

@media (max-width:768px) {
    h1 {
        font-size: 100px;
        line-height: 70px;
    }
}

h1 span {
    display: block;
    position: relative;
}

h1 span:nth-of-type(2) {
    left: -42px;
}

@media (max-width:2180px) {
    h1 span:nth-of-type(2) {
        left: -37px;
    }
}

@media (max-width:1480px) {
    h1 span:nth-of-type(2) {
        left: -33px;
    }
}

@media (max-width:768px) {
    h1 span:nth-of-type(2) {
        left: -23px;
    }
}

h1 span:nth-of-type(3) {
right: -65px;
}

@media (max-width:2180px) {
    h1 span:nth-of-type(3) {
        right: -59px;
    }
}

@media (max-width:1480px) {
    h1 span:nth-of-type(3) {
        right: -52px;
    }
}

@media (max-width:768px) {
    h1 span:nth-of-type(3) {
        right: -34px;
    }
}

h2,
.heading-2 {
    font-family: 'Inter', sans-serif;
    font-size: 55px;
    line-height: 55px;
    font-weight: 200;
}

@media (max-width:2180px) {
    h2,
    .heading-2 {
        font-size: 45px;
        line-height: 45px;
    }
}

@media (max-width:1480px) {
    h2,
    .heading-2 {
        font-size: 35px;
        line-height: 35px;
    }
}

@media (max-width:768px) {
    h2,
    .heading-2 {
        font-size: 25px;
        line-height: 25px;
    }
}

h2.ccc {
    position: absolute;
    top: 50px;
    right: -129px;
}

@media (max-width:2180px) {
    h2.ccc {
        top: 40px;
        right: -98px;
    }
}

@media (max-width:1480px) {
    h2.ccc {
        top: 48px;
        right: -70px;
    }
}

@media (max-width:768px) {
    h2.ccc {
        top: 32px;
        right: -52px;
    }
}

.contact {
    position: absolute;
    bottom: -270px;
    right: -255px;
}

@media (max-width:2180px) {
    .contact {
        bottom: -235px;
        right: -192px;
    }
}

@media (max-width:1480px) {
    .contact {
        bottom: -196px;
        right: -112px;
    }
}

@media (max-width:1080px) {
    .contact {
        bottom: -170px;
        right: 0;
        left: 63px;
        width: 185px;
    }
}

@media (max-width:768px) {
    .contact {
        bottom: -140px;
        left: 40px;
        width: 185px;
    }
}

.contact .heading-2 {
    margin-bottom: 30px;
}

@media (max-width:1080px) {
    .contact .heading-2 {
        margin-bottom: 15px;
    }
}

.contact span {
    display: block;
}

.contact__details {
    font-size: 38px;
    line-height: 40px;
    font-weight: 500;
}

@media (max-width:2180px) {
    .contact__details {
        font-size: 30px;
        line-height: 32px;
    }
}

@media (max-width:1480px) {
    .contact__details {
        font-size: 20px;
        line-height: 24px;
    }
}

.contact__details a:hover {
    text-decoration: underline;
}