/*  
Theme Name: Designplus
Theme URI: http://www.themeflash.com/
Description: A Business & Portfolio Theme
Author: System32
Author URI: http://www.themeflash.com/ 
*/	

/***************************
	GLOBAL RESET
****************************/	
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font,img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
		margin: 0; 

		border: 0; 
		outline: 0; 
		}   

body{ 
		margin:0px;
		font:normal 12px "Arial", Verdana, Helvetica, sans-serif;
		color:#666;
		background: url(../images/bg_02.jpg) top center repeat-x;
		}
		


* html{
		margin:0;padding:0;
		}


/************************
	BASIC STYLES
*************************/
.clear{
		clear:both; padding:0; margin:0; background:none;
		}

.rightalign{
		float:right;
		}

.leftalign{ 
		float:left;
		}

.textright{
		text-align:right;
		}

.textleft{
		text-align:left;
		}
a{
		text-decoration:none;
		color:#666666;
		}
 
		a:hover{  
			color:#f68c21;
			}
	
p{
		margin:0 0 10px 0;
		font:normal 14px/20px "Arial", Verdana, Helvetica, sans-serif;
		color:#444;
		}		

.img_border{ 
		padding:5px;
		margin:10px 0;
		border:1px solid #ccc;
		}
		
/************************
	BLOCKQUOTE
*************************/

blockquote, q{
		quotes: none;
		}

blockquote:before, blockquote:after,
q:before, q:after{
		content: '';
		content: none;
		}

blockquote{
		margin: 10px 0px 10px 5px;
		background: url(../images/quoteclose.gif) no-repeat bottom right;
		}
		
		blockquote p{
				font:italic 20px/26px Georgia, Arial, Helvetica, sans-serif;
				background: url(../images/quoteopen.gif) no-repeat top left;
				padding-left: 30px;
				}

/************************
		HEADINGS
*************************/	
h1{
		padding:0px;
		color:#777;
		font:normal 30px/32px  "Arial", Arial, Helvetica, sans-serif;
		letter-spacing:-1px;
		}

h2{
		color:#333333;
		font:normal 18px  "MyriadProRegular", Arial, Helvetica, sans-serif;
		margin:0 0 10px 0;
		}
	
h3{
		color:#4b301a;
		font:normal 21px  "MyriadProRegular", Arial, Helvetica, sans-serif;
		margin:0 0 10px 0;
		}

h4{
		padding: 0px;
		color:#777;
		font:normal 20px/26px "Lucida Sans", Arial, Helvetica, sans-serif;
		}

h5{
		padding: 0px;
		color:#777;
		font:normal bold 16px/20px "Lucida Sans", Arial, Helvetica, sans-serif;
		}
	
h6{
		padding: 0px;
		color:#777;
		font:normal 11px/14px "Lucida Sans", Arial, Helvetica, sans-serif;
		margin-bottom:10px;
		}	

/************************
	HEAD
*************************/	
.header{
		width:100%;
		position:relative;
		}
	.bg {		
		height:460px; 		
		z-index:2;		
		}
.subheader{
		background: url(../images/inner_bg_02.jpg) center top repeat-x;	
		width:100%;
		height:110px;			
		}
.subbanner{
		width:100%;
		height:168px;
		text-align:center;			
		}
.subbg{
		width:100%;
			}
	
			.subtitle {
					text-align:center;
					color:#666;

					}

			.subtitle p {
					font:normal 18px Georgia, Helvetica, Sans-serif;
					font-style:italic;
					color:#666;
					}

			.subtitle h1{
					padding-top:30px;
					padding-bottom:10px;				
					color:#666;
					}
		
.logo{
		margin:0;
		}

/************************
	CONTENT
*************************/	
.content{
		width:100%;
		text-align:left;
		background-color:#FFFFFF;	
		margin: 0;
		padding: 0;
		}	
.box-inner{
		width:960px;
		margin:0 auto;
		text-align:left;
		padding-top: 20px;
		background:url(../images/inner-shadow_08.jpg) top center no-repeat;	
		}
.banner-inner{
		width:960px;
		height: 131px;
		margin:13px auto 0 auto;
		text-align:left;
		}
		
.banner-inner h1{
		font:normal 24px  "MyriadProSemibold", Arial, Helvetica, sans-serif; text-decoration:none;
		padding: 70px 0 0 20px;
		color:#FFFFFF;
		}
.banner-inner-about{
		width:960px;
		height: 131px;
		margin:0 auto;
		text-align:left;
		background:url(../images/banner-inner-about_05.jpg) top left no-repeat;
		}
