/* ========================= www.DipeshPednekar.com




---- Element
---- Common
---- Header
---- Navigation
---- Banner
---- About
---- Footer
---- Scroll to Top




---- Breadcumb
---- About Page
---- Product Page
---- Contact Page
---- 404 Page




========================= www.DipeshPednekar.com */
















/*------------------------------------------------ Element ------------------------------------------------*/


:root {
	/* Basic Colour Scheme*/
	--transparent: rgba(0,0,0,0);
	--white: #fff;
	--black: #000;
	--dark-black: #060606;
	--medium-black: #565656;
	--grey: #a7a7a7;
	--medium-grey: #e4e4e4;
	--light-grey: #efefef;


	/* Brand Colour Scheme*/
	--dp-pink: #d94e87;
	--dp-orange: #f58e63;
	--dp-green: #40b7b1;
	--dp-yellow: #e6d93f;


	/* Secondary Colour Scheme*/
	--dp-green-extract: #1a9f98;
	--bg-blue: #eff4f9;


	/* Misc Colour Scheme*/
	--wp-color: #075E54;
}


html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'Montserrat', sans-serif;
	-webkit-text-size-adjust: 100%;
	-webkit-scroll-behavior: smooth;
	-moz-scroll-behavior: smooth;
	-ms-text-size-adjust: 100%;
	-ms-scroll-behavior: 100%;
	scroll-behavior: smooth;
	min-height: 100%;
	height: 100%;
	margin: 0;
}


body {
	-webkit-font-smoothing: antialiased;
	font-family: 'Montserrat', sans-serif;
	color: var(--dark-black);
	scroll-behavior: smooth;
	min-height: 100%;
	height: 100%;
	margin: 0;
}


::-webkit-scrollbar {
	width: 6px;
}


::-webkit-scrollbar-track {
	background: var(--light-grey); 
}
 

::-webkit-scrollbar-thumb {
	background: var(--dp-green); 
}


::-webkit-scrollbar-thumb:hover {
	background: var(--dp-green); 
}


::-webkit-selection {
	background: var(--dark-black);
	color: var(--white);
}


::-moz-selection {
	background: var(--dark-black);
	color: var(--white);
}


::selection {
	background: var(--dark-black);
	color: var(--white);
}


:focus {
	outline-width: none;
	outline-color: none;
	outline-style: auto;
	outline: none;
}


::placeholder {
	font-weight: 300;
	color: var(--medium-black);
	opacity: 1; /* Firefox */
}


::-ms-input-placeholder { /* Edge 12 -18 */
	font-weight: 300;
	color: var(--medium-black);
}


input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}


input[type=number] {
	-moz-appearance:textfield;
}


button {
	border: none;
}


input:focus {
	outline: none;
}


button:focus {
	outline: none;
}


h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Montserrat', Arial , Helvetica , sans-serif;
        letter-spacing: 0.06rem;
        word-spacing: 0.25rem;
	color: var(--black);
	font-weight: 800;
}


p,
article,
span,
input,
textarea,
li,
ul,
select,
pre,
code,
select,
label {
        font-family: 'Nunito Sans', Arial , Helvetica , sans-serif;
        letter-spacing: 0.06rem;
        word-spacing: 0.12rem;
	color: var(--black);
	font-size: 1rem;
        font-weight: 400;	
	line-height: 1.6;
}


h1 {
	font-size: 3rem;
	line-height: 1.8;
}


h2 {
	font-size: 2.8rem;
	line-height: 1.5;
}


h3 {
	font-size: 2.6rem;
	line-height: 1.5;
}


h4 {
	font-size: 2.2rem;
	line-height: 1.5;
}


h5 {
	font-size: 2rem;
	line-height: 1.5;
}


h6 {
	font-size: 2rem;
	line-height: 1.5;
}


a {
	text-decoration: none;
	color: var(--dp-green);
}


a:hover {
	text-decoration: none;
	color: var(--dp-orange);
}


b {
	font-weight: 500;
}


textarea {
	resize: none;
}


small {
	font-size: 0.8rem;
}

img {
	border-radius: 2rem;
}


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


	h1 {
		font-size: 2.6rem;
		line-height: 1.4;
	}


	h2 {
		font-size: 2rem;
		line-height: 1.2;
	}


	h3 {
		font-size: 1.6rem;
		line-height: 0.8;
	}


	h4 {
		font-size: 1.2rem;
		line-height: 0.8;
	}


	h5 {
		font-size: 1.2rem;
		line-height: 0.6;
	}


	h6 {
		font-size: 1.2rem;
		line-height: 0.6;
	}


	p,
	article,
	span,
	input,
	textarea,
	li,
	ul,
	select,
	pre,
	code,
	select,
	label {
		font-size: 1.2rem;
		line-height: 1.6;
	}


}
















