@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ms+Madi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Birthstone&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Giga:wght@100..900&display=swap');
:root{
--main:#1c93ca;
--main-dark:#126185;
--app-light:#e89b3c;
--app-light-accent:#4d361a;
--app-red:#e13a29;
}


.hero-section{
max-width: 1200px;
z-index: 0;
padding: 0 10px;
margin: 0 auto;
position: relative;
}

.slider-container {
position: relative;
margin: 40px auto;
border-radius: 12px;
width: 900px;
height: fit-content;
overflow: hidden;
/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
}

.swiper {
width: 900px;
height: 700px;
}

 .swiper-slide {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 12px;
overflow: hidden;
}

.slide-image {
width: 100%;
overflow: hidden;
}

.slide-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.swiper-slide:hover .slide-image img {
transform: scale(1.05);
}

.slide-content {
padding: 25px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #849ba5;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.slide-content h3 {
font-size: 1.8rem;
margin-bottom: 12px;
text-align: center;
color: #2c3e50;
line-height: 1.3;
}

.read-more{
width: 100%;
display: flex;
justify-content: center;
}

.read-more a{
text-align: center;
margin-bottom: 10px;
background-color: #1c93ca;
width: 100px;
padding: 2px 0;
border-radius: 5px;
color: #fff !important;

cursor: pointer;
margin-bottom: 30px;

}

.extra{
   
height: 40px;
background-color: var(--app-red);
}

.read-more a:hover{
background-color: #115c7e;
}

