.ul_clear{
  clear:both;
}


.ul_clear{
  clear:both;
}

@font-face {
    font-family: 'font_reg';
	font-display: swap;
    src: url('../fonts/Montserrat-Regular.ttf')
}

@font-face {
    font-family: 'font_med';
	font-display: swap;
    src: url('../fonts/Montserrat-Medium.ttf')
}

@font-face {
    font-family: 'font_light';
	font-display: swap;
    src: url('../fonts/Montserrat-Light.ttf')
}
@font-face {
    font-family: 'font_bold';
	font-display: swap;
    src: url('../fonts/Montserrat-Bold.ttf')
}
@font-face {
    font-family: 'font_semibold';
	font-display: swap;
    src: url('../fonts/Montserrat-SemiBold.ttf')
}


*{
    word-wrap: break-word;
	margin: 0;
	padding: 0;
  letter-spacing: 0.5px;
}
a {color:inherit;}      /* unvisited link */
a:visited {color:inherit;}  /* visited link */
a:hover {color:inherit;}  /* mouse over link */
a:active {color:inherit;}  /* selected link */

textarea{
	resize:vertical;
}

body{
      font-family: font_reg, sans-serif;
      background-color: #0f0043;
      color: #fff;
      position: relative;
}

.header_bg img{
  width: 100%;
    min-width: 1600px;
      position: absolute;
      top: 0;
      right: 0;
      z-index: -1;
}








/* logo and menu */
.header_bar_frame{
  height: 65px;

}
.header_bar_logo{
  height: inherit;

}
.header_bar_logo img{
  height: 100%;
  width: auto;
}
.header_bar_menu_mobile{
  float: right;
  display: none;

}
.header_bar_menu_mobile img{
  height: 35px;
  line-height: 55px;

}
.header_bar_menu{
  display: flex;
  float: right;
  line-height: 65px;
}
.header_bar_menu p{
  margin: 0;
  padding: 0;
    font-family: font_light;
  margin-left: 38px;
  font-size: 17px;
  -webkit-user-select: none; /* Chrome, Opera, Safari */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
  cursor: pointer;
}
/* banner title and subtitles */
.heade_banner_title{
  margin: 0;
  padding: 0;

}
.heade_banner_title h1{
  font-size: 46px;
  font-family: font_semibold;
}
.heade_banner_title p {
  font-size: 18px;
      font-family: font_light;
      line-height: 25px;
}
.header_banner_button{
display: inline-block;
  border: solid 1px #fff;
  -webkit-user-select: none; /* Chrome, Opera, Safari */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
  cursor: pointer;
transition: all 300ms;
}
.header_banner_button p{
  padding: 0;
  font-size: 17px;
  margin: 0;
  padding: 8px 60px;
}

.header_banner_button:hover{
  background-color: #fff;
}
.header_banner_button:hover p{
color: #000;


}

/* Subtitles */
.section_titles{
  margin: 0;
  padding: 0;

}
.section_titles h2{
font-family: font_semibold;
font-size: 32px;
}
.section_titles p{
font-family: font_light;
font-size: 16px;
}


/* our service */
.service_section{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}
.service_section_frame{
  background-color: #0a002c;

  padding: 30px;
  border-radius: 20px;
}
.service_section_frame img{
  width:45px;
}
.service_section_frame h3{
  font-size: 26px;
  margin: 0;
  font-family: font_semibold;
}
.service_section_frame p{
  font-family: font_light;
font-size: 17px;
margin-top: 10px;
}



/* portfolio */

.portfolio{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}
.portfolio_frame{
  background-color: #0a002cbd;
  padding: 30px;
  border-radius: 20px;
}
.portfolio_frame_title{

}
.portfolio_frame_title h3{
  font-size: 33px;
  font-family: font_semibold;

display: inline-block;
vertical-align: middle;
margin-left: 8px;
}

.portfolio_frame_title img{
  height: 35px;
  display: inline-block;
  vertical-align: middle;
  margin-top: 10px;
}
.portfolio_frame_meaning p{
  font-family: font_light;
  font-size: 17px;
}




/* faq */

.faq_frame{
  background-color: #0a002cbd;
  padding:  30px;
  border-radius: 20px;
  -webkit-user-select: none; /* Chrome, Opera, Safari */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
  cursor: pointer;
margin: 10px 0;
}
.faq_frame h3{
  margin: 0;
  padding: 0;
font-size: 18px;

}
.faq_frame img{
  float: right;
  height: 20px;
}
hr{
    border-top: 1px solid #eeeeee45;
}
.faq_frame p{
  margin: 0;
  font-size: 15px;
  font-family: font_light;
}
.faq_frame_answer {
  max-height: 0; /* Start with max-height at 0 */
  overflow: hidden;
  transition: max-height 900ms ease; /* Animate max-height */
}
.faq_frame:hover .faq_frame_answer {
  max-height: 500px; /* Set a large enough value for max-height */
}


/* contact */
.contact_us{
  /* width: 600px; */
}
.contact_us input{
  width: 100%;
  height: 45px;
margin-bottom: 20px;
background-color: #0a002cbd;
border: solid 1px #e8e8e836;
padding: 10px 20px;
}
.contact_us textarea{
  width: 100%;
  margin-bottom: 20px;
  background-color: #0a002cbd;
  border: solid 1px #e8e8e836;
  padding: 10px 20px;
}
.contact_us button{
  background-color: #4200a4;
  border: solid 1px #4200a4;
  width: 100%;
  padding: 10px;
  color: #fff;
  letter-spacing: 1.5px;
  font-family: font_semibold;

}



