@import url("https://fonts.googleapis.com/css?family=Acme|Lobster|Patua+One|Rubik|Sniglet");
* {
	box-sizing: border-box;
}
header, section {
	overflow-x: hidden;
}
:root {
 --clr-primary-800: hsl(217, 33%, 17%);
 --Sniglet-font: "Sniglet", cursive;
 --Rubik: "Rubik", cursive;
 --Patua: "Patua One", cursive;
 --Lobster: "lobster", cursive;
 --Roboto:"Roboto";
 --Arvo:"Arvo";
 --Lato;
"Lato";
 --light-black: #2e2c2caf;
 --bggradient: /*linear-gradient(to top, #30cfd0 0%, #330867 100%);*/linear-gradient(to bottom, #ABABAB, #FFFFFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 --light-gray: rgba(255, 255, 255, 0.877);
}
header a {
	font-family: var(--Roboto);
	font-size: 1em;
	color:currentColor;
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}
.dropdown-content a {
	color: black;
	padding: 10px 16px;/*12;16*/
	text-decoration: none;
	display: block;
}
.dropdown-content a:hover {
	background-color: #ddd;
}
.dropdown:hover .dropdown-content {
	display: block;
}
header .navbar .navbar-nav .nav-link::after {
  position: absolute;	
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color:#FF9600;
  color: transparent;
  width: 0%;
  content: '';
  height: 3px;
  transition: all 0.5s;
}
header .navbar .navbar-nav .nav-link:hover::after {
  width: 100%;
}
header .navbar .navbar-nav .nav-link {
  position: relative;
}
header .nav-item:last-child {
	padding-right: 6.5em;
}
header .nav-item {
	padding: 0.9em;
}

header .navbar-brand {
	padding-left: 2rem;
}
header .nav-link:hover {
	color:black;
	background-color:#9D38FF;
	border-radius: 15px 15px 0px 0px;
	transition: all 0.5s;/*hover menu transition*/
}
header .row .col-md-7 {
	padding: 22vmin 1vmin;/**22**/
	padding-bottom: 35vmin;/**35**/
}
header .row .col-md-5 {
	padding: 4.2vmin 1vmin;
}
header .row .col-md-5 img {
	width: 90%;
}
header {
	background: #ff512f;
	/* fallback for old browsers */
	background: var(--bggradient);
	
}
header .container .col-md-7 {
	font-family: "Rubik", sans-serif;
}
header .container .col-md-7 h6 {
	padding: 1vmin;
	letter-spacing: 4px;
}
header .container .col-md-7 h1 {
	font-size: 8.5vmin;/**8.5**/
	font-weight: bold;
	padding: 0.1em 0em;
}
header .container .col-md-7 p {
	padding: 1vmin 5vmin;
}
.primary-btn {
	border-radius: 30px;
	font-weight: bold;
}
/*********** section article ********/

article {
  --img-scale: 1.001;
  --title-color: #28666e;
  --link-icon-translate: -20px;
  --link-icon-opacity: 0;
  position: relative;
  border-radius: 16px;
  box-shadow: none;
  background: #fff;
  transform-origin: center;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  margin: 20px;
	
}

article a::after {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  cursor: pointer;
  content: "";
}

/* basic article elements styling */
article h2 {
  margin: 0 0 18px 0;
  font-family: var(--Roboto),"Fresh Eaters","Bebas Neue", cursive;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color:var(--title-color);
  transition: color 0.3s ease-out;
}

figure {
  margin: 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

article img {
  max-width: 100%;
  transform-origin: center;
  transform: scale(var(--img-scale));
  transition: transform 0.4s ease-in-out;
}

.article-body {
  padding: 24px;
}

article a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #28666e;
}

article a:focus {
  outline: 1px dotted #28666e;
}

article a .icon {
  min-width: 24px;
  width: 24px;
  height: 24px;
  margin-left: 5px;
  transform: translateX(var(--link-icon-translate));
  opacity: var(--link-icon-opacity);
  transition: all 0.3s;
}

/* using the has() relational pseudo selector to update our custom properties */
article:has(:hover, :focus) {
  --img-scale: 1.1;
  --title-color: #60607e;
  --link-icon-translate: 0;
  --link-icon-opacity: 1;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}


/************************ 
Generic layout (demo looks)
**************************/

.articles {
  display: grid;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 15px;/*24*/
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 5px;/*24*/

}

@media screen and (max-width: 960px) {
  article {
    container: card/inline-size;
  }	 
		
}

@container card (min-width: 380px) {
  .article-wrapper {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
  }
  .article-body {
    padding-left: 0;
  }
  figure {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  figure img {
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
  
}

/************ section logo client*********/
.scroller {
  max-width: 1000px;
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.scroller img {
    width: 220px; /* Set the desired width */
    height: 220px; /* Set the desired height */
}
.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

.brand_slid {
  display: grid;
  min-block-size: 10vh;
  place-content: center;
  font-family: system-ui;
  font-size: 1.125rem;
  /*background-color: var(--clr-primary-800);*/
}
.brand_slid h1{
	font-size: 6vmin;
	padding-top: 5vmin;
	color: #FFB600;
	font-family: var(--Lobster);
	text-align: center;
}
/********** section 1 **************/

.section-1 {
	padding: 5vmin 0vmin 5vmin ;
	
}

.section-1 .row .col-md-6 .pray img {
	opacity: 0.9;
	width: 90%;
	border-radius: 0.2em;
}
.section-1 .row .col-md-6:last-child {
	position: relative;
}
.section-1 .row .col-md-6 .panel {
	position: absolute;
	top: 1vmin;
	left: -10vmin;
	background: white;
	border-radius: 3px;
	text-align: left;
	padding: 5vmin 5vmin 5vmin 2vmin;
	box-shadow: 0px 25px 42px rgba(0, 0, 0, 0.3);
	font-family: var(--Rubik);
	z-index: 1;
}
.section-1 .row .col-md-6 .panel h1 {
	font-weight: bold;
	padding: 0.4em 0;
	font-size: 2em;
	color:#FFB600;
}
.section-1 .row .col-md-6 .panel p {
	font-size: 0.9em;
	color: rgba(0, 0, 0, 0.8);
}
/*  Section 2  */

.cover {
	width: 100%;
	height: 55vmin;
	background: url("../images/slides/BrandImg.jpg");
	/*background-position: -24rem -19rem;*/
	background-size: cover;
	position: relative;
}
.cover .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
}
.cover .content {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	padding-top: 19vmin;
}
.cover .content > h1 {
	font-family: var(--Patua);
	font-size: 6vmin;
	color:#FFFFFF;
}
.cover .content > p {
	font-family: var(--Rubik);
	font-size: 2vmin;
	color:#e5e5e5;
}
.numbers .rect {
	position: relative;
	z-index: 1;
	background: white;
	width: 17rem;
	height: 12rem;
	padding-top: 3.5vmin;
	margin: 1rem;
	border-radius: 0.5em;
	box-shadow: 1px 2px 50px 0px rgba(255, 0, 0, 0.349);
}
.numbers {
	margin-top: -15vmin;
}
.numbers .rect h3 {
	font-size: 5rem;
	color: tomato;
}
.numbers .rect > p {
	font-family: var(--Patua);
}
.purchase > h1 {
	padding-top: 15vmin;
	padding-bottom: 0.1em;
	color: #FFB600;
	font-family: var(--Lobster);
}
.purchase > p {
	color: var(--light-black);
	font-size: 2.5vmin;
	padding-bottom: 5vmin;
}
.purchase .cards .card {
	width: 22rem;
	margin: 3vmin 3vmin;
}
.cards div {
	padding: 0;
	margin: 0;
}
.cards .title {
	background: rgba(208, 241, 241, 0.199);
	padding: 1.4em 2.5em;
	font-size: 2vmin;
}
.card .card-text {
	padding: 2.5rem 3rem;
	text-align: left;
	color: var(--light-black);
}
.card-body{
	background-color: #DCD9D4;
 background-image: linear-gradient(to bottom, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), radial-gradient(at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.50) 50%);
 background-blend-mode: soft-light,screen;

}
.card-body .pricing {
	background: rgba(208, 241, 241, 0.199);
	border-top-right-radius: 170px;
	border-top-left-radius: 170px;
}
.card-body .pricing > h1 {
	font-size: 10vmin;
	padding: 1em 0.5em;
}
/* Section 3 */

.section-3 {
	height: 70vmin;
	margin-top: 15vmin;
	background: var(--bggradient);
}
.section-3 .col-md-12 > h1 {
	padding: 2em 0 0.5em 0;
	color: whitesmoke;
	font-size: 6vmin;
}
.section-3 .col-md-12 > p {
	padding: 0 4em;
	padding-bottom: 2em;
	color: var(--light-gray);
	font-size: 3vmin;
}
.section-3 .desktop {
	background: white;
	display: inline-block;
	border-radius: 3em;
	padding: 2vmin 4.5vmin;
	margin: 1em;
}
.section-3 .desktop h3 {
	font-size: 4vmin;
}
.section-3 .desktop p {
	font-size: 2vmin;
}

/* Section Team */

.section-4 .container h1 {
	font-size: 6vmin;
	padding-top: 14vmin;
	color: #FFB600;
	font-family: var(--Lobster);
}
.section-4 .team {
	padding: 10vmin 4vmin;
}
.section-4 .card {
	width: 22em;
	margin-top: 10vmin;
}
.section-4 .card .card-text {
	padding: 0.5em;
}
.section-4 .card-body > a {
	font-size: 1.5em;
}
.section-4 .carousel-item {
	padding-left: 3rem;
}
.border-radius {
	border-radius: 340px;
	width: 60%;
}
footer {
	background: rgba(0, 0, 0, 0.815);
	overflow-x: hidden;
	padding: 14vmin 18vmin;
}
footer p > span {
	color: #ff512f;
}
footer input {
	border: none !important;
}
 footer input::placeholder {
 color: white !important;
}
footer .input-group .input-group-text {
	background: var(--bggradient);
	border: none;
}
footer .column i {
	color: #dd2476;
}
/* It is Adjacent sibling combinator */

footer .column i + i {
	padding: 0 0.5em;
}
/*navi sticky*/

.sticky {
	position: fixed;
	top: 0;
	height: 100px;
	width: 100%;
	background: linear-gradient(to bottom, #ABABAB, #FFFFFF);/*#ABABAB;/*rgba(255,255, 255, 1);*/
	z-index: 9999;
	transition: all 0.3s ease;
}
/* SLIDER ------------------------------------------------------------*/

.caption {
	position: absolute;
	top: 20px;
	left: 10px;
	right: 0px;
}
.caption h5 {
	color: #ffc107;
	font-size: 4em;
	font-weight: 700;
	text-transform: uppercase;
}
.caption p {
	font-size: 1.8em;
	color: #fff;
	
}
.caption .btn {
	font-size: 25px;
	margin-top: 30px;
	border-radius: 10px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  background: rgba(49, 47, 47, 0.35); 
  border-radius: 15px;
  bottom: 1.5rem;	
  z-index: 10;
}
.carousel-caption h1{
  color: #ffc107;
	font-size: 2em;
	font-weight: 700;
	text-transform: uppercase;
}
.carousel-caption p {  
	font-size: 1em;
	
}

.testimonial_095_slide>h5>a:hover {
    border: 1px solid #aa914f
}

#testimonial_095 {
    overflow: hidden;
    min-height: 375px;
    position: relative;
    /*background: #141414*/
}

#testimonial_095>.carousel-inner {
    width: 75%;
    margin: auto
}

#testimonial_095>.carousel-inner:hover {
    cursor: -moz-grab;
    cursor: -webkit-grab
}

