body{
	width:100%;
	padding:0px 0 0 0;
	margin:0 auto;
	color:#001;
	background-color:#000;
	}
 ul, li, form, p, h1, h2, h3, img, input, label
	{
	margin:0px;
	padding:0px;
	}

ul, li
	{
	list-style-type:none;
	}

div 
	{
	font:normal 11px/14px Arial, Helvetica, sans-serif;
	color:#fff;
	text-transform:none;
	text-decoration:none;
	background-color:inherit;
}
p{
	padding:0px;
	}
a {
	outline:none;
	}
		
.height1 {
	height:1px;
}	
.width1 {
	width:1px;
}	

.spacer {
	clear:both;
	}
#externalcontainer {
	background:url(images/body-bg.gif) repeat-x 0 0;
	width:960px;
	margin:0 auto;
	padding:30px 0 0 0;

	}
h2 {
	font:bold 26px/28px Arial, Helvetica, sans-serif;
	background-color:inherit;
	padding:0;
	margin:0;
	color:#372E3D;
	}
h3 {
	background-color: inherit;
	padding: 0;
	margin: 0;
	color: #F9F9D2;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	line-height: 26px;
	font-weight: bold;
	}
h4 {
	font:bold 11px/12px Arial, Helvetica, sans-serif;
	background-color:inherit;
	padding:0;
	margin:0;
	color:#7A2304;
	}

/***************************************css for header part starts**************************************/

#header {
	color:#000;
	padding:0;
	background:url(images/header-bg.gif) repeat-x 0 0px #F7F7D2;
	border-top:0px solid #fff;
	margin:0px 0 0 0;
	position:relative;
	}
#header div {
	background:url(images/banner.jpg) no-repeat 0 5px;
	padding:0;
	height:254px;
	}
#header div img {
	position:absolute;
	top:0px;
	left:28px;
	}
#header div h2 {
	float:right;
	margin:30px 0px 0 0;
	padding:0 120px 0 0;
	}
#header div p {
	color:#50502E;
	width:390px;
	position:absolute;
	top:67px;
	right:37px;
	background-color:inherit;
	}
#header div p b , #header div p strong {
	color:#5F1204;
	display:block;
	background-color:inherit;
	}
#header div .family {
	background:url(images/family1-icon.gif) no-repeat 0 0;
	padding:3px;
	position:absolute;
	top:123px;
	right:24px;
	}
#header div .family h3 {
	font:bold 24px/26px Arial, Helvetica, sans-serif;
	color:#372E3D;
	padding:0;
	margin:0px 0 0 70px;
	background-color:inherit;
	}
#header div .family ul {
	padding:0;
	margin:8px 0 0 70px;
	}
#header div .family li {
	border-top:1px dotted #A7A769;
	width:309px;
	padding:0px;
	margin:0;
	}
#header div .family li.brdr {
	border-bottom:1px dotted #A7A769;
	}
#header div .family li a {
	background:url(images/bullet.gif) no-repeat 7px 7px #F9F9D2;
	padding:0px 0 0px 19px;
	line-height:20px;
	display:block;
	margin:0;
	color:#FF9900;
	text-decoration:none;
	}
#header div .family li a:hover ,  #header div .family li a.active{
	background-color:#F3F3AB;
	color:#F9C417;
		}
 #header div .family li a.active{
 	cursor:default;background-color:inherit;
	color:#F9C417;
	}
#nav {
	position:absolute;
	top:275px;
	background-color:#241F28;
	width:960px;
	text-align:center;
	color:#f1f1f1;
	height: 41px;
	}
#nav ul {
	width:400px;
	padding:0 0 0 0px;
	overflow:auto;
	height:100%;
	margin:0px auto;
	}
#nav li {
	border-left:1px solid #0F0D10;
	border-right:1px solid #544A5B;
	padding:0px;
	margin:0;
	float:left;
	line-height:40px;
	}
#nav li a{	
	background-color:inherit;
	color:#F6F6D1;line-height:40px;
	padding:13px 12px 13px 12px;
	margin:0;
	font-weight:bold;
	text-decoration:none;
	}
#nav li a:hover , #nav li a.active{	
	color:#F9C417;
	font-weight:bold;
	background-color:inherit;
	background:url(images/arrow.gif) no-repeat 27px bottom;
	}
#nav li a.active{	
	cursor:default;
	background-color:inherit;
	}
/***************************************css for header part ends**************************************/

