@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;300;400;500;600;700;800;900&display=swap');

* {
	margin: 0%;
	padding: 0%;
	box-sizing: border-box;
}

body {
	font-family: 'Roboto Slab', serif !important;
	scroll-behavior: smooth;
}

:root {
	--brand-cl: #de9000;
	--white-cl: #fff;
	--black-cl: black;
	--bg-cl: #faf5ed;
	--bg-pricing: #f2610e;
}

/* ==========================================================
                    UTILITY CLASSES
========================================================== */


h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0%;
}

ul {
	margin-bottom: 0 !important;
}

li {
	list-style: none;
}

a {
	text-decoration: none !important;
	color: black;
}

.main-btn {
	border: 1px solid #eef0f0de;
	outline: none;
	font-size: 16px;
	font-weight: 400;
	color: var(--black-cl);
	padding: .6rem 1.3rem;
	border-radius: 5px;
	background-color: transparent;
	text-transform: capitalize;
}


/* ==========================================================
                    Header Styling
========================================================== */

/* header{
    height: 90px;
    padding: 0 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.navbar-left,
.navbar-right{
    display: flex;
    align-items: center;
}

.navbar-right i{
    font-size: 21px;
}

header .logo img{
    height: 50px;
    border: 1px solid #eef0f0de;
}

.nav_items ul{
    display: flex;
    align-items: center;
    gap: 40px;
    margin-left: 2rem;
}
.nav_items ul li{
    position: relative;
}

.nav_items ul li a::before{
    content: '';
    position: absolute;
    top: -31px;
    left: 0;
    height: 2px;
    width: 0%;
    background-color: var(--brand-cl);
    transition: all .4s ease-in-out;
}


.nav_items ul li a{
    font-size: 17px;
    font-weight: 400;
    color: var(--black-cl);
}

.nav_items ul li a:hover::before,
.nav_items ul li a.active{
    color: var(--brand-cl);
    width: 100%;
}

.nav_items ul li a:hover{
    color: var(--brand-cl);
} */

/* ==========================================================
           header navbar  Styling
========================================================== */
.social-part .fa {
	padding-right: 20px;
}

ul li a {
	margin-right: 20px;
}

.navbar-brand img {
	border: 1px solid whitesmoke;
	width: 150px;
}

.lis1t ul li {
	position: relative;
	margin: 0;
}

.lis1t>ul>li {
	padding: 1rem 0;
}

.list1 .nav-item .nav-link {
	font-family: "Roboto Slab", Sans-serif !important;
	font-weight: 400 !important;
	margin: 0 0.75rem !important;
	padding: 0.6125rem 0.35rem !important;
	font-size: 18px !important;
	color: #434343 !important;
	white-space: nowrap !important;
}

.list1 .nav-item a:hover,
.list1 .nav-item a.active {
	color: #de9000 !important;
}

.homelink {
	color: #de9000 !important;
}

.text-sm {
	font-size: .875rem;
	line-height: 1.25rem;
}

.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 99;
	max-width: calc(100vw - 1rem);
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

menu,
ol,
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sub-menu li a {
	display: block;
	position: relative;
	width: 100%;
	text-align: inherit;
	white-space: nowrap;
	margin: 0;
	display: flex;
	padding: 0.5rem 1rem;
	color: #de9000 !important;
}

.sub-menu a:hover {
	background: whitesmoke;
}

.sub-menu .dmenu:hover {
	display: block;
}

.navbar-right li {
	display: flex;
	align-items: center;
}


/* ==========================================================
                    Header Banner Styling
========================================================== */


.header-banner {
	width: 100%;
	background-color: var(--bg-cl);
	padding: 3rem 0 0 0;
}

