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


body{
    overflow-x: hidden; 
} 

/* START */


.community-hero {
  background-image: url("./images/Image.png");
  angle: 0 deg;
opacity: 1;
padding: 85px 0;
  width: 100%;
  min-height:140vh;
  background-color:#2F1893 ;
}

.community-hero img {
  /* width: 100%;
  display: block;
  height: 85px; */
}


.community-hero nav ul {
  list-style: none;
  display: flex;
  gap: 41px;
  justify-content: center;

}

.community-hero nav ul li a{
text-decoration: none;
color: white;
  font-family: 'DM Sans';
font-weight: 500;
font-size: 18px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;

}
.behance-logo {
  font-family: 'DM Sans';
  font-weight: 500;
  font-size: 18px;   
  color: white;
  display: flex;
  align-items: center;
  position: relative;
  left:-20px;
  top:4px;
}

/* Style for the small 'e' */
.behance-logo span {
  font-weight: 500;
  font-size: 0.9em;
  position: relative;
  margin-left: 2px;

}

/* The white bar above the 'e' */
.behance-logo span::before {
  content: "";
  position: absolute;
  top: 3px;       /* adjust vertical position */
  left: 0;
  width: 100%;
  height: 3px;
  background: white;
  border-radius: 2px;
}




  .community-hero nav ul li a.home{
    color: rgba(255, 255, 255, 0.6);

}
.parent-startup{
  display: flex;
  justify-content: center;
  margin: 142px 0;
}

.startup-container{
width: 736px;
height: 257px;


 /* position: absolute;
  top: 260px;
 left: 332px; */
angle: 0 deg;
opacity: 1;
/* border: 2px solid orangered; */
/* background: orangered; */

}
.startup-content{
font-family: 'DM Sans';
font-weight: 700;
font-size: 24px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: -0.29px;
text-align: center;
/* border: 2px solid red; */
 width: 100%;
height: 19px;

opacity: 1;

angle: 0 deg;
opacity: 1;


}
.startup{
  color: white;  
}

.frame-code{
  padding: 21px 50px ;
}
.code-content{
/* position: absolute; */
width: 641px;
height: 86px;
/* top: 50px;
left: 50px; */
angle: 0 deg;
opacity: 1;
/* border:2px solid green ; */

}
.forget{
font-family: 'DM Sans';
font-weight: 200;
font-size: 72px;
leading-trim: NONE;
line-height: 86px;
letter-spacing: -1px;
text-align: center;
vertical-align: middle;
color:white;

}

.framework-content{
/* position: absolute; */
width: 636px;
height: 120px;
angle: 0 deg;
padding: 27px 0;
opacity: 1;
/* top: 150px;
left: 60px; */
/* border: 2px solid brown; */

}
.framework{
font-family: DM Sans;
font-weight: 500;
font-size: 22px;
leading-trim: NONE;
line-height: 32px;
letter-spacing: 0px;
text-align: center;
color:white

}
.parent-circle{
  display: flex;
  justify-content: center;
}
.circle-content{
margin: -100px 0 0 50px;
width: 91px;
height: 11px; 
angle: 0 deg;
opacity: 1;
/* top: 560px;
left: 634px; */
display: flex;
justify-content: space-evenly;
/* border: 2px solid pink; */

}

.circle{
width: 11px;
height: 10px;
border-radius: 50%;
angle: 0 deg;
opacity: 1;
 /* border: 1px solid white; */

}

.circle1{
width: 11px;
height: 10px;
border-radius: 50%;
angle: 0 deg;
opacity: 1;
background-color: white;

}

 .account-button{
  display: flex;
  justify-content: center;
   /* width: 230px; */
    /* height: 60px;  */
   padding: 20px 15px;
   /* border-radius: 100px; */
   /* background-color:#482BE7 ; */

 }

.button-content{
  margin: -30px 0 0 45px;
width: 230px;
height: 60px;
angle: 0 deg;
opacity: 1;
/* border: 2px solid yellow; */


}



.account-btn{
font-family: 'DM Sans';
font-weight: 500;
font-size: 18px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;
text-align: center;
vertical-align: middle;
color: #FFFFFF;
width: 230px;
height: 60px;
 padding: 5px 40px;
 border-radius: 100px;
   background-color:#482BE7 ;

}








/* //////////////////END */






/* START //////////*/



.sample-container{
  display: flex;
  justify-content: center;
  padding: 107px 0;
  background-image: url("./images/Image2.png");
  margin: 0;
/* width: 1400px; */
/* height: 540px; */
  width: 100%;
  min-height: 80vh;
  background-color:#2F1893 ;

}
.sample-container .image2{
  /* width: 100%; */
  
 
}

.sample-content{
 /* position: absolute; */
width: 815px;
height: 307px;
angle: 0 deg;
/* opacity: 1; */
/* top: 1100px;
left: 253px; */
/* border: 2px solid rgb(17, 255, 0); */

}

.parent-text{
    display: flex;
  justify-items: center;
}
.free-content{
 
width: 100%;
height: 26px;
angle: 0 deg;
opacity: 1;
/* border: 2px solid  rgb(9, 240, 232); */

}
.free-text{
font-family: 'DM Sans';
font-weight: 700;
font-size: 14px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 2px;
text-align: center;
vertical-align: middle;
text-transform: uppercase;
color: #FFFFFF;

}
.parent-powerful{
   padding: 29px  45px;
}
.powerful-content{
  /* position: absolute; */
 
width: 715px;
height: 140px;
angle: 0 deg;
/* opacity: 1; */
/* top: 50px;
left:50px; */
/* border: 2px solid rgb(205, 17, 230); */

}
.generator{
font-family: 'DM Sans';
font-weight:200;
font-size: 58px;
leading-trim: NONE;
line-height: 70px;
letter-spacing: -1px;
text-align: center;
color: #FFFFFF;

}

.parent-complex{
   padding: 28px  45px;
}

.complex-content{

width: 670px;
height: 84px;
angle: 0 deg;
opacity: 0.7;
/* border: 2px solid  rgb(137, 2, 174); */

}

.complex-text{
font-family: 'DM Sans';
font-weight: 500;
font-size: 18px;
leading-trim: NONE;
line-height: 28px;
letter-spacing: 0px;
text-align: center;
color:#FFFFFF;

}

.flow{
  display: flex;
  /* background: #2F1893; */
}



/* END//////// */





/* START */



.features-container{
  margin: 0;
  background-image: url('./images/Rectangle.png');
   width: 100%;
   height: 100vh;
   padding: 0px 0;
  background-color:#2F1893 ;
}


 
.feature-overhead{
  display: flex;
  justify-content: space-between;
  gap:33px;
  /* background: green; */
  width: 100%px;
  height: 100vh;
  padding: 50px 0;
   
}

.mock-parent{
  padding: 10px 0;
}
 
.features-content{
width: 350px;
height: 535px;
opacity: 1;


/* border: 2px solid rgb(196, 84, 9); */
/* background: orangered; */

}

.create_container{
  /* border: 3px solid purple; */
  width:600px;
  /* background: purple; */
  padding: 50px 0;
}


.creatNew-content{
width: 600px;
height: 176px;
angle: 0 deg;
opacity: 1;
/* border: 2px solid rgb(68, 9, 9); */

}
.new-create{
width: 532px;
height: 52px;
angle: 0 deg;
opacity: 1;
/* top: 158px;
left: 515px; */
/* border: 2px solid red; */

}

.company-content{
width: 500px;
height: 96px;
angle: 0 deg;
opacity: 1;
/* top: 230px;
left: 515px; */
/* border: 2px solid  green; */

}
.create_text{
font-family: 'DM Sans';
font-weight: 700;
font-size: 42px;
leading-trim: NONE;
line-height: 52px;
letter-spacing: -0.4px;
color:#FFFFFF;

}
.parent-company{
 padding: 36px 0;
}

.company_text{
font-family: 'DM Sans';
font-weight: 500;
font-size: 22px;
leading-trim: NONE;
line-height: 32px;
letter-spacing: 0px;
color:#FFFFFF;

}
.create_flow{
  padding: 0px 0;
}





.useful-container{
  display: flex;
  gap:40px;
  padding: 35px  0;
}


 

.pages-content{
width: 271px;
height: 186px;
angle: 0 deg;
opacity: 1;
top: 391.6px;
left: 515px;
/* border: 2px solid rgb(215, 20, 225); */

}
.overlap-box{
  width: 37px;
height: 37px;
angle: 0 deg;
opacity: 1;
/* top: 391.6px;
left: 515px; */
/* border: 2px solid blue; */

}

.diamond-flow{
  width: 37px;
height: 37px;
/* border: 2px solid rgb(255, 0, 60); */
}
.icon-copy{
  font-family: 'FontAwesome';
font-weight: 400;
/* font-size: 37px; */
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0px;
width:50px;
height: 50px;

}

.parent-features{
  padding: 19px 0;
}

.paparent-blocks{
  padding: 0 0 0 0;
}


.features_page{
width: 220px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 458.2px;
left: 516px; */
/* border: 2px solid orangered; */

}

.features_text{
font-family: 'DM Sans';
font-weight: 700;
font-size: 14px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 2px;
text-transform: uppercase;
color:#FFFFFF;

}

.blocks-content{
width: 250px;
height: 78px;
angle: 0 deg;
opacity: 1;
top: 500.4px;
left: 516px;
/* border: 2px solid rgb(2, 67, 2); */

}

