body{ overflow-x: hidden;}


.container1 {
	
 background: url(image/resources-bioid-demo-playground.png);
}

.headline{font-family: "Righteous", sans-serif;
  font-weight: 400;
  font-style: normal;

  font-size: 40px;

  width: 100%;
  height: 580px;
  background: rgb(183, 183, 183,0.1);


}

.container2{
  background: ;
  width: 100%;
  height:300px;

}


.container2 font { 



  font-family: "Righteous", sans-serif;
  font-weight: 400;
  font-style: normal;

  font-size: 40px;
  display: flex;
	justify-content:center;
  background: radial-gradient(ellipse at center, rgba(244,48,48,1) 0%,rgba(125,185,232,0.13) 87%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */


}

.container3{
font-family: "Righteous", sans-serif;
  font-weight:400;
  font-style: normal;

  font-size: 40px;
  display: flex;
	justify-content:center;

}


.container4{
font-family: "Righteous", sans-serif;
  font-weight: 400;
  font-style: normal;

  font-size: 40px;
  display: flex;
	justify-content:center;
	
}

.box1 {

  width: 200px;
  height: 110px;
  box-shadow:1px 1px 3px 2px gray;
  display: flex;
  flex-direction: column;
  justify-content: center;

  align-items: center;
  gap: 40px;


}

.bigbox1{ width: 100%;



  display: flex;
  justify-content: space-between;
   font-family: "Agbalumo", system-ui;
  font-weight: 400;
  background: radial-gradient(ellipse at center, rgba(244,48,48,1) 0%,rgba(125,185,232,0.13) 87%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

.btn{
   font-family: "Agbalumo", system-ui;
  font-weight: 400;
}

.icon1{

  width: 50px;
  height:50px;
  stroke: red;
  stroke-width:1.2px;

}

.box2{

   width: 200px;
  height: 110px;
  box-shadow:1px 1px 3px 2px gray;
  display: flex;
  flex-direction: column;
  justify-content:center ;

  align-items: center;
  
  font-size: 20px;
    font-family: "Agbalumo", system-ui;
  font-weight: 400;

}


.container5{
  margin-left:30px ;
  margin-right:30px ;

  display: flex;
  justify-content: space-between;
   font-family: "Agbalumo", system-ui;
  font-weight: 400;
  

}

.container6{

width:100%;
background:; 
height:
500px;
display: flex;



gap: 100px;

}

.minicontainer0{
  display: none;
}

.minicontainer1{
   font-family: "Jost", sans-serif;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  
justify-content:space-around;
width: 720px;
height: 450px;
padding-left: 30px;
padding-top: 10px;
box-sizing: border-box;
backd: url(image/laptop-2298286_640.png);
background-size:cover;
border: 2px dotted red;
box-shadow: 2px 2px 4px 3px  red;
border-radius: 20px 90px; 

backgound: radial-gradient( rgba(239,76,47,1) 10%,rgba(125,185,232,0) 70%);


background: red;
color: white;

}





}

.box3{
   width: 200px;
   height: 180px;
  display: flex;
  background: ; 

  flex-direction:column;
  background: ;
  margin-left: ;
  margin-top: ;

}


.creatives{
  display: none;
}







.svg{
  margin-left: -9.4px;
}

 
.svg1{
  margin-left: -13.4px;
}

 

 .circle-container {

   font-family: "Jost", sans-serif;
  font-weight:bld;
      position: relative;
      width: 400px;
      height: 400px;
      border-radius: 50% ;
      margin: auto;
      background: rd;
      border: 3px dotted red;
     
      
    }

    .item {
      position: absolute;
      width: 80px;
      height: 80px;
      background: white;

      borer: 2px inset ; 
      border-color: red;
      box-shadow: 1px 1px 10px red;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      font-weight: bol;
      color: black;
      cursor: pointer;
    }
  

    }

    .center-text{

      font-family: "Jost", sans-serif;
    }

    .item.active { 
      background-color: red; 
      color: white; 
    }

    .item:nth-child(1) { top: -38px; left: 50%; transform: translateX(-50%); }   /* Web */
    .item:nth-child(2) { top: 70px; right: -10px; }                              /* Item 2 */
    .item:nth-child(3) { bottom: 70px; right: -10px; }                           /* Item 3 */
    .item:nth-child(4) { bottom: -25px; left: 50%; transform: translateX(-50%); }/* Item 4 */
    .item:nth-child(5) { bottom: 70px; left: -10px; }                            /* Item 5 */
    .item:nth-child(6) { top: 70px; left: -10px; }                               /* Item 6 */

    .center-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 36px;
      text-align: center;
      color: red;
     font-family: "Jost", sans-serif;

    }