.banner-inner-products{
		width:960px;
		height: 131px;
		margin:0 auto;
		text-align:left;
		background:url(../images/banner-inner-products_05.jpg) top left no-repeat;
		}
.banner-inner-contact{
		width:960px;
		height: 131px;
		margin:0 auto;
		text-align:left;
		background:url(../images/banner-inner-contact_05.jpg) top left no-repeat;
		}
.banner-inner-Projects{
		width:960px;
		height: 131px;
		margin:0 auto;
		text-align:left;
		background:url(../images/banner-inner-projects_05.jpg) top left no-repeat;
		}
.box-inner2{
		width:960px;
		margin:0 auto;
		text-align:left;	
		background:url(../images/left_bg2_09.jpg) top right no-repeat;
		}
.left{
		width:220px;
		height: 350px;
		margin:20px 0 0 15px;
		float:left;
		text-align:left;	
		}
.right{
		width:690px;
		margin:20px 0 0 30px;
		float:left;
		text-align:left;	
		}
.right2{
		width:920px;
		margin:20px;
		float:left;
		text-align:left;	
		}
.left_contact{
		width:590px;
		margin:20px 0 0 20px;
		float:left;
		text-align:left;	
		}
.right_contact{
		width:300px;
		margin:20px 0 0 20px;
		float:right;
		text-align:left;	
		}
.box-content{
		padding:0;
		}
		
.sepline{
		/*background:url(../images/content_shorow_03.png) top right no-repeat;*/
		}	

/************************
	MID CONTENT LISTS
*************************/	
						
ul.list{
		margin:5px 0 20px 10px;
		padding:0;
		list-style:none;
		display : inline-block;
		}
	
		ul.list li{
				padding:3px 5px 3px 25px;
				}
			
				ul.list li{
						background:url(../images/tick.gif) left 6px no-repeat;
						}


/**************************
	TWITTER BOX
***************************/

.twitter{
		padding:20px 0 0 0; 
		}

		.twitter p{
				padding-top:10px;
				font:italic normal 12px "Georgia", Helvetica, sans-serif;
				}

/**************************
	SIDEBAR SUBNAV
****************************/

ul.subnav{
		list-style:none;
		margin:0;
		padding:0px;
		}

		ul.subnav li a{
				font:normal 14px  "MyriadProSemibold", Arial, Helvetica, sans-serif;
				margin: 0;
				padding:0;
				height:100%;
				text-decoration:none;
				border:1px solid #e5e5e4;
				color:#666766;
				}

				ul.subnav li a:link, 
				ul.subnav li a:visited{
						color:#666766;
						display:block;
						padding: 10px 10px 10px 33px;
						margin: 0;
						}

						ul.subnav li.current a{
								font-weight:bold;
								text-decoration:none;
								background:url(../images/sub_menu_hover_03.jpg) top left no-repeat ;
								color:#42270f !important;	
								}
						ul.subnav li.sub a{
								text-decoration:none;
								background:url(../images/sub_menu1.jpg) top left no-repeat ;	
								}
						ul.subnav li.sub1 a{
								font-weight:bold;
								text-decoration:none;
								background:url(../images/sub_menu2.jpg) top left no-repeat ;
								}
						ul.subnav li.sub3 a{
								font-weight:bold;
								text-decoration:none;
								background:url(../images/sub_menu3_03.jpg) top left no-repeat ;
								}
						ul.subnav li.sub4 a{
								font-weight:bold;
								text-decoration:none;
								background:url(../images/sub_menu4_03.jpg) top left no-repeat ;
								}
						ul.subnav li.sub5 a{
								font-weight:bold;
								text-decoration:none;
								background:url(../images/sub_menu5_03.jpg) top left no-repeat ;
								}
						ul.subnav li.sub6 a{
								font-weight:bold;
								text-decoration:none;
								background:url(../images/sub_menu6_03.jpg) top left no-repeat ;
								}
						ul.subnav li.sub7 a{
								font-weight:bold;
								text-decoration:none;
								background:url(../images/sub_menu7_03.jpg) top left no-repeat ;
								}
						ul.subnav li a:hover{
										color:#42270f;
										background:url(../images/sub_menu1-hover.jpg) top left no-repeat ;
										text-decoration:none;
										}

/**************************
	MIC CONTENT NEWS LISTS
***************************/

