
*{margin:0;padding:0;outline:0;transition:all 0.3s ease 0s;}


/****************************************************************************/
html{overflow-y:scroll;}
body {color:#0F172A; font-family: 'Roboto', sans-serif; font-size:14px; font-weight:400;line-height:1.5;}
a{text-decoration:none !important;}
.container {padding:0 25px;}
.cmnpad{padding:5rem 0;}
.object-fit{object-fit:cover; height:100%; width:100%}


h1,h2,h3,h4,h5,h6{color:#101010; font-weight:600;}
h1{font-size:32px; font-weight:800;}
h2{font-size:26px;}
h3{font-size:22px;}
h4{font-size:18px; font-weight:700;}
h5{font-size:16px;}
h6{font-size:14px;}


.bg-patren1 {background:url(../images/hd-bg1.svg) no-repeat 3px 60px;}
.tag {color:#FF7E00; font-size:80px; font-weight:800; line-height:100%;}
.bg-light {background:#EEEEEE!important;}
.bg-primary {background:#020333!important;}
.bg-danger {background:#FFF8F8!important;}

/******************button theme area******************/
.web-btn {position: relative; display: inline-block; width: auto; height: auto; cursor: pointer; overflow:hidden; border-radius: 8px; text-align:center;}
.web-btn::before,.web-btn::after {position: absolute; content: "";}
.web-btn::before {top:0;bottom:0;right:unset; left:0; height:100%; width:0%; border-radius:0px; transition:all ease-in-out 400ms;} 
.web-btn > span {position: relative; display: inline-block; top: 0; left: 0; width: 100%; padding:10px 25px; color:#fff; font-size:24px; font-weight:700; transition: transform 0.3s ease, background-color 0.3s ease;} 

/*****button border***********/
.alt.web-btn{background: #FF7E00; border:2px solid #EA580C;  transition: 0.3s ease-out;}
.alt.web-btn:hover::before {width: 100%;
  background-image: -moz-linear-gradien(135deg, #EA580C 0%,#EA580C 100%);
  background-image: -webkit-linear-gradient(135deg, #EA580C 0%,#EA580C 100%);
  background-image: -ms-linear-gradient(135deg, #EA580C 0%,#EA580C 100%);}

.alt.web-btn:hover > span {color:#fff;} 

/*****button border***********/
.alt2.web-btn{background: #fff; border:1px solid transparent; transition: 0.3s ease-out;}
.alt2.web-btn:hover::before {width: 100%;
  background-image: -moz-linear-gradien(135deg, #334155 0%,#334155 100%);
  background-image: -webkit-linear-gradient(135deg, #334155 0%,#334155 100%);
  background-image: -ms-linear-gradient(135deg, #334155 0%,#334155 100%);}

.alt2.web-btn > span {color:#FF7E00;} 
.alt2.web-btn:hover > span {color:#fff;} 

/*****button border***********/
.alt3.web-btn{background: #020333; border:1px solid transparent; transition: 0.3s ease-out;}
.alt3.web-btn:hover::before {width: 100%;
  background-image: -moz-linear-gradien(135deg, #FF7E00 0%,#FF7E00 100%);
  background-image: -webkit-linear-gradient(135deg, #FF7E00 0%,#FF7E00 100%);
  background-image: -ms-linear-gradient(135deg, #FF7E00 0%,#FF7E00 100%);}

.alt3.web-btn > span {color:#fff; font-size:14px; font-weight:600; padding:8px 25px;} 
.alt3.web-btn:hover > span {color:#fff;} 

/*******************************Header*********************************************/
header {z-index:999;}
.navbar .navbar-nav .nav-link {color: #0F172A; border-bottom:2px solid transparent; transition: all 0.5s; margin-left:2rem;}
.navbar .navbar-nav .nav-link:before {content: attr(data-text); font-weight: 700; visibility: hidden; height: 0; overflow: hidden; display: block;}
.navbar .navbar-nav .nav-link.active,.navbar-expand-md .navbar-nav .nav-link:hover {border-bottom:2px solid #FF7E00; font-weight: 700; transition: all 0.5s;}

header .login-btns a {color:#0F172A; font-weight:500; border:2px solid transparent; padding:6px 16px; border-radius:8px; margin-left:.5rem;}
header .login-btns a:hover {border:2px solid #0F172A;}

/*******************************main*********************************************/
#banner{background:#020333; position:relative; color:#fff;}

#banner .bnr-txt {transform:translate(0, -50%); bottom:auto; top:50%; left:0px; right:0px; z-index:99; position:absolute; font-size:24px;}
#banner .bnr-txt h1 {color:#fff;}
#banner .bnr-txt h1 span {color:#FF7E00;}
#banner .bnr-txt .bnr-btns a {margin-right:15px;}

#built {background:url(../images/bg-design.svg) no-repeat 75% 52%; overflow:hidden;}
#built h2 {background-position:81px 41px;}
#built .built-img {background:#fff; border:5px solid #fff; border-radius:20px; box-shadow:0 4px 4px rgba(0,0,0,.25); overflow:hidden;margin-right: -80px; margin-left:50px;}

#expernion .row {font-size:16px;}
#expernion .row img {margin-bottom:1rem;}

#whois,#different {font-size:18px;}
#whois ul {font-size:24px; padding:0 0 0 20px; margin-bottom:2rem;}
#whois ul li {margin-bottom:1rem;}

#different {background:#FFF8F8;}
#different .story {background:#E2E8F0; border:1px solid #E2E8F0; padding:48px; border-radius:5px; box-shadow:0 0 10px rgba(0,0,0,.3); margin-left:-60px; font-size:24px;}
#different .story a{font-size:16px; font-weight:500; color:#020333;}
#different .story a:hover{color:#FF7E00;}

#get-started {background:url(../images/bg-img.jpg) no-repeat center center; background-size:cover; min-height:100vh; display:flex; align-items:center;}


/*******************************Inner page*********************************************/
.steps h2 {font-weight:800;}


#blog-list {font-size:14px; font-weight:500;}
#blog-list .card {font-size:14px; font-weight:500; box-shadow:0 4px 30px rgba(43,27,18,.12); border-radius:18px; overflow:hidden; border:none;}
#blog-list .card .card-body{padding:30px 30px 0!important;}

#work-steps .step-content-area {background:#E2E8F0; border:1px solid #E2E8F0; border-radius:5px; box-shadow:0 0 10px rgba(0,0,0,.3); padding:20px; position:relative;z-index:1; margin-top:40px;}

#work-steps .step-content-area ul {font-size:24px; padding-left:20px;}
#work-steps .step-content-area ul li {margin-bottom:1.5rem;}
#work-steps .step-content-area .hilighted-txt {color:#FF7E00; font-size:20px; font-weight:500;}


#join-us {background:#FF7E00; padding-top:6rem; color:#fff;}
#join-us h2 {margin-top:6rem;}
#join-us p {width:70%; margin-bottom:2rem;}

#banner.inr-bnr img {object-fit:cover; height: 500px;}

#contact .bg-color {background:#FF7E00;}
#contact .bg-color .contact-form {margin:4rem;}
#contact .bg-color .contact-form .form-label {font-size:15px; font-weight:600; text-transform:capitalize;}
#contact .bg-color .contact-form .form-control {font-size:16px; font-weight:400; border:1px solid #000000; border-radius:8px; padding:16px;}
#contact .bg-color .contact-form .alt2.web-btn {border:1px solid #020333; border-radius:8px;}
#contact .bg-color .contact-form .alt2.web-btn span {color:#020333;}
#contact .bg-color .contact-form .web-btn span {font-size:16px; font-weight:400; padding:10px 40px;}

#contact .contact-info {margin:4rem; font-size:32px; line-height:160%;}
#contact .contact-info a{display:block; font-weight:700; color:#FF7E00;}
#contact .contact-info a:hover{color:#000;}


#faq .card {background: #F3F3F3; border: 1px solid #191A23; padding: 24px 60px; color:#fff; border-radius:8px; box-shadow:0 5px 0 #191A23; margin-bottom:2rem;}
#faq .card .card-header{background:transparent; border:0px; padding:0px;}
#faq .card .card-header a{color:#000; font-size:30px; font-weight:500; padding:0px; margin-bottom:.5rem; display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; border-radius:0px; text-align:left;}
#faq .card .card-header a .numb{font-size:60px; font-weight:500; margin-right:20px;}
#faq .card .card-body{padding:1rem 0; border-top:1px solid #fff;}

#faq .card.active {background: #191A23;}
#faq .card.active .card-header a{color:#fff;}

#faq .card-header .btn::after {content: ""; display: inline-block; width: 58px; height: 58px; background-image: url('../images/plus.svg'); background-size: contain; background-repeat: no-repeat; transition: transform 0.3s ease; margin-left: auto;}
#faq .card-header .btn:not(.collapsed)::after {background-image: url('../images/minus.svg');}

#faq .card-header .btn:focus,
#faq .card-header .btn:focus-visible,
#faq .card-header .btn:active,
#faq .card-header .btn:focus:not(:focus-visible) {outline: none !important; box-shadow: none !important; border-color: transparent !important;}

#enquiry {font-size:15px;}
#enquiry h3 {font-weight:500;}
#enquiry .input-group {border-radius:60px; background:#fff; border:1px solid #000; overflow:hidden; height:60px;}
#enquiry .input-group .form-control {background:transparent; border:0px; color:#1A1A1A; font-size:15px;}
#enquiry .input-group .btn {background:transparent; border:0px; color:#1A1A1A; font-size:15px; font-weight:500; padding:0 20px; box-shadow:none;}
#enquiry .input-group .btn:hover {color:#FF7E00;}



.timeline-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
      margin-top: 80px;
}
.timeline-image {
  flex: 0 0 50%;
  position: sticky;
  top: 100px;
  text-align: center;
}
.timeline-image img {
  max-width: 100%;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.timeline-content {
  flex: 1;
  position: relative;
}
.timeline-step {
    padding: 1.5rem;
    border-left: 5px solid #FF7E00;
    position: relative;
    opacity: 0.3;
}
.timeline-step.active {
background-color: #fff;
    opacity: 1;
}
.timeline-step::before {
    content: '';
    position: absolute;
    top: 20px;
    left: -12px;
    width: 20px;
    height: 20px;
    background-color: #FF7E00;
    border: 3px solid #FF7E00;
    border-radius: 50%;
} 

/*******************************Footer*********************************************/
#Footer {background:#0F172A; color:#fff; font-size:16px;}
#Footer ul.links a {color:#fff; font-weight:500; margin:0 3.5rem;}
#Footer ul.links a:hover {color:#FF7E00;}
#Footer .copyright {border-top:1px solid #334155; color:#E2E8F0; padding-top:2rem; margin-top:2rem;}