html{background:#151515}
body										{margin:0; background:#151515;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif,}
*											{margin:0; padding:0}
a											{outline:0; text-decoration:none; color:#31a1ff;}
img											{border:0}
h1,h2,h3,h4,h5,h6							{font-weight:normal}
li											{list-style:none}
lo                                          {list-style:none}

/* ===== HEADER SECTION ===== */
#head										{width:100%; float:left; background:#151515; position:relative;}
.head_height								{height:448px}
.head_pad									{padding-bottom:20px}
#head_cen									{width:800px; margin:0 auto; position:relative;}
#head_sup									{width:800px; float:left; position:relative}
#head p.search								{width:auto; margin-top:10px; float:right; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:11px; color:#999999; line-height:25px; letter-spacing:0.5px}
#head p.search label						{width:auto; margin-right:10px; float:left}
#head p.search input.txt					{width:135px; height:21px; margin-right:7px; float:left; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; color:#2c2d2c; border:0; background:url(../images/searchbg.png) no-repeat}
#head p.search input.btn					{width:68px; height:21px; float:left; border:0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:11px; color:#999999; text-align:center; cursor:pointer; background:url(../images/searchbtn.png) no-repeat}
#head p.search input.btn:active				{background-position:2px 2px}

/* Logo */
h1.logo								      {width:300px; height:78px; margin-top:12px; margin-bottom:6px; margin-left:-1px; float:left; background:url(../images/logo.png) no-repeat; z-index:100; position:relative;}
h1.logo a									{width:100%; height:100%; float:left; text-indent:-9999px}

/* Desktop Menu (Original Style) */
#desktop-menu								{width:625px; height:44px; margin-right: -100px; margin-top:1px; float:right; display:flex;}
#desktop-menu li							{width:auto; margin-left:-1px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#ebe6e6; line-height:35px; text-transform:uppercase}
#desktop-menu li:first-child				{margin:0}

#desktop-menu li	a,
#desktop-menu li a.active					{width:auto; height:42px; padding:0 23px; float:left; color:inherit; background:#252525; display:block; position:relative;}
#desktop-menu li	a:hover,
#desktop-menu li a.active					{color:#31a1ff; background:#272727}

/* Add underline effect on desktop menu */
#desktop-menu li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 23px;
  right: 23px;
  width: 0;
  height: 2px;
  background-color: #31a1ff;
  transition: width 0.3s ease;
}

#desktop-menu li a:hover::after,
#desktop-menu li a.active::after {
  width: calc(100% - 46px);
}

/* Mobile Navigation Toggle (Hidden on Desktop) */
.mobile-nav-toggle							{display:none; flex-direction:column; background:transparent; border:none; cursor:pointer; padding:10px; position:absolute; right:0; top:20px; z-index:10001;}
.hamburger									{width:30px; height:3px; background-color:#fff; margin:4px 0; transition:all 0.3s ease; border-radius:2px;}
.mobile-nav-toggle.active .hamburger:nth-child(1) {transform:rotate(45deg) translate(8px, 8px);}
.mobile-nav-toggle.active .hamburger:nth-child(2) {opacity:0;}
.mobile-nav-toggle.active .hamburger:nth-child(3) {transform:rotate(-45deg) translate(8px, -8px);}

/* Mobile Menu (Hidden on Desktop) */
.mobile-menu								{display:none; position:fixed; left:-100%; top:100px; width:100%; background-color:#252525; text-align:center; transition:left 0.3s ease; padding:20px 0; z-index:9999; box-shadow:0 10px 27px rgba(0,0,0,0.5);}
.mobile-menu.active							{left:0;}
.mobile-menu li								{margin:0; border-bottom:1px solid rgba(255,255,255,0.1);}
.mobile-menu li a							{display:block; padding:15px; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#fff; text-transform:uppercase; transition:all 0.3s ease;}
.mobile-menu li a:hover						{color:#31a1ff; background:#272727;}

img.ban_bg									{width:auto; float:left; position:absolute; top:139px; left:-24px}

/* Gallery/Carousel */
#simplegallery1{ 
position: relative;
visibility: hidden;
border: 6px solid darkred;
z-index: 1;
}

#simplegallery1 .gallerydesctext{ 
text-align: left;
padding: 2px 5px;
}

/* ===== CONTENT SECTION ===== */
#content									{width:100%; padding-bottom:36px; float:left; background:#ffffff url(../images/contentBg.png) repeat-x}
#content_cen								{width:100%; max-width:800px; margin:0 auto; padding:0 20px; box-sizing:border-box}
#content_sup								{width:100%; float:left; position:relative}


/* Container */
#ct_pan {
  margin: 15px auto;      /* controls top/bottom spacing */
  padding: 10px 0;        /* vertical padding inside the container */
  display: flex;
  justify-content: center;
  gap: 20px;              /* space between icons */
  flex-wrap: wrap;
}

/* Social Icon Links */
#ct_pan {
  margin: 15px auto;       /* top/bottom spacing */
  padding: 10px 0;         /* vertical padding */
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical centering */
  gap: 20px;
  flex-wrap: wrap;
  min-height: 80px;        /* ensures container keeps some vertical space */
}

/* Social Icon Links */
#ct_pan a {
  width: 60px;
  height: 60px;
  background: #333;
  color:#31a1ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.3s ease;
  text-decoration: none;
}

