@charset "utf-8";
/* CSS Document */

/* general css */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
   box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family : "Raleway", sans-serif;
}

*,
*::before,
*::after{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	text-decoration: none;
	outline: none;	
	}
:root{
	/* text colors */
	--primary-text:   #11383A;
	--secondary-text: #7f9377;
	--deep-yellow-color: #E8B645;
	--deep-green-color: #11383A;
	--light-yellow-color: #eadab5;
	--light-green-color: #7f9377;
	--black-color : #000;
	--white-color : #fff;
--box-shadow : 0.1rem -0.07rem 1.5rem 0.3rem rgba(0,0,0,0.26);

/* Background Color */
  --primary-color: #eadab5;
  --secondary-color:  #E8B645;
    --bg-white: #fff;
  --bg-black: #000;
   
	
	/* font family*/
	-primary-font : "Raleway", sans-serif;
	
  }

  body,html {
	  font-size :10px;
	  font-weight : 450;
	  font-family: var(--primary-font);
	  scroll-behaviour : smooth;
	  overflow-x: hidden;
	  line-height:1.5;  	  
  }
  h1 {
	color: var(--deep-green-color);
	font-size:5.5rem;
	font-weight:800;
	font-family : var(--primary-font);
	display:inline-block;
	text-transform:uppercase;
	line-height:1.5;
	margin-bottom:2.2rem;	
	  }
	 h2 {
	color: var(--deep-green-color);
	font-size:4rem;
	font-weight:700;
	font-family : var(--primary-font);
	display:inline-block;
	line-height:1.5;
	margin-bottom:2.2rem;	
	  } 
	  h2 span {
		  color: var(--light-green-color);
		  }
	  h3 {
	color: var(--deep-green-color);
	font-size:3rem;
	font-weight:700;
	font-family : var(--primary-font);
	line-height:1.5;
	margin-bottom:1rem;	

	  }
	   h4 {
	color: var(--deep-green-color);
	font-size:3rem;
	font-weight:600;
	font-family : var(--primary-font);
	line-height:1;
	margin-bottom:1rem;	
		  }
	  	   h5{
	color: var(--deep-green-color);
	font-size:1.5rem;
	font-weight:400;
	font-family : var(--primary-font);
	line-height:1;
	margin-bottom:0.93rem;	
	text-transform: capitalize;
	
	  }
	  p{
	color: var(--deep-green-color);
	font-size:1.7rem;
	font-weight:500;
	font-family : var(--primary-font);
	line-height : 1.5;
	letter-spacing :1px;
	margin-top :1rem;	
	
	  }
	  	  a,
		  a:active,
		  a:focus,
		  a:hover,
		  .btn :focus{
			  text-decoration: none;
			  box-shadow:none;
			  outline:0;
		  }
		  
	.bg-black{
	bakground-color: var(--light-yellow-color);
	}
	.main-btn{
		color: var(--light-yellow-color);
		background-color: var(--light-green-color);
		border-radius: 5rem;
		padding: 0.9rem 3rem;
		font-family:var(--primary-font);
		font-weight: 500;
		font-size: 1.7rem;
		margin-top: 1.5rem;
		transition: all linear .7s;
		box-shadow : 0 0.3rem 0.4rem rgba(0,0,0,.3);
				}
	.main-btn:hover	{
		font-size: 1.9rem;
		background-color: var(--deep-green-color);
	    color: var(--white-color);
		}
    .view-link{
		font-size:1.5rem;
		margin-top:1rem;
		color: var(--deep-green-color);
		transition: all .7s ease-in-out;
		
			 				}
	.view-link:hover{
		color: var(--deep-green-color);
		font-size:1.8rem;
		transition:0.7s;
	    border-bottom:1px solid #11383A;
		width:50%;
					}
	.wrapper{
		padding:3% 0;
		}		
			
	.sec-title h1{
		position:relative;
		}
	.sec-title h1::after{
		position:absolute;
		content:'';
		background-color: var(--deep-yellow-color);
		width: 50%;
		height: 50%;
		right:-0.4rem ;
		bottom:0;
		opacity:0.5;
		}

/* navbar css */
.header{
	background-color:var(--light-green-color);
	padding:0.3rem 0;
	}