/*------------------------------------------------------ Common ------------------------------------------------------*/


.common {
	padding: 6rem 0rem;
}


.common h2 {
	padding-bottom: 2rem;
}


.dp-form button {
	margin-top: 1rem;
	font-size: 1.2rem;
}


.dp-input {
	border-bottom: 1px solid var(--grey);
	margin: 25px 0px 45px 0px;
	padding: 6px 2px 12px 12px;
	border-radius: 0px;
	border-right: none;
	background: #fff0;
	border-left: none;
	border-top: none;
	width: 100%;
	color: #333;
}


.call-btn {
	background: var(--dp-pink);
	-webkit-transition: 0.25s ease-in;
	-moz-transition: 0.25s ease-in;
	-ms-transition: 0.25s ease-in;
	-o-transition: 0.25s ease-in;
	transition: 0.25s ease-in;
	padding: 0.8rem 2.5rem;
	white-space: nowrap;
	border-radius: 2rem;
	color: var(--white);
	font-size: 1.6rem;
	font-weight: 500;
	cursor: pointer;
	border: none;
}


.call-btn:hover {
	background: var(--dp-orange);
 	color: var(--white);
}


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

	.common {
		padding: 3rem 0rem;
	}


	.common h2 {
		padding-bottom: 2rem;
	}


	.text-start,
	.text-end {
		text-align: left !important;
	}

}
















/*------------------------------------------------------ Navigation ------------------------------------------------------*/


.logo {
	width: 50%;
	border-radius: 0rem;
}


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

	.logo {
	   	width: 100%;
		border-radius: 0rem;
	}

}

@media (min-width: 768px) and (max-width: 1367px) {

	.logo {
	    	width: 75%;
		border-radius: 0rem;
	}

}


.header {
	padding: 1rem 0rem;
	position: fixed;
	width: 100%;
	z-index: 1;
}


.navbar-nav a {
	font-weight: 400;
	font-size: 18px;
}


/*------ Overwrite CSS ------*/

.navbar-expand-md .navbar-nav .nav-link {
	padding-right: 0rem;
	margin-right: 0rem;
	margin-left: 3rem;
}


.navbar-nav a {
	-webkit-transition: color 1s;
	-moz-transition: color 1s;
	-ms-transition: color 1s;
	-webkit-transition: color 1s;
	color: var(--white);
}


.navbar-nav a:hover {
	color: var(--dp-orange);
}


.navbar-brand {
	padding-top: 2px;
	padding-bottom: 2px;
}


.navbar {
	padding: 4px 1rem;
}


.tooggler {
	border: none;
	color: var(--medium-black);
	border-radius: 5px;
	padding: 4px 12px;
	background: none;
	font-size: 2rem;
	color: var(--dp-green);
}


.navbar-toggler:focus {
	border: 0 !important;
	box-shadow: none !important;  
}


.navbar-toggler {
	border: 0 !important;
}


.dropdown-menu {
	background-color: var(--white);
	border-radius: 0px;
}


.dropdown-item:focus, .dropdown-item:hover {
	background: none;
}


.sticky {
	box-shadow: 0px 2px 8px 0px #55555530;
	background: var(--white);
	padding: 1rem 0rem;
	position: fixed;
	width: 100%;
	top: 0;
}

.sticky .navbar-nav a {
	color: var(--black);
}

.sticky .navbar-nav a:hover {
	color: var(--dp-orange);
}

.navbar-toggler:hover {
	text-decoration: none;
	text-decoration-line: none;
	text-decoration-thickness: none;
	text-decoration-style: none;
	text-decoration-color: none;
}


/*------ Overwrite CSS ------*/

@media screen and (max-width: 767px) {
	.navbar-toggler {
		font-size: 16px;
	}


	.navbar-brand {
		width: 70%;
	}


	.navbar-expand-md .navbar-nav .nav-link {
		padding-left: 0rem;
		margin-left: 0rem;
	}


	.navbar-collapse {
		background: var(--dp-green);
		border-radius: 15px;
		margin-top: 15px;
		padding: 15px;
	}


	.sticky .navbar-nav a {
		color: var(--white);
	}


}
















/*------------------------------------------------------ Banner ------------------------------------------------------*/


.banner {
	background: url(../graphic/banner.webp) no-repeat fixed center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 750px;
	padding: 25px;
}