/* Hover Effect */
#ct_pan a:hover {
  background: #31a1ff;
  color: #333;
  transform: translateY(-6px);
}

/* Fix vertical alignment of the icon inside the circle */
#ct_pan a i {
  display: block;
  line-height: 1;
}

@media (max-width: 680px) {
  #ct_pan {
    /* align-items: center !important; */
    gap: 15px;
  }
  
  #ct_pan a i {
  align-items: center !important;
  display: block;
  margin-top: 20px;
 }
}


#top_frame										{width:100%; height:auto; min-height:100px; margin-top:10px; float:left; position:relative; color:#999999; line-height:16px; background:#3b3b3b; padding:10px; box-sizing:border-box;}

#welcom_pan									{width:100%; margin-top:37px; padding-bottom:36px; float:left; border-bottom:#c9c9c9 solid 1px; background:url(../images/crosslines.png) no-repeat right 8px}
h2											{width:auto; margin-top:9px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:32px; color:#31a1ff; font-weight:bold; line-height:30px; letter-spacing:-1.7px}
h2 span										{color:#3b3b3b; text-transform:uppercase; margin-right:5px}

#welcom_pan a.brochure						{width:auto; height:54px; margin-right:31px; padding:0 8px 0 0; float:right; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff; font-weight:bold; line-height:54px; background:url(../images/buttonBg.png) no-repeat right -54px}
#welcom_pan a.brochure span					{width:auto; height:54px; padding:0 13px 0 23px; float:left; background:url(../images/buttonBg.png) no-repeat 0 0}

#welcom_pan p								{width:100%; max-width:755px; margin:25px 0 0 25px; float:left; font-size:20px; color:#4d4d4d; line-height:28px; text-indent:50px;text-align:justify;}

#welcom_pan  ol li                          {width:100%; max-width:755px; margin:25px 0 0 68px; float:left; margin-top:10px; margin-bottom:10px; list-style-type:decimal; line-height:20px; padding:10px 20px 2px 2px}

#welcom_pan ul li							{width:auto; margin-left:3px; float:left; font-family:Arial, Helvetica, sans-serif; color:#5f5f5f; line-height:35px;  text-transform:uppercase;}
/* #welcom_pan	iframe							{margin:37px 0 0 14px; float:left; border-bottom:#c9c9c9 solid 1px; background:url(../images/crosslines.png) no-repeat right 8px; max-width:100%;} */
#welcom_pan a.enlarg						{width:auto; margin:15px 0 0 14px; float:left; color:#848484}
#welcom_pan h3								{clear:left}
.lftWrap									{width:100%; max-width:300px; float:left; clear:left}
.lftWrap p									{width:100%; float:left; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:28px;color:#4d4d4d}

.stepcarousel{
position: relative;
border: 10px Solid Silver;
overflow: scroll;
width: 100%;
max-width: 820px;
height: 420px;
}

.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 10px;
width: 100%;
max-width: 800px;
}

/* .rgtWrap input.txt							{ display: inline-block;
                                              color: #676767;
                                              width:100%; 
                                              max-width:176px;
                                              margin:20px 20px 0 0; 
                                              padding:3px 5px; 
                                              height:30px; 
                                              float:left; 
                                              font-family:Arial, Helvetica, sans-serif; 
                                              font-size:15px;
                                              border:#000000 solid 2px; 
                                              background:#FFFFFF;
                                              box-sizing:border-box;
                                             }

.rgtWrap textarea.txtarea                   { display: inline-block;
                                              color: #676767;
                                              position:relative;
                                              margin:20px 20px 0 0; 
                                              width:100%;	
                                              max-width:420px;
                                              height: 150px;
	                                          font-family: Arial, Helvetica, sans-serif;
	                                          font-size:15px;
	                                          border:#000000 solid 2px; 
	                                          background:#FFFFFF;
	                                          box-sizing:border-box;
                                             }

.rgtWrap input.btn							{width:113px; 
                                             height:42px; 
                                             margin-top:18px; 
                                             float:left; 
                                              font-family:Arial, 
                                              Helvetica, sans-serif; 
                                              font-size:17px;
                                              color:#000000; 
                                              font-weight:bold; 
                                              text-align:center; 
                                              cursor:pointer; 
                                              border:0; 
                                              background:url(../images/submitBtn.png) no-repeat}

.rgtWrap input.txt:focus,
         input.txtarea:focus {  text-align:justify;
								border-style: solid;
								border-color: #bababa;
								color: #444;
							}

.rgtWrap  input.error,
          textarea.error {  border-color: #973d3d;
							border-style: solid;
							background: #f0bebe;
							color: #a35959; 
						}

.rgtWrap input.error:focus,
         textarea.error:focus {
	             border-color: #973d3d;
	             color: #a35959;
                } */

.rgtWrap input.btn:active					{background-position:1px 1px}
.rgtWrap									{width:100%; max-width:500px; float:left}
.rgtWrap h3									{width:100%}
h3											{width:auto; float:left; font-family:Arial, Helvetica, sans-serif; font-size:26px; color:#31a1ff; font-weight:bold; line-height:60px; letter-spacing:-1.7px}
h3 span										{color:#3b3b3b; margin-right:0px}
ul#infoPan									{width:100%; float:left}
ul#infoPan li								{width:100%; max-width:226px; margin-left:56px; float:left}
ul#infoPan li:first-child					{margin:0}
ul#infoPan li h3							{width:100%; height:67px; float:left; font-size:26px; color:#31a1ff; font-weight:bold; line-height:60px; letter-spacing:-1.7px}
ul#infoPan li h3 span						{color:#3b3b3b; margin-right:2px}
ul#infoPan li h3 img						{margin-right:31px; float:right}
ul#infoPan li p								{width:100%; margin-top:25px; float:left; font-size:18px; color:#848484; line-height:24px; letter-spacing:-0.8px}
ul#infoPan li p.descrip						{margin-top:13px; font-size:12px; line-height:16px;}

#quotPan									{width:100%; max-width:848px; height:auto; min-height:80px; margin-top:42px; float:left; position:relative; left:0; border-top:#c9c9c9 solid 1px; background:url(../images/pat.png) repeat; padding:20px; box-sizing:border-box;}
#quotPan h3									{width:100%; max-width:274px; margin:14px 0 0 0; float:left; line-height:45px}
#quotPan input.txt							{width:100%; max-width:176px; margin:20px 20px 0 0; padding:3px 5px; height:30px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:17px; color:#bfbfbf; font-weight:bold; border:#cbcbcb solid 1px; background:#ffffff; box-sizing:border-box;}
#quotPan input.btn							{width:113px; height:42px; margin-top:18px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:17px; color:#ffffff; font-weight:bold; text-align:center; cursor:pointer; border:0; background:url(../images/submitBtn.png) no-repeat}
#quotPan input.btn:active					{background-position:1px 1px}

#blog										{width:100%; max-width:506px; margin-top:24px; float:left}
#blog ul									{width:100%; float:left}
#blog ul li									{width:100%; margin-top:21px; float:left; border-top:#c9c9c9 solid 1px}
#blog ul li:first-child						{margin-top:0; border:0}
#blog ul li a								{width:auto; margin-top:25px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#848484; line-height:24px}
#blog ul li p								{width:100%; margin-top:16px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#5c5c5c; line-height:16px}

#latest										{width:100%; max-width:233px; margin:24px 0 0 60px; float:left}
#latest ul									{width:100%; float:left}
#latest ul li								{width:100%; margin-top:21px; float:left; border-top:#c9c9c9 solid 1px}
#latest ul li:first-child					{margin-top:0; border:0}
#latest ul li a								{width:auto; margin-top:25px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#848484; line-height:24px}
#latest ul li p								{width:100%; margin-top:16px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#5c5c5c; line-height:16px}	

/* ===== FOOTER ===== */
#foot										{width:100%; height:200px; float:left; background:#151515; padding:5px 0;}
#foot_cen									{max-width: 800px;
  width: 100%;
  margin: 8px auto 0 auto;
  padding: 0 20px;
  box-sizing: border-box;} 
#foot h6									{width:300px; height:78px; margin:0 auto; text-indent:-9999px; background:url(../images/logo.png) no-repeat}
#foot h6 a									{width:100%; height:100%; float:left}
#foot ul									{width:100%; max-width:550px; margin:11px auto 0 auto; text-align:center;}
#foot ul li									{width:auto; display:inline-block; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; color:#767676; line-height:18px}
#foot ul li a								{width:auto; color:inherit}
#foot ul li.space							{width:auto; padding:0 6px}
#foot p										{width:100%; margin-top:10px; float:left; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:10px; color:#767676; line-height:8px; text-align:center}
#foot p	a									{color:inherit}

/* ===== SERVICE PAN ===== */

#service_pan {
    width: 100%;
    max-width: 1100px;
    margin: 60px auto;
    float:left
}

#service_pan ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 60px;
    padding: 0;
    list-style: none;
}

#service_pan ul li {
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 25px;
}

