/* ------------------------------------------------------------- */
/* ROOT */
/* ------------------------------------------------------------- */

:root {
--clip_path: 19rem;
--clip_path_dx: 84%;
--clip_path_dx: calc(100% - var(--clip_path));
}

body {
display: flex;
flex-direction: column;
}
#header_bg { flex: 0 0 auto; }
#footer_bg { flex: 0 0 auto; }
main {
display: flex;
flex: 1 0 auto;
align-items: center;
}

/* ------------------------------------------------------------- */
/* CONTENT */
/* ------------------------------------------------------------- */

content {}
#content .boxed {
padding: 3rem 0 10rem;
padding: clamp(3rem, 2.4194rem + 1.6129vw, 5rem) 0 10rem;
}
#content .cols {
padding: 0 7rem;
padding: 0 clamp(7rem, 1.6667rem + 5.2083vw, 10rem);
}
#content .cols .col { width: 50%; }
#content .cols .col:first-child {
position: relative;
z-index: 0;
}
#content .cols .col:first-child::before {
content: "";
position: absolute;
top: 0;
right: calc(100% - 15rem);
right: calc(100% - clamp(15rem, 3.0000rem + 15.6250vw, 28rem));
display:  block;
width: 50vw;
height: 100%;
background-color: var(--color_orange);
clip-path: polygon(0 0, var(--clip_path_dx) 0, 100% 100%, 0% 100%);
z-index: 1;
}
#content.animation .cols .col:first-child::before { transition: transform 1s; transform: translateX(-100%); }
#content.animation.on .cols .col:first-child::before { transform: translateX(0); }
#content h1 {
display: block;
font-family: "Rajdhani", sans-serif;
font-size: 3.6rem;
font-size: clamp(3.6rem, 2.9032rem + 1.9355vw, 6rem);
font-weight: 600;
font-style: normal;
text-align: right;
line-height: 1;
text-transform: uppercase;
color: var(--color_grey);
}
#content.animation h1 { transition: opacity 0.5s 0.5s, transform 0.5s 0.5s; opacity: 0; transform: translateY(50px); }
#content.animation.on h1 { opacity: 1; transform: translateY(0); }
#content .text {
text-align: left;
padding-left: 12.5rem;
padding-left: clamp(12.5rem, -40.0000rem + 43.7500vw, 30rem);
}
#content.animation .text { transition: opacity 0.5s 1s, transform 0.5s 1s; opacity: 0; transform: translateY(50px); }
#content.animation.on .text { opacity: 1; transform: translateY(0); }
#content .text > *:first-child { margin-top: 0; }
#content h2 {
display: block;
font-family: "Rajdhani", sans-serif;
font-size: 2.4rem;
font-size: clamp(2.4rem, 2.2258rem + 0.4839vw, 3rem);
font-weight: 400;
font-style: normal;
margin-top: 5rem;
line-height: 1;
color: var(--color_grey);
}
#content p {
display: block;
font-size: 1.8rem;
font-size: clamp(1.8rem, 1.6839rem + 0.3226vw, 2.2rem);
font-weight: 400;
margin-top: 2.5rem;
line-height: 1.5;
color: var(--color_grey);
}
#content p a {
text-decoration: none;
transition: color 0.5s;
}
#content p a, #content p a:link, #content p a:visited { color: var(--color_grey); }
#content p a:active, #content p a:hover, #content p a:focus { color: var(--color_orange); }

/* ------------------------------------------------------------- */
/* PIXEL RATIO */
/* ------------------------------------------------------------- */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 


			
}

/* ------------------------------------------------------------- */
/* RESPONSIVE */
/* ------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
	
}

@media screen and (orientation: landscape) {
    
}

@media screen and (orientation: portrait) {
  
}

@media only screen and (max-width: 1699px) {
	
	
}

@media only screen and (max-width: 1599px) {
    
}

@media only screen and (max-width: 1439px) {
	
}

@media only screen and (max-width: 1365px) {
	
}

@media only screen and (max-width: 1279px) {
	
	
}

@media only screen and (max-width: 1199px) {
    
    /* CONTENT */
    #content .cols .col:last-child { justify-content: flex-end; }
    #content .text {
    padding-left: 7rem;
    padding-left: clamp(7rem, 1.6667rem + 5.2083vw, 10rem);
    }    
	
}

@media only screen and (max-width: 1111px) {
		
	
}

@media only screen and (max-width: 1023px) {
    
    /* CONTENT */
    #content .cols {
    padding: 0 0rem;
    padding: 0 clamp(0rem, -6.1765rem + 12.8676vw, 7rem);
    }
    #content .text {
    padding-left: 0rem;
    padding-left: clamp(0rem, -6.1765rem + 12.8676vw, 7rem);
    }
    
}

@media only screen and (max-width: 833px) {
	
}

@media only screen and (max-width: 767px) {
    
    /* ROOT */
    :root {
    --clip_path: 2rem;
    --clip_path: clamp(2rem, 1.2857rem + 2.2321vw, 3rem);
    }
    
    /* CONTENT */
    #content .cols { display:  block; }
    #content .cols .col:last-child { display: block; }
    #content .cols .col {
    width: 100%;
    padding-left: 3.5rem;
    padding-left: clamp(3.5rem, -8.2857rem + 36.8304vw, 20rem);
    }
    #content .cols .col:first-child::before {
    right: calc(100% - 2rem);
    right: calc(100% - clamp(2rem, -9.4706rem + 31.8627vw, 15rem));
    }
    #content h1 { text-align: left; }
    #content .text { padding-left: 0; }
    #content .text > *:first-child { margin-top: 4rem; }
    #content h2 {
    margin-top: 3rem;
    margin-top: clamp(3rem, 1.2353rem + 4.9020vw, 5rem);
    }
    #content p {
    margin-top: 1.5rem;
    margin-top: clamp(1.5rem, 0.6176rem + 2.4510vw, 2.5rem);
    }
    
}

@media only screen and (max-width: 735px) {
	
}

@media only screen and (max-width: 666px) {
	
    
}
	

@media only screen and (max-width: 599px) {
    
	
}

@media only screen and (max-width: 567px) {
	
	
}

@media only screen and (max-width: 479px) {
	
}

@media only screen and (max-width: 413px) {
	
}

@media only screen and (max-width: 374px) {
	
	
}

@media only screen and (max-width: 359px) {
	
}