*{
	padding: 0;
	margin:0;
}
.navbar{
	box-shadow: none !important;
	font-family: "Josefin Sans",sans-serif !important;
}
.navbar-toggler{
	outline: none !important;
	padding: 0 !important;

}
.navbar-toggler img{
	width: 30px;
	outline: none;
}.logo{
	width: 37px;
	border: 1px solid #0004;
	padding: 3px;
	border-radius:3px; 
	color: #000;
}
.navbar-brand{
	padding-right: 50px;
	padding-left: 0px;
	color: #000 !important;
	font-family: "Josefin Sans",sans-serif !important;
	font-size: 27px !important;
}
.nav-link{
	color: #0005 !important;
	font-weight: 400;
	font-size: 20px;
}
.bb{
	color: #000 !important;
}
.navbar-nav .nav-item .nav-link:hover{
	color: #000 !important;
}
.navbar-nav{
	margin-right: 20px;
}
.content{
	border-radius: 7px;
	padding-top: 15px;
	padding-bottom: 100px;
	box-shadow: 0 0 2px #0003;
	background-color: #fff;
	height: auto !important;
}
.gap{
	width: 100%;
	height: 30px;
	background-color: #F9F9FB;
}

.background-box{
	width: 100%;
	height: auto !important;
	background-color: #F9F9FB;
}
.highlight-text {
	padding: 20px 30px 20px 30px ;
}
.highlight-text h1 , .highlight-statement h1{
	font-size: 45px;
	font-family: serif;

}
.highlight{
	color: #1492E6;
}
.highlight-text p{
	margin: 15px 0px;
	font-family: "Josefin Sans",sans-serif !important;
	font-size: 20px;
	color: #0007;
}
.colortext{
	color: #0009 !important;
}
.illustrate{
    padding: 17px 10px 17px 5px ;
}
.image{
	width: 470px;
}
.highlight-statement{
	text-align: center;
	padding: 35px 23px;
	background-color: #E1F3FF;
	margin: 62px 0px 50px 0px;
}
.highlight-statement p{
	font-family: "Josefin Sans",sans-serif !important;
	font-size: 20px;
	color: #0007;
}
.btnlg{
	font-family: "Josefin Sans",sans-serif !important;
	font-size: 20px !important;
}
.box{
	box-shadow: 0px 0px 5px 1px #0004;
	text-align: center;
	margin:10px 30px;
	padding: 10px;
	
}
.box h2{
	font-family: "Josefin Sans",sans-serif !important;
	font-size: 25px;
	color: #0008;
	margin-top: 15px;
	padding: 2px;
}
.icon{
	width: 100px;
	cursor: pointer;
	transition: 0.5s
}
.box:hover .icon{
	transform:scale(1.2); 
}
.line-text{
	
	width: 80%;
	height: 55px;
	margin:5px 100px 20px 100px;
	text-align: center;
}
.line-text h1{
	padding: 0px;
	font-family:serif;
	color: #0009; 
}
.line-text-p p{
	font-family: "Josefin Sans",sans-serif !important;
	font-size: 20px;
	color: #0007; 
	text-align: center;
	margin: 3px 25px;
	line-height: 1.2em;
}
#anime{
	margin:90px 500px;
	width: 2.5px;
	height: 2.7px;
	box-shadow: 0 0 0.1px #0003;
	position: absolute;
	z-index: 1;
}
.card-deck{
	margin-top: 50px;
	padding: 20px 30px 20px 30px ;
} 
.card-img-top{
    transition: 0.6s;
}
.card:hover .card-img-top{
	transform:scale(1.08); 
}
.images{
	width: 900px;
	
}
.temp-box{
	width: 300px;
	display: flex;
	justify-content: center;
}
.flex-box{
	display: flex;
	justify-content: center;
	margin-top: 100px;
}
.template{
	width: 250px;
	height: 400px;
	background-color: #fff;
    box-shadow: 0px 0px 5px 1px #0004;
	padding: 10px ;
	border-radius: 3px;
}
.img{
    transform: translateY(-15%);
    box-shadow: 0px 0px  5px #0008;
    border-radius: 3px;
}
.card-text1{
	transform: translateY(-75%);
	font-family: "Josefin Sans",sans-serif;
}
.bol{
	font-weight: bold;
}
.high-text1{
	font-family: serif;
	border-bottom: 2px solid #832902;
}
.high-info{
	padding: 0px 30px 20px 30px ;
}
.high-p{
	font-family: "Josefin Sans",sans-serif !important;
	font-size: 20px;
	color: #0007;
	margin-top: 10px;
	line-height: 1.2em;
	text-align: justify;
}
@media only screen and (max-width: 350px){
    .navbar-brand{
    	font-size: 22px !important;
    }

    .illustrate .image{
		width: 278px;
    }
	.highlight-text h1, .highlight-statement h1{
        font-size: 32px;
	}
	 .highlight-text p,.highlight-statement p, .line-text-p p{
    	font-size: 18px;
    }
	.line-text{
		margin: 20px 27px 10px 27px;
		height: 35px;
	}
	.line-text h1{
		font-size: 23px;
	}
	.btn{
		font-size: 16px !important;
	}
	.templatemargin{
		margin-top: 100px;
	}
	.img{
		transform: translateY(-20%);
	}
}
@media only screen and (max-width: 370px) and (min-width: 350px){
     .illustrate .image{
		width: 315px;
    }
    .highlight-text h1, .highlight-statement h1{
    	font-size:37px !important; 
    }
    .highlight-text p,.highlight-statement p, .line-text-p p{
    	font-size: 18px;
    }
    .btn{
    	font-size: 18px !important;
    }
    .line-text{
		margin: 20px 32px 10px 32px;
		height: 35px;
	}
	.line-text h1{
		font-size: 25px;
	}
	.templatemargin{
		margin-top: 120px;
	}
	.img{
		transform: translateY(-20%);
		width: 260px;
	}
	.template{
		width: 280px;
		height: 450px;
	}
	.card-text1{
		transform: translateY(-140%);
	}
}
@media only screen and (max-width: 395px) and (min-width: 370px){
    .navbar-brand{
    	font-size: 29px !important;
    }

    .highlight-text h1, .highlight-statement h1{
    	font-size: 36px;
    }
    .highlight-text p,.highlight-statement p, .line-text-p p{
    	font-size: 19px;
    }
    .btn{
    	font-size: 18px !important;
    }
    .illustrate .image{
		width: 330px;
    }
    .line-text{
		margin: 20px 33px 10px 33px;
		height: 35px;
	}
	.line-text h1{
		font-size: 25px;
	}
	.templatemargin{
		margin-top: 110px;
	}
	.img{
		transform: translateY(-20%);
		width: 270px;
	}
	.template{
		width: 290px;
		height: 450px;
	}
	.card-text1{
		transform: translateY(-140%);
	}
}
@media only screen and (max-width: 450px) and (min-width: 395px){
    .navbar-brand{
    	font-size: 30px !important;
    }

    .illustrate .image{
		width: 362px;
    }
	.highlight-text h1, .highlight-statement h1{
        font-size: 40px;
	}
	.highlight-text p,.highlight-statement p ,.line-text-p p{
    	font-size: 21px;
    }
    .btn{
    	font-size: 20px !important;
    }
    .line-text{
		margin: 20px 35px 10px 35px;
		height: 35px;
	}
	.line-text h1{
		font-size: 26px;
	}
	.templatemargin{
		margin-top: 140px;
	}
	.img{
		transform: translateY(-20%);
		width: 310px;
	}
	.template{
		width: 330px;
		height: 520px;
	}
	.card-text1{
		transform: translateY(-140%);
	}
}
@media only screen and (max-width: 505px) and (min-width: 450px){
	 .illustrate .image{
		width: 415px !important;
    }
}
@media only screen and (max-width: 767px) and (min-width: 450px){
	.line-text{
		margin: 20px 45px;
	}
	.btn{
		font-size: 20px !important;
	}
	.line-text{
		margin: 35px 35px 10px 35px;
		height: 35px;
	}
	.line-text h1{
		font-size: 27px;
	}
	.templatemargin{
		margin-top: 100px;
	}
	.img{
		transform: translateY(-20%);
	}
}