#service_pan ul li h3 {
    font-size: 24px;
    display: block;
    width: 100%;
    float: none;
    clear: both;
    margin: 0 0 5px 0;
}

#service_pan ul li p {
    display: block;
    width: 100%;
    float: none;
    clear: both;
    margin: 0;
    line-height: 1.7;
}

#service_pan ul li p a {
    display: inline-block;
    margin-top: 12px;
    color: #2f80ed;
    font-weight: 500;
    text-decoration: none;
}

#service_pan ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
}

#service_pan ul li span {
    font-size: 22px;
    font-family: Arial, Helvetica, sans-serif;
    color: #2f80ed;
    font-weight: 500;
}

#service_pan ul li img {
    width: 220px;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    transition: transform 0.3s ease;
}



/* Subtle hover */
#service_pan ul li:hover img {
    transform: scale(1.05);
}

#service_pan ul li:hover span {
    color: #1a5fb4;
}


@media (max-width: 768px) {
    #service_pan ul {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    #service_pan ul li img {
        width: 160px;
        height: 100px;
    }
}


/* #service_pan								{width:100%; margin-top:20px; float:left}
#service_pan ul								{width:100%; float:left}
#service_pan ul li							{width:100%; max-width:325px; height:auto; min-height:100px; margin:0 30px 20px 0; float:left; border-bottom:#c9c9c9 solid 1px; padding:10px; box-sizing:border-box;}
#service_pan ul li:hover					{background:#fbfbfb}
#service_pan ul li h5						{width:auto; margin:10px 0 0 10px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:18px; padding-right:10px; color:#31a1ff}
#service_pan ul li p						{width:100%; max-width:300px; margin:5px 0 0 10px; float:left; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:11px; color:#5c5c5c}
#service_pan ul li p a						{width:auto; float:right; color:#31a1ff}
#service_pan image								{width:100%; max-width:300px; margin-top:10px; margin-left:50px; border-radius: 20%; float:left} */