ul.newslist{
		margin:10px 0;
		padding:0;;
		}

		ul.newslist li{
				border-bottom:1px solid #e6e6e6;
				padding:10px 0;
				color:#777;
				}
			
				ul.newslist li a:link, 
				ul.newslist li a:visited, 
				ul.newslist li a:active{
						padding:3px 0px;
						color:#777;
						text-decoration:none;
						}

						ul.newslist li a:hover{
								color:#00919f;
								padding:3px 0px;
								text-decoration:none;
								}

								span.date{
										display:block;
										width:70px;
										margin:0 0 5px 0;
										padding:2px 0px;
										color:#00919f; 
										font:normal bold 10px/12px Tahoma, Arial, Helvetica, sans-serif;
										letter-spacing:normal !important;
										}



/****************************
	SERVICES
*****************************/

.services{
		}
			
		.services h3{
				padding:0px;
				color:#777;
				font:normal 23px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
				letter-spacing:-1px;
				margin-bottom:10px;
				padding-bottom:10px;
				border-bottom:1px solid #d1d1d1;
				}

ul.service_list{
		margin:10px 0;
		padding:0;
		list-style:none;
		display : inline-block;
		}
	
		ul.service_list li{
				padding:3px 5px 3px 25px;
				float:left;
				width:40%;
				}
			
				ul.service_list li{
						background:url(../images/tick.gif) left 6px no-repeat;
						}

/*************************
	PORTFOLIO
**************************/

.portfolio{
		border-bottom:1px solid #d3d3d3;
		margin-bottom:15px;
		padding-bottom:20px;	
		}

.port_details{
		float:left;
		margin-top:10px;
		margin-left:30px;
		width:280px;
		}

		.port_details p{
				margin:0;
				padding:5px 0;	
				}
				
			.port_details h3{
					padding:0px;
					color:#555;
					font:normal bold 22px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
					letter-spacing:-1px;
					margin-bottom:10px;
					}				

.port_img {
	float:left;
}

a.view{
		font-size:11px;
		text-decoration:none;
		font-weight:bold;
		float:right;
		padding-right:10px;
		margin:10px;
	 	}
 
a.view:hover{  
		font-weight:bold;
		text-decoration:underline;
		}

/**************************
	Blog	 
***************************/

.blog{
		margin:15px 0;
		padding:10px 0;
		border-bottom:1px solid #d3d3d3;	
	    }
	
		.blog p{
				padding:5px 0;
			    }
									
			.blog h2 a{
				font:normal 18px/20px Arial, Helvetica, sans-serif;
			    }				
	

.post-info{
		border-bottom:1px solid #E8E8E8;
		border-top:1px solid #E8E8E8;		
		padding:5px 15px 5px 0px;
		font:normal 10px Arial, Helvetica, sans-serif;
		margin:10px 0;
		letter-spacing:1px;
		word-spacing:3px;
		text-transform:uppercase;
		}

		.post-info span{
				color:#257400;
				font-weight:bold;
				}
				
.blog_img {
		float:left;
		margin-right:10px;
		
}				

a.links{
		font-size:14px;
		text-decoration:underline;
		color:#0061a7;
		}

a.links:hover{  
		color:#5D5D5D;
		font-weight:bold;
		text-decoration:none;
		}

/***************************
	READ MORE
****************************/ 

.readmore{   
		margin-bottom:20px;
		margin-right:10px;
		margin-top:10px;	
		}
	
		.readmore:hover{  
		color:#000000
		

				}

/****************************
	FOOTER
*****************************/

.footer{
		margin:0;
		padding:10px 0;
		width:auto;
		height:25px;
		border-top:1px solid #e2e2e2;
		}

		.footer_left{
				float:left;
				padding: 0 20px;
				}

		.footer_left p{
						font-size:10px;
						}

		.footer_right{
				float:right;
				padding: 0 20px;
				}

/* ================================================= */
/* 	 INPUT FIELD CSS                                 */
/* ================================================= */