@media only screen and (max-width: 1000px) and (min-width: 767px){
	.navbar-brand{
    	font-size: 35px !important;
    }
    .illustrate .image{
		width: 310px !important;

	}
	.highlight-text h1, .highlight-statement h1{
        font-size: 33px;
	}
	.highlight-text p,.highlight-statement p ,.line-text-p p{
    	font-size: 15px;
    }
	.box{
		width: 93px;
		padding: 10px;
		margin: 10px 30px;
	}
	.icon{
		width: 70px;
	}
	.box h2{
		font-size:18px;
		padding: 1px;
		margin-top:2px;
	}
	.line-text{
		margin: 40px 70px 10px 70px;
	}
	.template{
       width: 230px;
	}
	.img{
		width:190px;
	}
	.card-text1{
		transform: translateY(0%);
	}
}
@media only screen and (max-width: 1200px) and (min-width:1000px){
	.box{
    	width: 150px;
    }
    .icon{
		width: 60px;
	}
	.box h2{
		font-size:20px;
		padding: 1px;
		margin-top:2px;
	}
	.image{
		width: 430px;
	}
}
@media only screen and (max-width: 1400px) and (min-width:1200px){
    .box{
    	width: 200px;
    }
    .icon{
		width: 60px;
	}
	.box h2{
		font-size:20px;
		padding: 1px;
		margin-top:6px;
	} 
	 
}