.header-banner .row {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.header-banner-content h1 {
	font-size: 66px;
	font-weight: 800;
	color: var(--black-cl);
	line-height: 1.6;
}

.header-banner-content p {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #333;
}

.btn-grad {
	font-family: "Roboto Slab", Sans-serif;
	font-weight: 500;
	background-color: transparent;
	background-image: linear-gradient(to right bottom, #F2610E 10%, #FFD100 100%);
	margin: 10px;
	padding: 15px 45px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;
	box-shadow: 0 0 20px #eee;
	border-radius: 10px;
	display: block;
	border: none;
}

/* ==========================================================
            Header Banner 2 Styling
========================================================== */

.header-banner2 {
	width: 100%;
	padding: 3rem 0 0 0;
}

.header-banner2 .row {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.header-banner-content2 h1 {
	font-size: 45px;
	font-weight: 800;
	color: var(--black-cl);
	line-height: 1.6;
}

.header-banner-content2 p {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #333;
}

/* ==========================================================
        Slider 1 Styling
========================================================== */
.slider-content {
	width: 100%;
	background-color: var(--bg-cl);
	padding: 0rem 0 0 0;
	margin: 2rem 0px 0px 0px;
	padding: 0rem 0px 6rem 0px;


}

.slider-content .row {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.sliderImage_gap {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.slider1 {
	background: white !important;
	box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px !important;
	padding: 30px 0px 71px 0px;
	border: 1px solid;
	border-radius: 0.5rem;
	opacity: 1;
	border-color: rgb(229 231 235);
	width: 257.5px;
	width: 200px;
	margin-right: 16px;

}

.slider1 img {
	height: 60px;
}

.slider1 h3 {
	font-family: 'Assistant', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600;
	margin-top: 5px;
}

.headings {
	font-size: 45px;
	font-weight: 800;
	color: var(--black-cl);
	line-height: 1.6;
	text-align: center;
	padding: 25px;
}

/* ==========================================================
        Slider 2 Styling
========================================================== */
.slider2_content {
	padding: 0rem 0px 9rem 0px;
}

.slider2_bg1 {
	background-image: url('../images/img11.jpg');
}

.slider2_bg2 {
	background-image: url('../images/img12.png');
}

.slider2_bg3 {
	background-image: url('../images/img13.jpg');
}

.slider2 {
	display: flex;
	justify-content: center;
	background-size: cover;
	margin-bottom: 96px;
	padding-top: 72px;
	border-radius: 5px;
	width: 208px;
	margin-right: 20px;
}

.slider2 a {
	text-decoration: none !important;
	color: black;
}

.slider2 span {
	text-transform: uppercase;
	font-size: .75em;
	opacity: .6;
}

.member_featured_block_wrapper.default_member_block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin: -20px 0px -64px 0px;
	margin: 7px 0px -57px 5px;


}

.member_background img {
	width: 72px;
	border-radius: 50%;
	margin-bottom: -36px;

}

.member_name {
	width: 100% !important;
	text-align: center !important;
}

/* ==========================================================
        subscribtion Styling
========================================================== */
.subscribtion_content {
	background-image: url('../images/img17.png');
	height: 500px;
	display: flex;
	justify-content: center;
	background-size: cover;
	margin: 0px;
	padding: 0px;

}

.sub_heading {
	text-align: center;
	color: #FFFFFF;
	font-family: sans-serif;
	font-weight: 400;
	font-size: 54px;
}

.sub_data {
	margin: 101px 0px 0px 0px;
}

.sub_data p {
	text-align: center;
	color: #FFFFFF;
	font-size: 16px;
	font-family: sans-serif;
	margin-top: 10px;
}

.sub_data .form {
	padding: 33px 0px 0px 89px;

}

.sub_data input {
	border-radius: 5px;
	flex: 1;
	max-width: 320px;
	padding: 1rem;
	font-family: sans-serif;
	border-radius: 5px;
	flex: 1;
	width: 326px;
	padding: 1rem;
	border: 1px solid;
	font-size: 100%;
	line-height: inherit;
	color: inherit;
	margin: 0;

}

.sub_data button {
	padding: 1rem 2rem;
	color: white;
	border-radius: 5px;
	background: #de9000;
	border: 1px solid;
	cursor: pointer;
	transition: all .3s ease;
	position: relative;
	display: inline-block;
	outline: none;
	left: 25px;


}

/* ==========================================================
        owl slider Styling
========================================================== */

.owl-carousel .owl-item img {
	width: 20% !important;
	display: inline;
	height: auto;
}

.owl-carousel .owl-nav button.owl-prev {
	background: 0 0;
	color: inherit;
	border: none;
	padding: 0 !important;
	font: inherit;
	height: 50px;
	position: absolute;
	width: 52px;
	right: -52px;
	background: white;
	cursor: pointer;
	top: 79px !important;
	border-radius: 50%;
	color: inherit;
	font: caption;
	font-size: 44px;
}

.owl-carousel .owl-nav button.owl-next {
	background: 0 0;
	color: inherit;
	border: none;
	padding: 0 !important;
	font: inherit;
	height: 50px;
	position: absolute;
	width: 52px;
	left: -51px;
	background: white;
	cursor: pointer;
	top: 73px !important;
	border-radius: 50%;
	color: inherit;
	font: caption;
	font-size: 44px;

}

.owl-carousel .owl-nav button {
	display: none !important;
}

.slider-content:hover .owl-carousel .owl-nav button {
	display: block !important;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	background: white;
	color: black;
}

.slick-prev:before,
.slick-next:before {
	color: black;
}

.slick-prev,
.slick-next {
	display: none !important;
}

.slick-next {
	color: black;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	position: absolute;
	top: 80%;
	right: 14px;
	width: 20px;
	height: 20px;
	background: white;
	border-radius: 50%;
	height: 50px;
	width: 50px;
	bottom: 29px;
}

.slick-prev {
	color: black;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	position: absolute;
	top: 80%;
	left: 0;
	width: 20px;
	height: 20px;
	background: white;
	border-radius: 50%;
	height: 50px;
	width: 50px;
	bottom: 29px;
}

.slider2_content:hover .slick-prev {
	display: block !important;
}

.slider2_content:hover .slick-next {
	display: block !important;
}

/* ==========================================================
       Footer Styling
 ========================================================== */
 .footer{
	background-color: #fafafa;
	padding: 45px;
 }
.footer p {
	color: black;
	font-family: sans-serif;
	font-size: 1rem;
}

.footeraddress {
	font-weight: bolder;
	color: #333333;
	font-family: sans-serif;
}

.fa-brands,
.fab {
	font-weight: 400;
	font-size: 40px;
	margin: 5px 12px 0px 0px;
}

.fa-square-facebook {
	color: #004ca9;
}

.fa-youtube {
	color: #ff2922;
}

.fa-linkedin {
	color: #036dc5;
}

.fa-square-instagram {
	color: #ff4b8c;
}

.fa-square-twitter {
	color: #00b0f3;
}

.widget_title {
	color: #333333;
	font-size: 1.16rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	font-family: 'roboto_slabbold', 'system';
}

/* ==========================================================
                    pricing.php file
========================================================== */
.pricing_details {
	width: 100%;
	background-color: var(--bg-pricing);
	padding: 3rem 0 0 0;
}

.pricing_details .colbg {
	background-color: white;
	height: auto;
	width: 28%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.pricing_details .colbg h3 {
	color: #f2610e;
	font-size: 33px;
	font-weight: 500;
	font-family: system-ui;
}

.pricing_details .colbg p {
	color: gray;
	font-size: 16px;
	font-weight: 400;
	font-family: system-ui;
}

.pricing_details .colbg button {
	padding: 8px;
	background: #f2610e;
	border: 0px;
	border-radius: 3px;
	color: white;
	font-size: 15px;
	font-family: system-ui;
	margin: 19px 0px 36px 0px;
}

.circle {
	background-color: #f2610e;
	height: 50px;
	width: 50px;
	border-radius: 50%;
}

.colbg .fa-solid {
	font-weight: 900;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	align-content: stretch;
	margin: 8px 0px 0px 0px;
	color: white;
	font-size: xx-large;
}

.pricing_details .container .row {
	display: flex;
	align-items: center;
	align-content: stretch;
	justify-content: space-evenly;
}

/* ==========================================================
                    login and sign up pages
========================================================== */
.login h3{
	font-size: 45px;
	font-weight: 600;
	color: #394c62;
}
.login p{
	font-size: 16px;
	font-weight: 400;
	color: #394c62;
}
.login label{
	color: #475f7b;
}
.login .createAccountBtn{
	border-radius: 0;
	padding: 8px;
	display: block;
	width: -webkit-fill-available;
}

/* ==========================================================
                    Media Quries
========================================================== */
@media only screen and (max-width: 1200px) {
	/*Tablets [601px -> 1200px]*/
}

@media only screen and (max-width: 600px) {
	/*Big smartphones [426px -> 600px]*/
}

@media only screen and (max-width: 480px) {

	/*Small smartphones [325px -> 425px]*/
	.header-banner-content h1 {
		font-size: 32px;
		text-align: center;
	}

	.btn-grad {
		margin: 31px !important;
		padding: 8px 18px !important;
	}

	.sub_data .form {
		padding: 0px 0px 0px 50px !important;
	}

	.header-banner-content2 h1 {
		font-size: 30px !important;
	}

	.sub_heading {
		font-size: 31px !important;
		display: block;
	}

	.sub_data p {
		font-size: 12px !important;
	}

	.sub_data button {
		padding: 0.5rem 1rem !important;
		margin: 27px 0px 0px 70px !important;
	}

	.footer img {
		width: auto !important;
	}

	.slider1 {
		margin-right: 85px !important;
	}

	.owl-carousel .owl-nav button {
		display: block !important;
	}

	.owl-carousel .owl-nav button.owl-prev {
		height: 29px !important;
		position: absolute;
		width: 28px !important;
		right: 30px !important;
		font-size: 25px !important;
	}

	.owl-carousel .owl-nav button.owl-next {
		height: 29px !important;
		position: absolute;
		width: 28px !important;
		left: 30px !important;
		font-size: 25px !important;
	}

	/*pricing.php */
	.pricing_details .colbg {
		width: -webkit-fill-available;
	}

	/*login/signup.php */
	.loginrow{
	    justify-content: flex-end;
	}
	.login .createAccountBtn {
	    display: block;
			width: auto !important;
	}
	.login h3 {
    font-size: 33px !important;
 }

}