/********** contact form **********/
#contactform { margin:0; padding:5px 10px; }
#contactform * { color:#575757; }
#contactform ol { margin:0; padding:0; list-style:none; }
#contactform li { margin:0; padding:0; background:none; border:none; display:block; clear:both; }
#contactform li.buttons { margin:5px 0 5px 0; clear:both; }
#contactform label { margin:0; width:130px; display:block; padding:10px 0; color:#575757; font:bold 12px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left; }
#contactform label span { color:#F00; }
#contactform input.fill { width:410px; border:1px solid #ddd; margin:2px 0; padding:5px 2px; height:16px; background:#fff; float:right; }
#contactform input.fill2 { width:143px; border:1px solid #ddd; margin:2px; padding:5px 2px; height:16px; background:#fff; float:right; }
#contactform .fill3 { width:415px; border:1px solid #ddd; margin:2px 0; padding:5px 2px; background:#fff; float:right; }
#contactform textarea { width:410px; border:1px solid #ddd; margin:2px 0; padding:2px; background:#fff; float:right; font:normal 12px Arial, Helvetica, sans-serif;}
#contactform li.buttons input { padding:3px 0 3px 110px; margin:10px 0 0 0; border:0; color:#FFF; float:right; }
/* ================================================= */
/* 	 MENU                                 */
/* ================================================= */
.menu { padding:40px 0 0 0; margin:0 ; width:auto; height:35px; float:right}
.menu ul { text-align:right;  padding:0; margin:0; list-style:none; border:0; float:left; }
.menu ul li { float:left; margin:0; padding:0; border:0; background:url('../images/menu_line_03.jpg') no-repeat center right;}
.menu ul li:nth-child(4) {background: none;}
.menu ul li a { float:left; margin:0; padding:6px 21px; color:#000; font:normal 13px/16px  "MyriadProSemibold", Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { color:#f68c21; }
.menu ul li a.active { color:#FFF; background: #31343e; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }


#menu3 dl, dt, dd, ul, li {
margin : 0;
padding : 0;
list-style-type : none;
}

#menu3 {
padding : 0;
float:left;
padding: 0;
color:#666666; 
font:normal 14px "MyriadProSemibold", Arial, Helvetica, sans-serif;
}
#menu3 dt {
cursor : pointer;
margin : -1px 0;
padding: 0px;
height : 37px;
line-height : 37px;
text-align : left;
border : 1px solid #dcdcdc;
background: url(../images/sub_menu1.jpg) top right no-repeat;
}
#menu3 dt span {
width: 171px;
background-repeat : no-repeat;
background-position : 95% center;
display : block;
padding: 1px 10px 1px 36px;
margin: 0;

}
#menu3 dd {
}
#menu3 li {
text-align : left;
background-color : #ededed;
padding: 8px 0 10px 48px;
border : 1px solid #dcdcdc;
margin : -1px 0;
background: url(../images/sub2-bg_14.jpg) top right no-repeat;

}
#menu3 li a, #menu dt a {
color: #666666;
text-decoration : none;
display : block;
height : 15px;
}
#menu3 dt a:hover, #menu dt:hover {
color: #4b301a;
}
#menu3 li a:hover {
color: #f68c21;
}

#menu3 dt a.active span {
color: #4b301a;
background: url(../images/sub_menu2.jpg) top left no-repeat;
}

#menu3 dt a.active2 span {
color: #4b301a;
background: url(../images/sub_menu3.jpg) top left no-repeat;
}

#menu3 li a.active {
color: #f68c21;
}


