@font-face{
    
        font-family: 'poppins';
        font-style: normal;
        
        font-weight: 500;
        font-display: swap;
        
        src: url("../../agile-v2/css/fonts/Poppins-Regular.ttf");
      
      
}



:root{
    --color: 0,0%,98.04%; --hex: #FAFAFA; 
    --color-1:30,3.33%,23.53%; --hex:#3E3C3A; 
    --color-2:220,6.77%,73.92%; --hex:#B8BBC1;
    --color-3:233, 93%, 57% ;--hex:#2B43F7;
    --color-4:352, 91%, 62%;--hex:#F6465D;
    --color-5:146, 11%, 88%, 0.69;--hex:#dde4e0b0;
    --color-6:216, 20%, 20%;--hex:#29313D;
    --color-7:157, 61%, 46%;--hex:#2EBD85;
    --color-switch:247, 100%, 98%;--hex:#F7F6FF;

    --schema-mode:dark;


    --shadow:
    0px 1px 3px 0px rgba(0, 0, 0, 0.1), 
    0px 5px 5px 0px rgba(0, 0, 0, 0.1), 
    0px 11px 6px 0px rgba(0, 0, 0, 0.07), 
    0px 19px 8px 0px rgba(0, 0, 0, 0.02), 
    0px 30px 8px 0px rgba(2, 2, 2, 0.02);

}

body.light{
    --schema-mode:light;
    --color:234, 83%, 98%;--hex:#F4F5FE;
    --color-1:215, 11%, 56%; --hex:#848E9C;
    --color-2:0, 0%, 100%;--hex:#FFFFFF;
    --color-switch:218, 11%, 14%; --hex: #1F2227; 
    --color-6 : 231, 100%, 96%;--hex:#EAEDFF;

    box-shadow: 
    2px 2px 6px 0px rgba(0, 0, 0, 0.1), 
    7px 9px 11px 0px rgba(0, 0, 0, 0.09), 
    15px 20px 15px 0px rgba(0, 0, 0, 0.05), 
    26px 35px 18px 0px rgba(0, 0, 0, 0.01), 
    41px 55px 19px 0px rgba(0, 0, 0, 0.0);
}

.box-shadow{box-shadow: var(--shadow) !important}


.color{color :hsl(var(--color))}
.color-1{color :hsl(var(--color-1))}
.color-2{color :hsl(var(--color-2))}
.color-3{color :hsl(var(--color-3))}
.color-4{color :hsl(var(--color-4)) !important}
.color-5{color :hsl(var(--color-5))}
.color-6{color :hsl(var(--color-6))}
.color-7{color :hsl(var(--color-7))}
.sw-color{color:hsl(var(--color-switch))}

.bg{background-color: hsl(var(--color));}
.bg-1{background-color: hsl(var(--color-1));}
.bg-2{background-color: hsl(var(--color-2));}
.bg-3{background-color: hsl(var(--color-3));}
.bg-4{background-color: hsl(var(--color-4)) !important;}
.bg-5{background-color: hsl(var(--color-5));}
.bg-6{background-color: hsl(var(--color-6));}
.bg-7{background-color: hsl(var(--color-7));}
.sw-bg{background-color:hsl(var(--color-switch))}


html,body,js-drop input{ font-size: clamp(12px,calc(1.2vw + 4px),1rem); font-family: poppins;}

html,body {width: 100vw;overflow:hidden;height:100vh;position: relative;max-height: 100vh;}
* {margin: 0;padding: 0;box-sizing: border-box;} 
*::before,*::after{box-sizing: border-box;}

.page{width:100%;height: 100vh;overflow-y: auto;}

i,button{ font-size: clamp(14px,calc(1.2vw + 4px),18px);}
button{border:none;outline: none;}


.trapezoid2,.center.trapezoid2 .content{clip-path: polygon(5% 0, 95% 0, 100% 100%, 0% 100%);}

.top-left,.top-right{clip-path: polygon(0 0, 100% 0, 96% 100%, 0 98%);}
.search-field{ min-width: 500px;width:500px}
.top-center{width:300px;max-width: 300px;}  
 .header .left,.header .right{width:calc(50% - 150px)}   

