@charset "UTF-8";
/*  Mixins */
/*  Fonts */
/* --------------------------------------------------------------- 
   Google Fonts
-----------------------------------------------------------------*/

/* @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:ital,wght@0,1;0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,1;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');


:root {
  --theme-color: #000000;
  --theme-color-dark: #000000;
  --title-color: #e36a22;
  --body-color: #000000;
  --optional-color: #124390;
  --smoke-color: #f9f6ef;
  --smoke-theme: #f9af42;
  --light-color: #CEE2F7;
  --black-color: #000000;
  --white-color: #fff;
  --yellow-color: #fec624;
  --green-color: #91ba36;
  --success-color: #28a745;
  --error-color: #dc3545;
  --blue-color: #e36a22;
  --orange-color: #fbb56d;
  --border-color: rgb(238, 241, 242);
  --title-font: 'Sofia Sans Semi Condensed', sans-serif;
  --para-font: 'Sofia Sans Semi Condensed', sans-serif;
  --body-font: 'Sofia Sans Semi Condensed', sans-serif;
  --icon-font: "Font Awesome 6 Pro";
  --main-container: 1220px;
  --container-gutters: 30px;
  --section-space: 80px;
  --section-space-mobile: 80px;
  --section-title-space: 60px;
  --body-font-size: 18px;
  --letter-spacing: 0.2rem;
  --ripple-ani-duration: 5s;
  --bs-navbar-nav-link-padding-x: 1.5rem;

}



/*  BODY
-----------------------------------------------------------------*/
html {
  overflow-x: hidden; }

/* Sections */
section {
  padding: 90px 0;
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 1;
  background-color: #ffffff; 
}



 /* ----------------------------------------------------------------------
    Page title
-------------------------------------------------------------------------*/

body {
  font-family: var(--body-font);
  color: var(--theme-color-dark);
  font-size: var(--body-font-size);
  line-height: 26px;
}

a{
  color: var(--theme-color);
  font-size: var(--body-font-size);
  text-decoration: none;
}

a:hover,
a:visited,
a:focus,
a:active {
text-decoration: none !important;
outline: none !important;
}

a:hover {
color: var(--theme-color);

}

h1, h2, h3, h4, h5, h6 {
font-family: var(--body-font), monospace;
color: var(--title-color);
}

p{
font-family:  var(--body-font);
font-size: var(--body-font-size);
line-height: 1.7;
}

dl, ol, ul {
  list-style-type: none;
}


strong{
  color: var(--blue-color);
  font-weight: 700;
}

.text-justify{
  text-align: justify;
}
ul{
  padding:0;
}

ul.colored{
  margin: 30px 0;
}
ul.colored li{
  margin-bottom: 15px;
}

ul.colored li::before{
  content: "\f058";
  position: relative;
  font-family: "Font Awesome 6 Free";
  padding-right: 10px;
  font-size: 20px;
  color: var(--blue-color);
  font-weight: var(--fa-style,900);
}

 /* ----------------------------------------------------------------------
    nav bar
-------------------------------------------------------------------------*/
.bg-theme{
  background-color: var(--theme-color);
}

nav.navbar{
box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
}

.nav-link{
  color: var(--theme-color);
  font-weight: 700;
}


.nav-link:focus, .nav-link:hover{
  color: var(--blue-color);
}

@media (min-width: 992px) {

  .navbar-expand-lg .navbar-nav .nav-link{
    padding-left: 1rem;
    padding-right: 1rem;
  }

}



/* ----------------------------------------------------------------------
    Carousel
-------------------------------------------------------------------------*/

.carousel,.carousel-inner,.carousel-item{
  height: 90vh;
}

.carousel-inner .carousel-item > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* animation: zoomin 10s linear infinite; */
}

@keyframes zoomin {
  0%{
      transform: scale(1);
  }
  50%{
      transform: scale(1.05);
  }
  100%{
      transform: scale(1.1);
  }
}


.carousel-indicators button{
  
      border-radius: 50%;
      width: 10px !important;
      height: 10px !important;

}
.carousel-indicators  button.active {
      background-color: var(--blue-color)  !important;

  }

.carousel-caption{
  top: 50%;
  transform: translateY(-50%);
  bottom: inherit;
  text-align: right;
}

.carousel-caption h3{
	color:#fff;
	text-shadow: 2px 2px 3px black;
}

.carousel-caption h2 {
  color: #fff;
  text-shadow: 2px 2px 3px black;
}


.accordion-item{
  background-color:#ffffffde;
}

/* ----------------------------------------------------------------------
    main-content
-------------------------------------------------------------------------*/

span.fa.fa-circle.me-2 {
  font-size: 10px;
}

.mw-90{
  max-width: 90%;
}



span.small-title{
  color: var(--theme-color);
  font-weight: 600;
  font-style: italic;
  margin-bottom: 10px;
}