.text { color:#000; font:normal 18px  "MyriadProSemibold", Arial, Helvetica, sans-serif;}
.text2 { color:#f68c21; font:normal 18px  "MyriadProSemibold", Arial, Helvetica, sans-serif;}
.text3 { color:#603913; font:normal 42px/40px  "MyriadProSemibold", Arial, Helvetica, sans-serif;}
.text3:hover { color:#603913;}
.text4 { color:#231f20; font:normal 42px/40px  "MyriadProSemibold", Arial, Helvetica, sans-serif;}
.text4:hover { color:#231f20;}
.text5 { color:#2e3192; font:normal 42px/40px  "MyriadProSemibold", Arial, Helvetica, sans-serif;}
.text5:hover { color:#2e3192;}
.text6 { color:#662D91; font:normal 42px/40px  "MyriadProSemibold", Arial, Helvetica, sans-serif;}
.text6:hover { color:#662D91;}
.text7 { color:#FFFFFF; font:normal 42px/40px  "MyriadProSemibold", Arial, Helvetica, sans-serif;}
.text7:hover { color:#FFFFFF;}
.text8 { color:#333333; font:bold 18px  Arial, Helvetica, sans-serif;}
.text9 { color:#2e3192; font:bold 38px/38px  "MyriadProSemibold", Arial, Helvetica, sans-serif;}
.text10 { color:#603913; font:bold 38px/38px  "MyriadProSemibold", Arial, Helvetica, sans-serif;}
.text11 { color:#00abbd; font:bold 38px/38px  "MyriadProSemibold", Arial, Helvetica, sans-serif;}
.text12 { color:#c10059; font:bold 38px/38px  "MyriadProSemibold", Arial, Helvetica, sans-serif;}
.text13 { color:#ec008c; font:normal 18px  "MyriadProSemibold", Arial, Helvetica, sans-serif;}
.text14 { color:#000; }
.text15 { color:#8dbe39; font:bold 38px/38px  "MyriadProSemibold", Arial, Helvetica, sans-serif;}
.text16 { font:normal 12px/18px  Arial, Helvetica, sans-serif; color:#666766}
.text_blue { color:#0000ff;}
.text_lightblue { color:#00ffff;}
.text_lightblue2 { color:#99ccff;}
.text_gray { color:#808080;}
.text_green { color:#008000;}
.text_green { color:#008000;}
.text_hazel { color:#993300;}
.text_violet { color:#970080;}
.text_orenge { color:#f68c21;}
.text_pink { color:#EC008C;}
.text_yallow{ color:#ffcc00;}
.text_title{ padding-bottom: 5px}

.line { border-bottom:1px solid #ebebea; margin-bottom:20px;}



/* ================================================= */
/* 	 ENHANCEMENT PAGE                                 */
/* ================================================= */

/* ================================================= */
/* 	 HOMEPAGE                                 */
/* ================================================= */

        .container-projects {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: auto;
            /*background-color: #f4f4f4;*/
            padding-top:5%;
            padding-bottom:5%;
        }

        .container-box-project {
            display: flex;
            gap: 20px;
        }

        .box-project {
            position: relative;
            width: 300px;
            height: 200px;
            border-radius: 15px;
            overflow: hidden;
            cursor: pointer;
        }

        .box-project img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 15px;
            transition: transform 0.3s ease-in-out;
        }

        .overlay-project {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 30%;
            background: rgba(246, 140, 33, 0.9);
            color: white;
            text-align: center;
            display: flex;
            font-size: 18px;
            font-weight: bold;
            transition: height 0.3s ease-in-out, opacity 0.5s ease-in-out;
            opacity: 0.9;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            flex-direction: column;
        }
        
        .overlay-project div {
            padding-top:6%;
            padding-bottom:5%;
        }

        .box-project:hover .overlay-project {
            height: 100%;
            opacity: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: auto;
        }

        .overlay-project p {
            font-size: 14px;
            opacity: 0;
            color:white;
            transition: opacity 0.5s ease-in-out;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-top: 10px;
        }
        .overlay-project a {
            color:white;
        }

        .box-project:hover .overlay-project p {
            opacity: 1;
        }
        
        
        
        .container-reference {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            /*padding: 20px;*/
        }
        .product-reference {
            /*position: relative;*/
            width: 250px;
            height: 350px;
            /*overflow: hidden;*/
            /*border-radius: 10px;*/
            /*background: #fff;*/
            /*box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);*/
            /*cursor: pointer;*/
            /*transition: transform 0.3s ease-in-out;*/
        }
        .product-reference:hover {
            transform: scale(1.05);
        }
        .product-reference img {
            width: 90%;
            height: 80%;
            object-fit: contain;
            /*border-radius: 10px;*/
        }
        .product-info-reference {
            /*position: absolute;*/
            /*bottom: -100%;*/
            /*width: 100%;*/
            /*background: rgba(0, 0, 0, 0.7);*/
            /*color: white;*/
            /*padding: 15px;*/
            /*box-sizing: border-box;*/
            /*transition: bottom 0.3s ease-in-out;*/
            /*text-align: left;*/
        }
        .product-reference:hover .product-info-reference {
            bottom: 0;
        }
        
        
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70%;
            max-width: 800px;
            background: white;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
            padding: 20px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            gap: 20px;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        .popup.show {
            display: flex;
            opacity: 1;
        }
        .popup img {
            width: 300px;
            border-radius: 10px;
        }
        .popup-content {
            text-align: left;
        }
        .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            cursor: pointer;
            border: none;
            background: none;
        }
        
        
        /* Modal Styling */
        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            border-radius: 10px;
            width: 80%;
            max-width: 800px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            padding: 20px;
            z-index: 1000;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
        }

        .close-modal {
            cursor: pointer;
            font-size: 24px;
        }

        .modal-content {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-top: 10px;
        }

        .modal-content img {
            width: 40%;
            border-radius: 10px;
        }

        .modal-text {
            width: 60%;
        }
        
        
        
        
.container-reference1 {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.product-reference1 img {
    width: 220px;
    height: auto;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
}

.product-reference1:hover {
    transform: scale(1.05);
}

#product-content1 {
    display: none;
    text-align: center;
    margin-top: 20px;
}

.content-box1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #fff;
    padding: 20px;
    border: 1px solid #ccc;
}

#content-image1 {
    width: 220px;
    height: auto;
}

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

#close-content {
    background: #ff0000;
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
}