/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : ULaunch - Multi Purpose Products Landing Page
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. General css
02. Navigation area css
03. Slider area css
04. About us area css
05. Features area css
06. Related Product area css
07. Testimonial area css
08. Product area css
09. Brand area css
10. Contact us area css
11. Footer area css
12. Media Screens
-------------------------------------------------------------------------------------- */

/************************************/
/***** 	   01. General css		 ****/
/************************************/
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&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://use.fontawesome.com/releases/v5.13.0/css/all.css");

:root {
    --font1: 'Heebo', sans-serif;
    --font2: 'Fira Sans Extra Condensed', sans-serif;
    --font3: 'Roboto', sans-serif;

    --btnbg: #ffcc00;
    --btnfontcolor: rgb(61, 61, 61);
    --btnfontcolorhover: rgb(255, 255, 255);
    --btnbghover: #ffc116;
    --btnactivefs: rgb(241, 195, 46);


    --label-index: #960796;
    --danger-index: #5bc257;
/* PAGINATE */
    --link-color: #000;
    --link-color-hover: #fff;
    --bg-content-color: #ffcc00;

}

.container-fluid {
    max-width: 100%;

}

.card {
    background: #fff;
    box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
    transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
    border: 0;
    border-radius: 1rem;
}

.card-img,
.card-img-top {
    border-top-left-radius: calc(1rem - 1px);
    border-top-right-radius: calc(1rem - 1px);
}


.card h5 {
    overflow: hidden;
    height: 55px;
    font-weight: 300;
    font-size: 1rem;
}

.card h5 a {
  color: black;
  text-decoration: none;
} 

.card-img-top {
    width: 100%;
    min-height: 250px;
    max-height: 250px;
    object-fit: contain;
    padding: 30px;
}

.card h2 {
    font-size: 1rem;
}


.card:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
}

/* Centered text */
.label-top {
    position: absolute;
    background-color: var(--label-index);
    color: #fff;
    top: 8px;
    right: 8px;
    padding: 5px 10px 5px 10px;
    font-size: .7rem;
    font-weight: 600;
    border-radius: 3px;
    text-transform: uppercase;
}

.top-right {
    position: absolute;
    top: 24px;
    left: 24px;

    width: 90px;
    height: 90px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 900;
    background: #8bc34a;
    line-height: 90px;
    text-align: center;
    color: white;
}

.top-right span {
    display: inline-block;
    vertical-align: middle;
    /* line-height: normal; */
    /* padding: 0 25px; */
}

.aff-link {
    /* text-decoration: overline; */
    font-weight: 500;
}

.over-bg {
    background: rgba(53, 53, 53, 0.85);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(0.0px);
    -webkit-backdrop-filter: blur(0.0px);
    border-radius: 10px;
}
.bold-btn {

    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    padding: 5px 50px 5px 50px;
}
.box .btn {
    font-size: 1.5rem;
}

@media (max-width: 1025px) {
    .btn {
        padding: 5px 40px 5px 40px;
    }
}
@media (max-width: 250px) {
    .btn {
        padding: 5px 30px 5px 30px;
    }
}

/* START BUTTON */
.btn-warning {
    background: var(--btnbg);
    color: var(--btnfontcolor);
    fill: #ffffff;
    border: none;
    text-decoration: none;
    outline: 0;
    /* box-shadow: -1px 6px 19px rgba(247, 129, 10, 0.25); */
    border-radius: 100px;
}
.btn-warning:hover {
    background: var(--btnbghover);
    color: var(--btnfontcolorhover);
    /* box-shadow: -1px 6px 13px rgba(255, 150, 43, 0.35); */
}
.btn-check:focus + .btn-warning, .btn-warning:focus {
    background: var(--btnbghover);
    color: var(--btnfontcolorhover);
    /* box-shadow: -1px 6px 13px rgba(255, 150, 43, 0.35); */
}
.btn-warning:active:focus {
    box-shadow: 0 0 0 0.25rem var(--btnactivefs);
}
.btn-warning:active {
    background: var(--btnbghover);
    color: var(--btnfontcolorhover);
    /* box-shadow: -1px 6px 13px rgba(255, 150, 43, 0.35); */
}

/* END BUTTON */

