/* fonts size  */
body {
	 font-family: 'VerdanaPro';
	color: #f4f0ea;
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 22px;
	line-height: 1.5;
	    background: #000;
	overflow: hidden;
	font-weight: 400;

}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

a {
	color: #8b4513;
	text-decoration: none;
}

.reddish-orange {
	color: #A94B18;
}

.ag-header .nav-link:hover {
	color: #8b4513 !important;
}

.varela-round-regular {
	font-family: "Albert Sans", sans-serif;
	font-weight: 400;
	font-style: normal;
}


h2 {
	font-size: 25px;

}
h1, h2, h3, h4, h5, h6 {
    font-family: "Inria Serif", serif;
}

.brown{
	color: #8b4513;
}


dl,
ol,
ul {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0px;
}

.fs-13 {
	font-size: 13px;
}

.fs-12 {
	font-size: 12px;
}

.fs-10 {
	font-size: 10px;
}

.fs-14 {
	font-size: 14px;
}

.fs-15 {
	font-size: 15px;
}

.fs-18 {
	font-size: 18px;
}

.fs-20 {
	font-size: 20px !important;
}

.fs-22 {
	font-size: 22px !important;
}

.fs-24 {
	font-size: 24px;
}

.fs-26 {
	font-size: 26px;
}

.fs-30 {
	font-size: 30px;
}

.fw-500 {
	font-weight: 500;
}

.fw-100 {
	font-weight: 100;
}

.fw-600 {
	font-weight: 600;
}

.fw-700 {
	font-weight: 700;
}

.fw-800 {
	font-weight: 800;
}

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

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

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

.section-space {
	padding: 60px 0px;
}

p:last-child {
	margin-bottom: 0px;
}

.section-space {
	padding: 60px 0px;
}

.semi-bold {
	 font-family: "Inria Serif", serif;
}

.light-10 {
	font-family: 'Sharp Grotesk Light Italic 10';
}

.btn-primary {
	color: #fff;
	background-color: #10254200;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, .24);
	border-radius: 40px;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 14px;
	padding-bottom: 14px;
	border: 1px solid #fff;
}

.btn-primary:hover {
	background-color: #8b4513;
	color: #fff !important;
	border-color: #8b4513;
}
.l-space {
    letter-spacing: 1px;
	font-size: 22px;
}

.small-btn {
	padding: 5px 15px !important;
	font-size: 13px;
}