.blocks_text{
font-family: 'DM Sans';
font-weight: 400;
font-size: 16px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;
color:#FFFFFF;

}



.symbols-content{
width: 271px;
height: 186px;
angle: 0 deg;
opacity: 1;
top: 391.6px;
left: 515px;
/* border: 2px solid rgb(194, 187, 8); */

}
.symbol-features{
  padding: 12px 0;
}
.symbol-blocks{
  padding: 10px 0;
}

.symbol-content{
width: 270px;
height: 78px;
angle: 0 deg;
opacity: 1;
top: 500.4px;
left: 516px;
/* border: 2px solid rgb(2, 67, 2); */
}


.circle-flow2{
  padding: 280px 40px;
}
.symbol_page{
  width: 274px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 458.2px;
left: 516px; */
/* border: 2px solid rgb(3, 104, 119); */
}
.symbol_text{
font-family: 'DM Sans';
font-weight: 400;
font-size: 16px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;
color:#FFFFFF;


}
.symbol-block{

}


.circle_content1{
width: 91px;
height: 11px; 
angle: 0 deg;
opacity: 1;
display: flex;
justify-content: space-evenly;
/* border: 2px solid rgb(200, 8, 40); */
rotate:  90deg;
}


.circle{
width: 11px;
height: 10px;
border-radius: 50%;
angle: 0 deg;
opacity: 1;
 border: 1px solid white;

}




.screen{
  width: 433px;
height: 490px;
angle: 0 deg;
opacity: 1;
border-radius: 4.04px

}




/* END///// */


/* START////// */





.form-parent{
display: flex;
gap:130px;
background-image:url("./images/Background.png") ;
angle: 0 deg;
opacity: 1;
width: 100%;
min-height:120vh;
background-color:#2F1893 ;
padding: 100px 216px ;
}
.form-container{
 padding:116px 0px;
}

.form-content{
width: 369px;
height: 318px;
angle: 0 deg;
opacity: 1;
/* border: 2px solid rgb(144, 3, 99); */

}


.problems-top{
 /* padding: 0; */
}
.problems_content{
width: 360px;
height: 208px;
angle: 0 deg;
opacity: 1;
/* top: 216px;
left: 216px; */
/* border: 2px solid rgb(51, 6, 92); */

}
.prolems_text{
font-family: 'DM Sans';
font-weight: 700;
font-size: 42px;
leading-trim: NONE;
line-height: 52px;
letter-spacing: -0.4px;
color:#FFFFFF;

}
/* .developer-content{

} */
.developer-top{
 padding:32px 0 0px 0;
}
.developer_content{
width: 339px;
height: 78px;
angle: 0 deg;
opacity: 1;
/* top: 456px;
left: 216px; */
/* border: 2px  solid  rgb(200, 8, 40); */

}
.developer_text{
font-family: DM Sans;
font-weight: 400;
font-size: 16px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;
color:#FFFFFF;

}




/* END */



/* START */

.input-container{
  padding: 0;
}



.input-content{
width: 470px;
height: 500px;
angle: 0 deg;
opacity: 1;
border: 2px solid rgb(31, 80, 2);
 background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  width: 350px;
  overflow: hidden; 

}


.tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
}


.tab {
  flex: 1;
  padding: 15px;
  font-size: 14px;
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
  color: #aaa;
  position: relative;
}

.tab.active {
  color: #333;
}

.tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0%;
  width: 100%;
  height: 2px;
  background: #3a2fc4;
  border-radius: 2px;
}


.signup-form {
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.signup-form input {
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 25px;
  font-size: 14px;
  outline: none;
  transition: border 0.3s;
}

.signup-form input:focus {
  border-color: #3a2fc4;
}


button {
  padding: 100px 15px;
  border: none;
  border-radius: 25px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  /* transition: background 0.3s; */
}

.btn.primary {
  background: #3dd7c4;
  color: #fff;
   width: 100%;
  padding: 12px 15px;   /* same padding as input */
  border-radius: 25px;
  font-size: 14px;
  box-sizing: border-box; /* keeps width consistent */
}

.btn.primary:hover {
  background: #2cb6a4;
}

.btn.twitter {
  background: #1da1f2;
  color: #fff;
   width: 100%;
  padding: 12px 15px;   
  border-radius: 25px;
  font-size: 14px;
  box-sizing: border-box; 
}

.btn.twitter:hover {
  background: #0d8ddb;
}


.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #aaa;
  font-size: 13px;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ddd;
}

.divider:not(:empty)::before {
  margin-right: 10px;
}

.divider:not(:empty)::after {
  margin-left: 10px;
}



/* ////END */




/* START///// */



.testimonial-container{
  display: flex;
  justify-content: center;
  align-items: center;
 width: 100%;
height: 800px;
angle: 0 deg;
opacity: 1;
background:#1E0E62 ;
margin: 0;
min-height: 140vh;
}

.testimonial_parent{
  width:950px;
  height: 700px;
  /* border: 3px solid orangered; */
}
.happy-container{

}

.happy-content{
width: 364px;
height: 52px;
angle: 0 deg;
opacity: 1;
/* top: 100px;
left: 215px; */
/* border: 2px solid burlywood; */

}


.client_text{
font-family: 'DM Sans';
font-weight: 700;
font-size: 42px;
leading-trim: NONE;
line-height: 52px;
letter-spacing: -0.4px;
color:#FFFFFF;

}
.website-container{
 display: flex;
 gap:30px;
 padding: 40px 0;
}

.website-content{
  display: flex;
  padding: 36px 35px;
  gap:30px;
width: 470px;
height: 237px;
angle: 0 deg;
opacity: 1;
/* top: 192px;
left: 215px; */
border-radius: 10px;
border: 2px solid rgb(234, 229, 230);

}

.site-content{
width: 230px;
height: 140px;
angle: 0 deg;
opacity: 1;
/* top: 35px;
left: 135px; */
/* border: 2px solid red; */

}

.site-content1{
width: 240px;
height: 140px;
angle: 0 deg;
opacity: 1;
/* top: 35px;
left: 135px; */
/* border: 2px solid rgb(13, 255, 0); */

}

.site-content2{
width: 240px;
height: 140px;
angle: 0 deg;
opacity: 1;
/* top: 35px;
left: 135px; */
/* border: 2px solid rgb(13, 255, 0); */

}

.site-content3{
width: 228px;
height: 44px;
angle: 0 deg;
opacity: 1;
/* letter-spacing: 6px; */
/* top: 35px;
left: 135px; */
/* border: 2px solid rgb(224, 13, 224); */

}

.user-content{
width: 141px;
height: 26px;
angle: 0 deg;
opacity: 0.3;
/* top: 188px;
left: 135px; */
/* border: 2px solid green; */
margin: 13px 0;

}

.user-content3{
width: 141px;
height: 26px;
angle: 0 deg;
opacity: 0.3;
/* top: 188px;
left: 135px; */
/* border: 2px solid green; */
margin:120px 0;

}

.user_text{
font-family: 'DM Sans';
font-weight: 700;
font-size: 12px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 2px;
text-transform: uppercase;

}

.website-content1{
  display: flex;
  padding: 36px 35px;
  gap:30px;
width: 470px;
height: 237px;
angle: 0 deg;
opacity: 1;
/* top: 192px;
left: 215px; */
border-radius: 10px;
border: 2px solid rgb(226, 236, 234);

}

.website-container2{
display: flex;
 gap:30px;
 padding: 40px 0;
}


.website-content2{
  display: flex;
  padding: 36px 35px;
  gap:30px;
  width: 470px;
height: 237px;
angle: 0 deg;
opacity: 1;
/* top: 192px;
left: 215px; */
border-radius: 10px;
border: 2px solid rgb(242, 237, 243);
}

.website-content3{
  display: flex;
  padding: 36px 35px;
  gap:30px;
  width: 470px;
height: 237px;
angle: 0 deg;
opacity: 1;
/* top: 192px;
left: 215px; */
border-radius: 10px;
border: 2px solid rgb(218, 207, 220);
}

.happy_image1{
width: 70px;
height: 70px;
angle: 0 deg;
opacity: 1;
/* top: 36px;
left: 35px; */
border-radius: 10px;
/* border: 2px solid red; */

}

.happy_text1{
width: 307px;
height: 179px;
angle: 0 deg;
opacity: 1;
/* top: 35px;
left: 135px; */
/* border: 2px solid yellow; */
color:white;

}


/* END//// */




/* START */



.action-container{
  display: flex;
  justify-content: center;
  background-image: url("./images/Background1.png");
  angle: 0 deg;
opacity: 1;
padding: 85px 0;
  width: 100%;
 height:90vh;
  background-color:#2F1893 ;

}

.action_content{
width: 770px;
height: 277px;
angle: 0 deg;
opacity: 1;
/* top: 100px;
left: 315px; */
/* border:2px solid red */

}

.action_content1{
  display: flex;
  gap:30px;
width: 313px;
height: 70px;
angle: 0 deg;
opacity: 1;
/* top: 435px;
left: 544px; */
/* border: 2px solid yellow; */

}
.action-child{
  display: flex;
  justify-content: center;
  padding: 58px 0;
}
.action-set{
width: 770px;
height: 150px;
/* border: 2px solid green; */
}

