/*
 * Posts Wrapper
 *
*/
.home-container{margin:0 auto;width:1284px}
/*
 * Posts Block
 *
*/
.home-body{display:inline-block;width:100%;margin:25px 0 0}
/*
 * Posts Content
 *
*/
.home-content{display:inline-block;vertical-align:top;width:100%;margin:0}
.home-content h1.title{display:inline-block;border-bottom:2px solid #eee;padding:0 0 10px;margin:0 0 10px;width:100%}
.dark .home-content h1.title{border-bottom:1px solid #363636;color:#fff}
/*
 * Tabs
 *
*/
.tabs{width:100%;display:inline-block;min-height:700px}
.tabs .tab_content{margin:0}
.tab_nav{display:inline-block;list-style:outside none none;margin:0 0 15px;position:relative;width:100%}
.tab_nav li{display:inline-block;margin:0 5px 0 0;padding:0}
.tab_nav li a{background-color:#fff;border:1px solid #ddd;border-radius:50px;color:#333;display:inline-block;padding:5px 10px}
.tab_nav li a.current_tab{background-color:#fff;margin:0}
.tabs-wrap {padding:0;display:inline-block;width:100%}
.tabs .txt{display:inline-block;vertical-align:middle;color:#9199a3}
.tabs .ico{display:inline-block;height:28px;margin:0;overflow:hidden;text-align:center;vertical-align:middle;width:20px}
.tabs .ico svg{bottom:-2px;display:inline-block;position:relative}

.dark .tab_nav li a{background-color:#282828;border:1px solid #363636;color:#aaa}
.dark .tabs .txt{color:#eee}
.dark .tab_nav li a.current_tab{border:2px solid #fff !important;color:#fff !important}
.dark .tab_nav li a.current_tab .txt{color:#fff}

.rtl .tab_nav li{margin:0 0 0 5px}
/*
 * Video List
 *
*/
.video-grid{overflow:hidden;border-radius:3px;box-shadow: 0 2px 5px -1px #ddd;background-color:#fff;margin:0 1% 15px 0;width:24.25%;vertical-align:top;display:inline-block;padding:0}
.dark .video-grid{box-shadow: 0 2px 5px -1px #191919;background-color:#282828}
.video-grid:nth-child(4n){margin:0 0 15px}
.video-grid .thumb{margin-bottom:10px}
.video-grid .thumb .cat{left:5px;position:absolute;bottom:5px;color:#fff;padding:5px 10px;border-radius:3px}
.video-grid .data{width:100%;padding:5px 10px 10px;display:inline-block}
.video-grid .data .col-1{float:left;vertical-align:top;width:50px}
.video-grid .data .col-1 img{border-radius:50%;width:85%}
.video-grid .data .col-2{float:left;vertical-align:top;width:75%}
.video-grid .data .col-2-a{width:100%}
.video-grid h2{display:inline-block;width:100%;margin:0;vertical-align:top}
.video-grid .metadata{display:block;width:100%;color:#6e6779;vertical-align:top}
.video-grid .metadata a{color:#6e6779;display:inline-block}
.video-grid .views{display:inline-block}
.video-grid .ago{display:inline-block}
.video-grid .channel{display:inline-block;color:#6e6779;text-transform:capitalize}
.video-grid .views:after,
.video-grid .channel:after{font-family:sans-serif;content:"\2022";vertical-align:middle;margin:0 2px}
.video-grid .channel a{color:#6e6779}
.dark .video-grid .metadata,
.dark .video-grid .metadata a,
.dark .video-grid .channel,
.dark .video-grid .channel a{color:#aaa}
.rtl .video-grid{margin:0 0 15px 1%}
.rtl .video-grid:nth-child(4n){margin:0 0 15px}
.rtl .video-grid .data .col-1,
.rtl .video-grid .data .col-2{float:right}
/*
 * Load More
 *
*/
.lm{display:inline-block;width:100%;margin:30px 0 0}
.llm{display:table;height:auto;max-width:100%;margin:auto}
.llm a{padding:8px 30px;border:2px solid #eee;border-radius:3px;color:#656c7a}
.llm a:hover{border:2px solid #ccc}
@media only screen and ( max-width: 1300px ){
	.home-container{width:96%;margin:2%}
	.home-content{margin:0;width:100%}
}
@media only screen and ( max-width: 1100px ){
	.home-container{width:80%;margin:2% auto}
	.home-content{margin:0 auto 15px;width:100%}
	.video-grid{width:32.666666666667%}
	.video-grid:nth-child(4n){margin:0 1% 15px 0}
	.video-grid:nth-child(3n){margin:0 0 15px}
	.rtl .video-grid:nth-child(4n){margin:0 0 15px 1%}
	.rtl .video-grid:nth-child(3n){margin:0 0 15px}
}
@media only screen and (max-width: 986px) and (min-width:768px){
	.home-container{width:96%;margin:2%}
	.home-content{margin:0 0 15px;width:100%}
	.tab_nav{margin:0 0 15px;width:100%;padding:0}
	.video-grid{width:32.666666666667%}
	.video-grid:nth-child(4n){margin:0 1% 15px 0}
	.video-grid:nth-child(3n){margin:0 0 15px}
	.rtl .video-grid:nth-child(4n){margin:0 0 15px 1%}
	.rtl .video-grid:nth-child(3n){margin:0 0 15px}
}
@media only screen and (max-width: 767px) and (min-width:560px){
	.home-container{width:96%;margin:2%}
	.home-content{margin:0 0 15px;width:100%}
	.tab_nav{margin:0 0 15px;width:100%;padding:0}
	.video-grid{width:49%;margin:0 2% 15px 0}
	.video-grid:nth-child(3n),
	.video-grid:nth-child(4n){margin:0 2% 15px 0}
	.video-grid:nth-child(2n){margin:0 0 15px}
	.rtl .video-grid{margin:0 0 15px 2%}
	.rtl .video-grid:nth-child(3n),
	.rtl .video-grid:nth-child(4n){margin:0 0 15px 2%}
	.rtl .video-grid:nth-child(2n){margin:0 0 15px}
}
@media only screen and (max-width: 559px){
	.home-container{width:100%;margin:0}
	.home-body{margin:0 0 15px}
	.home-content{margin:0 0 15px;width:100%}
	.home-content h1.title {margin:5px auto 0;display:block;width:94%;padding:10px 0}
	.tab_nav{margin:15px 0 0;width:100%;padding:0 10px}
	.video-grid{display:block;margin:15px auto 15px;width:94%}
	.video-grid:nth-child(2n),
	.video-grid:nth-child(3n),
	.video-grid:nth-child(4n){margin:0 auto 15px}
	.video-grid .thumb{margin:0 0 10px;width:100%;padding-bottom:58.25%}
	.rtl .video-grid{margin:15px auto 15px}
	.rtl .video-grid:nth-child(2n),
	.rtl .video-grid:nth-child(3n),
	.rtl .video-grid:nth-child(4n){margin:0 auto 15px}
	.rtl .video-grid .thumb{margin:0 0 10px}
}

/* Updated thumb style with rounded borders and red frame */

/* تحديث تصميم حواف مائلة مع إطار أحمر لقسم thumb */
.thumb {
  border-radius: 15px; /* حواف مائلة */
  border: 3px solid #ED1818; /* إطار أحمر */
  overflow: hidden; /* التأكد من أن الصور لا تخرج عن الحدود */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* تأثير ظل بسيط */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.thumb:hover {
  transform: scale(1.05); /* تكبير بسيط عند المرور */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* زيادة تأثير الظل عند المرور */
}