.slide-content p {
color: #000;
font-size: 1rem;
margin-bottom: 20px;
line-height: 1.5;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.swiper-pagination-bullet {
width: 12px;
height: 12px;
background: #bdc3c7;
opacity: 1;
}

.swiper-pagination-bullet-active {
background: var(--main);
}



@media only screen and (max-width: 600px) {
.slider-container{
    width: 100%;
}





.extra{
  position: absolute;
  height: 40px;
  width: 100%;
  top: 180px;  
}



.read-more a{
    margin-bottom: 15px;
}
.slide-content{
    width: 100%;
    height: 100%;
}

.slide-image{
    width: 100%;
    height: 300px;

}


.slide-image img{
   width: 100%;
   height: 100%;
    object-fit: contain;
}
}


.mLogo{
    width: 300px;
    height: 181px;

}

 .notfound {
background: url('https://images.unsplash.com/photo-1610337673044-720471f83677?q=80&w=772&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center fixed;
background-size: cover;
    }
.error-container {
    backdrop-filter: blur(10px) brightness(60%);
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 1rem;
    padding: 3rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.text-neon {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #007bff, 0 0 20px #007bff, 0 0 25px #007bff, 0 0 30px #007bff, 0 0 35px #007bff;
}

.last-update{
color: #000;
margin-bottom: 40px;
font-family: "Lexend Giga", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
.last-update div{
font-style: italic;
font-weight: 500;
color: #899499;
}
.policy-nav a{
font-weight: 900;
}
.ad-gradient{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 80%;
    background-color: #e89b3cb5;
    z-index: 1;
}
.blog-summary{
padding-left: 10px;

}

.email-link{
color: var(--app-light);
font-weight: 800;
}
.sliderLink{
color: #000;
margin-bottom: 30px;
}
.email-link:hover{
color: var(--app-light);
}

.blog-summary span{
font-weight: 800;
font-style: italic;
}

.blog-summary h4{
    margin-bottom: 30px;
}
.ad-desc{
color: #000;
text-align: center;
margin-top: 10px;
}

.ad-desc span{
font-family: "Handlee", cursive;
  font-weight: 400;
  font-style: normal;
}

.article-ad{
    border: 1px solid greenyellow;
}

.bLogo{
width: 200px;
height: 121px;
}

.fLogo{
    width: 135px;
    height: 135px;

}

.mLink{
    color: #f8d9a7;
   font-weight: bold;
}

.advert img{
    margin-left: auto;
    margin-right: auto;
}

.fImg{
    width: 263px;
    height: 306px;
    object-fit: cover;
}

.social-btn i{
    color: #343434;
    margin-right: 12px;
    
    
}

.social-btn:hover i{
    color: var(--app-main);
}


@media only screen and (min-width: 992px) {
.adLay{
    display: flex;
    width: 100%;
    height: 1200px;
    align-items: center;
    justify-content: center;
}
}

.AImages{
    width: 100%;
    height: 300px;
    object-fit: cover;
   
}

.contact-us{
  background: url(../images/banner/call.jpg)
}
.dropdown-container {
position: relative;
}

.hover-bg:hover {
background-color: #f8f9fa;
cursor: pointer;
}

.contactBtn{
width: 200px;
border: none;
height: 50px;
background-color: var(--main);
color: #fff;
}

.contactBtn:hover{
background-color: var(--app-light);
}
    
.cursor-pointer {
cursor: pointer;
}
    
.z-3 {
z-index: 1030;
}
        

.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 200px;
overflow-y: auto;
background: white;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow);
z-index: 1000;
display: none;
}
.dropdown-menu.show {
display: block;
}
        
.dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.magazine-container {
max-width: 1200px;
margin: 0 auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
overflow: hidden;
}

.magazine-header {
background: linear-gradient(135deg, #e13a29, #1b91c8);
color: white;
padding: 2rem;
text-align: center;
}

.magazine-header h1 {
margin: 0;
font-size: 2.5rem;
font-weight: 700;
color: #fff;
}

.magazine-header p{
    color: #fff;
}

 .btn-variant {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 25px;
background: #f8f9fa;
color: #2c3e50;
border: 2px solid #eaeaea;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}

.btn-variant i {
margin-left: 8px;
}
        
.btn-variant:hover {
    background: #2c3e50;
    color: white;
    border-color: #2c3e50;
}

.magazine-header p {
margin: 0.5rem 0 0;
font-size: 1.1rem;
opacity: 0.9;
}

.topics-nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 1rem;
background-color: #fff;
border-bottom: 1px solid #eee;
}

.topic-btn {
padding: 0.8rem 1.5rem;
margin: 0.5rem;
border: none;
border-radius: 25px;
background-color: #f1f2f6;
color: #2f3542;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}

 .topic-btn:hover {
background-color: #dfe4ea;
transform: translateY(-2px);
}

.mgCtegory{
color: #e13a29;
}

.blog-suggestion{
    margin-top: 15px;

}
.blog-suggestion p{
    cursor: pointer;
    font-size: 18px;

}

.blog-suggestion a{
    color: #000;
}

.blog-suggestion a:hover {
    color: var(--app-red);
}

.topic-btn.active {
background-color: #3742fa;
border: none;
color: white;
box-shadow: 0 4px 8px rgba(55, 66, 250, 0.3);
}

.magazine-content {
padding: 2rem;
}

.navigation-controls {
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
}

.nav-arrow {
padding: 0.8rem 1.5rem;
background-color: #3742fa;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

.nav-arrow:hover {
background-color: #2a34d8;
}

.featured-article {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
background-color: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.article-image img {
width: 600px;
height: 400px;
object-fit: cover;
display: block;
}

.article-content {
padding: 2rem;

}

.mg-img{
    width: 350px;
    height: 250px;
    object-fit: cover;
    margin-right: 25px;
}

.magazine-download{
    padding-left: 15px;
    margin-top: 10px;
}
.magazine-download h5{
    color: #000;
    font-family: "Futura PT";
    font-size: 19px;
}

.list-group-item-action.active{
    background-color: var(--main);
}

.magazine-download a{
    width: 200px;
    background-color: var(--main);
    border: none;
    color: #fff;
}

.magazine-download a:hover{
    background-color: var(--app-light);
    color: #fff;
}
.article-img{
    display: flex;
    justify-content: center;
    align-items: center;
}

.article-content p{
color: #000;
}

.article-title {
font-size: 2rem;
margin-top: 0;
color: #2c3e50;
}

.magheader-ad{
width: 100%;
height: fit-content;
}
@media only screen and (max-width: 600px) {
    .article-title,.article-text{
        width: 300px;
    }
}

.article-meta {
display: flex;
gap: 1rem;
margin: 1rem 0;
font-size: 0.9rem;
color: #7f8c8d;
}

.article-text {
line-height: 1.6;
font-size: 1.1rem;
color: #2d3436;
}

 .current-topic-indicator {
text-align: center;
padding: 1rem;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.current-topic-indicator h3 {
margin: 0;
color: #2c3e50;
}

@media (max-width: 768px) {
    .featured-article {
        grid-template-columns: 1fr;
    }
    
    .topics-nav {
        flex-direction: column;
        align-items: center;
    }
    
    .topic-btn {
        width: 80%;
        text-align: center;
    }
}

.current-topic-indicator span {
color: #3742fa;
font-weight: 600;
}

.pagination {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}

 .page-btn {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: #f8f9fa;
color: var(--main);
font-size: 1.1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.article-title a{
    color: #2d3436;
}

.article-title:hover a{
    color: var(--main);
}
.page-btn:hover {
background: var(--main);
color: white;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(52, 152, 219, 0.3);
}
        
.page-btn.active {
background: var(--main);
color: white;
transform: scale(1.1);
box-shadow: 0 6px 15px rgba(44, 62, 80, 0.3);
}

.page-btn i{
    color: var(--main);
}

.page-btn:hover i{
    color: #fff;
}










.empty-magazine{
position: relative;
height: 500px;
background-image: url(../images/page/empty-mg.jpg);
background-size: cover;
}

.no-article{
width: fit-content;
height: fit-content;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

}

.mg-header{
font-family: "Poppins", sans-serif;
font-weight: 800;
font-style: normal;
color: #fff;
font-size: 50px;
}

.mg-title{
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
color: var(--app-light);
font-style: italic;
}

.mg-desc{
  font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
color: #fff;  
}

@media only screen and (max-width: 600px) {
   

    .sm-dropdown{
        background-color: #5fccfe;
        
    }

   
}

.article-video{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}


.article-video .video-btn{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 73px;
    height: 73px;
    line-height: 70px;
    background: var(--main);
    border-radius: 50%;
    z-index: 1;
    text-align: center;
    color: #fff;
}
#privacy-header{
display: flex;
justify-content: center;
align-items: center;
position: relative;
text-align: center;

}
.policy-items{
position: absolute;
width: 100%;
height: 100%;

}

.policy-items span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 50px;
}

.policy-items::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); 
}

.consent-link{
color: var(--main-dark);
font-weight: bold;
}

@media only screen and (max-width: 600px) {
    .policy-items span{
        font-size: 25px;
    }
}
.article-video .video-btn::before{
    position: absolute;
    left: -12px;
    top: -12px;
    width: 140%;
    height: 140%;
    background: #437afb66;
    content: "";
    animation: save-the-date-pulse 1s infinite;
    border-radius: 50%;
    z-index: -1;
}

@-webkit-keyframes save-the-date-pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(0.95, 0.95, 0.95);
    transform: scale3d(0.95, 0.95, 0.95);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes save-the-date-pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(0.95, 0.95, 0.95);
    transform: scale3d(0.95, 0.95, 0.95);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.cookie-consent {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: block;
z-index: 9999;
border-radius: 0;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
background: var(--app-red);
backdrop-filter: blur(10px);
animation: slideInUp 0.5s ease-out;
}
#rejectBtn{
border: 1px solid #fff;
color: #fff;
}
#acceptBtn{
background-color: var(--main);
}

#rejectBtn:hover{
background-color: #000;
color: #fff;
border: 1px solid #000;
}

#acceptBtn:hover{
background-color: var(--main-dark);
}
.cookie-icon {
font-size: 1.5rem;
margin-right: 10px;
color: #6c757d;
}

 @keyframes slideInUp {
from {
    transform: translateY(100%);
    opacity: 0;
}
to {
    transform: translateY(0);
    opacity: 1;
}
}