.trapezoid{ width: 100%;height: 40px;background-color: snow;}
 
.top-left,.top-right{width:calc(50% - 150px);height:41px;}


.top-right{transform:rotateY(180deg)}

.top-center{
   min-width: clamp(400px,calc(1.2vw + 4px),5rem);
}




.trapezoid2{
  min-width: 500px;width:500px;  
  height: 60px;
  background: snow;
  transform: rotateX(180deg) translateY(-80%);
 
  z-index: 2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

}

.topline{
  bottom:0;
  height:2px;
  width:70%;
  left:15%;

background: linear-gradient(300deg, rgba(245, 245, 245, 0.63) 0%, rgba(212, 212, 212, 0.38) 50%, rgba(245, 245, 245, 0.63) 100%);
 backdrop-filter: blur(8px);
 box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1), 
    7px 9px 11px 0px rgba(0, 0, 0, 0.09), 
    15px 20px 15px 0px rgba(0, 0, 0, 0.05), 
    26px 35px 18px 0px rgba(0, 0, 0, 0.01), 
    41px 55px 19px 0px rgba(0, 0, 0, 0.0);
}
.left-line,.right-line{ width:2px;height:100%;}
.left-line{ transform: rotate(20deg);}
.right-line{ transform: rotate(-20deg);}
.left-line,.right-line{
 
  background: linear-gradient(300deg, rgba(245, 245, 245, 0.63) 0%, rgba(212, 212, 212, 0.38) 50%, rgba(245, 245, 245, 0.63) 100%);
 backdrop-filter: blur(8px);

}

   
      
     

      
      

.center.trapezoid2 .content input{outline:none;border:none;height:100%;transform: rotateX(-180deg);background-color: transparent;
width:90%}

.center.trapezoid2 .content input::placeholder{
  font-size: 14px;
  text-align: center;
  transform: translateY(-2px);
  transition: transform 0.5s ease-in-out;
  
}

.center.trapezoid2 .content:has(input:focus){
  background-color: hsl(var(--color-5));
}

.center.trapezoid2 .content input:focus::placeholder{
transform: translateY(-100px);
}
/* .center.trapezoid2 .content span{transform: rotateX(-180deg)} */

.billboard{ margin-top: 20px;
   width: 100%;
  min-height: 500px;
   z-index: 1;
}


.angled-cadre {
    width: 100%;
  height: 100%;

 

clip-path: polygon(50% 0, 100% 0, 100% 90%, 92% 90%, 90% 100%, 10% 100%, 8% 90%, 0 90%, 0 0);
background-image: url('../images/billboard.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: 100% 120%;
transition: background-size 0.5s ease-in-out;

}

.billboard:hover .angled-cadre{
    background-size: 100% 140%;
     
}
.billboard-content{transition: 0.5s ease-in-out;}

.billboard:hover .billboard-content{
    background: rgba(0, 0, 0, 0.3); /* semi-transparent background */
  backdrop-filter: blur(8px);
  transition-delay: 1s;
}

.body-footer{
   
   min-height: 200px;
   max-width:1500px;margin-inline:auto;
clip-path: polygon(8% 8%, 92% 8%, 94% 0, 100% 0, 100% 100%, 0 100%, 0 0, 6% 0);
}
@media(width > 850px){

}

@media (max-width:850px){
      body,input{font-size: clamp(12px,calc(1.4vw + 8px),25px);}
      i{ font-size: clamp(14px,calc(8vw + 4px),20px);}
.trapezoid2{width:100%}
      .header .left > a:not(.menu){display: none;}
      .footer-content{flex-direction: column;}
      .top-left{clip-path: polygon(0 0, 100% 0, 90% 100%, 0 98%);}
      .top-right{ clip-path: polygon(0 0, 100% 0, 86% 100%, 0 98%);}
      .search-field{ min-width: 330px;width:330px}
      .top-center{min-width: clamp(250px,calc(1.2vw + 4px),5rem);}  
      .header .left,.header .right{width:calc(50% - 150px)}
     

      .trapezoid2{clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);}
      .center.trapezoid2 .content{ clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);}
 
 

       
 
      
     
}