/* ===== SLIDERS  ===== */

.hero-slider {
  position: relative;
  width: 100%;
  max-width: 1700px;
  margin: 30px auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  margin-top: 60px;

 
  border:4px solid darkred;
  border-radius: 2px;
  box-shadow: 0px 20px 30px rgba(0,0,0,0.3);
}

/* .hero-slider {
  width: 95%;
  max-width: 1500px;
  margin: 20px auto;
  aspect-ratio: 16 / 9;
  margin-top: 60px;
  border: 4px solid darkred;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
} */

.slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.slides img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}

.slides img.active {
  opacity: 1;
}


.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 30px;
  padding: 12px 18px;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
  z-index: 10;
}

.slider-btn:hover {
  background: rgba(0,0,0,0.8);
}

.slider-btn.prev {
  left: 15px;
}

.slider-btn.next {
  right: 15px;
}

.hero-slider:hover .slider-btn {
  opacity: 1;
}

.slider-btn {
  opacity: 0;
}

.portrait-slider {
  max-width: 400px;     /* smaller width fits portrait better */
  margin: 80px auto;
  aspect-ratio: 350 / 500;   /* match your real image ratio */
}

.portrait-slider .slides img {
  object-fit: contain;   /* important for portrait */
  background: #000;
}


.portrait-slider .slides {
  position: relative;
}