.header .navbar-brand img{
width:30rem;
height:auto;
object-fit:cover;
}
.header .navbar-nav .nav-link{
	color: var(--deep-yellow-color);
	font-family: var(--primary-font);
	text-transform: uppercase;
	font-size: 1.7rem;
	font-weight: 600;
	padding: 0.3rem 2rem;
	margin: 0 0.2rem;
}
/* dropdown menu css */

.header .dropdown-menu {
	min-width:13rem;
	padding: 1.3rem 0;
	background-color: var(--light-green-color);
	border: none;
	}
	
.header .dropdown-item {
	line-height:1.3rem;
	padding:1rem;
	font-size: 1.3rem;
	color: var(--light-yellow-color);
	font-weight:600;
	font-family: var(--primary-font);
	}
/*.header .dropdown-toggle::after{
	content:'+';
	border:none;
	vertical-align: middle;
	font-size: 1.6rem;
		}*/
.header .dropdown-item:hover {
	transition: all linear .3s;
	box-shadow : 0 0.3rem 0.4rem rgba(0,0,0,.3);
				}
.header .nav-item:hover >.dropdown-toggle::after, 
.header .nav-link.dropdown-toggle{
	color: var(--deep-yellow-color);
	}
.header .dropdown-item:focus,
.header .dropdown-item:hover,
.header .navbar-nav .nav-link:hover
{
background-color: transparent;
	color: var(--deep-yellow-color);
	}
.header .navbar-nav li:hover>ul.dropdown-menu{
	display:block;
	}
.header .navbar-toggler{
	color: var(--deep-yellow-color);
	font-size:2rem;
	height:2.7rem;
	padding:0;
	}
.header .navbar-toggler:focus {
	outline:none;
	box-shadow:none;
	}

.banner-wrapper {
	margin-top:8rem;
	background-image: url(../img/bannerbg.webp);
	background-size:cover;
	background-repeat:none;
	padding-bottom:5rem;
	width:100%;
	height:auto;
	background-position: centre centre; 	
	}
.banner-wrapper img{
width:100%;
height:auto;
object-fit:cover;
}

/*parallax effect*/

.parallax{
	position:relative;
	background-position:left;
	background-size:48%;
	background-repeat: no-repeat;
	background-attachment:fixed;
	display: inline-block;
	align-items: center;
	width:100%;
	height:100vh;
    background-color: #eadab5;
	}
.parallax-1{
		position:relative;
	background-position:right;
	background-size:48%;
	background-repeat: no-repeat;
	background-attachment:fixed;
	display: inline-block;
	align-items: center;
	width:100%;
	height:100vh;
	}
.parallax-main{
position:relative;
	background-position:right;
	background-size:contain;
	background-repeat: no-repeat;
	background-attachment:fixed;
	display: inline-block;
	align-items: center;
	width:100%;
	height:100vh;
}
.parallax.img1{
	background-image:url(../img/parallax.jpg);
	height:70%;
	width:100%;
	background-repeat:repeat-x;
	}
.parallax.img2{
	background-image: url(../img/1stservice.png);
    height:608px;
	}
.parallax.img3{
	background-image: url(../img/2ndservice.png);
    height:608px;
	}
.parallax.img4{
	background-image:url(../img/3rdservice.png);
    height:608px;
	}
.parallax.img5{
	background-image:url(../img/4thservice.png);
    height:608px;
		}
/*card effect*/

.main-wrapper{
	margin-top: 80vh;
	background-color: var(--light-yellow-color);
	width:100%;
	}
.main-wrapper .black-card{
	position:absolute;
	top:25%;
	left: -350px;
   	width:80%;
	box-shadow: var(--box-shadow);
	background-image:url(../img/bannerbg.webp);
	padding:2.5rem;
	text-align:left;
	z-index:1;
	border-radius:2.5rem;
	font-size:2rem;
}
.main-wrapper .black-card h5{
	font-weight:500;
	}
.right {
	position:absolute;
	top:25%;
	right:-330px;
	width:80%;
	box-shadow: var(--box-shadow);
	background-image:url(../img/bannerbg.webp);
	padding:2.5rem;
	text-align:left;
	z-index:1;
	border-radius:2.5rem;
	font-size:2rem;
		}
	.right h5{
	font-weight:500;
	}