#testimonial_095>.carousel-inner:active {
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing
}

#testimonial_095>.carousel-inner>.carousel-item {
    overflow: hidden
}

.testimonial_095_indicators>.carousel-indicators {
    left: 0;
    margin: 0;
    width: 100%;
    font-size: 0;
    height: 20px;
    bottom: 15px;
    padding: 0 5px;
	display: block;
    overflow-x: auto;
    overflow-y: hidden;
    position: absolute;
    text-align: center;
    white-space: nowrap
}

.testimonial_095_indicators>.carousel-indicators li {
    padding: 0;
    width: 10px;
    height: 10px;
    border: none;
    text-indent: 0;
    margin: 2px 3px;
    cursor: pointer;
    display: inline-block;
    background: #fff;	
    -webkit-border-radius: 100%;
    border-radius: 100%
}

.testimonial_095_indicators>.carousel-indicators .active {
    padding: 0;
    width: 10px;
    height: 10px;
    border: none;
    margin: 2px 3px;
    background: #FF9600;
    -webkit-border-radius: 100%;
    border-radius: 100%
}

.testimonial_095_indicators>.carousel-indicators::-webkit-scrollbar {
    height: 3px
}

.testimonial_095_indicators>.carousel-indicators::-webkit-scrollbar-thumb {
    background:#ffffff;
    -webkit-border-radius: 0;
    border-radius: 0
}