.btn-secondary {
	color: #fff;
	background-color: #8b4513;
	border-color: #8b4513 !important;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, .24);
	border-radius: 40px;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.btn-secondary:hover {
	background-color: transparent;
	color: #8b4513 !important;
}


.off-white {
	color: #cecece;
}


.white {
	color: #fff !important;
}

.primary-color {
	color: #0E2E50;
}

.orrange {
	color: #8b4513;
}

.blue {
	color: #0E2E50;
}

.blue-bg {
	background-color: #102542;
}

.text-shadow {
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.banner-slider {
	visibility: hidden;
}

.banner-slider.slick-initialized {
	visibility: visible;
}

.light-font {
	font-family: 'Sharp Grotesk Light 25';
}

/* banner heading font  */

.inter {
	/* font-family: "Inter", sans-serif; */
	font-family: "Inria Serif", serif;
}

@font-face {
	font-family: 'Sharp Grotesk SemiBold 25';
	src: url('../fonts/SharpGrotesk-SemiBold25.woff2') format('woff2'),
		url('../fonts/SharpGrotesk-SemiBold25.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}


/* banner heading font end */


/* fonts  */
@font-face {
	font-family: 'Sharp Grotesk Light 25';
	src: url('../fonts/SharpGrotesk-Light25.woff2') format('woff2'),
		url('../fonts/SharpGrotesk-Light25.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}


@font-face {
	font-family: 'Sharp Grotesk Light Italic 10';
	src: url('../fonts/SharpGrotesk-LightItalic10.woff2') format('woff2'),
		url('../fonts/SharpGrotesk-LightItalic10.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}


@font-face {
    font-family: 'VerdanaPro';
    src: url('../fonts/VerdanaPro-Regular.woff2') format('woff2'),
        url('../fonts/VerdanaPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* font end */


/* header css  */
h3.experience-title span {
	font-family: "Albert Sans", sans-serif;
	font-size: 18px;
	font-weight: 300 !important;
	color: #8b4513;
}

.ag-header {
	background-color: transparent !important;
	z-index: 9;
}

.ag-header .nav-link {
	color: #fff !important;
}

span.heading-italic {
	/* font-family: 'Sharp Grotesk Light Italic 10'; */
	font-family: 'VerdanaPro';
	 font-style: italic;
	     font-size: 100px;
}

h2.banner-main-heading {
	 
	font-size: 110px;
	text-align: center;
	letter-spacing: -0.03em;
	line-height: 1em;
	margin: 0px;
	padding: 0px;
}

.designer-box {
	max-width: 500px;
	margin: auto;
	position: relative;
	top: -50px;
	width: 100%;
}

.designer-exp {
	position: absolute;
	bottom: 0px;
	width: 100%;
	left: 50%;
	transform: translate(-50%, 0px);
	max-width: 75%;
}

.border-right {
	border-right: 1px solid #717171ef;
}

/* header css end */


/* about us css  */
.three-image-desing {
	max-width: 80%;
	margin-left: auto;
}

.scrolled {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	    background-color: #000 !important;
    z-index: 9;
}

.layer-iamge img {
	width: 300px;
	height: 440px;
	object-fit: cover;
	border-radius: 20px;
}

section.banner {
	padding-top: 100px !important;
}

.layer-iamge {}

.image-1 {
	transform: rotate(-10deg);
}

.image-2 {
	position: absolute;
	top: 80px;
	left: 100px;
	transform: rotate(-6deg);
}

.image-3 {
	position: absolute;
	top: 150px;
	left: 200px;
	transform: rotate(-0deg);
}


/* about us css end */


/* work css  */
section.works.section-space {
	/* background-color: #a67656; */
}

.work-title {
	position: relative;
	text-align: right;
	height: 220px;
	margin-top: 50px;
}

.work-title h2 {
	font-size: 80px;
	font-weight: bold;
	position: absolute;

	margin: 0px;
	right: 0;
	text-align: right;

	line-height: normal;
}

.work-main {
	color: #8b4513;
	z-index: 2;
}

.faded {
	color: rgba(255, 255, 255, 0.1);
	z-index: 1;
}

.work-top {
	top: -80px;
}

.work-bottom {
	top: 80px;
}

.work-button-icon {
	position: absolute;
	bottom: 15px;
	left: 15px;
}

.work-pill {
	background-color: #ffffff;
	padding: 10px 20px;
	color: #1b1d29;
	font-size: 16px;
	letter-spacing: 1px;
	border-radius: 20px;
	font-family: "Inria Serif", serif;
	font-weight: bold;
}

.work-icon {
	font-size: 40px;
	color: #ffffff;
}

.work-card-image img {
	border-radius: 30px;
}

.work-card-image {
	border-radius: 30px;
}


.image-hover-effect {
	transition: transform 0.3s ease;

	overflow: hidden;
}

.image-hover-effect:hover img {
	transform: scale(1.1) !important;
}

.image-hover-effect img {
	transition: transform 0.3s ease;
}

.appear-to-bigger {
	overflow: hidden;
}

.arrow-down-left i {
	color: #8b4513;
	font-size: 40px;
}


/* work css end */


/* process  */
.process-title h3 {
font-family: "Inria Serif", serif;
	margin: 0px;
	color: #fff !important;
	font-size: 32px;
}

span.process-counter-value {
    font-size: 60px;
    color: #ffffff;
    font-family: "Inria Serif", serif;
	font-style: italic;
}

.process-card {
	border: 1px solid #fff;
	padding: 12px 30px;
	border-radius: 30px;
	margin-bottom: 15px;
	transition: 0.3s;
}.btn-check:focus+.btn-primary, .btn-primary:focus {
    color: #fff;
    background-color: #8b4513;
    border-color: #8b4513;
    box-shadow: 0 0 0 .25rem rgb(139 69 19 / 22%);
}
.modal-content {
    background: #8B4513;
    border: unset;
    padding: 10px;
    border-radius: 20px;
}button.btn-close {
    color: #fff !important;
    position: absolute;
    top: 10px;
    right: 10px;
    filter: brightness(0) invert(1);
    opacity: 1;
	z-index: 999;
}.form-control {
    border-radius: 15px;
}
.process-card:hover {
	background-color: #000;
	border: 1px solid #fff;
}

.process-card:hover .process-counter-value {

	color: #fff;

}

a.navbar-brand {
	max-width: 130px;
	transition: max-width 0.3s ease;
	/* Add this line */
}

.scrolled a.navbar-brand {
	max-width: 70px;
}

.ag-logo {
    border-radius: 8px;
    /* background-color: #000000;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px; */
}

/* process end */


.popup-content-value p{
	font-size: 16px;
}

/* footer  */
.work-together {
	/* background-image: url(../images/footer-bg.svg); */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.work-with-me h3 {
	font-family: "Inria Serif", serif;
	font-size: 45px;
}

.work-icon-bottom {
    background-color: transparent;
	padding: 10px;
	max-width: 150px;
	border-radius: 50px;
}

.social-card {
	border-top: 1px solid #979797;
	padding-top: 15px;
	padding: 10px;
	transition: 0.3s;
}

.social-card:hover {
	background-color: #8b4513;
}

.ag-header.navbar-light .navbar-toggler-icon {
	background-image: unset;
	color: #fff;
	font-size: 30px;
}

.ag-header.navbar-light .navbar-toggler {
	padding: 0px;
}

.ag-header.navbar-light .navbar-toggler:focus {
	box-shadow: unset;
}
.whatsapp-icon {
    position: fixed;
    bottom: 25px;
    right: 25px;
    max-width: 45px;
	z-index: 99;
}
/* footer end */

.arrow-down-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.process-card.active{
	background-color: #8b4513;
}

/* mobile css  */

@media(max-width:1200px) {
	.layer-iamge img {
		width: 235px;
		height: 350px;

	}

	h2.banner-main-heading {
		font-size: 100px;
	}
}


@media(max-width:991px) {
	.three-image-desing {
		max-width: 70%;

		margin: auto;
	}

	.about-left {
		padding-bottom: 80px;
	}
}


@media(min-width:991px) {


	.nav-ul {
		width: 100%;
	}
}

@media(max-width:767px) {

	span.heading-italic{
		font-size: 60px;
	}
	.image-3 {
		position: absolute;
		top: 130px;
		left: 150px;

	}

	.image-2 {

		top: 80px;
		left: 50px;

	}

	.work-icon-bottom {
		margin: auto;
	}

	.work-with-me {
		flex-wrap: wrap;
		display: block !important;
		text-align: center;
	}

	.work-title {
		height: auto;
	}

	.work-title h2 {
		position: unset;
		text-align: center;
	}

	h2.banner-main-heading {
		font-size: 75px;
	}
}

@media (max-width: 600px) {
	span.heading-italic{
		font-size: 50px;
	}
	.work-with-me h3 {

		font-size: 35px;
	}

	.layer-iamge img {
		width: 200px;
		height: 300px;
	}

	.designer-exp {

		max-width: 100%;
	}


	.designer-box {

		top: -10px;

	}

	.banner-main-heading-2 {
		flex-wrap: wrap;
		gap: 0px !important;
		display: block !important;
	}

	h2.banner-main-heading {
		font-size: 60px;
	}
}

@media(max-width:450px) {
	span.heading-italic{
		font-size: 40px;
	}

	.image-3 {
		position: absolute;
		top: 130px;
		left: 100px;

	}

	.image-2 {
		top: 80px;
		left: 30px;

	}

	h2.banner-main-heading {
		font-size: 50px;
	}
}

/* mobile css end */