.s-links li{
display: flex;
justify-content: center;
align-items: center;
}
.s-links i{
    font-size: 25px;
}

.s-links a:hover i{
    color: var(--main);
}

.policy-section {
background: white;
border-radius: 10px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.policy-section:hover {
    transform: translateY(-5px);
}
.section-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #6c5ce7;
}
.last-updated {
    font-style: italic;
    color: #6c757d;
}

.policy-nav {
    position: sticky;
    top: 20px;
}
.nav-link {
    color: #495057;
    padding: 0.5rem 1rem;
    border-left: 3px solid transparent;
    transition: all 0.3s;
}
.nav-link:hover, .nav-link.active {
    color: var(--main);
    border-left: 3px solid var(--main);
    background-color: #f8f9fa;
}

.article-info{
display: flex;
margin: 14px 0;
color: var(--main-dark);
}



.article-author{
margin-right: 15px;
}

.article-quote{
text-decoration: none;
}

.img-caption p{
margin-top: 10px;
margin-left: 20px;
font-style: italic;
}






 .magazineInfo{
        background-color: #e6f4fb;
		
    }
    #magazine{
	width:1100px;
	height:1260px;
	margin: 40px 0
}
#magazine .turn-page{
	background-color:#e6f4fb;
	background-size:100% 100%;
}
@media only screen and (max-width: 600px) {
#magazine{
	width: 100%;
	height: 504px;
}	
}

.navbar-brand {
font-weight: bold;
font-size: 1.5rem;
}

.search-container {
position: relative;
}

.search-container .input-group:focus{
   box-shadow: none;
}