.testimonial_095_control_button .carousel-control-next,
.testimonial_095_control_button .carousel-control-prev {
    top: 175px;
    opacity: 1;
    width: 40px;
    bottom: auto;
    height: 40px;
    font-size: 10px;
    cursor: pointer;
    font-weight: 700;
    overflow: hidden;
    line-height: 38px;
    text-shadow: none;
    text-align: center;
    position: absolute;
    background: 0 0;
    border: 2px solid #fff;
    text-transform: uppercase;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all .6s cubic-bezier(.3, 1, 0, 1);
    transition: all .6s cubic-bezier(.3, 1, 0, 1)
}

.testimonial_095_control_button .carousel-control-prev {
    left: 7%;
    right: auto
}

.testimonial_095_control_button .carousel-control-next {
    right: 7%;
    left: auto
}

.testimonial_095_control_button .carousel-control-next:hover,
.testimonial_095_control_button .carousel-control-prev:hover {
    color: #ffffff;
    background: #FF9600;
    border: 2px solid #ffffff
}

.testimonial_095_header>h5,
.testimonial_095_slide>h5>a,
.testimonial_095_slide>p {
    text-shadow: none;
    font-family: Raleway, sans-serif;
    -webkit-font-smoothing: antialiased
}

.testimonial_095_header {
    top: 0;
    left: 0;
    bottom: 0;
    width: 550px;
    display: block;
    margin: 30px auto;
    text-align: center;
    position: relative
}