.right h3{
	color:var(--light-green-color);
	}
.right h4{
		color:var(--light-green-color);
	}
.black-card h3{
	color:var(--light-green-color);
	}
.black-card h4{
		color:var(--light-green-color);
	}
/*process css*/	
.process-wrapper{
	background-color:var(--light-yellow-color);
		}
.process-wrapper h1,
.work-wrapper h1{
color:var(--deep-green-color);
}
.process-wrapper .process-content{
	padding:4rem 6rem;
	position:relative;
	}
.process-wrapper .process-content::after{
	position:absolute;
	content:'';
	width:40%;
	margin:auto;
	bottom:0;
	border-bottom:0.1rem solid var(--deep-green-color);
}
.process-wrapper .process-content span{
	color:var(--light-green-color);
	font-size:7rem;
	margin-right:2rem;
	font-weight:800;
	}
/*.process-wrapper h2{
color:var(--deep-green-color);
font-size:2.5rem;
font-weight:600;
text-transform:uppercase;
}*/
.process-wrapper p{
color:var(--deep-green-color);
font-size:2rem;
font-weight:600;
}
/*work css*/	
.work-wrapper{
	background-color:var(--light-yellow-color);
			}
.work-wrapper video {
    object-fit: contain;
    overflow-clip-margin: content-box;
    overflow: clip;
}

/*aboutme & footer + copyright css*/
.aboutme {
	padding:1rem;
	margin:none;
	
}
.aboutme img{
	padding:0.5rem; 
	object-fit: cover;
    height: 80%;  width: 90%;
	margin-top:15%;
	margin-bottom:0;
}
.aboutme h6{
	text-align:left ;
	font-size:1.6rem;
	color:var(--light-green-color);
	}
.footer{
	background-color:var(--deep-green-color);
	}
.footer .footer-logo img{
	width:22rem;
	height:auto;
	object-fit:cover;
	}
.footer ul{
list-style:none;
display:flex;
align-items:center;
	}

.footer ul li {
margin-right:1.5rem;
	}
.footer h4{
	    font-size:2rem;
		font-weight:600;
		color:var(--light-yellow-color);
		
		}
.footer h2 span{
 font-size:3.5rem;	
}
.footer ul li a{
	text-decoration:none;
	font-size:16px;
    font-weight: 400;
color:var(--light-yellow-color); 
	}
.footer ul li a:hover{
	transition:0.5s;
	border-bottom:1.5px solid #FFFFFF;
}

.copyright{
background-color:var(--deep-green-color);
	}
.copyright h3{	
	color:var(--light-green-color);
	font-size:1.7rem;
}

/*subpages css*/
.testimonial {
	padding-top:7.5%; 
	background-color:var(--light-yellow-color);
	}

.aboutpage{
	padding-top:7.5%; 
	background-color:var(--light-yellow-color);
	}
   .root_radiance .right{
	position: absolute;
    top: -10%;
    right: -401px;
    width: 90%;
   }
 
   .root_radiance .black-card   {
	position: absolute;
    top: -5%;
    left: -477px;
    width: 90%;
   }
 .breakthrough .right{
	position: absolute;
    top: -1%;
    right: -401px;
    width: 75%;
   }
 .claritycall{
	 padding:0;}

/*responsive (media query)*/

/*Media Query 1170px*/
@media (max-width:1199.5px){
	
/*parallax*/
.parallax:not(.parallax-main){
	background-size:50%;
	}
.main-wrapper .black-card{
	width:100%;
	}
/*process*/
.process-wrapper .process-content{
	width:100%;
}

.breakthrough .right {
     width: 86%;
}

.root_radiance .right {
    top: -15%;
    right:-433px;
    width: 98%;
}
/*contact page*/

}