/***************************************css for body part starts**************************************/
#welcome h2{
	background:url(images/mid-bg.gif) repeat-x 0px 0 #F9F9D2;
	border-top:1px solid #fff;
	padding:20px 0;
	color:#A84E2E;
	font-size:24px;
	font-weight:normal;
	text-align:center;
	margin:40px 0 0 0;
	}
#mid-panel {
	background:url(images/mid-panel-bg.gif) repeat-x 0px 0 #4E7A00;
	padding:0;
	overflow:auto;
	height:100%;
	color:#000;
	}
#mid-panel .login {
	background:url(images/login-icon.gif) no-repeat 0px 0;
	padding:95px 0 0 85px;
	float:left;
	width:285px;
	}
#mid-panel .login h3{
	padding:45px 0 0 0;
	}
#mid-panel .login .txtfld {
	width:247px;
	height:15px;
	padding:2px 0 1px 5px;
	margin:5px 0 0 0;
	color:#CCFD64;
	font-size:10px;
	background-color:#679800;
	border:1px solid #6A9C00;
	}
#mid-panel .login label {
	color:#F9F9A9;
	margin:4px 0;
	background-color:inherit;
	}
#mid-panel .login label a{
	font-weight:bold;
	color:#F9C417;
	text-decoration:underline;
	background-color:inherit;
	}
#mid-panel .login label a:hover{
	text-decoration:none;
	}
#mid-panel .login .btn {
	margin:10px 0 0 50px;
	}
#mid-panel .children {
	background:url(images/only-children.jpg) no-repeat 0px 2px #4E7A00;
	padding:28px 0 40px 200px;
	margin:0 30px 0 370px;
	color:#000;
	}
#mid-panel .children h3 {
	font-weight:normal;
	}
#mid-panel .children p {
	color:#B3FF2D;
	line-height:16px;
	margin:10px 30px 0 0;
	background-color:inherit;
	}
#mid-panel .children p a{
	text-decoration:underline;
	background-color:inherit;
	color:#F9C417;
	font-weight:bold;
	}
#mid-panel .children p a:hover {
	text-decoration:none;
	}
#mid-panel .children span a{	
	display:block;
	padding:5px 0 5px 17px;
	color:#94BC05;
	margin:16px 10px 0 0;
	text-decoration:none;
	background:url(images/bullet1.gif) no-repeat 8px 9px #365B00;
	}
#mid-panel .children span a:hover{
	background-color:#365B00;
	color:#fff;
	}
#bottom-panel {
	background:url(images/bottom-bg.gif) repeat-x 0px 0px #BB5E3D;
	border-top:1px solid #F2F2AD;
	padding:30px 0 30px 0;
	overflow:auto;
	height:100%;
	color:#000;
	}
#bottom-panel .occasion {
	background:url(images/bottomh-bg.gif) repeat-x 0px 0px;
	padding:0px 0 0 25px;
	width:300px;
	float:left;
	}
#bottom-panel .occasion img {
	border:6px solid #AA482D;
	margin:14px 14px 0 0;
	float:left;
	}
#bottom-panel .occasion p {
	color:#531803;
	padding:0;
	margin:14px 0 0 0;
	background-color:inherit;
	}
#bottom-panel .occasion p a{
	color:#F9C417;
	font-weight:bold;
	text-decoration:underline;
	background-color:inherit;
	}
#bottom-panel .occasion p a:hover{
	text-decoration:none;}
#bottom-panel .occasion .special {
	background:url(images/special-bg.jpg) no-repeat 0 0;
	width:130px;
	height:90px;
	border:5px solid #AA482D;
	display:block;
	margin:20px 0 0 0;
	padding:15px 0 0 170px
	}
#bottom-panel .occasion .special h4 {
	background-color:inherit;
	color:#345002;
	font-size:16px;
	padding:0;
	margin:0;
	}
#bottom-panel .occasion .special b , #bottom-panel .occasion .special strong {
	color:#F18C04;
	display:block;
	background-color:inherit;
	padding:3px 0 3px 0;
	}
#bottom-panel .occasion .special p {
	padding:0;
	margin:0;
	color:#4B1503;
	background-color:inherit;
	}
#bottom-panel .occasion .special a.more {
	background:url(images/more-bg.gif) no-repeat 0 0 #FBEB81;
	color:#731403;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	width:56px;
	height:18px;
	display:block;
	padding:3px 0 0 0;
	margin:10px 0 0 0;
	}