.svg-main{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.svg {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  fill: none;
  pointer-events: none;
  pointer-events: all;
  stroke: var(--theme-color-dark);
  opacity: 0.5;
  transition: all .2s ease-out;
  width: 120px
  
}

.svg-main svg {
  display: block;
  width: 100%;
  stroke: inherit;
  fill: inherit;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;

}


.svg-main:hover .svg {
  stroke: var(--blue-color);
}

.svg-main:hover a {
  transition: all .2s ease-out;
  color: var(--blue-color);
}



.main-btn{

  position: relative;
  background-color: var(--blue-color);
  color: #ffffff!important;
  border-style: none;
  box-shadow: rgba(245, 244, 247, .25) 0 1px 1px inset;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  height: 60px;
  line-height: 60px;
  margin-left: -4px;
  outline: 0;
  text-align: center;
  transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;

  /* transition: all .3s cubic-bezier(.05, .03, .35, 1); */
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: bottom;
  width: 190px;
  overflow: hidden;
  z-index: 2;
}


/* ========== wonderlabs btn ============= */
/* .main-btn:after, .main-btn:before {
  content: "";
  position: absolute;
  left: -100%;
  top: 0;
  height: 100%;
  width: 100%;
}

.main-btn:before {
  background: var(--blue-color);
  z-index: -1;
  transition: all .3s cubic-bezier(.25,.46,.45,.94);
}

.main-btn:after {
  background: rgb(67 76 84 / 80%);
  z-index: -2;
  transition: all .4s cubic-bezier(.25,.46,.45,.94) .02s;
} */

/* .main-btn:hover:before {
  left: 0;
  width: 100%;
  transition: all .4s cubic-bezier(.55,.085,.68,.53) .02s;
}


.main-btn:hover:after {
  left: 0;
  width: 100%;
  transition: all .3s cubic-bezier(.55,.085,.68,.53);
} */

.main-btn:hover {

  cursor: pointer;
  color: #fff;
  background-color: var(--theme-color);
}


@media screen and (max-width: 1000px) {
 .main-btn{
    font-size: 14px;
    height: 55px;
    line-height: 55px;
    width: 150px;
  }
}




.dark-title{
  color: var(--theme-color);
}

.alt-title{
  font-size: 38px;

  margin: 15px 0;
  font-weight: bold;
}

/* #profile:after{
  content: "";
  position: absolute;
  background: url(../img/layout/wonderlab-leaf.png);
  left: 50%;
  top: 89.5%;
  width: 100%;
  background-repeat: no-repeat;
  height: 100%;
} */




@media screen and (max-width:1000px) {
  #profile{
    padding: 50px 0;
  }
  
}


.bg-box{
  display: flex;
  justify-content: center;
  position: relative;
}

/* ======================= for blue background ========================= */

.bg-box:before {
  content: '';
  position: absolute;
  top: -48px;
  right: calc(50px + 45px);
  height: calc(100% + 2*50px);
  width: 88.6%;
  background-color: var(--blue-color);
  opacity: 0.45;
  z-index: -1;
  transform: scaleY(1);
  transition: transform 1s ease-out;

} 


.text-box{
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
}


.line::before{
  top: 0;
  left: 0;
  width: 2px;
  content: "";
  height: 100%;
  position: absolute;
  background-color: var(--blue-color);
}


.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 0.25rem;
}


#service {
  background-image: url(../img/layout/slider-1.jpg);
  position: relative;
  z-index: 1;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0;
}


#service::before{
    top: 0;
    left: 0;
    right: 0;
    content: "";
    width: 100%;
    z-index: -1;
    height: 100%;
    opacity: 60%;
    position: absolute;
    background-color: var(--blue-color);

}

.parallax {
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--theme-color);
  opacity: 0.5;
  z-index: -1;
}



.accordion-button:focus{
  border-color: none;
  box-shadow:none;
}


.accordion-button:not(.collapsed){
    color: var(--white-color);
    background-color: var(--blue-color);
    box-shadow: unset
}

button.accordion-button.collapsed {
  background: var(--theme-color);
  color: #fff;
}

.accordion-button:not(.collapsed)::after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

}


.accordion-button.collapsed::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


button.accordion-button.collapsed:hover {
  background-color: var(--blue-color);
}
.me-2 {
  color: var(--blue-color);
}

.card-service{
  background-color: var(--white-color);
    margin-bottom: 25px;
    position: relative;
    padding: 30px;
}

.card-service .icon{
  width: auto;
  
  font-size: 65px;
  position: relative;
  border-radius: 50px;
  margin-bottom: 25px;
  color: var(--blue-color);
  background-color: var(--white-color);
}


.card-service .number{
  color: var(--title-color);
  position: absolute;
  line-height: 1;
  opacity: 45%;
  right: 30px;
  top: 30px;
  font-size: 65px;
  font-weight: 700;
  font-family: var(--body-font);
}




/* ----------------------------------------------------------------------
   footer
-------------------------------------------------------------------------*/


#footer {
  display: block;
  position: relative;
  background-color:#e1682e33;

  line-height: 32px;
}

#footer .footer-content {
  padding: 60px 0 40px 0;
}


#footer .copyright-content {
  min-height: 80px;
  padding: 30px 0;
  color: var(--white-color);
  background-color: var(--theme-color);
  font-size: 13px;
}

.footer-logo{
  display: flex;
  justify-content: center;
  align-items: center;
}


.fa-brands {
  font-weight: 400;
  font-size: 30px;
  color: var(--theme-color);
}

ul li a:hover .fa-brands{
  color: var(--blue-color);

}