.bg-success {
    font-size: 1rem;
    background-color: var(--btnbg)!important;
    color: var(--btnfontcolor)!important;
}
.bg-danger {
    font-size: 1rem;
}


.price-hp {
    font-size: 1rem;
    font-weight: 600;
    color: darkgray;
}

.amz-hp {
    font-size: .7rem;
    font-weight: 600;
    color: darkgray;
}

.fa-question-circle:before {
    /* content: "\f059"; */
    color: darkgray;
}

.fa-heart:before {
    color:crimson;
}
.fa-chevron-circle-right:before {
    color: darkgray;
}

.row {
    margin-right: calc(* var(--bs-gutter-x)) !important;
}


.container22 .btn22 {
        position: absolute;
        top: 3%;
        left: 14.5%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #ee7f22;
        color: white;
        font-size: 12px;
        padding: 5px 10px;
        border: none;
        cursor: pointer;
        border-radius: 9px 0px 10px 0px;
        text-align: center;
    }

            .card {
                width: 100%;
                border-radius: 10px;
            }

            .card-img-top {
                border-top-right-radius: 10px;
                border-top-left-radius: 10px;
            }

            span.text-muted {
                font-size: 12px;
            }

            small.text-muted {
                font-size: 8px;
            }

            h5.mb-0 {
                font-size: 1rem;
            }

            small.ghj {
                font-size: 9px;
            }

            .mid {
                background: #ECEDF1;
            }

            h6.ml-1 {
                font-size: 13px;
            }

            small.key {
                text-decoration: underline;
                font-size: 9px;
                cursor: pointer;
            }

            .btn-danger {
                color: #FFCBD2;
            }

            .btn-danger:focus {
                box-shadow: none;
            }

            small.justify-content-center {
                font-size: 9px;
                cursor: pointer;
                text-decoration: underline;
            }

            @media screen and (max-width:600px) {
                .col-sm-4 {
                    margin-bottom: 50px;
                }
            }

.photo-gallery p {
  color:#7d8285;
}

.photo-gallery h2 {
  font-weight:bold;
  margin-bottom:40px;
  padding-top:40px;
  color:inherit;
}

@media (max-width:767px) {
  .photo-gallery h2 {
    margin-bottom:25px;
    padding-top:25px;
    font-size:24px;
  }
}

.photo-gallery .intro {
  font-size:16px;
  max-width:500px;
  margin:0 auto 40px;
}

.photo-gallery .intro p {
  margin-bottom:0;
}

.photo-gallery .photos {
  padding-bottom:20px;
}

.photo-gallery .item {
  padding-bottom:30px;
}



