/*
Theme Name: Smart-home
Theme URI: https://busswork.com
Author: Brahim Lachgar
Author URI: https://busswork.com

Description: Bloging - Built on a solid foundation and professional design using the Bootstrap 5th Edition style for content intended for affiliate marketing. Languages: html5 -php-javascript-jquery-csstheme- cssBootstrapThe home page is a landing page for the official product, then a page displaying the rest of the products with referral links and affiliate links for MLM company members, then a blog page in the hub that the company operates, then some additions attached to the theme. The design was based 98 percent on the Bootstrap library, and the rest are additions necessary for the styling - landing pages, portfolio, and articles..

Version: 20.07.2025.
License: GNU General Public License v2 or later
URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Smart-home
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, 
featured-images, full-site-editing, block-patterns, rtl-language-support, 
sticky-post, threaded-comments, style-variations, wide-blocks, block-styles, 
accessibility-ready, blog, portfolio, news

*/



/*@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Zain:wght@200&display=swap');
@import url('css/bootstrap.min.css');
@import url('css/bootstrap-icons.min.css');
@import url('css/aos.css');
@import url('css/swiper-bundle.min.css');
@import url('css/glightbox.min.css');
@import url('css/main.css');
@import url('css/home.css');





.zain-extralight {
  font-family: "zain", sans-serif;
  font-weight: 200;
  font-style: normal;
}


body, html{
margin-top: 0;
color: #555;
text-transform: capitalize;
}







.carousel-item {
  height: 600px; /* Set a fixed height for all carousel items */
  overflow: hidden; /* Hide any overflow content */
}

.carousel-item img {
  width: 100%; /* Make the image fill the entire width of the carousel item */
  height: 100%; /* Make the image fill the entire height of the carousel item */
  object-fit: cover; /* Maintain aspect ratio and cover the entire container */
}

a {
text-decoration: none;
transition: all .3s;
}

img{
  max-width: 100%;
	height: auto;
}

.iconsbi{
  font-size: 24px;
  font-weight: bold;
  text-transform: capitalize;
}


ul {
list-style-type: none; 
}

ul li {
margin-left: 20px; 
}

p{
margin-left: 10px;
margin-right: 10px;
}


.btn{margin:1px;}
.btn-round{border-radius:40px;}
.circular-image {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
border-radius: 50%;
}

.btn-nav-item{margin-left: 5px; margin-right: 5px; }

.box-shadow{
margin: 10px 0px 10px 0px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3), 
0 0 10px rgba(0, 0, 0, 0.2), 
0 0 20px rgba(0, 0, 0, 0.1);
}





  
.btn-instagram {
background: linear-gradient(135deg, #e84393, #4e54c8);
color:#f9f9f9;
}

.text-instagram {
color: #e84393;
}

.btn-linkedin{
  background: #2980b9;
  color:#f9f9f9;
}
  
.text-linkedin{
  color:#2980b9;
 
}

.btn-pinterest{
  background: #d63031;
  color:#f9f9f9;
}

.text-pinterest{
  color: #d63031;
}

.btn-tiktok,.btn-github ,.bg-black{
  background: #000;
  color:#f9f9f9;
}

.text-tiktok,.text-github{
  color: #000;
}

.btn-bluesky ,.bg-bluesky{
  background: #2980b9;
  color:#f9f9f9;
}

.text-bluesky{
  color: #2980b9;
}

.btn-gris,.bg-gris{
  background: #747d8c;
  color:antiquewhite;
}

.text-gris{
  color: #747d8c;
}



.icons{margin-left: 20px; margin-right: 20px;
font-weight: bold; font-size:30px ;}


img{
display: flex;
flex-wrap: wrap;
margin-top:5px;
margin-bottom:15px;  
border-radius: 8px;
}



.banner-blog-img {
width:100%; 
height:350px;
max-width: 1080px; 
max-height: 1920px; 
object-fit: cover;
object-position: center;
border:none;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
display: block;
transition: .5s ease;
backface-visibility: hidden;

}





.archives li a ,
.dropdown-menu li a,
.dropdown-menu li a span
{
color:#04063e;
}





.navbarall{margin-bottom:100px;}

.margin{margin-top: 10px; margin-bottom: 10px;}
.margin-icon {margin-right: 5px; margin-left: 5px;}

.wauto{width: 100%;}
.w1000{width: 1000px;}
.w950{width: 950px;}
.w900{width: 900px;}
.w850{width: 850px;}
.w800{width: 800px;}
.w750{width: 750px;}
.w700{width: 700px;}
.w650{width: 650px;}
.w600{width: 600px;}
.w550{width: 550px;}
.w500{width: 500px;}
.w450{width: 450px;}
.w400{width: 400px;}
.w350{width: 350px;}
.w300{width: 300px;}
.w250{width: 250px;}
.w200{width: 200px;}
.w190{width: 190px;}
.w180{width: 180px;}
.w170{width: 170px;}
.w160{width: 160px;}
.w150{width: 150px;}
.w144{width: 144px;}
.w140{width: 140px;}
.w130{width: 130px;}
.w120{width: 120px;}
.w110{width: 110px;}
.w100{width: 100px;}
.w92{width: 92px;}
.w90{width: 90px;}
.w80{width: 80px;}
.w70{width: 70px;}
.w60{width: 60px;}
.w50{width: 50px;}
.w40{width: 40px;}
.w32{width: 32px;}
.w30{width: 30px;}
.w20{width: 20px;}
.w16{width: 16px;}
.w10{width: 10px;}
.w9{width: 9px;}
.w8{width: 8px;}
.w7{width: 7px;}
.w6{width: 6px;}
.w5{width: 5px;}
.w4{width: 4px;}
.w3{width: 3px;}
.w2{width: 2px;}
.w1{width: 1px;}















/* video-container */



.video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* نسبة العرض إلى الارتفاع 16:9 */
  padding-bottom: 56.25%; /* 9/16 = 0.5625 */
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.video-container i {
  font-size: 3rem;
  color: #6c757d;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.video-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
      rgba(0,0,0,0.5) 0%,
      rgba(0,0,0,0.3) 50%,
      rgba(0,0,0,0.5) 100%
  );
  z-index: 1;
}





footer{
  position:relative;
  margin-bottom:0;
  margin-top:100%;
  width:100%;
  height:auto;
  line-height:auto;
}







/* Media Queries for responsiveness */
@media (max-width: 1600px) {
  .video-container {
      padding-bottom: 56.25%; 
  }
}

@media (max-width: 1200px) {
  .video-container i {
      font-size: 2.5rem;
  }
}

@media (max-width: 992px) {
  .video-container {
      padding-bottom: 62.5%; 
  }
  .video-container i {
      font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .video-container {
      padding-bottom: 75%; 
  }
  .video-container i {
      font-size: 1.5rem;
  }
}

@media (max-width: 576px) {
  .video-container {
      padding-bottom: 100%; 
  }
  .video-container iframe {
      object-position: center 25%;
  }
}