.set-text{
font-family: 'DM Sans';
font-weight: 700;
font-size: 58px;
leading-trim: NONE;
line-height: 70px;
letter-spacing: -1px;
text-align: center;
color:#FFFFFF;

}
.boot-content{
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.boot_dev{
width: 418px;
height: 96px;
angle: 0 deg;
opacity: 1;
/* top: 281px;
left: 441px; */
/* border:2px solid rgb(0, 115, 128) */

}

.boot-text{
  font-family: 'DM Sans';
font-weight: 500;
font-size: 22px;
leading-trim: NONE;
line-height: 32px;
letter-spacing: 0px;
text-align: center;
color:#fff;

}
.action-shape{
  
width: 70px;
height: 70px;
angle: 0 deg;
padding: 2px 2px;
opacity: 1;
/* top: 435px;
left: 544px; */
/* border:2px solid  blueviolet; */

}
.action-box{
  position: relative;
width: 60px;
height: 60px;
background: red;
border-radius: 50%;;
}
.play-icon1{
  position: absolute;
 width: 16px;
height: 16px;
angle: 0 deg;
 opacity: 1;
top: 22px;
left: 18px; 
/* border: 2px  solid yellow; */


}
.fa-play{
  font-family: 'FontAwesome';
font-weight: 400;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0px;
text-align: center;
vertical-align: middle;
 color:#FFFFFF;
}
.started_content{
width: 213px;
height: 70px;
angle: 0 deg;
/* opacity: 1;
top: 435px;
left: 644px; */
/* border: 2px solid rgb(102, 54, 5); */

}

.start-btn{
  padding: 20px 80px;
font-family: 'DM Sans';
font-weight: 500;
font-size: 10px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;
text-align: center;
vertical-align: middle;
color:#FFFFFF;
background: #3dd7c4;
border-radius: 40px;

}



/* END//// */





/* START//// */




.showcase-container{
  display: flex;
  justify-content: center;
  angle: 0 deg;
opacity: 1;
padding: 85px 0;
  width: 100%;
  min-height:190vh;
  margin: 0;
  background-color:#2F1893 ;
}
.works-content{
  display: flex;
  justify-content: space-between;
  width: 970px;
height: 52px;
angle: 0 deg;
/* opacity: 1;
top: 100px;
left: 215px; */
/* border: 2px solid brown; */

}
.project-parent{
  padding: 52px 0;
}
.project_content{
 
  width: 970px;
height: 816px;
angle: 0 deg;
opacity: 1;
top: 205px;
left: 215px;
border-radius: 10px;
/* border: 2px solid orangered; */

}

.display_parent{
  display: flex;
  gap: 30px;
}

.display_parent1{
  display: flex;
  gap: 30px;
  padding: 74px 0;
}

 

.works-parent{
width: 213px;
height: 52px;
angle: 0 deg;
/* opacity: 1;
top: 100px;
left: 215px; */
/* border:2px solid aqua; */

}
.works-text{
font-family: 'DM Sans';
font-weight: 400;
font-size: 32px;
leading-trim: NONE;
line-height: 52px;
letter-spacing: -0.4px;
color:#FFFFFF;

}
.view-btn{
  padding: 15px 30px;
  border-radius: 80px;
  background: #1E0E62;
  color: #fff;
  border: 1px solid rgb(228, 225, 225);
}

.project-show{
width: 470px;
height: 371px;
angle: 0 deg;
opacity: 1;
/* top: 205px;
left: 215px; */
border-radius: 10px;
/* border: 2px solid red; */

}

.project-show1{
width: 470px;
height: 371px;
angle: 0 deg;
opacity: 1;
/* top: 205px;
left: 215px; */
border-radius: 10px;
/* border: 2px solid rgb(58, 179, 10); */

}
.project_image{
width: 470px;
height: 280px;
angle: 0 deg;
opacity: 1;
/* top: 205px;
left: 215px; */
border-radius: 10px;
/* border:2px solid yellow; */

}
.mozart_parent{
 display: flex;
 justify-content: center;
 padding: 30px 0;

}
.mozart-content{
  display: flex;
  justify-content: center;
  width: 152px;
height: 61px;
angle: 0 deg;
opacity: 1;
/* top: 515px;
left: 373.5px; */
/* border:2px solid rgb(65, 228, 11); */
}
.word-parent{
width: 50px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 515px;
left: 424px; */
/* border: 2px solid aqua; */

}

.text-channel{
  display: flex;
  justify-content: center;
}
.word-parent1{
 width: 152px;
height: 32px;
angle: 0 deg;
opacity: 1;
/* top: 544px;
left: 373.5px; */
/* border: 2px solid red; */
 
}
.text-kit{
font-family: 'DM Sans';
font-weight: 700;
font-size: 10px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
color:#fff;

}
.text-mozart{
font-family: 'DM Sans';
font-weight: 500;
font-size: 20px;
leading-trim: NONE;
line-height: 32px;
letter-spacing: 0px;
text-align: center;
color: #fff;

}
.word-framework{
width: 120px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 515px;
left: 896px; */
/* border: 2px solid orange; */

}
.text__frame{
font-family: 'DM Sans';
font-weight: 700;
font-size: 10px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
color:#fff;

}


.word-parent2{
 width: 237px;
height: 32px;
angle: 0 deg;
opacity: 1;
/* top: 544px;
left: 373.5px; */
/* border: 2px solid rgb(6, 120, 80); */
 
}
.text-figure{
font-family: 'DM Sans';
font-weight: 500;
font-size: 20px;
leading-trim: NONE;
line-height: 32px;
letter-spacing: 0px;
text-align: center;
color:#fff;

}
.word-photo{
width: 69px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 960px;
left: 415px; */
/* border:2px solid rgb(244, 185, 23) */

}
.text-photo{
font-family: 'DM Sans';
font-weight: 700;
font-size: 10px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
color:#fff;

}
.word-parent3{
width: 137px;
height: 32px;
angle: 0 deg;
opacity: 1;
/* top: 989px;
left: 382px; */
/* border:2px  solid rgb(0, 255, 187); */

}
.text-sky{
  font-family: 'DM Sans';
font-weight: 500;
font-size: 20px;
leading-trim: NONE;
line-height: 32px;
letter-spacing: 0px;
text-align: center;
color: #fff;

}
.word-pix{
width: 82px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 960px;
left: 909px; */
/* border:2px solid rgb(6, 174, 215); */

}
.text-pics{
  font-family: 'DM Sans';
font-weight: 700;
font-size: 10px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
color:#fff;

}
.word-parent4{
width: 105px;
height: 32px;
angle: 0 deg;
opacity: 1;
/* top: 989px;
left: 897.5px; */
/* border:2px  solid rgb(5, 74, 101); */

}
.text-forces{
  font-family: 'DM Sans';
font-weight: 500;
font-size: 20px;
leading-trim: NONE;
line-height: 32px;
letter-spacing: 0px;
text-align: center;
color:#fff;

}



/* END//// */



/* START///// */


.team-container{
  padding: 100px 115px;
  width: 100%;
  min-height:190vh;
  margin:0;
  background-color:#2F1893 ;
  
}
.team-content{
  width:800px;
  height: 900px;
  /* border: 2px solid rgb(0, 124, 128); */
}

.crew-container{
width: 754px;
height: 179px;
angle: 0 deg;
opacity: 1;
/* top: 100px;
left: 115px; */
/* border:2px solid red; */

}
.crew-parent{
width: 265px;
height: 52px;
angle: 0 deg;
opacity: 1;
/* top: 100px;
left: 115px; */
/* border:2px solid rgb(43, 226, 233) */

}
.crew_text{
  font-family:'DM Sans';
font-weight: 700;
font-size: 42px;
leading-trim: NONE;
line-height: 52px;
letter-spacing: -0.4px;
color:#fff;

}
.crew-childover{
  padding: 30px 0;


}
.crew-child{
width: 660px;
height: 96px;
angle: 0 deg;
opacity: 1;
/* top: 183px;
left: 115px; */
/* border: 2px solid yellow; */
}
.text_blocks{
  font-family:'DM Sans';
font-weight: 500;
font-size: 22px;
leading-trim: NONE;
line-height: 32px;
letter-spacing: 0px;
color:#fff;

}
.crew-flow{
   padding: 70px 0;
}

.crew-container2{
 
width: 754px;
height: 543px;
angle: 0 deg;
opacity: 1;
/* top: 100px;
left: 115px; */
/* border:2px solid rgb(227, 220, 15); */

}
.unique-crew{
   display: flex;
  gap:146px;
}

.unique-crew2{
   display: flex;
  gap:144px;
  padding: 60px 0;
}

.persons-container{
   display: flex;
  gap:144px;
}

.persons-container2{
   display: flex;
  gap:144px;
}

.persons-container{
   display: flex;
  gap:144px;
}
.persons-parent{
width: 154px;
height: 241px;
angle: 0 deg;
opacity: 1;
/* top: 349px;
left: 115px; */
/* border:2px solid orangered; */

}

.face1{
  width:100px;
  height: 100px;
  border-radius: 50%;
}
.name_text{
font-family: 'DM Sans';
font-weight: 500;
font-size: 22px;
leading-trim: NONE;
line-height: 32px;
letter-spacing: 0px;
color:#fff;

}
.image-face{
width: 100px;
height: 100px;
angle: 0 deg;
opacity: 1;
/* top: 349px;
left: 116px; */
/* border:2px solid aqua; */

}

.name__content{
  padding: 17px 0;
}

.name__content1{
  padding: 17px 0;
}

.icon-coverup{
 padding: 20px 0;
}
.icon-top{
  display: flex;
  gap: 25px;
width: 154px;
height: 38px;
angle: 0 deg;
opacity: 1;
/* top: 552.2px;
left: 115px; */
/* border: 2px solid  rgb(233, 169, 19); */

}
.fa-twitter,
.fa-square-facebook,
.fa-basketball,
.fa-instagram,.fa-skype,.fa-git,.fa-medium-m{
  color:#fff;
}

.twitter{
width: 17px;
height: 38px;
angle: 0 deg;
opacity: 1;
/* top: 552.2px;
left: 115px; */
/* border:2px solid greenyellow */

}

.facebook{
width: 16px;
height: 38px;
angle: 0 deg;
opacity: 1;
/* top: 552.2px;
left: 115px; */
/* border:2px solid greenyellow */

}

.ball{
width: 17px;
height: 38px;
angle: 0 deg;
opacity: 1;
/* top: 552.2px;
left: 115px; */
/* border:2px solid greenyellow */

}

.instagram{
width: 17px;
height: 38px;
angle: 0 deg;
opacity: 1;
/* top: 552.2px;
left: 115px; */
/* border:2px solid greenyellow */

}

.name_cover{
width: 145px;
height: 66px;
angle: 0 deg;
opacity: 1;
/* top: 466px;
left: 115px; */
/* border:2px solid orangered */

}

.name_cover1{
width: 165px;
height: 66px;
angle: 0 deg;
opacity: 1;
/* top: 466px;
left: 115px; */
/* border:2px solid orangered */

}

.name_cover2{
width: 196px;
height: 66px;
angle: 0 deg;
opacity: 1;
/* top: 466px;
left: 115px; */
/* border:2px solid orangered */

}

.skill{
width: 84px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 506.2px;
left: 115px; */
/* border: 2px solid cornflowerblue; */

}

.skill1{
width: 90px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 506.2px;
left: 115px; */
/* border: 2px solid cornflowerblue; */

}

.skill1{
width: 155px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 506.2px;
left: 115px; */
/* border: 2px solid cornflowerblue; */

}

.skill2{
width: 140px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 506.2px;
left: 115px; */
/* border: 2px solid cornflowerblue; */

}
.design{
  font-family: 'DM Sans';
font-weight: 400;
font-size: 16px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;
color:#fff;

}

.persons-parent2{
width: 165px;
height: 241px;
angle: 0 deg;
opacity: 1;
/* top: 349px;
left: 115px; */
/* border:2px solid rgb(10, 201, 178); */

}

.persons-parent3{
width: 143px;
height: 241px;
angle: 0 deg;
opacity: 1;
/* top: 651px;
left: 115px; */
/* border:2px solid rgb(229, 45, 171); */

}

.persons-parent4{
width: 196px;
height: 241px;
angle: 0 deg;
opacity: 1;
/* top: 651px;
left: 415px; */
/* border:2px solid rgb(12, 154, 109); */

}

/* END////// */




/* START */



.contact-container{
  display: flex;
  gap:89px;
   background-image: url('./images/Background8.png');
  padding: 0px 215px;
  width: 100%;
  min-height:125vh;
  margin: 0;
  background-color:#2F1893 ;
  
}
.contact-over{
  padding: 150px 0;
}
.contact-content{

}
.touch-content{
 width: 410px;
height: 208px;
angle: 0 deg;
opacity: 1;
/* top: 150px;
left: 215px; */
/* border:2px solid orangered; */

}

.touch-sub{
width: 410px;
height: 52px;
/* top: 150px;
left: 215px; */
angle: 0 deg;
opacity: 1;
/* border: 2px solid aqua; */

}
.touch_text{
  font-family:'DM Sans';
font-weight: 700;
font-size: 42px;
leading-trim: NONE;
line-height: 52px;
letter-spacing: -0.4px;
color:#fff;

}
.touch-devel{
  padding: 28px 0;
 

}
.touch-sub1{
width: 345px;
height: 128px;
/* top: 230px;
left: 216px; */
angle: 0 deg;
opacity: 1;
/* border:2px solid green; */
}
.text-comp{
  font-family:'DM Sans';
font-weight: 500;
font-size: 22px;
leading-trim: NONE;
line-height: 32px;
letter-spacing: 0px;
color: #fff;

}

.phone-content{
  display: flex;
  gap:15px;
}

.phone-content1{
  display: flex;
  gap:15px;
  padding: 32px 0;
}

.phone-content2{
  display: flex;
  gap:15px;
  padding: 10px 0;
}

.phone-dime{
width: 15px;
height: 38px;
/* top: 411.2px;
left: 217px; */
angle: 0 deg;
opacity: 1;
/* border: 2px solid red; */

}
.envelpe-cover{
  width: 18px;
height: 38px;
/* top: 481.2px;
left: 215.5px; */
angle: 0 deg;
opacity: 1;
/* border: 2px solid green; */

}
.fa-phone{
  font-family:'FontAwesome';
font-weight: 400;
font-size: 18px;
leading-trim: NONE;
line-height: 38px;
letter-spacing: 0px;
text-align: center;
color:#fff;

}
.fa-envelope{
  font-family:'FontAwesome';
font-weight: 400;
font-size: 18px;
leading-trim: NONE;
line-height: 38px;
letter-spacing: 0px;
text-align: center;
color:#fff;

}
.fa-building{
font-family: 'FontAwesome';
font-weight: 400;
font-size: 18px;
leading-trim: NONE;
line-height: 38px;
letter-spacing: 0px;
text-align: center;
color:#fff;
}

.phone-dime1{
width: 241px;
height: 26px;
/* top: 411.2px;
left: 247px; */
angle: 0 deg;
opacity: 1;

/* border: 2px solid rgb(166, 255, 0); */

}
.number{
  font-family:'DM Sans';
font-weight: 400;
font-size: 16px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;
color:#fff;
}
.email{
  font-family:'DM Sans';
font-weight: 400;
font-size: 16px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;
color:#fff;

}
.location-place{
width: 252px;
height: 78px;
/* top: 551.2px;
left: 247px; */
angle: 0 deg;
opacity: 1;
/* border:2px solid orangered; */

}
.location{
  font-family:'DM Sans';
font-weight: 400;
font-size: 16px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;
color:#fff;

}

.venue-over{
  padding: 53px 0;
}


.venue-content{
width: 252px;
height: 218px;
angle: 0 deg;
opacity: 1;
/* top: 411.2px;
left: 215.5px; */
/* border:2px solid rgb(8, 225, 225); */

}

/* 
.contact-form{
  padding:100px 0;
  
}
.contactform-content{
width: 470px;
height: 570px;
angle: 0 deg;
opacity: 1;

border: 2px solid purple;

} */



    .contact-form {
      padding: 100px 0;
    }

    .contactform-content {
      width: 470px;
      height: 570px;
      border: 2px solid purple; /* just for visual debug */
      border-radius: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
    }

    .form-container {
      width: 100%;
      height: 100%;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    label {
      /* display: block;
      font-size: 12px;
      font-weight: bold;
      margin-bottom: 6px;
      color: #333;
      text-transform: uppercase;
      letter-spacing: 1px; */
    }
    label{
      font-family: 'DM Sans';
        font-weight: 700;
        font-size: 14px;
        leading-trim: NONE;
        line-height: 26px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color:#1E0E62;

    }

    .input-row {
      display: flex;
      gap: 15px;
      padding: 50px 0;
    }

    input, select, textarea {
      width: 100%;
      padding: 12px;
      border-radius: 25px;
      border: 1px solid #ddd;
      font-size: 14px;
      outline: none;
      box-sizing: border-box;
    }

    .input-content{
      /* margin-top: 35px; */
    }

    .message-content{
      padding: 35px 0;
    }

    textarea {
      border-radius: 12px;
      resize: none;
      height: 100px;
    }

    .flow-fill{
      display: flex;
      gap: -30px;
      /* padding-left:-90px; */
    }
    .button-send{
      padding: 0px 0px 0 170px;
    }

    .checkbox-row {
      display: flex;
      margin-top: 10px;
      font-size: 14px;
      color: #555;
    }
    .clear{
      /* padding: 2px 0 0 0px; */
    }

    .lake-parent{
      display: flex;
      gap: 10px;
    }

    .copy-content{
      width: 100px;
      height: 26px;
      angle: 0 deg;
      opacity: 1;
      /* top: 579px;
      left: 796px; */
      /* border: 2px solid red; */

    }
    .copy-text{
      font-family: 'DM Sans';
      font-weight: 400;
      font-size: 14px;
      leading-trim: NONE;
      line-height: 26px;
      letter-spacing: 0px;

    }

    .checkbox-row input {
      margin-right: -30px;
      accent-color: #27d8b9;
    }

    .send-btn {
      background: linear-gradient(135deg, #20e3b2, #2cccff);
      border: none;
      color: white;
      font-size: 16px;
      font-weight: bold;
      padding: 12px 40px;
      border-radius: 25px;
      cursor: pointer;
      align-self: flex-end;
      transition: 0.3s ease;
    }

    .send-btn:hover {
      opacity: 0.85;
    }


    /* END ////// */




    /* START//// */

    .pricing-container {
  position: relative;
  display: flex; 
  justify-content: center;
  /* padding: 100px 0px; */
  width: 100%; 
  min-height: 180vh; 
  margin: 0;
  background: url('./images/Mask12.png') no-repeat center center;
  background-size: cover;
  padding: 20px 0;
}

.pricing-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  /* background-color: rgba(32, 35, 195, 0.6); */
   background-color:rgba(47,24,147,0.6) ;
  z-index: 0;
}

.pricing-container > * {
  position: relative;
  z-index: 1; /* keep content above overlay */
}

.pricing-content{
 
  width:100%;
  height: auto;
  /* border: 2px solid orangered; */
}

.plan-parent{
  display: flex;
  justify-content: center;
}

.plan-content1{
  
width: 586px;
height: 146px;
angle: 0 deg;
opacity: 1;
/* border: 2px solid green; */

}

.plan-parent1{
  padding: 60px 0;
   display: flex;
  justify-content: center;
}

.overhead-content{
  display: flex;
  justify-content: center;
}
.domain-overhead{
   display: flex;
  justify-content: center;
  padding: 30px 0;
}

.plan-overhead{
width: 294px;
height: 52px;
angle: 0 deg;
opacity: 1;
/* top: 100px;
left: 553.5px; */
/* border:2px solid rgb(234, 0, 255); */

}
.plan_text{
font-family:'DM Sans';
font-weight: 700;
font-size: 42px;
leading-trim: NONE;
line-height: 52px;
letter-spacing: -0.4px;
text-align: center;
color:#FFFFFF;

}

.domain-content{
width: 546px;
height: 64px;
angle: 0 deg;
opacity: 1;
/* top: 182px;
left: 408px; */
/* border:2px solid rgb(160, 201, 11); */

}
.domain_text{
font-family: 'DM Sans';
font-weight: 500;
font-size: 22px;
leading-trim: NONE;
line-height: 32px;
letter-spacing: 0px;
text-align: center;
color:#FFFFFF;

}

.plan-content2{
width: 100%;
height: auto;
angle: 0 deg;           
opacity: 1;
/* top: 100px;
left: 408px; */
/* border: 2px solid rgb(128, 38, 0); */

}

.collabo-content{
  display: flex;
  justify-content: center;
  gap:30px;
}

.starter-box{
width: 370px;
height: 730px;
angle: 0 deg;
opacity: 1;
/* top: 300px;
left: 115px; */
border-radius: 6px;
border: 2px solid rgba(255, 255, 255, 0.5)

}

.starter-parent{
  padding: 64px 167px 0 69px;
}
.starter-content{
  width:134px;
height: 124px;
angle: 0 deg;
opacity: 1;
/* top: 364.2px;
left: 184px; */
/* border: 2px solid rgb(219, 201, 5); */

}
.starter-head{
width: 73px;
height: 32px;
angle: 0 deg;
opacity: 1;
/* top: 364.2px;
left: 184px; */
/* border: 2px solid rgb(45, 194, 7); */

}
.amount-parent{
  padding: 22px 0;
  display: flex;
}
.amount-content{
width: 117px;
height: 70px;
angle: 0 deg;
opacity: 1;
/* top: 418.8px;
left: 184px; */
/* border: 2px solid yellow; */

}
.amount_text{
font-family:'DM Sans';
font-weight: 700;
font-size: 58px;
leading-trim: NONE;
line-height: 70px;
letter-spacing: -1px;
text-align: center;
color:#FFFFFF;

}
.currency-parent{
  padding: 8px 0 0 0;
}
.currency-content{
width: 10px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 430.4px;
left: 308px; */
/* border:2px solid red; */

}
.currency_text{
font-family: DM Sans;
font-weight: 400;
font-size: 16px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;
color:#FFFFFF;

}
.starter_text{
font-family:'DM Sans';
font-weight: 500;
font-size: 22px;
leading-trim: NONE;
line-height: 32px;
letter-spacing: 0px;
color:#FFFFFF;

}
.starterlist-parent{
 padding: 44px 155px 0 44px;
}
.starterlist-content{
width: 171px;
height: 350px;
angle: 0 deg;
opacity: 1;
/* top: 533.4px;
left: 159px; */
/* border:2px solid rgb(128, 0, 105); */

}
.check-parent{
 display: flex;
 gap:15px;
}

.check-parent1{
 display: flex;
 gap:15px;
 
}
.check-content{
 padding: 4px 0;
 width: 17px;
height: 12px;
angle: 0 deg;
opacity: 1;
/* top: 537px;
left: 159px; */
/* border: 2px solid red; */

}
.image-check{
    padding: 0px 0;
}
.space-content1{
  padding: 0 0 0px 28px;
  margin:8px 0;
}

.space-content2{
  padding: 0 0 0px 0px;
  margin:4px 0;
}

.space-content3{
  padding: 0 0 0px 0px;
  margin:4px 0;
}

.space-content4{
  padding: 0 0 0px 28px;
  margin:8px 0;
}
.space-content{
width: 140px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* margin: 8px 0; */
/* top: 533.4px;
left: 186px; */
/* border:2px solid green; */

}
.space_text{
  font-family:'DM Sans';
font-weight: 400;
font-size: 16px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;
color:#fff;

}

.space-text{
  color: rgba(255, 255, 255, 0.5);
}

.space_text1{
  color: rgba(255, 255, 255, 0.5);
}
.beginstart-parent{
  padding: 30px 70px 56px 70px;
}
.beginbutton-parent{
width: 230px;
height: 60px;
angle: 0 deg;
opacity: 1;
/* top: 914px;
left: 185px; */
/* border:2px solid rgb(231, 172, 23); */

}



.begin-btn {
  width: 230px;
  height: 60px;
  font-size: 18px;              /* slightly bigger text */
  font-weight: bold;            /* makes text sharper */
  /* color: white;  */
   padding: 20px 15px;
  color: rgba(255, 255, 255, 0.5);               /* strong text color */
  border: 2px solid rgba(255, 255, 255, 0.5);      /* sharp visible border */
  background-color:rgba(47,24,147,0.0) ; 
  /* background-color: #E93A7D; */
  border-radius: 30px;          /* keep rounded corners */
  cursor: pointer;
  opacity: 1;                   /* fully visible */
  text-shadow: 0 0 3px rgba(0,0,0,0.5);  /* optional glow for clarity */
}
.color-btn{
   width: 230px;
  height: 60px;
  font-size: 18px;              
  font-weight: bold;            
  color: white; 
   padding: 20px 15px;
  /* color: rgba(255, 255, 255, 0.5);               */
  /* border: 2px solid rgba(255, 255, 255, 0.5);       */
  /* background-color:rgba(47,24,147,0.6) ;  */
  background-color: #E93A7D;
  border-radius: 30px;          
  cursor: pointer;
  opacity: 1;                   
  /* text-shadow: 0 0 3px rgba(0,0,0,0.5);   */
}


.proffessional-box{
width: 370px;
height: 730px;
angle: 0 deg;
opacity: 1;
/* top: 300px;
left: 115px; */
border-radius: 6px;
border: 2px solid rgba(255, 255, 255, 0.5);

}



.proffessional-parent{
  padding: 64px 167px 0 69px;
}
.proffessional-content{
  width:134px;
height: 124px;
angle: 0 deg;
opacity: 1;
/* top: 364.2px;
left: 184px; */
/* border: 2px solid rgb(5, 219, 158); */

}

.proff-head{
width: 127px;
height: 32px;
angle: 0 deg;
opacity: 1;
/* top: 364.2px;
left: 584px; */
/* border:2px solid aqua; */

}
.amount-content1{
  width:136px;
height: 70px;
angle: 0 deg;
opacity: 1;
/* top: 418.8px;
left: 595px; */
/* border:2px solid orangered; */

}

.team-box{
width: 370px;
height: 730px;
angle: 0 deg;
opacity: 1;
/* top: 300px;
left: 115px; */
border-radius: 6px;
border: 2px solid rgba(255, 255, 255, 0.5)

}
.currency-parent1{
  padding: 0 0 0 10px;
}


/* END/// */



/* START */


.footer-container{
  /* display: flex; */
  justify-content: center;
  /* gap:89px; */
  /* padding: 0px 215px; */
  width: 100%;
  min-height:50vh;
  margin: 0;
  background-color:#2F1893 ;
}

.footer-parent{
  display: flex;
  justify-content: center;
  padding: 49px 0;
}

.footer-content{
   display: flex;
  justify-content: space-between;
  width: 1200px;
height: 29px;
padding: 3px 0;
angle: 0 deg;
/* opacity: 1;
top: 100px;
left: 215px; */
/* border: 2px solid rgb(18, 211, 233); */
}
.footerline-parent{
  display: flex;
  justify-content: center;
  /* padding: 40px 116px 0 115px; */
}
.footerline-content{
width: 1200px;
height: 2px;
angle: 0 deg;
opacity: 0.3;
/* top: 120px;
left: 116px; */
border-width: 2px;
background-color: #f9f5f5;

}
.footerhead-over{
  display: flex;
  justify-content: space-between;
width: 180px;
height: 20px;
angle: 0 deg;
opacity: 1;
/* top: 54px;
left: 115px; */
/* border:2px solid yellow; */

}
.footerword-cover{
width: 106px;
height: 20px;
angle: 0 deg;
opacity: 1;
/* top: -6px;
left: 2px; */
/* border: 2px solid red; */

}
.start-foot{
 font-family: 'DM Sans';
font-weight: 700;
font-size: 24px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: -0.29px;
text-align: center;
color:#FFFFFF;
}
.privacy-parent{
  display: flex;
  gap: 27px;
width: 310px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 49.4px;
left: 971px; */
/* border:2px solid orangered */

}
.privacy-content{
width: 102px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 49.4px;
left: 971px; */
/* border: 2px  solid yellow; */

}
.policy-text{
font-family:' DM Sans';
font-weight: 400;
font-size: 16px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;
color:#FFFFFF;

}
.terms-parent{
 display: flex;
 gap: 30px;
}
.social-parent{
width: 110px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 53.2px;
left: 1175px; */
/* border:2px solid red; */

}
.terms-text{
font-family: DM Sans;
font-weight: 400;
font-size: 16px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;
color: #FFFFFF;
}
.social-content{
  display: flex;
  gap: 29px;
}
.google{
  width: 17px;
height: 38px;
angle: 0 deg;
opacity: 1;
/* top: 552.2px;
left: 115px; */
/* border:2px solid greenyellow; */
}
.fa-google-plus-g{
  color:#FFFFFF;
}


.footer-parent1{
  display: flex;
  justify-content: center;
  padding: 49px 0;
}

.footer-content1{
   display: flex;
  justify-content: space-between;
  width: 1190px;
height: 29px;
padding: 3px 0;
angle: 0 deg;
/* opacity: 1;
top: 100px;
left: 215px; */
/* border: 2px solid rgb(18, 211, 233); */
}

.footer-under{
  width:480px;
  height: 26px;
  /* border:2px solid purple; */
}

.footer-service{
   display: flex;
   gap: 29px;
}

.tour_content{
width: 32px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 169.4px;
left: 115px; */
/* border:2px solid aqua; */

}

.priplan_content{
width: 93px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 169.4px;
left: 267px; */
/* border:2px solid aqua; */

}

.Oworks_content{
width: 78px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 169.4px;
left: 267px; */
/* border:2px solid aqua; */

}
.tour-text{
font-family:'DM Sans';
font-weight: 400;
font-size: 16px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;
color:#FFFFFF;

}
.copy-under{
width: 292px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 169.4px;
left: 993px; */
/* border:2px solid rgb(234, 12, 57); */

}
.copy-content{
width: 292px;
height: 26px;
angle: 0 deg;
opacity: 1;
top: 169.4px;
left: 993px;

}
.reserved_text{
font-family:'DM Sans';
font-weight: 400;
font-size: 16px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0px;
text-align: right;
color:#FFFFFF;

}

/* ============================
   Tablet Responsive (max 768px)
   ============================ */
@media (max-width: 768px) {

  .community-hero {
    height: auto; /* let content decide height */
    padding: 50px 20px;
    background-position: center;
    background-size: cover;
     height:180vh;
  }

  /* NAVIGATION */
  .community-hero nav ul {
    flex-direction: column;  /* stack nav items */
    gap: 20px;
    align-items: center;
  }

  .community-hero nav ul li {
    text-align: center;
  }

  .behance-logo {
    font-size: 20px;
    left: 0;
    top: 0;
  }

  /* STARTUP SECTION */
  .parent-startup {
    margin: 60px 0;
    padding: 0 20px;
  }

  .startup-container {
    width: 100%;
    height: auto;
  }

  .startup-content {
    font-size: 20px;
  }

  .forget {
    font-size: 42px;   /* smaller heading */
    line-height: 50px;
  }

  .framework-content {
    width: 100%;
    padding: 15px 0;
  }

  .framework {
    font-size: 16px;
    line-height: 24px;
  }

  /* CIRCLES */
  .circle-content {
    margin: -70px 0;
    width: auto;
    justify-content: center;
    gap: 15px;
  }

  .circle, .circle1 {
    width: 8px;
    height: 8px;
  }

  /* BUTTON */
  .account-button {
    padding: 10px;
    margin: 0  0 10px 0;
    /* background-color: red; */
  }

  .button-content {
    margin: 0;
    width: 200px;
    height: 50px;
  }

  .account-btn {
    width: 200px;
    height: 50px;
    font-size: 16px;
    /* background-color: red; */
  }
    /* Container */
  .sample-container {
    padding: 60px 20px;
    margin:  0;
    height: auto; /* allow flexible height */
    background-size: cover;
    background-position: center;
  }

  /* Content wrapper */
  .sample-content {
    width: 100%;   /* full width */
    max-width: 600px;
    height: auto;
    border: none;  /* remove dev border */
  }

  /* Free Sample text */
  .free-content {
    height: auto;
    border: none; /* remove dev border */
  }

  .free-text {
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  /* Heading */
  .parent-powerful {
    padding: 20px;
  }

  .powerful-content {
    width: 100%;
    height: auto;
    border: none;
  }

  .generator {
    font-size: 36px;    /* smaller on tablet */
    line-height: 46px;
    padding: 0 10px;
  }

  /* Paragraph */
  .parent-complex {
    padding: 20px;
  }

  .complex-content {
    width: 100%;
    height: auto;
    border: none;
  }

  .complex-text {
    font-size: 16px;
    line-height: 24px;
    padding: 0 10px;
  }

  .features-container {
    height: auto; /* let it grow naturally */
    padding: 60px 20px;
    margin: 0;
    background-size: cover;
    background-position: center;
  }

  /* Layout changes: stack vertically */
  .feature-overhead {
    flex-direction: column;
    align-items: center;
    height: auto;
    gap: 40px;
    padding: 20px 0;
  }

  /* Image mockup */
  .features-content {
    width: 100%;
    max-width: 400px;
    height: auto;
    border: none;
  }

  .screen {
    width: 100%;
    height: auto;
  }

  /* Right content */
  .create_container {
    width: 100%;
    max-width: 600px;
    padding: 20px;
    border: none;
    background: transparent; /* remove debug bg */
  }

  .creatNew-content {
    width: 100%;
    height: auto;
    border: none;
  }

  .create_text {
    font-size: 28px;   /* smaller heading */
    line-height: 36px;
    text-align: center;
  }

  .parent-company {
    padding: 20px 0;
  }

  .company-content {
    width: 100%;
    height: auto;
    border: none;
  }

  .company_text {
    font-size: 16px;
    line-height: 24px;
    text-align: center;
  }

  /* Features + Symbols */
  .useful-container {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 20px 0;
  }

  .pages-content,
  .symbols-content {
    width: 100%;
    max-width: 500px;
    height: auto;
    border: none;
    text-align: center;
  }

  .features_text {
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  .blocks-content,
  .symbol-content {
    width: 100%;
    height: auto;
    border: none;
  }

  .blocks_text,
  .symbol_text {
    font-size: 14px;
    line-height: 22px;
  }

  /* Circles */
  .circle-flow2 {
    padding: 40px 0;
    display: flex;
    justify-content: center;
  }

  .circle_content1 {
    width: auto;
    rotate: 0; /* reset the 90deg rotate */
    border: none;
  }

  .circle, .circle1 {
    width: 8px;
    height: 8px;
  }


  .form-parent {
    flex-direction: column;   /* stack vertically */
    align-items: center;      /* center content */
    gap: 50px;                /* reduce spacing */
    padding: 60px 20px;
    height: auto;             /* let content grow naturally */
    background-size: cover;
    background-position: center;
  }

  /* Left text section */
  .form-container {
    padding: 0;
    text-align: center;
  }

  .form-content {
    width: 100%;
    max-width: 500px;
    height: auto;
  }

  .problems-top{
    padding: 0 0 0 100px;
  }

  .developer-top{
    padding: 0 0 0 100px;
  }

  .problems_content {
    width: 100%;
    max-width: 480px;
    height: auto;
    border: none; /* remove debug border */
    margin: 0 auto;
  }

  .prolems_text {
    font-size: 28px;   /* smaller text */
    line-height: 36px;
    letter-spacing: -0.2px;
  }

  .developer_content {
    width: 100%;
    max-width: 480px;
    height: auto;
    border: none;
    margin: 0 auto;
  }

  .developer_text {
    font-size: 14px;
    line-height: 22px;
  }

  /* Right form section */
  .input-container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }

  .input-content {
    padding: 20px;
    /* background: rgba(255, 255, 255, 0.05); */
    border-radius: 8px;
  }

  .tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
  }

  .signup-form input {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    margin-bottom: 15px;
    border-radius: 6px;
    border: 1px solid #ccc;
  }

  .btn {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    border-radius: 6px;
    margin-bottom: 12px;
  }

  .divider {
    margin: 20px 0;
    text-align: center;
    color: #fff;
  }


  
  .testimonial-container {
    height: auto;   /* let height adjust */
    padding: 60px 20px;
  }

  .testimonial_parent {
    width: 100%;
    height: auto;
  }

  .happy-content {
    margin: 0 auto;
    text-align: center;
  }

  /* Stack testimonial cards vertically */
  .website-container,
  .website-container2 {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
  }

  /* Reduce card width */
  .website-content,
  .website-content1,
  .website-content2,
  .website-content3 {
    width: 100%;
    max-width: 500px;   /* keeps cards neat */
    height: auto;
    flex-direction: column; /* stack image and text */
    align-items: center;
    text-align: center;
  }

  .happy_image1 {
    margin-bottom: 15px;
  }

  .happy_text1 {
    width: 100%;
    height: auto;
  }

  .site-content,
  .site-content1,
  .site-content2,
  .site-content3 {
    width: 100%;
    height: auto;
    border: none; /* optional: remove debug borders */
  }

  .user-content,
  .user-content3 {
    margin: 10px auto;
    text-align: center;
  }

  
  .action-container {
    height: auto;            /* allow height to adjust */
    padding: 60px 20px;
  }

  .action-parent {
    flex-direction: column;  /* stack text & button vertically */
    align-items: center;
    text-align: center;
    gap: 30px;
  }

  .action_content {
    width: 100%;
    max-width: 600px;
    height: auto;
    border: none; /* optional remove debug */
  }

  .action-set {
    width: 100%;
    height: auto;
    border: none;
  }

  .set-text {
    font-size: 38px;   /* smaller heading for tablets */
    line-height: 48px;
  }

  .boot_dev {
    width: 100%;
    max-width: 500px;
    height: auto;
    border: none;
  }

  .boot-text {
    font-size: 18px;
    line-height: 28px;
    padding: 0 10px;
  }

  .action-child {
    padding: 30px 0;
    width: 100%;
    justify-content: center;
  }

  .action_content1 {
    flex-direction: column;   /* stack play button & start button */
    align-items: center;
    width: 100%;
    max-width: 300px;
    height: auto;
    gap: 20px;
    border: none;
  }

  .action-shape {
    margin-bottom: 10px;
  }

  .started_content {
    width: 100%;
    max-width: 230px;
    height: auto;
  }

  .start-btn {
    padding: 15px 50px;
    font-size: 14px;
    line-height: 22px;
  }

  
  .showcase-container {
    height: auto;
    margin:  0;
    padding: 60px 20px;
  }

  .works-content {
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    gap: 20px;
    border: none;
    text-align: center;
  }

  .works-parent {
    width: auto;
    height: auto;
    border: none;
  }

  .works-text {
    font-size: 26px;
    line-height: 38px;
  }

  .view-btn {
    padding: 12px 25px;
    font-size: 14px;
  }

  .project_content {
    width: 100%;
    max-width: 700px;
    height: auto;
    border: none;
  }

  .display_parent,
  .display_parent1 {
    flex-direction: column;   /* stack projects vertically */
    gap: 20px;
    padding: 0;
  }

  .project-show,
  .project-show1 {
    width: 100%;
    max-width: 700px;
    height: auto;
    border: none;
  }

  .project_image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    border: none;
  }

  .project_image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .mozart_parent {
    padding: 15px 0;
  }

  .mozart-content {
    width: auto;
    height: auto;
    border: none;
  }

  /* Typography scaling */
  .text-mozart,
  .text-figure,
  .text-sky,
  .text-forces {
    font-size: 18px;
    line-height: 26px;
  }

  .text-kit,
  .text__frame,
  .text-photo,
  .text-pics {
    font-size: 9px;
    letter-spacing: 1.5px;
  }

  .team-container {
    padding: 60px 30px;
    height: auto;
    margin: 0;
  }

  .team-content {
    width: 100%;
    height: auto;
    border: none;
  }

  .crew-container {
    width: 100%;
    height: auto;
    border: none;
    text-align: center;
  }

  .crew-parent {
    width: auto;
    height: auto;
    border: none;
  }

  .crew_text {
    font-size: 32px;
    line-height: 42px;
  }

  .crew-child {
    width: 100%;
    height: auto;
    border: none;
  }

  .text_blocks {
    font-size: 18px;
    line-height: 28px;
  }

  .crew-flow {
    padding: 40px 0;
  }

  .crew-container2 {
    width: 100%;
    height: auto;
    border: none;
  }

  /* Stack crew members vertically */
  .unique-crew,
  .unique-crew2,
  .persons-container,
  .persons-container2 {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .persons-parent,
  .persons-parent2,
  .persons-parent3,
  .persons-parent4 {
    width: 100%;
    max-width: 300px;
    height: auto;
    text-align: center;
    border: none;
  }

  .image-face {
    margin: 0 auto;
    border: none;
  }

  .face,
  .face1 {
    width: 90px;
    height: 90px;
  }

  .name__content{
    padding: 0 0 0 70px;
  }

  .name__content1{
    padding: 0 10px 0 0px;
  }

  .name_text {
    font-size: 20px;
    line-height: 28px;
  }

  
  .skill1{
    padding: 0 0 0 10px;
  }

  .skill-pull{
    padding: 0 0 0 6px;
  }

  .skill-pull1{
    padding: 0 0 0 8px;
  }

  .skill-pull2{
    padding: 0 0 0 15px;
  }

  .skill-pull3{
    /* padding: 0 0px 0 0px; */
    margin: 0 0 0 -35px;
  }
  


  .design {
    font-size: 14px;
    line-height: 22px;
  }

  .icon-top {
    justify-content: center;
    gap: 20px;
    border: none;
  }

  .twitter,
  .facebook,
  .ball,
  .instagram {
    border: none;
  }

  .contact-container {
    flex-direction: column;   
    padding: 60px 40px;       /* reduce side padding */
    min-height: auto;             /* let height grow naturally */
    gap: 60px;                /* reduce spacing */
  }

  .contact-over {
    padding: 0;               /* remove big top padding */
    text-align: center;       /* center heading + text */
  }
  
    .lake-parent{
      display: flex;
      gap: 15px;
    }

  .touch-content {
    width: 100%;
    max-width: 100%;
    border: none;             /* remove debug borders */
  }

  .touch-sub,
  .touch-sub1 {
    width: 100%;
    height: auto;
    border: none;
  }

  .touch_text {
    font-size: 32px;          /* shrink font */
    line-height: 42px;
  }

  .text-comp {
    font-size: 18px;
    line-height: 28px;
  }

  .venue-over {
    padding: 30px 0;
  }

  .venue-content {
    width: 100%;
    height: auto;
    border: none;
  }

  .phone-content,
  .phone-content1,
  .phone-content2 {
    justify-content: center;   /* center align contact info */
  }

  .phone-dime,
  .envelpe-cover {
    border: none;
  }

  .phone-dime1,
  .location-place {
    width: auto;
    text-align: center;
    border: none;
  }

  .contact-form {
    padding: 0;
    width: 100%;
  }

  .contactform-content {
    width: 100%;              /* full width on tablet */
    max-width: 500px;
    height: auto;
    padding: 20px;
    margin: 0 auto;           /* center the form */
  }

  .form-container {
    padding: 20px;
  }

  .input-row {
    flex-direction: column;   /* stack inputs vertically */
    gap: 20px;
    padding: 20px 0;
  }

  .message-content {
    padding: 20px 0;
  }

  .flow-fill {
    flex-direction: column;   /* stack checkbox + button */
    gap: 20px;
    align-items: center;
  }

  .button-send {
    padding: 0;
    text-align: center;
  }

  .send-btn {
    width: 100%;             /* make button full-width */
    max-width: 250px;
  }


  .pricing-container {
    height: auto;               /* let it grow naturally */
    margin:  0;
    padding: 40px 20px;         /* add side breathing room */
    background-position: center;
  }

  .plan-content1 {
    width: 100%;
    height: auto;
    text-align: center;
    padding: 0 20px;
    border: none;               /* remove debug borders */
  }

  .plan_text {
    font-size: 32px;
    line-height: 42px;
  }

  .domain-content {
    width: 100%;
    height: auto;
    padding: 0 10px;
    border: none;
  }

  .domain_text {
    font-size: 18px;
    line-height: 28px;
  }

  .collabo-content {
    flex-direction: column;     /* stack plans vertically */
    align-items: center;
    gap: 40px;                  /* spacing between cards */
  }

  .starter-box,
  .proffessional-box,
  .team-box {
    width: 100%;                /* make full width */
    max-width: 400px;           /* limit width */
    height: auto;
  }

  .starter-parent,
  .proffessional-parent {
    padding: 40px 20px 0 20px;
  }

  .starterlist-parent {
    padding: 30px 20px 0 20px;
  }

  .beginstart-parent {
    padding: 20px;
    display: flex;
    justify-content: center;
  }

  .begin-btn,
  .color-btn {
    width: 100%;
    max-width: 280px;           /* prevent button too wide */
  }

   .footer-container {
    height: auto;   /* let height grow naturally */
    margin: 0; /* reduce spacing */
    padding: 20px;
  }

  .footer-content,
  .footer-content1 {
    flex-direction: column;   /* stack items vertically */
    align-items: center;      /* center items */
    gap: 20px;
    width: 100%;              /* take full width */
    border: none;             /* optional: remove debug borders */
  }

  .footerhead-over {
    justify-content: center; /* center "Startup 3" */
    border: none;
  }

  .privacy-parent {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: auto;
    border: none;
  }

  .terms-parent {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .social-content {
    justify-content: center;
  }

  .footerline-content {
    width: 90%; /* shrink line so it fits tablet screen */
  }

  .footer-under {
    width: 100%;
    border: none;
  }

  .footer-service {
    flex-wrap: wrap; /* wrap nav items on tablet */
    justify-content: center;
    gap: 15px;
  }

  .copy-under {
    width: 100%;
    text-align: center;
    border: none;
  }

  .reserved_text {
    text-align: center;
  }




}

@media (max-width: 500px) {

  /* HERO */
  .community-hero {
    padding: 40px 15px;
    height: auto;
  }

  .community-hero nav ul {
    gap: 15px;
  }

  .behance-logo {
    font-size: 16px;
  }

  /* STARTUP SECTION */
  .forget {
    font-size: 32px;
    line-height: 40px;
  }

  
.code-content{
/* position: absolute; */
width: 441px;
height: 86px;
/* top: 50px;
left: 50px; */
angle: 0 deg;
opacity: 1;
/* border:2px solid green ; */

}

  
.frame-code{
  padding: 21px 0px ;
}

  .framework {
    font-size: 14px;
    line-height: 22px;
  }

  /* BUTTON */
  .button-content,
  .account-btn {
    width: 100%;
    max-width: 200px;
    height: 45px;
    font-size: 14px;
  }

  /* SAMPLE SECTION */
  .generator {
    font-size: 28px;
    line-height: 36px;
  }

  .complex-text {
    font-size: 14px;
    line-height: 22px;
  }

  /* FEATURES */
  .create_text {
    font-size: 22px;
    line-height: 30px;
  }

  .company_text {
    font-size: 14px;
    line-height: 22px;
  }

  
.creatNew-content{
width: 300px;
height: 176px;
angle: 0 deg;
opacity: 1;
/* border: 2px solid rgb(68, 9, 9); */

}
.new-create{
width: 300px;
height: 52px;
angle: 0 deg;
opacity: 1;
/* top: 158px;
left: 515px; */
/* border: 2px solid red; */

}


  /* FORM SECTION */
  .prolems_text {
    font-size: 24px;
    line-height: 32px;
  }

  
  .problems-top{
    padding: 0 0 0 10px;
  }

  
  .developer-top{
    padding: 0 0 0 10px;
  }

  
  .problems_content {
    width: 100%;
    max-width: 480px;
    height: auto;
    border: none; /* remove debug border */
    margin: 0 auto;
    padding: 0 20px 0 0;
  }

  .developer_text {
    font-size: 13px;
    line-height: 20px;
  }

  .input-container{
    padding: 0 0 0 50px;
  }

  .signup-form input,
  .btn {
    font-size: 13px;
    padding: 12px;
  }

  /* TESTIMONIAL */
  .happy_text1 {
    font-size: 14px;
    line-height: 22px;
  }

  /* ACTION */
  .set-text {
    font-size: 28px;
    line-height: 38px;
  }

  .boot-text {
    font-size: 14px;
    line-height: 22px;
  }

  .start-btn {
    padding: 12px 40px;
    font-size: 13px;
  }

  /* SHOWCASE */
  .works-text {
    font-size: 20px;
    line-height: 30px;
  }

  /* TEAM */
  .crew_text {
    font-size: 24px;
    line-height: 34px;
  }

  .text_blocks {
    font-size: 14px;
    line-height: 22px;
  }

  .name_text {
    font-size: 16px;
    line-height: 24px;
  }

  .skill1{
    padding: 0 0 0 15px;
  }

  .skill-pull{
    padding: 0 0 0 15px;
  }

  .skill-pull1{
    padding: 0 0 0 10px;
  }

  .skill-pull2{
    padding: 0 0 0 25px;
  }

  .skill-pull3{
    /* padding: 0 0px 0 0px; */
    margin: 0 0 0 -30px;
  }


  .design {
    font-size: 12px;
    line-height: 20px;
  }

  .face, .face1 {
    width: 70px;
    height: 70px;
  }

  /* CONTACT */
  .touch_text {
    font-size: 24px;
    line-height: 32px;
  }

  .text-comp {
    font-size: 14px;
    line-height: 22px;
  }

  .contactform-content {
    padding: 15px;
  }

  .send-btn {
    width: 100%;
    max-width: 220px;
    font-size: 13px;
  }

  /* PRICING */
  .plan_text {
    font-size: 24px;
    line-height: 34px;
  }

  .domain_text {
    font-size: 14px;
    line-height: 22px;
  }

  .starter-box,
  .proffessional-box,
  .team-box {
    max-width: 320px;
  }

  /* FOOTER */
  .footer-container {
    padding: 15px;
    margin:  0;
  }

  .footer-service {
    gap: 10px;
    font-size: 14px;
  }

  .reserved_text {
    font-size: 12px;
  }
}




@media (max-width:475px) {
  
body{
    overflow-x: hidden; 
} 
  
  .input-container {
    padding: 0 0 0 12px;  /* reduced */
  }

  
  .footer-service {
    gap:4px;
    /* font-size: 3px; */
  }
  .tour-text{
     font-size: 13px;
  }

  .reserved_text {
    font-size: 11px;
  }


  
.Oworks_content{
width: 78px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 169.4px;
left: 267px; */
/* border:2px solid aqua; */

}

  
.tour_content{
width: 32px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 169.4px;
left: 115px; */
/* border:2px solid aqua; */
margin: 0 3px;

}

  
.priplan_content{
width: 93px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 169.4px;
left: 267px; */
/* border:2px solid aqua; */
padding: 0 10px;

}
}


@media (max-width:397px) {
      
html,body{
    overflow-x: hidden; 
} 
}




@media (max-width: 375px) {

  /* GENERAL FIX: Prevent horizontal scroll */
  html,body {
    max-width: 100%;
    overflow-x: hidden;
  }
   

   img {
  max-width: 100%;
  height: auto;
  display: block;
}
  /* HERO */
  .community-hero {
    padding: 30px 12px;
    height: auto;
  }

  .community-hero nav ul {
    gap: 12px;
    flex-wrap: wrap; /* avoid overflow */
  }

  .behance-logo {
    font-size: 14px;
  }

  /* STARTUP SECTION */
  .forget {
    font-size: 28px;
    line-height: 36px;
  }

  .code-content {
    width: 100%;         /* was 441px */
    max-width: 100%;
    height: auto;        /* let content decide */
  }

  .frame-code {
    padding: 15px 0;
  }

  .framework {
    font-size: 13px;
    line-height: 20px;
  }

  /* BUTTON */
  .button-content,
  .account-btn {
    width: 100%;
    max-width: 180px;   /* scale down */
    height: 42px;
    font-size: 13px;
  }

  /* SAMPLE SECTION */
  .generator {
    font-size: 24px;
    line-height: 32px;
  }

  .complex-text {
    font-size: 13px;
    line-height: 20px;
  }

  /* FEATURES */
  .create_text {
    font-size: 20px;
    line-height: 28px;
  }

  .company_text {
    font-size: 13px;
    line-height: 20px;
  }

  .creatNew-content,
  .new-create {
    width: 100%;        /* was fixed 300px */
    max-width: 100%;
    height: auto;
  }


  .happy-container{
    padding: 0 0 0 0;
  }

  /* FORM SECTION */
  .prolems_text {
    font-size: 20px;
    line-height: 28px;
  }

  .problems_content {
    width: 100%;
    max-width: 100%;
    padding: 0 10px;     /* prevent overflow */
  }

  .developer_text {
    font-size: 12px;
    line-height: 18px;
  }

  .input-container {
    padding: 0 0 0 0px;  /* reduced */
  }

  .signup-form input,
  .btn {
    font-size: 12px;
    padding: 10px;
  }

  /* TESTIMONIAL */
  .happy_text1 {
    font-size: 13px;
    line-height: 20px;
  }

  /* ACTION */
  .set-text {
    font-size: 24px;
    line-height: 32px;
  }

  .boot-text {
    font-size: 13px;
    line-height: 20px;
  }

  .start-btn {
    padding: 10px 30px;
    font-size: 12px;
  }

  /* SHOWCASE */
  .works-text {
    font-size: 18px;
    line-height: 26px;
  }

  /* TEAM */
  .crew_text {
    font-size: 20px;
    line-height: 28px;
  }

  .text_blocks {
    font-size: 13px;
    line-height: 20px;
  }

  .name_text {
    font-size: 14px;
    line-height: 20px;
  }

  .skill1,
  .skill-pull,
  .skill-pull1,
  .skill-pull2,
  .skill-pull3 {
    padding: 0 0 0 10px;
    margin: 0;  /* remove negative margin */
  }

  .design {
    font-size: 11px;
    line-height: 18px;
  }

  .face, .face1 {
    width: 60px;
    height: 60px;
  }

  /* CONTACT */
  .touch_text {
    font-size: 20px;
    line-height: 28px;
  }

  .text-comp {
    font-size: 13px;
    line-height: 20px;
  }

  .contactform-content {
    padding: 10px;
  }

  .send-btn {
    width: 100%;
    max-width: 200px;
    font-size: 12px;
  }

  /* PRICING */
  .plan_text {
    font-size: 20px;
    line-height: 28px;
  }

  .domain_text {
    font-size: 13px;
    line-height: 20px;
  }

  .starter-box,
  .proffessional-box,
  .team-box {
    width: 100%;
    max-width: 300px;
  }

  /* FOOTER */
  .footer-container {
    padding: 10px;
    margin: 0;
  }

  .footer-service {
    flex-wrap: wrap;
    /* gap:4px; */
    /* font-size: 3px; */
    
  }
  
    
  
.tour_content{
width: 32px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 169.4px;
left: 115px; */
/* border:2px solid aqua; */
margin: 0 3px;

}
  }

  .reserved_text {
    font-size: 11px;
  }


  
.Oworks_content{
width: 78px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 169.4px;
left: 267px; */
/* border:2px solid aqua; */

}

  
.tour_content{
width: 32px;
height: 26px;
/* border:2px solid aqua; */
margin: 0 3px;

}

  
.priplan_content{
width: 93px;
height: 26px;
angle: 0 deg;
opacity: 1;
/* top: 169.4px;
left: 267px; */
/* border:2px solid aqua; */
padding: 0 10px;

}