/*Media Query 991px*/
@media (max-width:991.5px){
	
/*navbar css*/
.header .navbar-collapse{
	padding:2rem;
	}
.header .navbar-nav .nav-link{
	padding:0.6rem o.5rem;
	margin:2rem;
	}
/*banner*/

.banner-wrapper{
	margin-top:4rem;
	padding:4rem 2rem;
	min-height:730px;
	}
.banner-wrapper img{
width:75%;
height:auto;
object-fit:cover;
}
/*card*/
    .main-wrapper .black-card {
        width: 80%;
		left:-225px;
    }
	.right{
        width: 80%;
		left:255px;
    }

.breakthrough .right {
    top: -4%;
    width: 86%;
    left: 301px;
}

.root_radiance .black-card {
         width: 85%;
        left: -280px;
        top: -4%;
}
    .root_radiance .right {
        top: -5%;
		left:352px;
	}
.root_radiance .black-card {
        width: 98%;
        left: -282px;
        top: -1%;
    }
.aboutme img{
	object-fit: cover;
	}

/*parallax css*/
.parallax-main{
	background-size:contain;
	}
/*process*/

/*contact page*/

}
/*Media Query 767px*/
@media (max-width:767.5px){
	
/*general css*/
body,
html{
	font-size:10px;
	}

/*banner*/

.banner-wrapper{
		min-height:550px;
	}

/*card*/

.main-wrapper .black-card{
	     Width:80%;
		   left: 22px;
	}
 .right{
    left: 22px;
	Width:80%;
	}
 .root_radiance .black-card {
        Width: 94%;
        left: 24px;
        top: 6%;
    }
 .aboutme img{
		object-fit: contain;
        width: fit-content;
		height:42vh;
 }

/*parallax css*/
    .parallax.img1 {
        background-repeat: repeat-x;}
.parallax:not(.parallax-main){
	background-size:cover;
	}

.parallax-1{
	background-size:contain;
		}
.testimonial {
	padding-top:9%; 
	}
.aboutpage{
	padding-top:10%;
	}
  
.root_radiance .black-card {
	Width: 90%;
    left: 48px;
	top:10%;
}
    .root_radiance .right {
        top: -5%;
        left: 10px;
		  width: 96%;
    }
     .breakthrough .right {
        top: 2%;
        width: 71%;
        left: 176px;
    }


/*contact page*/

}
/*Media Query 590px*/
@media (max-width:590px){
	
/*general css*/
.sec-title h1::after { 
    right: 18.6rem;
	}

body,
html{
	font-size:10px;}
/*parallax*/	
.parallax .img2,
.parallax .img3,
.parallax .img4,
.parallax .img5{
	/*height:408px;*/
	width:100%;
	background-size:contain;
	}
.main-wrapper{
	margin-top:35vh;
		}
.parallax-main{
	background-size:contain;
}
.main-wrapper .black-card{
width:100%;
	}
	
.right{
width:100%;

}

 .aboutme img{
		object-fit: contain;
		height:40vh;
 }
.testimonial {
	padding-top:12%; 
	}
.aboutpage{
	padding-top:15%;
	}
 .breakthrough .right {
        top: 5%;
        width: 97%;
        left: 10px;
    }
    .root_radiance .black-card {
      Width: 100%;
        left: 17px;
        top: -5%;
      }
.parallax.img1 {
    background-repeat: inherit;
}
.root_radiance .right  {position: absolute;
    top: -5%;
    width: 100%;
	left: 0px;
}
.root_radiance .black-card {
        Width: 100%;
        left: 0px;
        top: -7%;
    } 

		
/*process*/
.process-wrapper{
	padding-top:9rem;
	}
.process-wrapper .process-content {
    padding: 1rem 3rem;
	}
/*contact page*/

}
/*Media Query 380px*/
@media (max-width:380px){

.header .navbar-nav .nav-link{
	padding: 0.2rem 0.2rem;
	margin: 0 0.2rem;
}	

	/*parallax*/	

.parallax .img2,
.parallax .img3,
.parallax .img4,
.parallax .img5{
	height:508px;
	}
	h1{
		font-size:27px;
		}
	h2{
		font-size:25px;
		}
.main-wrapper .black-card{
width:100%;
	}
.aboutme img{
	object-fit: contain;
}
.testimonial {
	padding-top:15%; 
		}
.aboutpage h1{
	padding-top:20%;
	}	
.right{
width:100%;
}
    .breakthrough .right {
        width: 99%;
        left: 10px;
    }
.footer {
	padding-top: 25%;}
}