.footer_bg img{
  width: 100%;
    min-width: 1600px;
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: -1;
}
.footer_section{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap:30px;
}
.footer_frame_mobile{
  display: none;
}
.footer_frame h4{
  font-size: 20px;
  font-family: font_semibold;

}
.footer_frame p{
  margin: 0;
  padding: 4px 0px;
  font-family: font_light;


}
.footer_frame_social{
  display: flex;
  -webkit-user-select: none; /* Chrome, Opera, Safari */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}
.footer_frame_social img{
  width: 30px;
  margin: 0;
  margin-right: 20px;
}
.footer_frame_logo img{
  width: 90%;
  margin-top:40px;
}
.footer_frame_logo_mob img {
    width: 95%;
    margin-top: 0px;
}





/* our process */








.feature-section {
    padding: 0px 20px;
    display: flex;
    justify-content: center;
    background: #0000;
}

.feature-content {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    align-items: center;
    position: relative;
}

.feature-left,
.feature-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 200px;
}

.feature-left .feature-item,
.feature-right .feature-item {
    display: flex;
    align-items: center;
    margin: 40px 0;
}

.feature-left .feature-item .number,
.feature-right .feature-item .number {
    font-size: 70px;
    font-weight: 400;
    color: #bbb;
    margin-right: 20px;
    font-family: Poppin-Bold;
}

.feature-right .feature-item .number.right {
    margin-right: 0;
    margin-left: 20px;
}

.feature-item .text {
    max-width: 250px;
}

.feature-item h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 10px 0;
    font-family: font_semibold;
}

.feature-item p {
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
    margin: 0;
    font-family: font_light;
}

/* Center Image Section */
.feature-image {
    flex: 0 0 400px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px;
    /* Create a custom shape using border-radius to match the arch style */
    width: 400px;
    height: 500px;
    border-radius: 200px 200px 0 0; /* Top arch shape */
    overflow: hidden;
    background: #f0f0f0; /* fallback background */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}


.mobile-view{
    display: none;
}

.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* If you have a decorative overlay shape or colors, you can position them absolutely */
.color-overlay-shape {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 200px;
    background: #b11c1c; /* A deep red color from the example */
    border-radius: 0 0 150px 150px; /* bottom half of a circle */
    z-index: 2;
    /* Add a white semicircle overlay to mimic the design */
}

.color-overlay-shape::before {
    content: "";
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 30px;
    background: #ffffff;
    border-radius: 30px 30px 0 0;
}

.color-overlay-shape::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background: #d78555; /* A complementary circle color */
    border-radius: 50%;
}


.contact-form {
    background: #000;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 900px;
}

.contact-form .form-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
}

.contact-form .form-group input,
.contact-form textarea {
    width: calc(46% - 6px);
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
}

.contact-form .form-group.full-width input,
.contact-form textarea {
    width: 100%;
}

.contact-form textarea {
    resize: none;
    height: 150px;
}

.contact-form button {
    background: #6c3eff;
    color: #fff;
    padding: 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
}

.contact-form button:hover {
    background: #5835d8;
}


.send_message{
    background-color: #fff!important;
    color: #000!important;;
}
.feature-left .mobile-process{
    display: none;
}

@media (max-width: 992px) {
    .mobile-view{
        display: flex;
    }
    .desk-view{
        display: none;
    }
    .desk-process{
        display: none;
    }
    .feature-left .mobile-process{
        display: flex;
    }
}

@media (max-width: 965px) {
    .contact form{
        width:600px;
    }
    .contact-form .form-group input{
        width:100%;
    }
}

@media (max-width: 660px) {
    .contact form{
        width:90%;
    }
}


@media (max-width: 768px) {
    .contact-form .form-group input {
        width: 100%;
    }
}




/* Responsive Adjustments */
@media (max-width: 992px) {
    .feature-content {
        flex-direction: column;
        align-items: center;
    }

    .feature-left, .feature-right {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .feature-item {
        margin: 20px;
    }

    .feature-image {
        margin: 20px 0;
        width: 300px;
        height: 400px;
        border-radius: 150px 150px 0 0;
    }
}

@media (max-width: 600px) {
    .feature-item .text {
        max-width: 200px;
    }

    .feature-item .number {
        font-size: 36px;
    }

    .feature-image {
        width: 250px;
        height: 350px;
        border-radius: 125px 125px 0 0;
    }
}



/* mobile menu */
.mobile_menu_div{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 100%;
  background-color: #0f0043;
  text-align: center;
overflow-y: auto;
transition: all 300ms;
}
.mobile_menu_list{
  /* margin-top: 5vh; */
}
.mobile_menu_list img{
  position: absolute;
  z-index: -1;
  min-width:900px;
  width: 100%;
  right:0;
  top:0;
  opacity: 0.3;
}
.mobile_menu_div h5{
  /* font-family: font_semibold; */
  font-size: 26px;
  letter-spacing: 2px;
  color: #ffffffad;
}
.mobile_menu_div p{
  font-size: 18px;
line-height: 40px;
}
.closemenu{
  float: right;
  margin-right: 20px;
}
.closemenu img{
  height: 35px;


}


/* success */
.sucess_align{
  text-align: center;

}
.success_banner_title{
  margin: 0;
  padding: 0;

}
.success_banner_title h1{
  font-size: 46px;
  font-family: font_semibold;
}
.success_banner_title p {
  font-size: 18px;
      font-family: font_light;
      line-height: 25px;
}


.success_banner_button{
display: inline-block;
  border: solid 1px #fff;
  -webkit-user-select: none; /* Chrome, Opera, Safari */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
  cursor: pointer;
transition: all 300ms;
display: inline-block;
}
.success_banner_button p{
  padding: 0;
  font-size: 17px;
  margin: 0;
  padding: 8px 60px;
}

.success_banner_button:hover{
  background-color: #fff;
}
.success_banner_button:hover p{
color: #000;


}