#bottom-panel .occasion .special a.more:hover{
	color:#001;
	background-color:inherit;
	}
	
#bottom-panel .story {
	background:url(images/bottomh-bg.gif) repeat-x 0px 0px;
	margin:0 0 0 380px;
	padding:0;
	}
#bottom-panel .story span {
	color:#FFFFFF;
	font-size:12px;
	display:block;
	font-weight:bold;
	margin:12px 0 0 0;
	background-color:inherit;
	}
#bottom-panel .story img {
	border:6px solid #AA482D;
	margin:22px 21px 0 0;
	float:left;
	}
#bottom-panel .story p {
	color:#531803;
	padding:0;
	margin:22px 10px 0 0;
	background-color:inherit;
	}
#bottom-panel .story p a{
	color:#F9C417;
	font-weight:bold;
	text-decoration:underline;
	background-color:inherit;
	}
#bottom-panel .story p a:hover{
	text-decoration:none;
	}
#bottom-panel .story p.quote {
	background:url(images/quote.gif) no-repeat 0 0 #BB5E3D;
	color:#7A2304;
	font-weight:bold;
	padding:15px 20px 0 50px;
	margin:22px 10px 0 0;
	}
/***************************************css for body part ends**************************************/

/***************************************css for footer part ends**************************************/

#footer {
	background:url(images/footer-bg.gif) repeat-x 0 0 #F9F9D2;
	border-top:1px solid #F9F9D1;
	padding:35px 30px 20px 30px;
	color:#7A2304;
	height:100%;
	overflow:auto;
	}
#footer p{
	color:#3F6103;
	background-color:inherit;
	}
#footer a{
	color:#AA4F30;
	text-decoration:none;
	background-color:inherit;
	}
#footer a:hover{	
	color:#001;
	background-color:inherit;
	}
#footer ul {
	float:right;
	padding:0;
	}
#footer li {
	float:left;
	color:#AA4F30;
	padding:0 5px 0 5px;
	background-color:inherit;
	}
#footer li a	{
	color:#AA4F30;
	padding:0 6px 0 0;
	background-color:inherit;
	}
#footer li a:hover {
	color:#001;
	background-color:inherit;
	}
#footer a.link {
	background:url(images/link-bg.gif) no-repeat 0 0 #F9F9D2;
	color:#731403;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	width:56px;
	height:19px;
	float:left;
	display:block;
	padding:3px 0 0 0;
	margin:10px 5px 0 0;
	}
#footer a.link:hover{
	color:#000;
	background-color:inherit;	
	}

	
.main-content {
    display: flex;
    justify-content: space-between;
    padding: 40px;
    background-color: #f9f9f9;
}

.content-wrapper {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.text-content {
    max-width: 600px;
}

.steps-container {
    background-color: #e9f5e9;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.step {
    display: flex;
    align-items: center;
}

.step-number {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #4CAF50;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    margin-right: 10px;
}

.cta-box {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    margin-top: 20px;
}

.cta-box h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.cta-box p {
    font-size: 18px;
}

.type-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.type-button {
    background-color: white;
    color: #4CAF50;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    border: 2px solid #4CAF50;
    transition: background-color 0.3s, color 0.3s;
}

.type-button:hover {
    background-color: #4CAF50;
    color: white;
}

.image-content img {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
}
/* General layout */
.main-content {
    display: flex;
    justify-content: space-between;
    padding: 40px;
    background-color: #f0f4f9;
    animation: fadeIn 1s ease-in-out;
}

/* Layout for responsiveness */
.content-wrapper {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.text-content {
    max-width: 600px;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Steps section */
.steps-container {
    background-color: #e3f7ed;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    animation: slideUp 1.2s ease-in-out;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.step {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.step-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #5ac18e;
    color: white;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    margin-right: 15px;
}

/* Call to Action box */
.cta-box {
    background: linear-gradient(90deg, #5ac18e 0%, #28a745 100%);
    color: white;
    padding: 30px;
    text-align: center;
    border-radius: 12px;
    margin-top: 30px;
    animation: fadeIn 1.5s ease-in-out;
}

.cta-box h3 {
    font-size: 26px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.cta-box p {
    font-size: 20px;
    font-weight: 500;
}

.type-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}

.type-button {
    background-color: white;
    color: #28a745;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.type-button:hover {
    background-color: #ffffff;
    color: #28a745;
    border: 2px solid #28a745;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Image content with animation */
.image-content img {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

.animated-banner:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}