/*
Theme Name: NSmart-Healty
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: 04.06.2024.
Update : 13.06.2025.
License: GNU General Public License v2 or later
URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: NSmart
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('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');





body , body p, body a , body div , body h1 ,
body h2 , body h3 ,body h4 ,body h5 ,body h6,
body ul,  body li,  body ul li, body span 
{
font-family: "Abel", sans-serif;
font-weight: 400;
font-style: normal;
font-optical-sizing: auto;
} 


body{
margin-top: 0;
color: #555;
background: #eaedf0;
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;}
  
.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;}











.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 20px rgba(0, 0, 0, 0.3), 
0 0 40px rgba(0, 0, 0, 0.2), 
0 0 60px rgba(0, 0, 0, 0.1);
}




/* 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;
}







/* Media Queries for responsiveness */
@media (max-width: 1600px) {
  .video-container {
      padding-bottom: 56.25%; /* الحفاظ على 16:9 */
  }
}

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

@media (max-width: 992px) {
  .video-container {
      padding-bottom: 62.5%; /* تغيير النسبة إلى 16:10 (10/16 = 0.625) */
  }
  .video-container i {
      font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .video-container {
      padding-bottom: 75%; /* تغيير النسبة إلى 4:3 (3/4 = 0.75) */
  }
  .video-container i {
      font-size: 1.5rem;
  }
}

@media (max-width: 576px) {
  .video-container {
      padding-bottom: 100%; /* نسبة مربعة 1:1 */
  }
  .video-container iframe {
      object-position: center 25%;
  }
}