#navbarContent .nav-link{
color: #000;
font-family: "Lexend Deca", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
text-transform: uppercase;
}

.search-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--main-dark);
border-top: none;
border-radius: 0 0 0.375rem 0.375rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
z-index: 1000;
}

.search-suggestions.active {
display: block;
}

.suggestion-item {
padding: 0.5rem 1rem;
cursor: pointer;
color: #fff;
list-style: none;
}

.suggestion-item:hover {
background-color: #f8f9fa;

}

.suggestion-item:hover  a{
    color: var(--main-dark);
}

.sidebar {
height: 100%;
width: 0;
position: fixed;
top: 0;
right: 0;
background-color: var(--main);
overflow-x: hidden;
transition: 0.3s;
padding-top: 60px;
z-index: 1050;
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}



.sidebar.active {
width: 280px;
}

.sidebar .close-btn {
position: absolute;
top: 15px;
right: 25px;
font-size: 1.5rem;
background: none;
border: none;
color: #6c757d;
}

.sidebar-categories {
list-style: none;
padding-left: 0;
}

#sidebarClose{
    color: #fff;
}

.sidebar-categories li {
padding: 10px 20px;

}

.sidebar-categories li a {
text-decoration: none;
color: #fff;
display: block;
}

.sidebar-categories li:hover {
background-color: #e9ecef;
}

.sidebar-categories li:hover a{
    color: var(--main-dark);
}

.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1040;
}

.overlay.active {
display: block;
}

.nav-link {
position: relative;
}

.nav-link:hover::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #0d6efd;
}

@media only screen and (max-width: 600px) {
  .tgl{
    width: 100%;
    display: flex;
    justify-content: space-between;
   
  }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .slider-container{
    width: 100%;
}
    .tgl{
    width: 100%;
    display: flex;
    justify-content: space-between;
   
  }



.slide-image img{
    width: 676px;
    object-fit: contain;
   

}

.adImg{
    height: 270px;
}


}

.lead-story .card{
    border: none;
}

.lead-story .card img{
    height: 300px;
    object-fit: cover;
    border-radius: 5px;
}

.mag-info h5{
font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
}

.lead-story .card-title{
font-family: "Poppins", sans-serif;
font-weight: 600;
font-style: normal;
font-size: 25px;
}

.cover-section {
height: 100vh;
background-size: cover;
background-position: top;
background-attachment: fixed;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.mSearch{
    background-color: var(--main);
    color: #fff;
    border: none;
}

.mSearch:hover{
    background-color: var(--app-light);
}
.mSearch:focus{
    box-shadow: none;
}
 .quote {
font-size: 1.3rem;
font-style: italic;
padding-left: 20px;
margin: 30px 0;
color: #fff
}

.story-img{
width: 100%;
height: 200px;
margin-bottom: 30px;
background-size: cover;
background-position: top;
background-attachment: fixed;
}

.cover-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}

.cover-content {
position: relative;
z-index: 1;
color: white;
text-align: center;
max-width: 800px;
padding: 20px;
}

 .story-title {
font-size: 3rem;
font-weight: bold;
margin-bottom: 1.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
color: #fff;
}

.story-subtitle {
font-size: 1.5rem;
font-style: italic;
margin-bottom: 2rem;
color: #d3d1d1;
}

@media (max-width: 768px) {
.story-title {
    font-size: 2.5rem;
}

.gallery-title{
    margin-bottom: 15px;
    text-align: center;
}

.story-image{
    margin-bottom: 30px;
}

.swiper {
height: 350px;
}

.story-subtitle {
    font-size: 1.2rem;
}

.content-section {
    padding: 40px 0;
}
}

.lead{
    color: #fff;
}

.gallery-section {
padding: 60px 0;
background-color: #f8f9fa;
}

 /* Swiper Styles */