body{
	font-size: 16px;
	font-family: 'Rubik', sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6{
	margin-top:0;
	font-weight: 500;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

figure{
	margin: 0;
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	background: #06122c;
	z-index: 9999;
}

.loader{
	display: inline-block;
	width: 30px;
	height: 30px;
	position: relative;
	border: 4px solid #Fff;
	top: calc(50% - 15px);
	animation: loader 2s infinite ease;
}

.loader-inner{
	vertical-align: top;
	display: inline-block;
	width: 100%;
	background-color: #fff;
	animation: loader-inner 2s infinite ease-in;
}

.btn-custom{
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	padding: 10px 30px;
	text-align: center;
	color: #ff2938;
	background: #fff;
	border: 2px solid #fff;
	border-radius: 26px;
	transition: all 0.3s;
}

.btn-custom:hover{
	background: none;
	color: #fff;
}

.container{
	max-width: 1160px;
}

/************************************/
/***** 02. Navigation area css  *****/
/************************************/

nav.navbar.main-menu{
	padding: 16px 0;
	background: none !important;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	transition: all 0.3s ease-in-out;
}

.navbar-brand{
	height: auto;
	transition: all 0.3s ease-in-out;
}

.navbar-brand img{
	height: 60px;
	transition: all 0.3s ease-in-out;
}

.navbar-right{
	margin-right: 0;
}

.main-nav{
	justify-content: flex-end;
}

nav.navbar.main-menu ul.nav > li > a{
	font-size: 14px;
	font-weight: 300;
	text-transform: uppercase;
	color: #fff;
	padding: 20px 20px;
	line-height: 1em;
	letter-spacing: 0.05em;
	transition: all 0.3s ease-in-out;
}

nav.navbar.main-menu ul.nav > li > a.active{
	color: #ffc600;
}

nav.navbar.main-menu.sticky-header{
	background: #06122c !important;
	padding: 6px 0;
}

nav.navbar.main-menu.sticky-header .navbar-brand img{
	height: 46px;
}

.navbar-toggler{
	float: right;
	border: 1px solid #fff;
	color: #fff;
	border-radius: 0;
	padding: 6px 10px;
	outline: 0;
	box-shadow: none;
	margin-top: 8px;
}

nav.navbar .navbar-toggler:focus{
	outline: 0;
	box-shadow: none;
}

/************************************/
/*****   03. Slider area css    *****/
/************************************/

.banner{
	position: relative;
	top: 0px;
	left: 0;
	width: 100%;
	background: radial-gradient(at 10%,#314164, #203053, #0b1935, #06122c);
	background: -webkit-radial-gradient(at 10%,#314164, #203053, #0b1935, #06122c);
	background: -moz-radial-gradient(at 10%,#314164, #203053, #0b1935, #06122c);
	background: -o-radial-gradient(at 10%,#314164, #203053, #0b1935, #06122c);
	background-size: cover;
	padding: 140px 0 200px;
	    height: 100% !important;
}

.banner .row{
	position: relative;
	z-index: 1;
}

.header-content h2{
	font-family: 'Saira Semi Condensed', sans-serif;
	font-size: 78px;
	font-weight: 700;
	font-style: italic;
	margin: 0;
}

.text-blue{
	color: #00edf5;
}

.text-lightblue{
	color: #4e638d;
}

.text-white{
	color: #fff;
}

.btn-booknow{
	display: inline-block;
	background: #ffc600;
	color: #06122c;
	font-size: 18px;
	font-weight: 500;
	padding: 10px 30px 8px;
	border: 2px solid #ffc600;
	border-radius: 40px; 
	margin-top: 20px;
	transition: all 0.3s ease-in-out;
}

.btn-booknow:hover{
	background: none;
	color: #ffc600;
}

/**************************************/
/*****   04. About us area css    *****/
/**************************************/

.section-title{
	text-align: center;
	padding-bottom: 20px;
	margin-bottom: 60px;
	background: url(../images/blue-divider.png) no-repeat bottom center;
}

.section-title h2{
	font-size: 60px;
	color: #06122c;
	font-weight: 700;
	margin-bottom: 0;
}

.section-title p{
	color: #06122c;
	font-size: 20px;
	font-weight: 500;
	font-style: italic;
	margin: 0;
}

.aboutus{
	background: #00edf5;
	padding: 80px 0;
}

.aboutus .section-title{
	text-align: left;
	margin-bottom: 40px;
	background: url(../images/blue-left-divider.png) no-repeat bottom left;	
}

.about-entry p{
	color: #06122c;
	line-height: 1.5em;
	font-weight: 300;
	margin-bottom: 1.5em;
}

.about-image{
	padding-top: 60px;
	text-align: right;
}

/**************************************/
/*****   05. Features area css    *****/
/**************************************/

.features{
	padding: 80px 0;
	background: #ecf4f4;
}

.features-image{
	text-align: center;
	margin-bottom: 100px;
}

.feature-single h3{
	font-size: 96px;
	color: #ffc600;
	font-weight: 600;
	margin-bottom: 0;
}

.feature-single h4{
	font-size: 26px;
	color: #040e27;
	font-weight: 300;
	margin-bottom: 20px;
}

.feature-single p{
	font-size: 14px;
	color: #818282;
	font-weight: 300;
}

/****************************************/
/***** 06. Related Product area css *****/
/****************************************/

.related-product{
	padding: 80px 0 220px;
	background: #f2f6f6 url(../images/waves.png) no-repeat bottom center;
	background-size: contain;
}

.related-single{
	margin-bottom: 80px;
}

.related-product-info{
	padding-top: 30px;
}

.related-product-info h3{
	font-size: 35px;
	color: #06122c;
	font-weight: 700;
	margin-bottom: 1em;
}

.related-product-info p{
	font-size: 14px;
	color: #818282;
	font-weight: 300;
	margin-bottom: 1.5em;
}

.related-product-info .btn-booknow{
	margin-top: 10px;
}

/****************************************/
/*****   07. Testimonial area css   *****/
/****************************************/

.testimonial{
	padding: 80px 0;
	background: #06122c;
}

.testimonial .section-title{
	background: url(../images/white-divider.png) no-repeat bottom center;
}

.testimonial .section-title p{
	color: #ffc600;
}

.testimonial .section-title h2{
	color: #fefefe;
}

.testimonial-single{
	max-width: 768px;
	margin: 0 auto;
	text-align: center;
}

.testimonial-single p{
	color: #fff;
	font-style: italic;
	font-weight: 500;
	font-size: 20px;
	margin-bottom: 30px;
}

.ratting{
	color: #ffc600;
	position: relative;
	padding-top: 30px;
	padding-bottom: 10px;
}

.ratting:before{
	content: '';
	display: block;
	width: 80px;
	height: 1px;
	position: absolute;
	top: 0;
	left: 50%;
	background: rgba(255,255,255,0.2);
	margin-left: -40px;
}

.testimonial-single h3{
	color: #fff;
	font-weight: 500;
	font-size: 20px;
}

.testimonial-single h3 span{
	display: block;
	font-size: 16px;
	font-style: italic;
	font-weight: 300;
	padding-top: 6px;
}

.testimonial-pagination{
	text-align: center;
	padding-top: 20px;
}

.testimonial-pagination .swiper-pagination-bullet{
	width: 12px;
	height: 12px;
	background: #fff;
	opacity: 1;
}

.testimonial-pagination .swiper-pagination-bullet-active{
	background: #ffc600;
}

/****************************************/
/*****     08. Product area css     *****/
/****************************************/

.row.no-gutters {
   margin-right: 0;
   margin-left: 0;
}


.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
   padding-right: 0;
   padding-left: 0;
}

.products .container-fluid{
	padding-left: 0;
	padding-right: 0;
}

.product-single{
	position: relative;
}

.product-image{
	position: relative;
}

.product-image img{
	width: 100%;
}

.product-image:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #06122c;
	opacity: 0.4;
}

.product-info{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30px;
	transition: all 0.3s ease-in-out;
}

.product-info h3{
	color: #fff;
	font-size: 26px;
	margin-bottom: 4px;
}

.product-info p{
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 0;
}

.product-info p span{
	color: #ffc600;
}

.product-info .btn-booknow{
	padding: 6px 20px 5px;
	font-size: 16px;
	margin-top: 8px;
}

.product-single:hover .product-info{
	padding-bottom: 50px;
}

/**************************************/
/*****     09. Brand area css     *****/
/**************************************/

.brand{
	padding: 30px 0;
	background: #f2f6f6;
}

.brand-single{
	text-align: center;
}

/*******************************************/
/*****     10. Contact us area css     *****/
/*******************************************/

.contactus{
	padding: 80px 0;
}

.contact-about{
	padding-bottom: 30px;
}

.contact-about p{
	color: #bbbbbb;
	font-weight: 300;
	line-height: 1.5em;
}

.contact-info-single h3{
	color: #06122c;
	font-size: 18px;
}

.contact-info-single p{
	color: #bbbbbb;
	font-weight: 300;
	line-height: 1.5em;
}

.contact-form .form-control{
	box-shadow: none;
	border-radius: 0;
	height: auto;
	padding: 10px 14px;
	background: #f3f3f3;
	border: none;
	outline: 0;
	resize: none;
	font-size: 14px;
}

.btn-contact{
	display: inline-block;
    background: #ffc600;
    color: #06122c;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 30px 8px;
    border: 2px solid #ffc600;
    border-radius: 40px;
    transition: all 0.3s ease-in-out;
}

.btn-contact:hover{
	background: none;
	color: #ffc600;
}

.with-errors ul{
	margin: 0;
	color: #a94442;
}

/***************************************/
/*****     11. Footer area css     *****/
/***************************************/

footer{
	background: #06122c;
	padding: 80px 0;
	text-align: center;
}

.footer-logo{

}

.footer-menu{
	margin-top: 30px;
}

.footer-menu ul{
	padding: 0;
	margin: 0;
	list-style: none;
}

.footer-menu ul li{
	display: inline-block;
	text-transform: uppercase;
}

.footer-menu ul li a{
	display: block;
	font-size: 14px;
	color: #fff;
	font-weight: 300;
	letter-spacing: 0.04em;
	padding: 0 6px;
}

.footer-menu ul li a:hover{
	color: #ffc600;
}

.footer-social{
	margin-top: 30px;
}

.footer-social a{
	display: inline-block;
	width: 36px;
	height: 36px;
	background: #fff;
	text-align: center;
	color: #06122c;
	font-size: 20px;
	padding-top: 5px;
	border-radius: 50%;
	margin: 0 4px;
	transition: all 0.3s ease-in-out;
}

.footer-social a:hover{
	background: #ffc600;
}

.footer-siteinfo{
	margin-top: 30px;
}

.footer-siteinfo p{
	color: #fff;
	font-weight: 300;
}

/************************************/
/*****    12. Media Screens     *****/
/************************************/

@media only screen and (max-width: 1200px){
	.navbar-default .navbar-nav>li>a:after{
		padding: 0 12px 0 14px;
	}
	
	.header-content h2{
		font-size: 94px;
	}
}

@media only screen and (max-width: 991px){
	
	nav.navbar.main-menu,
	nav.navbar.main-menu.sticky-header{
		padding: 14px 0;
	}

	.navbar-brand img{
		height: 46px;
	}

	nav.navbar.main-menu .navbar-header{
		position: relative;
		width: 100%;
	}
	
	nav.navbar.main-menu .navbar-collapse{
		background: #06122c;
		padding: 0 20px;
		margin: 10px -15px 0;
	}
	
	nav.navbar.main-menu .navbar-nav{
		margin: 0;
		padding: 0;
	}
	
	nav.navbar.main-menu.sticky-header ul.nav > li > a,
	nav.navbar.main-menu ul.nav > li > a{
		padding: 12px 0;
		border: none;
		margin: 0;
	}
	
	nav.navbar.main-menu ul.nav > li > a:after{
		display: none;
	}
	
	.header-content h2{
		font-size: 64px;
	}
	
	.section-title h2{
		font-size: 46px;
	}
	
	.section-title p{
		font-size: 18px;
	}
	
	.related-product-info{
		padding-top: 0;
	}
	
	.contact-info-single{
		margin-bottom: 30px;
	}
}

/* Mobile Layout */
@media only screen and (max-width: 767px){
	nav.navbar.bootsnav.sticky-header .navbar-brand,
	nav.navbar.bootsnav .navbar-brand{
		padding-left: 15px;
		padding-right: 15px;
	}
	
	nav.navbar.bootsnav .navbar-toggle{
		right: 15px;
	}
	
	nav.navbar.bootsnav .navbar-collapse{
		margin-left: -15px;
		margin-right: -15px;
	}
	
	.slider-image{
		text-align: center;
		margin-bottom: 40px;
	}
	
	.header-content{
		text-align: center;
	}
	
	.header-content h2{
		font-size: 36px;
		line-height: 1.2em;
	}
	
	.banner{
		padding: 140px 0 60px;
	}
	
	.section-title h2{
		font-size: 28px;
	}
	
	.section-title p{
		font-size: 14px;
	}
	
	.aboutus,
	.related-product,
	.testimonial,
	.contactus,
	footer{
		padding: 60px 0;
	}
	
	.features{
		padding: 60px 0 30px;
	}
	
	.about-image{
		text-align: center;
	}
	
	.features-image{
		margin-bottom: 40px;
	}
	
	.feature-single{
		margin-bottom: 30px;
	}
	
	.feature-single h3{
		font-size: 60px;
	}
	
	.related-product-info{
		margin-bottom: 40px;
	}
	
	.related-product-image{
		text-align: center;
	}
	
	.related-product-info h3{
		font-size: 24px;
	}
}

/* Small Mobile Layout */

@media only screen and (max-width: 480px) {
	.testimonial-single p{
		font-size: 16px;
	}
	
	.testimonial-single h3{
		font-size: 16px;
	}
}