.testimonial_095_header>h5 {
    color: #f2f2f2;
    font-size: 30px;
    font-weight: 600;
    position: relative;
    letter-spacing: 1px;
    text-transform: uppercase
}

.testimonial_095_header>h5>span {
    color: #FF9600;
    margin: 0 10px;
    position: relative
}

.testimonial_095_header>h5>span:after {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: 1px;
    content: "";
    width: 100%;
    margin: auto;
    position: absolute;
    /*background: #1ed600*/
}

.testimonial_095_slide,
.testimonial_095_slide>a {
    right: 0;
    margin: auto;
    text-align: center;
    position: relative;
    top: 0;
    left: 0
}

.testimonial_095_slide {
    bottom: 0;
    width: 70%;
    padding: 20px
}

.testimonial_095_slide>a {
    width: 50px;
    height: 50px;
    display: block;
    color: #f2f2f2;
    font-size: 18px;
    line-height: 46px;
    border: 3px solid #f2f2f2;
    -webkit-border-radius: 100%;
    border-radius: 100%
}

.testimonial_095_slide>a:after {
    top: 0;
    left: 0;
    padding: 0;
    opacity: 0;
    width: 100%;
    content: '';
    height: 100%;
    position: absolute;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .1)
}

.testimonial_095_slide>a:hover:after {
    -webkit-animation: psBoxShadowEffect_2 2s ease-out;
    animation: psBoxShadowEffect_2 2s ease-out
}