.banner-content {
	position: relative;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 45%;
	text-align: center;
}


.banner-content h1 {
	color: var(--white);
}


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

	.banner {
		background: url(../graphic/mob-banner.webp) no-repeat fixed center;
	}

	.banner-content {
		width: 100%;
		text-align: left;
	}

	.banner-content h1 {
		color: var(--white);
	}

}


@media (min-width: 768px) and (max-width: 1367px) {

	.banner-content {
		width: 75%;
		text-align: left;
	}

	.banner-content h1 {
		color: var(--white);
	}

}
















/*------------------------------------------------------ About ------------------------------------------------------*/

.about-img {
	padding: 0rem 3rem 0rem 0rem;
}


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

	.about-img {
		margin-bottom: 2rem;
		padding: 1rem;
	}

}
















/*------------------------------------------------------ Footer ------------------------------------------------------*/

.sub-footer {
	padding: 5rem 0rem;
	background: var(--dp-green-extract);
	color: var(--white);
}


.sub-footer p {
	font-size: 1.2rem;
	font-weight: 200;
	color: var(--white);
	margin: 0;
}


.sub-footer a {
	color: var(--white);
}


.sub-footer-p {
	border-bottom: 2px solid var(--dp-green);
	padding-bottom: 0.5rem;
	margin-bottom: 1.5rem !important;
	width: 50%;
}


.footer {
	background: var(--dp-green);
	padding: 12px;	
}


.footer p {
	color: var(--white);
	font-size: 12px;
	padding: 0;
	margin: 0;
}


.footer a {
	color: var(--white);
}


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

	.sub-footer {
		padding: 0rem 0rem 3rem 0rem;
	}


	.sub-footer-top {
		margin-top: 3rem;
	}

}
















/*------------------------------------------------------ Scroll to Top ------------------------------------------------------*/

#scroll-to-top {
	-webkit-transition: background 1s, color 1s;
	-moz-transition: background 1s, color 1s;
	-ms-transition: background 1s, color 1s;
	transition: background 1s, color 1s;
	background-color: var(--dp-green);
	border-radius: 50%;
	padding: 10px 15px;
	position: fixed;
	cursor: pointer;
	font-size: 18px;
	outline: none;
	display: none;
	bottom: 20px;
	border: none;
	right: 30px;
	z-index: 99;
	color: #fff;
}


#scroll-to-top:hover {
	background-color: var(--dp-green-extract);
	color: var(--white);
}












/*------------------------------------------------------ Breadcumb ------------------------------------------------------*/


.breadcumb {
	background: url(../graphic/banner.webp) no-repeat fixed center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 400px;
	padding: 50px 25px 25px 25px;
}


.breadcumb-content {
	position: relative;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	text-align: center;
}


.breadcumb-content h1 {
	color: var(--white);
}


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

	.breadcumb {
		background: url(../graphic/mob-banner.webp) no-repeat fixed center;
	}


	.breadcumb-content {
		width: 100%;
		text-align: left;
	}


	.breadcumb-content h1 {
		color: var(--white);
	}

}


@media (min-width: 768px) and (max-width: 1367px) {

	.breadcumb-content {
		width: 75%;
		text-align: left;
	}


	.breadcumb-content h1 {
		color: var(--white);
	}

}












/*------------------------------------------------------ About Page ------------------------------------------------------*/


.about-special {
	background: var(--bg-blue);
	margin-top: 3rem;
	border-radius: 1.5rem;
	padding: 2rem;
}


.about-special img {
	width: 20%;
	margin-bottom: 20px;
}


.about-special h6 {
	margin-bottom: 2rem;
}












/*------------------------------------------------------ Product Page ------------------------------------------------------*/


.product-special {
	background: var(--bg-blue);
	border-radius: 1rem;
	padding: 1rem;
	margin-bottom: 1.5rem;
}


.product-special ul {
	margin-left: -1rem;
}


.product-special li {
	margin-bottom: 1rem;
	list-style: none;
}


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

	.product-special {
		margin: 0rem 0rem 2rem 0rem;
	}

}












/*------------------------------------------------------ Contact Page ------------------------------------------------------*/


.contact-special {
	background: var(--bg-blue);
	border-radius: 1rem;
	padding: 2rem;
	text-align: center;
}

#contact-page p {
	margin-bottom: 2rem;
}

.contact-form-line {
	margin: 1.5rem 0rem 4rem 0rem;
	border-bottom: 1px solid var(--dp-pink);
	width: 25%;
}


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

	.contact-form-line {
		margin: 1.5rem 0rem 2.5rem 0rem;
	}

}