@font-face {
  font-family: "poppins";
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  
  src: url("../../agile-v2/css/fonts/Poppins-Regular.ttf");

}





:root{
  --bord-color:0, 0%, 83%; --real:#B1B1BB;
    --color:231, 34%, 12%; --real:#141729;

    --color-1:210, 17%, 98%;--real:#F8F9FA;

    --color-2:240, 50%, 98% ;--real :#f9f9fd;

    --color-3:220, 100%, 50%;--real:#0057FF;

    --color-4:240, 0%, 58%; --real:#939394;

    --color-5:0, 0%, 83%; --real:#B1B1BB;

    --color-6:23, 100%, 50%;--real:#FF6000;

    --color-7:#f39c12;

    --color-8:200, 79%, 60%;--real:#4AB6EA;

    --color-9 :247, 100%, 98%;

    

   

    

     --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{

--color:0, 0%, 100%;/*	#ffffff */
--color-2:0, 45%, 98%;/*	#fcf8f8 */
--color-3:26, 68%, 93%;/*		#f9ece1 */
--color-4:0, 3%, 52%;/*		#888181 */
--color-5:0, 0%, 12%;/*	#1f1f1f */
--color-6 :231, 100%, 96%;/*		#ebeeff */
--color-7:9, 100%, 63%;/*	#ff5f42 */
--color-8:0, 50%, 98%;/*	#fcf7f7 */



  --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);

    --shadow-up: 
    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:var(--color-1)}

.color-2{color:hsl(var(--color-2))}

.color-3{color:hsl(var(--color-3))}

.color-4{color:hsl(var(--color-4))}

.color-5{color:hsl(var(--color-5))}

.color-6{color:hsl(var(--color-6))}

.color-7{color:hsl(var(--color-7))}

.color-8{color:hsl(var(--color-8))}

.color-9{color:var(--color-9)}



.bg{background-color:hsl(var(--color)) !important}

.bg-1{background-color:hsl(var(--color-1))}

.bg-2{background-color:hsl(var(--color-2))}
.bg-2-i{background-color:hsl(var(--color-2)) !important}

.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))}

.bg-8{background-color:hsl(var(--color-8))}

.bg-9{background-color:hsl(var(--color-9))}


html,body{font-family: poppins;font-weight: 400; font-size: clamp(12px,calc(1vw + 6px),16px); font-family: "poppins", sans-serif;}
html,body {width: 100vw;height: 100%;overflow-x:hidden;transform: translate3d(0, 0, 0);position: relative;max-height: 100vh;}
body{
  /* background-image: url('../images/background-05.jpg'); */
  /* background-image: url('image1.jpg'), url('image2.png'), linear-gradient(to bottom, #134A8A, #0D111D); */
  /* background-image:  linear-gradient(to bottom, #5d9fe2, #f3f4f5),url('../images/background-05.jpg'); */
  /* background-position: center;
background-repeat: no-repeat;
background-size: cover; */


height: 100vh;
background-color: #ffffff;

}


* {margin: 0;padding: 0;box-sizing: border-box;} 

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





.page{width:100%;height: 100% !important;}

.inline-pad{padding-inline: 12rem;}

.page-content{container-type : inline-size; container-name : items-container;}

.btn{cursor: pointer;}

strong{font-size: clamp(30px,calc(3vw + 15px),60px);}

.gradient-text {
  background: linear-gradient(90deg, hsl(var(--color)), red, hsl(var(--color)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.zoom-image{

 
  transition: transform 0.5s ease-in-out;
}
.bill-board-content{display: grid;grid-template-columns: 1fr 1fr;}
.intro{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;z-index: 2;position: relative;}
.prices{display: grid;grid-template-columns: 1fr 1fr 1fr;}

footer{display: grid;grid-template-columns: 4fr 1fr 1fr 1fr;padding-top: 70px; padding-bottom: 70px;;
position: relative;

background: linear-gradient(to bottom, #f0f4f8, #ffffff);
box-shadow: 0px -10px 20px rgba(0, 0, 0, 0.1);
z-index: -1;
}




.page-top{
  background: 
url('../images/background-05.jpg') no-repeat top center / cover, 
linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(240, 240, 240, 1));
}

.set-bg{
  background: 
  url('../images/background-05.jpg') no-repeat top center / cover, 
  linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(240, 240, 240, 1));

}

.pricing{
  position: relative;
  /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(240, 240, 240, 0.8)); */
  z-index: 1;
  
  background: linear-gradient(to bottom, #dce7f3, white);
}

.pricing::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  width: 115%;
  height: 100%;

  background: 
url('../images/background-05.jpg') no-repeat center center / cover ;
 

 transform: rotate(180deg) translate(120px,0%); /* Rotate background */
  z-index: -1;
}


.portfolio
  {
    width: 50%;
    height:calc(50% + 30px);
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
    transform: rotateX(-25deg) rotateY(10deg); /* 3D Rotation */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s ease-in-out;

}

.portfolio:hover{
  transform: rotateX(0deg) rotateY(0deg);
}


.scene {
  width: 700px;
  height: 500px;
 
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s ease-in-out;
}

.face {
  position: absolute;
  width: 700px;
  height: 500px;
  background-size: cover;
  background-position: center;
  /* border: 3px solid white; */
}

/* Position each face correctly with new size */
.front  { transform: translateZ(350px); }
.back   { transform: rotateY(180deg) translateZ(350px); }
.left   { transform: rotateY(-90deg) translateZ(350px); }
.right  { transform: rotateY(90deg) translateZ(350px);  }
.top    { transform: rotateX(90deg) translateZ(250px);  }
.bottom { transform: rotateX(-90deg) translateZ(250px);  }

body{ perspective: 800px; /* Adds 3D depth */}
.face img{object-fit: contain;}



.scene .left-ang{transform: translate(-50px,250px);}

.scene .right-ang{transform: translate(50px,250px);}


.purchase-form select{
  border:2px solid #dce7f3;
  outline: none;
}

.purchase-form select option,.purchase-form button{
  border:none;
  outline: none;
}