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

:root {
--content_title_gap: 6rem;
--content_title_gap: clamp(6rem, 3.2308rem + 3.6058vw, 9rem); ;
--logos_list_gap_x: 10rem;
--logos_list_gap_x: clamp(10rem, -8.0000rem + 15.0000vw, 16rem);
--logos_list_gap_y: 4rem;
--logos_list_gap_y: clamp(4rem, 2.2581rem + 4.8387vw, 10rem);
--logos_list_items: 4;
}

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

#content { overflow: hidden; }
#content .boxed {
padding-top: 2rem;
padding-top: clamp(2rem, -0.3226rem + 6.4516vw, 10rem);
}
#content .cols {
position: relative;
padding: 0 7rem;
padding: 0 clamp(7rem, 1.6667rem + 5.2083vw, 10rem);
z-index: 0;
}
#content .title {}
#content .title::after {
content: "";
position: absolute;
top: 0;
left: calc(50% + var(--content_title_gap));
display:  block;
width: calc(50vw - var(--content_title_gap));
height: 100%;
background-color: var(--color_orange);
clip-path: polygon(14rem 0, 100% 0, 100% 100%, 0 100%);
z-index: 1;
}
#content.animation .title::after { transition: transform 1s; transform: translateX(100%); }
#content.animation.on .title::after { transform: translateX(0); }
#content h1 {
display: block;
width: 50%;
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: left;
line-height: 1;
text-transform: uppercase;
text-wrap: balance;
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 {
width: 50%;
margin-top: 4rem;
margin-top: clamp(4rem, 3.7097rem + 0.8065vw, 5rem);
}
#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 p {
display: block;
font-size: 1.8rem;
font-size: clamp(1.8rem, 1.6839rem + 0.3226vw, 2.2rem);
font-weight: 400;
text-align: justify;
line-height: 1.5;
color: var(--color_grey);
}

/* ------------------------------------------------------------- */
/* LOGOS */
/* ------------------------------------------------------------- */

#logos {}
#logos .boxed {
padding: 5rem 0 10rem;
padding: clamp(5rem, 1.2258rem + 10.4839vw, 18rem) 0 clamp(10rem, 5.6452rem + 12.0968vw, 25rem);
}
#logos .cols {
padding: 0 7rem;
padding: 0 clamp(7rem, 1.6667rem + 5.2083vw, 10rem);
}
#logos .list { gap: var(--logos_list_gap_y) var(--logos_list_gap_x); }
#logos .list .item {
display: block;
width: calc((100% / var(--logos_list_items)) - (((var(--logos_list_items) - 0.99) / var(--logos_list_items)) * var(--logos_list_gap_x)));
text-align: center;
}
#logos .list .item.animation { transition: opacity 0.5s, transform 0.5s; opacity: 0; transform: translateY(50px); }
#logos .list .item.animation.on { opacity: 1; transform: translateY(0); }
#logos figure {
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#logos figure img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
filter: grayscale(1);
}

/* ------------------------------------------------------------- */
/* 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) {
    
    /* ROOT */
    :root {
    --logos_list_gap_x: 12rem;
    --logos_list_gap_x: clamp(12rem, -22.9091rem + 34.0909vw, 18rem);
    --logos_list_items: 3;
    }
	
}

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

@media only screen and (max-width: 1023px) {
    
    /* ROOT */
    :root {
    --logos_list_gap_x: 8rem;
    --logos_list_gap_x: clamp(8rem, 2.3396rem + 9.4340vw, 12rem);
    }
    
    /* CONTENT */
    #content .cols {
    padding: 0 0rem;
    padding: 0 clamp(0rem, -6.1765rem + 12.8676vw, 7rem);
    }    
    #content .title::after {
    left: calc(70% + var(--content_title_gap));
    width: calc(70vw - var(--content_title_gap));
    }
    #content h1 { width: 70%; }
    #content .text { width: 70%; }
    
    /* LOGOS */
    #logos .cols {
    padding: 0 0rem;
    padding: 0 clamp(0rem, -6.1765rem + 12.8676vw, 7rem);
    }
    
}

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

@media only screen and (max-width: 767px) {
    
    /* CONTENT */
    #content .cols { position: static; }
    #content .title { position: relative; z-index: 0; }
    #content .title::after {
    left: calc(50% + 3rem);
    width: calc(50vw - 3rem);
    clip-path: polygon(6rem 0, 100% 0, 100% 100%, 0 100%);
    }
    #content h1 { width: 50%; }
    #content .text { width: 100%; }
}

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

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

@media only screen and (max-width: 599px) {
    
    /* ROOT */
    :root {
    --logos_list_gap_x: 6rem;
    --logos_list_gap_x: clamp(6rem, -4.5000rem + 29.1667vw, 13rem);
    --logos_list_items: 2;
    }	
	
}

@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) {
	
}