.testimonial_095_slide>p {
    color: #444444;/**#f2f2f2;**/
    font-size: 14px;
    margin: 40px 0 20px
}
.testimonial_095_slide>p>span {
    color: #FFA600;
    font-weight: bold;
}

.testimonial_095_slide>p>a {
    color: #FFA600;
    padding: 2px 5px;
    text-decoration: none;
    -webkit-transition: all .3s cubic-bezier(.39, .575, .565, 1);
    transition: all .3s cubic-bezier(.39, .575, .565, 1)
}

.testimonial_095_slide>p>a:hover {
    color: #fff;
    background: #aa914f
}


.testimonial_095_slide>h5>a {
    padding: 3px;
    color: #FF9600;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid transparent;
    -webkit-transition: border .5s cubic-bezier(.39, .575, .565, 1);
    transition: border .5s cubic-bezier(.39, .575, .565, 1)
}

.testimonial_095_slide>h5>a:hover {
    border: 1px solid #aa914f
}



@keyframes psBoxShadowEffect_2 {}

.ps_ease .carousel-item {
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease
}

.ps_easeInOut .carousel-item {
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out
}

.ps_speedy .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(0, 1, 0, 1);
    transition-timing-function: cubic-bezier(0, 1, 0, 1)
}

.ps_slowSpeedy .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.3, 1, 0, 1);
    transition-timing-function: cubic-bezier(.3, 1, 0, 1)
}

.ps_easeOutInCubic .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.22, .81, .01, .99);
    transition-timing-function: cubic-bezier(.22, .81, .01, .99)
}

.ps_swing .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.02, .01, .47, 1);
    transition-timing-function: cubic-bezier(.02, .01, .47, 1)
}

.ps_easeOutCubic .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(.215, .61, .355, 1)
}

.ps_easeInOutCubic .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.645, .045, .355, 1);
    transition-timing-function: cubic-bezier(.645, .045, .355, 1)
}

.ps_easeOutCirc .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.075, .82, .165, 1);
    transition-timing-function: cubic-bezier(.075, .82, .165, 1)
}

.ps_easeOutExpo .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.19, 1, .22, 1);
    transition-timing-function: cubic-bezier(.19, 1, .22, 1)
}

.ps_easeInQuad .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.55, .085, .68, .53);
    transition-timing-function: cubic-bezier(.55, .085, .68, .53)
}

.ps_easeOutQuad .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.25, .46, .45, .94);
    transition-timing-function: cubic-bezier(.25, .46, .45, .94)
}

.ps_easeInOutQuad .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.455, .03, .515, .955);
    transition-timing-function: cubic-bezier(.455, .03, .515, .955)
}

.ps_easeOutQuart .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.165, .84, .44, 1);
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

.ps_easeInOutQuart .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.77, 0, .175, 1);
    transition-timing-function: cubic-bezier(.77, 0, .175, 1)
}

.ps_easeOutQuint .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.23, 1, .32, 1);
    transition-timing-function: cubic-bezier(.23, 1, .32, 1)
}

.ps_easeInSine .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.47, 0, .745, .715);
    transition-timing-function: cubic-bezier(.47, 0, .745, .715)
}

.ps_easeOutSine .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.39, .575, .565, 1);
    transition-timing-function: cubic-bezier(.39, .575, .565, 1)
}

.ps_easeInOutSine .carousel-item {
    -webkit-transition-timing-function: cubic-bezier(.445, .05, .55, .95);
    transition-timing-function: cubic-bezier(.445, .05, .55, .95)
}