@charset "UTF-8";
/* DevelopSoup CSS Document */
body,td,th {
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-style: normal;
    font-size: 16px;
	margin: 0px;
}
img {border: 0px;
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
#logo{float: left; display: inline; padding-right: 0px;}
navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,128,0,0.8)' stroke-width='2' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
#container{width: 100%; height: 100%; margin: 0px}
#header{
    border-top: solid 10px #CEDDED;
    width: 100%;
    height: auto;
    background: linear-gradient(top, #9BB4D3 50%, white 50%);
    background: linear-gradient(to bottom, #9BB4D3 25%, white 100%);
}
#header_top{height: 105px; padding-top: 10px; padding-left: 10px; padding-right: 10px;}
.bb1 {
  border-bottom: 10px solid rgba(0, 0, 0, 0.4);
}
#maincontent{height: 500px; overflow:hidden; padding-top:0px;}
#headerbanner{
    border-top: solid 5px #000;
    border-bottom: solid 5px #000; /* Replace with your image path */
    background-size: cover; /* Ensures the image scales to cover the entire div */
    background-position: center; /* Centers the image within the div */
    width: 100%; /* Make the div take up full width of its container */
    height: auto;
    position: relative;
    padding: 30px;
    color: #fff;
    background-color: #151414;
}
.developh {
    color: #FFFFFF;
    text-align: left;
    padding-left: 10px;
    padding-top: 10px;
    letter-spacing: 2px;
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 25;
}
.develop_description {
	color: #FFFFFF;
	padding-left: 50px;
	font-weight: lighter;
	line-height: 35px;
}
#mid-topper{height:auto; margin: 10px; overflow: hidden;}
/* Parallax Section */
.midbanner {
	background-color: #000;
	background-image: url("../images/IMG_jf328hv3hu_22223.jpeg");
	height: auto;;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
}
.parallax {
	color: #FFFFFF;
	text-align: left;
	padding-left: 100px;
	padding-top: 110px;
	letter-spacing: 2px;
	margin-top: 0px;
}
.parallax_description {
	color: #FFFFFF;
	text-align: left;
	padding-left: 100px;
	width: 30%;
	font-weight: lighter;
	line-height: 23px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#mid-footer{
    height: 378px;
/*    background-image: url(images/mid-footer.png);*/
	background-color: whitesmoke;
	background-size: cover; /* Ensures the image scales to cover the entire div */
	background-position: center; /* Centers the image within the div */
	padding: 10px;
}
.outer-box {

  border: 2px solid blue;

  border-radius: 20px; /* Larger radius for rounded outer border */

  padding: 10px;

}



.inner-box {

  border: 1px solid red;

  border-radius: 10px; /* Smaller radius for inner border */

  width: 100%;

  height: 100%;

}

.footer {
    background: linear-gradient(to bottom, #333, #555); /* Gradient from dark gray (#333) to a lighter gray (#555) */
	color: white;
    text-align: center;
    padding: 20px;
    width: 100%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    overflow: hidden;
}
.footer p {
    margin: 0;
}
#btn-back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: none;
  z-index: 9999;
}
.hero-video {
  position: relative;
  width: 100%;
  min-height: 750px;
  height: 80vh; /* prefers 80% of viewport height, but won't go below 750px */ 
  overflow: hidden;
  background-color: #000;
}

.hero-video video {
  position: absolute;
  inset: 0;          /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay content */
.hero-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.4); /* optional overlay */
  padding: 1rem;
}

.hero-overlay h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  margin-bottom: 1rem;
}

.hero-overlay p {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  margin-bottom: 1.5rem;
}

.hero-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #e63946;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}

/* Mobile viewport fix (iOS) */
@supports (-webkit-touch-callout: none) {
  .hero-video {
    height: 100svh;
  }
}
#footer-final {
    height: auto;
    background-color: #000000;
    padding: 5px;
    color: #FFF;
}
.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.search-wrapper input {
  padding-right: 70px; /* space for button */
}

.search-wrapper button {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  height: 90%;
}
/* scroll */

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
}
.marquee-content {
  display: inline-block;
  animation: scroll-left 10s linear infinite;
}
.marquee-content a img {
  width: 100px; /* Adjust size */
  margin: 0 10px;
}
.marquee-container:hover .marquee-content {
  animation-play-state: paused; /* Pause on hover */
}
@keyframes scroll-left {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}