﻿
/*=============================================================
    Authour URI: www.binarytheme.com
    License: Commons Attribution 3.0

    http://creativecommons.org/licenses/by/3.0/

    100% Free To use For Personal And Commercial Use.
    IN EXCHANGE JUST GIVE US CREDITS AND TELL YOUR FRIENDS ABOUT US
   
    ========================================================  */
/* =============================================================
   GENERAL STYLES
 ============================================================ */
body {
    font-family: 'Open Sans', sans-serif;
    padding-bottom:72px;
   
}
.basic-set {
    padding-top:50px;
    padding-bottom:80px;
    font-size:18px;
}
.head-line {
    font-size:30px;
    color:rgb(0, 208, 255);
    padding-bottom:60px;
    text-transform:uppercase;
    font-weight:800;
}
    .head-line span {
        color:#000;
    }
.black-btn {
    background-color: #000000;
    border-color: #000000;
}
    .black-btn:hover {
        background-color: #000000;
        border-color: #000000;
    }
/* =============================================================
   NAVBAR STYLES
 =========================================================== */

.navbar {
border-radius: 0px;
margin-bottom: 0px;
border: 0px solid transparent;
}

.navbar-inverse {
    background-color: #0E0E0E;
border-top: 1px solid #000;
}

    .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
        color:rgb(77, 160, 227);
    }
    .navbar-inverse .navbar-nav > li > a {
        color:#fff;
        font-size:16px;
        padding:30px 20px;
    }
.navbar-toggle {
    margin-bottom: 30px;
}
#nav-wrapper {
left: 0;
width: 100%;
z-index: 999;
bottom:0px;
position: fixed;
background-color: #ffffff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/* =============================================================
   HOME/VEDIO SECTION STYLES
 ============================================================ */
#home-sec {
    height:400px;
    color:#fff;
    text-align:center;
    border-bottom:4px solid #000;
}
    #home-sec .overlay {
        background-color:rgba(0, 0, 0, 0.8);
        min-height:400px;
    }
    #home-sec h1 {
        padding-top:80px;
        font-size:50px;
        font-weight:900;
        padding-bottom:30px;
    }
        #home-sec h1 i {
            color:#f00;
        }
/* =============================================================
   SERVICES SECTION STYLES
 ============================================================ */
.txt-block {
    padding-bottom:30px;
}


/* =============================================================
   JUST TEXT SECTION STYLES
 ============================================================ */
#Just-text {
      background-color:#000;
}
.mid-txt {
    padding-top:40px;
    padding-bottom:40px;
    font-size:30px;
    font-weight:900;
    color:#fff;
}

/*==========================================
   GALLERY/ PORTFOLIO STYLES
    =====================================================*/

#port-folio {
    padding-top: 10px; 
    min-height:550px;
}
.portfolio-item {
    border:2px solid #f00;
    margin:3px;
}
    .portfolio-item p {
        padding:12px;
        color:#fff;
        line-height:25px;
    }

.portfolio-item .overlay {
   
  background-color: #000;
  text-align: center;
  padding-bottom:30px;
  
}

/*==========================================
   GALLERY/ PORTFOLIO FILTER STYLES
    =====================================================*/
ul#filters {
	padding: 0px;
}
#filters {
	margin: 3% 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
	#filters li {
		display: -webkit-inline-box;
	}
	#filters li span {
		display: block;
		padding: 5px 4px;
		text-decoration: none;
		color: #d52b11;
		cursor: pointer;
		font-size: 18px;
	}
 	#port-folio .portfolio-item {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		width: 100%;		
		float:left;
		overflow:hidden;
        display:none;
	}
/* =============================================================
   PRICE SECTION STYLES
 ============================================================ */

#price-sec {
    background-color:#e1e1e1;
}

.price-div {
    background-color:#fff;
    padding:20px;
    margin:5px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.price-cls {
    font-size:60px;
    font-weight:900;
    color:rgb(255, 38, 0);
    padding-right:20px;
}

#price-sec .media-heading {
    padding-top:20px;
}
/* =============================================================
   CONTACT SECTION STYLES
 ============================================================ */
#contact-sec {
    background-image: url("../img/contact.jpg");
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: cover;
    -webkit-background-size: cover;
    color:#fff;
}
    #contact-sec .overlay {
        background-color:rgba(0, 0, 0, 0.5);
        min-height: 500px;

    }
    #contact-sec .social {
        padding-top:30px;
    }
#contact-sec .social a {
    font-size:25px; 
    padding:10px 30px;
    text-decoration:none;
    color:#fff;
    display:block;
    max-width:200px;
    margin-bottom:20px;
}
#contact-sec .subscribe {
    padding-top:30px;
    background-color:#000;
    color:#fff;
    height:100%;
}
<!-------------------------------------------------------------------------------->
#home-sec {
    position: relative;
    width: 100%;
    height: 100vh; /* Ensure the section takes up the entire viewport height */
    overflow: hidden; /* Hide anything outside the section */
}

#bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video fills the section without distortion */
    transform: translate(-50%, -50%); /* Centers the video */
}

.overlay {
    position: relative;
    z-index: 2; /* Ensures content overlays on top of the video */
}

.container {
    z-index: 3; /* Keeps the content above the video */
}

/* Ensure video background works responsively */
.video-background {
    position: relative;
    height: 100vh;  /* Full viewport height */
    overflow: hidden;
}

.video-background video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Make the video cover the entire container */
    z-index: -1;  /* Keep video behind text/content */
}

.services-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.each-service {
    background: #ffffff;
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.each-service:hover {
    transform: translateY(-5px);
}

.service-icon {
    font-size: 40px;
    color: #007bff;
    margin-bottom: 10px;
}

.service-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.service-description {
    font-size: 14px;
    color: #555;
}

.block-heading {
    text-align: center;
    margin-bottom: 20px;
}


/* Testimonial section style goes here */


/* Testimonial section style goes here */


/* Testimonial section style */


#Just-text .container {
    text-align: left; /* Ensure the content is left-aligned by default */
}

#Just-text .row {
    text-align: left; /* Ensure the row content is left-aligned */
}

#Just-text p {
    text-align: left; /* Left-align the paragraphs */
}

#Just-text .about-us-heading {
    text-align: center; /* Center the "About Us" heading */
    font-family: 'Roboto', sans-serif; /* Apply the custom font */
    font-size: 3rem; /* Optional: Change the font size if needed */
    font-weight: 700; /* Make the "About Us" text thicker (bold) */
}





<!--------------------------------------------------------------->

    #contact-sec h2 {
        font-weight:900;
        color:rgb(255, 81, 0);
    }