.swiper {
width: 100%;
height: 500px;
border-radius: 10px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

.swiper-slide {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.slide-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 15px;
text-align: center;
font-size: 1.1rem;
}

.swiper-pagination-bullet {
width: 15px;
height: 15px;
background: #D3D3D3;
opacity: 0.5;
}

.swiper-pagination-bullet-active {
opacity: 1;
background: var(--main-dark);
}
.fixed-image-section {
height: 630px;
background-size: cover;
background-position: top;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 40px;

}

.fixed-image-section h2{
    color: #fff;
}

.fixed-image-section p{
color: #f8f9fa;
}
        
.fixed-image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
        
.fixed-image-content {
position: relative;
z-index: 1;
color: white;
text-align: center;
max-width: 600px;
padding: 20px;
}

 .mgCover{
width: 405px;
height: 510px;
}

.filter-section {
margin-bottom: 25px;
}

.filter-section h5 {
color: var(--primary-color);
margin-bottom: 15px;
font-weight: 600;
}

.mg.sidebar{
    width: 100%;
    height: 100%;
}

.mg .filter-btn {
width: 100%;
text-align: left;
padding: 10px 15px;
margin-bottom: 8px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background-color: white;
transition: all 0.3s ease;
color: #555;
}

.mg .filter-btn:hover, .filter-btn.active {
background-color: var(--main-dark);
color: white;

}

.story-ad{
    display: flex;
    justify-content: center;
    
}

.ad-text{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
}
        
/* @media only screen and (min-width: 992px) {
    

.slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
} */

.up-search{
    outline: none;
    border: 1px solid var(--main-dark);
    padding: 5px;
}

.up-search:focus{
    box-shadow: none;
}

.mSearch-icon{
    color: var(--main-dark);
    border: 1px solid var(--main-dark);
}

.mSearch-icon:hover{
    background-color: var(--main-dark);
    color: #fff;
    outline: none;
}

.upSearchBtn{
color: #fff;
border: none;
background: var(--main-dark);
width: 30px;
}

@media only screen and (max-width: 600px) {
  .swiper-slide .leadImg{
    width: 400px;
    height: 522px;
    
  }

  
.story-btn a{
    width: 100px;
}
}

.story-btn{
   
display: flex;
justify-content: center;
}

.story-btn a{
    width: 400px;
    background-color: var(--main);
   border: none;
   border: 10px;
}

.story-btn a:hover{
    background-color: var(--main-dark);
}


@media (max-width: 768px) {

    
  .swiper {
   width: 280px; 
   height: 260px;
  
  
  }
}

.sml-device{
    display: none;
  }

.modal-title{
    text-align: center;
}

.benefits-list li{
    list-style: none;
}



.join-content{
    display: flex;
}

.upInfo{
    
    color: #000;
}

.upInfo h5{
    text-align: center;
}

.join-content img{
    width: 150px;
    height: 300px;
    object-fit: cover;
    border-radius: 5px;
}

.info-list li{
list-style: none;
}

.info-list i{
color: var(--app-light);
margin-right: 5px;
}
.info-p{
    color: #000;
}

.join-btn{
    background-color: var(--main);
    color: #fff;
    
}

.join-btn:hover{
    background-color: var(--main-dark);
color: #fff;
    
}

.modal-dialog{
    opacity: .9;
   
    
}

.modal-content{
border-radius: 40px;
 border: 20px solid var(--main-dark);

}



.magazine-images{
    width: 100%;
}

 .smlDevice{
    display: none;
  }


@media only screen and (max-width: 600px){
  .flying{
    display: none;
  }

  .swiper{
    display: block;
    width: 100%;
  }

  .slide-content h3{
    font-size: 15px;
  }

  .sml-device{
    display: block;
  }

   
}

.header-bottom{
width: 100%;
height: 50px;
background-color: var(--main-dark);
display: flex;
align-items: center;
padding-left: 50px;
}

.header-bottom a{
    color: #fff;
    font-weight: bold;
}
.header-bottom a:hover{
    color: var(--app-light);
}

.video-card {
position: relative;
overflow: hidden;
border-radius: 10px;
}

.video-card img {
width: 100%;
height: auto;
border-radius: 10px;
}

.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

.play-btn:hover {
background-color: rgba(255, 255, 255, 1);
transform: translate(-50%, -50%) scale(1.1);
}

.play-btn i {
font-size: 24px;
color: #dc3545;
}

.video-info {
text-align: center;
margin-top: 10px;
}

.video-info h5 {
margin-bottom: 5px;
font-size: 1.1rem;
}

.video-info small {
color: #6c757d;
}

.video-page{
    margin-top: 50px;
    margin-bottom: 80px;
}

.v-bar{
    width: 100%;
    height: 100%;
    padding: 15px;
    background-color: #E5E4E2;
}

.v-bar .input-group{
    margin-top: 30px;
}
.v-bar select{
    margin: 30px 0;
}

@media only screen and (min-width: 600px) {
    .slider-container, .swiper{
        width: 100%;
        height: 100%;
    }

    .adImg{
      width: 100%;
      height: 100%;
    }

    .adImg img{
        height: 100%;
    }
}

@media only screen and (min-width: 992px) {
.slide-content h3{
    font-size: 40px;
}
}