.headlinecontainer{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  background: rgb(248, 248, 248);
}



.head1{
  width: 100%;
  display: flex;
  justify-content: center;
   font-family: "Jost", sans-serif;
}

.container7{ 

  width:100%;
  height: 300px;
  display: flex; 
 

  justify-content: center;
   font-family: "Jost", sans-serif; 
   }
.box4{
 flex: 1 1 240px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
 }

.line{

  width: 100px;
  height: 3px;
  background:red;
  margin-top: 50px;
 

}


.line2123{ display:none; 
    background:red;}









.template{ width: 100%;
  height: 500px;
    box-shadow: 0px +30px 30px 0px #777;
    margin-bottom: 50px;
    ackground: url(image/230.jpg);
    background-size: cover;

    display: flex;
    justify-content: space-between;


}



.introduce{
  margin-top: 50px;
  text-align:left;
  background:;


  font-family: "Jost", sans-serif;
}





.myintroduce{


  width: 500px;

}


.sidecolor{


  min-width:26px;
  height: 300px;
  background: red;
  margin-top: 90px;
}


 .container {
      position: relative;
      width: 560px;
      height: 500px;

   
     
      
    }

    /* Main circle image */
    .circle {
      width: 440px;
      height: 440px;
      border-radius: 50%;
      overflow: hidden;
      
      box-shado: 0 0 20px rgba(0,0,0,0.1);
      position: absolute;
     
      background:rgba(202, 9, 9,0.3);
  
         }

    .circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* SVG arc */
    .line2 {
      display: none;
      position: absolute;
      top: 10px;
      left: 150px;
      width: 500px;
      height: 500px;
      transform: translate(-160px, -23px );

    }

    pa {
      fill: none;
      stroke: #f2b400;
      stroke-width: 4;
    }

    /* Icon styling */
    .icon {
     display: none;
      position: absolute;
      width: 30px;
      height: 30px;
      background: rgba(245, 0, 0,0.9);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color:white;
      font-size: 16px;
      transform: translate(200%, -130% );


    }




















 .btn1   {
      position: relative;
      width: 150px;
      height: 30px;
      padding: 7px;
      background: transparent;
      font-size: 17px;
      font-weight: 500;
      
      border: 1px solid white ;
      border-radius: 10px;
      box-shadow: 0 0 30px rgb(255, 0, 0,0.6);
      transition: all .3s ease-in-out;
      cursor: pointer;
      overflow: visible; /* 🔑 বাইরে স্টার দেখানোর জন্য */
    }

.btn1 a{
  color: black;
}




   .btn1:hover {
      background:transparent;
      color:white;
      box-shadow: 0 0 30px rgb(255, 0, 0,0.6);
    }

    /* স্টার ✦ */
    .star {
      position: absolute;
      font-size: 18px;
      color: red;
      text-shadow: 0 0 10px #fff, 0 0 20px #18f3;
      opacity: 1;
      transform: scale(0);
      transition: all 4.5s ease;
    }

    .btn1:hover .star {
      opacity: ;
      transform: scale(1);
      animation: twinkle 1.5s infinite;
    }

    /* টুইঙ্কল অ্যানিমেশন */
    @keyframes twinkle {
      0%, 100% { opacity: 2.2; transform: scale(0.5) rotate(0deg); }
      50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
    }



    

    /* 🔹 স্টার পজিশন - কিছু ভেতরে, কিছু বাইরে */
    .star:nth-child(2) { top: -35%; left: 20%; animation-delay: 0s;  }     /* বাইরে */
    .star:nth-child(3) { top: 50%; left: 15%; animation-delay: 0.3s;  }    /* ভেতরে */
    .star:nth-child(4) { bottom: -50%; right: 25%; animation-delay: 0.6s; } /* বাইরে */
    .star:nth-child(5) { bottom: 45%; right: 10%; animation-delay: 0.9s; }  /* ভেতরে */
    .star:nth-child(6) { top: -60%; right: 10%; animation-delay: 1.2s; }    /* বাইরে */
    .star:nth-child(7) { bottom: 45%; left: -19%; animation-delay: 1.5s; }  /* বাইরে */















.btn4 {
  position: relative;
  display: inline-block;
  padding: 10px 16px;
  font-weight: 600;
  color:rgb(242, 0, 13,0.8) ;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
}

/* underline */
.btn4::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, black 50%, red 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
  box-shadow: 0 0 2px red ;
}