/* ===== RESPONSIVE MEDIA QUERIES ===== */

/* Tablet View */
@media screen and (max-width: 768px) {
  /* Hide desktop menu, show mobile */
  #desktop-menu {
    display: none !important;
  }
  
  .mobile-nav-toggle {
    display: flex !important;
  }
  
  .mobile-menu {
    display: block;
  }
  
  /* Adjust header */
  #head_cen {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  
  #head_sup {
    width: 100%;
  }
  
  .head_height {
    height: auto;
    min-height: 300px;
  }
  
  h1.logo {
    width: 250px;
    background-size: contain;
    margin-top: 20px;
  }
  
  /* Adjust carousel */
  #simplegallery1 {
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
  }
  
  /* Content adjustments */
  #ct_pan {
    margin-top: 20px;
    padding: 15px;
    height: auto;
    text-align: center;
  }
  
  #ct_pan p {
    width: 100%;
    margin: 10px 0;
    text-align: center;
  }
  
  #ct_pan a {
    display: inline-block;
    margin: 10px 5px;
  }
  
  #welcom_pan p {
    margin: 15px 0;
    font-size: 18px;
    line-height: 24px;
    text-indent: 20px;
  }
  
  h2 {
    font-size: 22px;
  }
  
  ul#infoPan li {
    width: 100%;
    margin: 20px 0;
  }
  
  #latest {
    width: 100%;
    margin: 20px 0;
  }
  
  #blog {
    width: 100%;
  }
}

/* Mobile Phone View */
@media screen and (max-width: 480px) {
  h1.logo {
    width: 180px;
    height: 60px;
    background-size: contain;
    margin-top: 15px;
  }
  
  .mobile-nav-toggle {
    top: 15px;
  }
  
  .hamburger {
    width: 25px;
  }
  
  h2 {
    font-size: 18px;
  }
  
  #welcom_pan p {
    font-size: 14px;
    line-height: 22px;
    text-indent: 15px;
    margin-left: 10px;
  }
  
  #ct_pan {
    padding: 10px;
  }
  
  #ct_pan a img {
    width: 50px;
    height: 50px;
  }
}