/* hover effect */
.btn4:hover {
  color:red;
  text-shadow: 0 0 18px rgb(243, 243, 243);
  transform: translateY(-1px);
}

.btn4:hover::after {
  transform: scaleX(1);
}














.animated-button1 {

  background: linear-gradient(-30deg, #3d0b 50%, #2b080 50%);
  padding: 20px 40px;
  margin: 12px;
  display: inline-block;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  overflow: hidden;
  color: red;
  font-size: 20px;
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.animated-button1::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px; 
  width: 100%;
  height: 100%;
  background-color: #ad8585;
  opacity: 0;
  -webkit-transition: .2s opacity ease-in-out;
  transition: .2s opacity ease-in-out;
}

.animated-button1:hover::before {
  opacity: 0.2;
}

.animated-button1 span {
  position: absolute;
}

.animated-button1 span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%; 
  height: 2px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateTop linear infinite;
          animation: 2s animateTop linear infinite;
}

@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

.animated-button1 span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateRight linear -1s infinite;
          animation: 2s animateRight linear -1s infinite;
}

@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

.animated-button1 span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateBottom linear infinite;
          animation: 2s animateBottom linear infinite;
}

@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

.animated-button1 span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626));
  background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626);
  -webkit-animation: 2s animateLeft linear -1s infinite;
          animation: 2s animateLeft linear -1s infinite;
}

@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}






.service{
 


  width: 100%;
  height: 400px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  gap: 30px;

  
}



.what{ width: 410px; 
  font-size: 20px;
background: or;
 font-family: "Jost", sans-serif;


}



.boxredius{
  position: relative;

  background:red;  
  width: 360px;
  height: 356px;
  
  border-radius: 63% 37% 25% 72% / 38% 48% 48% 62%;
}  


.boxredius img{


}


.sticker{position: absolute;
   font-family: "Jost", sans-serif;

  background:white;
  display: flex;
  justify-content: center;
  align-items: center;
 color: black;
 box-shadow: 1px 2px 15px rgb(242, 0, 13);
 border: 1px solid white;
 width:150px;
 height: 40px;
 border-radius: 20px;
}  



.sticker:nth-child(2){top:-14px;
  left:90%;
  transform: translateX(-39%);

}

.sticker:nth-child(3){bottom:140px;
  left:90%;
  transform:translateX(-300%);background: red;
  color: white;
}


.sticker:nth-child(4){bottom:8px;
  left:90%;
  transform: translateX(-4%);

}


.sticker:nth-child(5){top:50px;
  left:90%;
  transform: translatex(-280%);


}




.contact{
  width: 100%;
  height: 500px;
  background: rgba(214, 78, 82,0.4);
 display: flex;
 justify-content: space-evenly;



}


.telephon{
  width: 400px;
  height: 300px;
 
}

.form{
  width: 400px;
  height: 350px;
  
  
  
  

}

.fild{

  width: 340px; 
  height: 40px;
  border: none;
  outline: none;
  padding-left: 3px;
  box-sizing: border-box;
  font-family: jost;
  font-size: 18px;
  margin-top: 30px;
  margin-left: 10px;
  border-radius: 30px;
  

}

.fild1{

  width: 340px; 
  height: 90px;
  border: none;
  outline: none;
  padding-left: 3px;
  box-sizing: border-box;
  font-family: jost;
  font-size: 18px;
  margin-top: 30px;
  margin-left: 10px;
  border-radius: 20px;
  

}





.Submit{
  width: 80px;
  height: 40px;
  margin-top: 30px;
  margin-left: 10px;
  background: red;
  color: white;
  border: none;
  font-family: jost;
  font-size: 16px;
  border-radius: 5px;
}

.Submit:hover{
  color: red;
  background: white;

}


.Reset{
  width: 80px;
  height: 40px;
  margin-top: 30px;
  margin-left: 10px;
  background: red;
  color: white;
  border: none;
  font-family: jost;
  font-size: 16px;
  border-radius: 5px;
}

.Reset:hover{
  color: red;
  background: white;
}

.footer{
  width: 100%;
  height: 400px;
  background:rgb(183, 192, 202);
  display: flex;
  justify-content: space-evenly;


}

.location{
  width: 230px;
  height:150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;  color: white;

}

.icon3{display: flex;
  align-items: center;
  gap: 10px;color:black;

 
}

.icon1{
  font-size: 30px;
}

i{
  font-size: 25px;
  color:black;
}
a{text-decoration: none;
color: black;}