/*
Theme Name: Wightman Theme
Author: Web Dev
Version: 1.0
*/



html {
    scroll-behavior: smooth;
	scroll-padding-top: 200px;
}

/* General Styles */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
	background: #fff;
}

#blog-content h1,
#blog-content h2,
#blog-content h3,
#blog-content h4,
#blog-content h5,
#blog-content h6,
#blog-content p {
	color:#000;
}

.border-channel-logo {
	border:1px solid #9e9e9e !important;
	border-radius: 20px !important;
}

.grid-gap-30 {
	grid-gap:30px;
}

/* Header Styles */
.tob-bar {
	display:block;
	background:#fff;
	padding:20px 0!important;
}

.site-header {
    background-color: #000;
    padding: 10px 0;
    color: #fff;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo img {
    height: 40px;
}

.single .topbar-leftmenu li:first-child a {
	background:#D02727;
	color:#fff;
}
/* #mediaSearchForm input {
	color:#000;
	font-size:20px;
}

#mediaSearchForm button {
	font-size:18px;
} */

.equal-con-height {
	display: flex;
  	justify-content: space-between;
}

.trending-col {
	overflow: visible !important;
}

.trending-col,
.trending-col .gb-container-inside {
	height:100%;
}

.trending-col .gb-container-content {
	display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.trending-col .user-guide-title,
.trending-col .nopromo-user-guide-title,
.trending-col .trending-topics-title {
	border-radius: 20px 20px 0 0;
}


.trending-col .gb-container-content .trending-links {
	flex:1;
}

.trending-col .gb-container-content .trending-links .gb-container-content {
	justify-content: flex-start;
}
.mobile-package-col,
.mobile-package-col .gb-block-layout-column-inner {
	height:100%;
}

.mobile-package-col .mobile-package-inner-col .gb-block-layout-column-inner {
	display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.red-block {
	position: absolute;
	left:0;
	left:0;
	margin-left: auto;
	margin-right: auto;
	background: #FFE1E3;
    border: 2px solid #D02727;
    border-radius: 15px;
	top:-10px;
}

#searchResults {
	margin-top:40px;
}

.contact-form label {
	color:#fff;
	font-weight:700;
	font-size:18px;
	margin: 0 0 15px;
}

.contact-form select,
.contact-form  input,
.contact-form textarea {
	width:100%;
	background:#fff;
	border-radius:5px;
	padding: 10px 14px;
	font-size: 16px;
	margin-top:15px;
	margin-bottom:30px;
	color:#333;
}

.required-red {
	color:#d63637;
}

.contact-form .wpcf7-submit {
	background: #d02727;
	color:#fff;
	padding:10px 20px;
	font-size:20px;
	transition: all 0.2s ease-out;
}

.contact-form .wpcf7-submit:hover {
	background:#992e27;
}

/* .topbar-rightmenu {
	justify-content: flex-end;
} */

@media (max-width: 768px) {

}

.main-navigation .nav-menu {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.main-navigation .nav-menu li {
    position: relative;
}

.topbar-leftmenu, .topbar-rightmenu {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
}

.topbar-leftmenu a, .topbar-rightmenu a {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 999px;
    overflow: clip;
}

.topbar-leftmenu a:hover, .topbar-rightmenu a:hover {
	background-color: #F0F0F0;
}

.topbar-leftmenu .current-menu-item a {
    color: #FFF;
    font-weight: 600;
    background-color: #D02727;
}

.topbar-leftmenu .current-menu-parent a {
    color: #FFF;
    background-color: #D02727;
}

.topbar-customer-service {
    display: none;
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    color: #000;
    background-color: #FFE1E3;
    border: 1px solid #D02727;
    border-radius: 20px;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .topbar-customer-service {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .topbar-rightmenu {
        display: none;
    }

    .topbar-leftmenu li:nth-child(3) {
        display: none;
        background-color: #D02727;
    }

    .topbar-leftmenu, .topbar-rightmenu {
        font-size: 14px;
		gap: 0px;
    }

    .topbar-leftmenu a, .topbar-rightmenu a {
        padding: 5.5px 12px;
    }
}

.main-navigation .nav-menu li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    transition: background 0.3s;
}

.main-navigation .nav-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

/* Hide submenu by default */
.main-navigation .nav-menu ul {
    display: none; /* Hide submenus */
    position: absolute; /* Ensure submenu is positioned correctly */
    background-color: white; /* Background color for submenu */
    z-index: 1000; /* Ensure it appears above other content */
}

/* Show submenu on hover */
.main-navigation .nav-menu li:hover > ul {
    display: block; /* Show submenu when parent is hovered */
}

/* Additional styles for the submenu */
.main-navigation .nav-menu ul li {
    padding: 10px; /* Add padding for submenu items */
}

.main-navigation .nav-menu ul li a {
    color: #333; /* Text color for submenu links */
    text-decoration: none; /* Remove underline */
}

/* Optional: Change background color on hover */
.main-navigation .nav-menu ul li:hover {
    background-color: #f0f0f0; /* Background color on hover */
}

/* ENTRANCE ANIMATION */
@keyframes fadeUp {
  0% {
    opacity: 0 !important;
    transform: translateY(20px) !important;
  }
  100% {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

.fade-up {
  animation: fadeUp 0.8s ease-in-out forwards !important;
}

/* SINGLE ALERT */
.alert-body {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 24px;
    font-family: 'Open Sans', sans-serif;
}

.alert-content {
	margin: revert;
    padding: revert;
    list-style-type: revert;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alert-content a {
    color: #D02727;
    text-decoration: underline;
}

.alert-title,
.alert-content,
.alert-meta {
	color: #000;
}

.alert-title {
    font-size: 57px !important;
    font-weight: 700;
}

@media screen and (max-width: 768px) {
	.alert-body {
        padding: 40px 24px;
    }
	
    .alert-title {
        font-size: 40px !important;
    }
}
/* END OF SINGLE ALERT */

/* SINGLE CAREER */
.career-content {
    display: flex;
    flex-direction: column;
    color: #000;
    font-family: 'Open Sans', sans-serif;
}

.career-content * {
    margin: revert;
    padding: revert;
    list-style-type: revert;
}

.career-content a {
    color: #D02727;
    text-decoration: underline;
}
/* END OF SINGLE CAREER */

/* 404 Page */
#error-page h1 {
	color: #000;
	font-weight: 700;
	margin-bottom:20px;
}

#error-page p {
	font-size: 18px;
	color:#000;
}
/* end of 404 */

/* Style for the dropdown icon */
.main-navigation .nav-menu li a .dropdown-icon {
    margin-left: 5px; /* Space between link text and icon */
    display: inline-block; /* Ensures proper alignment */
}

/* Adjust the size of the SVG icon */
.main-navigation .nav-menu li a .dropdown-icon img {
    width: 12px; /* Set the width of the SVG icon */
    height: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Center it vertically */
}

/* Optional: Change color on hover */
.main-navigation .nav-menu li:hover .dropdown-icon img {
    opacity: 0.7; /* Change opacity on hover */
}

/* Style for the dropdown icon */
.main-navigation .nav-menu li {
    position: relative; /* Ensure relative positioning for dropdown icon placement */
}

/* Style for the dropdown icon */
.main-navigation .nav-menu li a {
    padding-right: 25px; /* Add padding to the right to accommodate the icon */
}

.main-navigation .nav-menu li a .dropdown-icon {
    margin-left: 5px; /* Space between link text and icon */
    display: inline-block; /* Ensure proper alignment */
    vertical-align: middle; /* Center vertically */
}

/* Adjust the size of the SVG icon */
.main-navigation .nav-menu li a .dropdown-icon img {
    width: 15px; /* Set width of the SVG icon */
    height: 8px; /* Set height of the SVG icon */
    vertical-align: middle; /* Center it vertically */
}

/* Optional: Change background color on hover */
.main-navigation .nav-menu li:hover .dropdown-icon img {
    opacity: 0.7; /* Change opacity on hover */
}

/* Hide submenu by default */
.main-navigation .nav-menu ul {
    display: none; /* Hide submenus */
    position: absolute; /* Ensure submenu is positioned correctly */
    background-color: white; /* Background color for submenu */
    z-index: 1000; /* Ensure it appears above other content */
}

/* Show submenu on hover */
.main-navigation .nav-menu li:hover > ul {
    display: block; /* Show submenu when parent is hovered */
}

/* Additional styles for the submenu */
.main-navigation .nav-menu ul li {
    padding: 10px; /* Add padding for submenu items */
}

.main-navigation .nav-menu ul li a {
    color: #333; /* Text color for submenu links */
    text-decoration: none; /* Remove underline */
}

/* Optional: Change background color on hover for submenu items */
.main-navigation .nav-menu ul li:hover {
    background-color: #f0f0f0; /* Background color on hover */
}

/* Style for the dropdown icon */
.main-navigation .nav-menu li {
    position: relative; /* Ensure relative positioning for dropdown icon placement */
}

/* Ensure links display as flex to align items properly */
.main-navigation .nav-menu li a {
    display: flex; /* Use flexbox to align items */
    align-items: center; /* Center items vertically */
    padding-right: 25px; /* Add padding to the right to accommodate the icon */
}

/* Style for the dropdown icon */
.main-navigation .nav-menu li a .dropdown-icon {
    margin-left: 5px; /* Space between link text and icon */
}

/* Adjust the size of the SVG icon */
.main-navigation .nav-menu li a .dropdown-icon img {
    width: 15px; /* Set width of the SVG icon */
    height: 8px; /* Set height of the SVG icon */
}

/* Optional: Change background color on hover */
.main-navigation .nav-menu li:hover .dropdown-icon img {
    opacity: 0.7; /* Change opacity on hover */
}

/* Hide submenu by default */
.main-navigation .nav-menu ul {
    display: none; /* Hide submenus */
    position: absolute; /* Ensure submenu is positioned correctly */
    background-color: white; /* Background color for submenu */
    z-index: 1000; /* Ensure it appears above other content */
}

/* Show submenu on hover */
.main-navigation .nav-menu li:hover > ul {
    display: block; /* Show submenu when parent is hovered */
}

/* Additional styles for the submenu */
.main-navigation .nav-menu ul li {
    padding: 10px; /* Add padding for submenu items */
}

.main-navigation .nav-menu ul li a {
    color: #333; /* Text color for submenu links */
    text-decoration: none; /* Remove underline */
}

/* CTA SECTION */
.cta-section a {
	text-decoration:underline;
	transition: all 0.1s ease-out;
}

.cta-section a:hover {
	color:#D02727;
}
/* END OF CTA SECTION */

/* FOOTER */
footer a {
	transition: all 0.1s ease-out;
}

footer a:hover {
	opacity:0.8;
}

/* Optional: Change background color on hover for submenu items */
.main-navigation .nav-menu ul li:hover {
    background-color: #f0f0f0; /* Background color on hover */
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.signup-button {
    background-color: #fff;
    color: #000;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

.phone-info {
    background-color: #d00;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.phone-info .availability {
    font-size: 12px;
}

.phone-info .phone-number {
    font-size: 18px;
    font-weight: bold;
}

/* Column Layout */
.row {
    display: flex;
    flex-wrap: wrap; /* Ensure columns wrap to the next line on smaller screens */
    margin-left: -15px;
    margin-right: -15px;
}

.inner-row {
	max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.column {
    padding-left: 15px;
    padding-right: 15px;
    flex: 1; /* By default, columns will be equal width */
    box-sizing: border-box;
}

.no-padding {
	padding:0;
}

/* Column Sizes (based on 12-column grid) */
.column-1 { flex: 0 0 8.33%; max-width: 8.33%; }
.column-2 { flex: 0 0 16.66%; max-width: 16.66%; }
.column-3 { flex: 0 0 25%; max-width: 25%; }
.column-4 { flex: 0 0 33.33%; max-width: 33.33%; }
.column-5 { flex: 0 0 41.66%; max-width: 41.66%; }
.column-6 { flex: 0 0 50%; max-width: 50%; }
.column-7 { flex: 0 0 58.33%; max-width: 58.33%; }
.column-8 { flex: 0 0 66.66%; max-width: 66.66%; }
.column-9 { flex: 0 0 75%; max-width: 75%; }
.column-10 { flex: 0 0 83.33%; max-width: 83.33%; }
.column-11 { flex: 0 0 91.66%; max-width: 91.66%; }
.column-12 { flex: 0 0 100%; max-width: 100%; }

/* Example Utility Classes */
.mt-1 { margin-top: 1em; }
.mt-2 { margin-top: 2em; }
.text-center { text-align: center; }


/* PINSCROLL TABLET */
.pinscroll-tablet H2 {
	font-size: 40px;
	font-weight: 600;
	margin-bottom: 20px;
}

.pinscroll-tablet p {
	font-size: 18px;
	margin-bottom: 20px;
}

.pinscroll-tablet .wp-block-group__inner-container {
	padding: 0 10%;
	display: flex;
    align-items: center;
}

.pinscroll-tablet .pinscroll-img {
	border-radius:15px;
	height:100%;
}

.pinscroll-tablet .pinscroll-img img {
	border-radius: 15px;
}

.pinscroll-tablet .slider-prev-btn-custom {
	margin-left:15px;
}

.pinscroll-tablet .slider-next-btn-custom {
	margin-right: 15px;
}

.pinscroll-tablet .slider-prev-btn-custom,
.pinscroll-tablet .slider-next-btn-custom {
	width:50px;
	height:50px;
}

.pinscroll-tablet .swiper-button-disabled {
    opacity: 0;
}

.pinscroll-tablet .swiper-wrapper {
	padding-bottom:0 !important;
}

/* END OF PINSCROLL TABLET */

BLOG PAGE STYLE
/* Hero Section */
.hero-section {
    background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/blog-hero.jpg') !important;
    height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.hero-content {
    max-width: 800px;
    color: #333;
}

.hero-content h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.hero-content p {
    font-size: 1.2rem;
    line-height: 1.6;
}

/* Blog Posts Section */
.blog-posts {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.blog-posts h2 {
    text-align: left;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.post-item {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
}

.post-thumbnail {
    overflow: hidden;
    border-radius: 5px;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
}

.post-item h3 {
    font-size: 1.5rem;
    margin: 10px 0;
}

.post-item h3 a {
    color: #333;
    text-decoration: none;
}

.post-excerpt {
    color: #666;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-height: 1.5em;
    max-height: 6em;
}

.read-more {
    display: inline-block;
    margin-top: 10px;
    color: #0073aa;
    text-decoration: none;
}

.read-more-icon {
    font-weight: bold;
}

/* Separator */
.separator {
    margin: 40px auto;
    width: 100%;
    max-width: 1200px;
    border: 1px solid #ddd;
}

/* Pagination */
.pagination {
    margin-top: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination a {
    color: #0073aa;
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid #ddd;
    margin: 0 5px;
    border-radius: 3px;
}

.pagination .prev,
.pagination .next {
    font-weight: bold;
}

@media screen and (max-width: 640px) {
    .pagination .prev,
    .pagination .next {
        display: none;
	}
}

.btn-white a{
    display: inline-block;
    color: #000000 !important;
    padding: 16px 56px;
    font-weight: 700;
    font-family: "Open Sans";
    line-height: 1.5em;
    background: linear-gradient(to bottom, #FFF 50%, #D02727 50%);
    background-size: 100% 200%;
    background-position: 0 0;
    transition: background-position 0.2s ease-in-out, color 0.25s ease-in-out;
}

.btn-white:hover a{
    color: #FFFFFF !important;
    background-position: 0 100%;
}

.trending-gap:where(.wp-block-columns) {
		margin-bottom:0.75em;
	}

/* FAQ Component */
.faq-answer-inner * {
    margin: revert;
    padding: revert;
    list-style-type: revert;
}

.faq-answer-inner {
    font-family: 'Open Sans', sans-serif;
}

.faq-answer-inner a {
    color: #D02727;
    text-decoration: underline;
}
/* End of FAQ Component */

/* Support Post Template Content */
.support-post-body .support-post-content * {
    margin: revert;
    padding: revert;
    list-style-type: revert;
}

.support-post-body .support-post-content {
    font-family: 'Open Sans', sans-serif;
}

.support-post-body .support-post-content a {
    color: #D02727;
    text-decoration: underline;
}
/* End of Support Post Template Content */

/* PHONE NUMBER ON IPHONE 12 */
@media only screen and (max-width:399px) {
	.topbar-customer-service {
		margin-left: -40px;
        padding-left: 15px;
        padding-right: 15px;
	}
}
/* END OF IPHONE 12 */

/* MOBILE 767px */
@media only screen and (max-width:767px) {
	#mediaSearchForm input {
		margin-bottom:20px;
	}

	.hide-this-mobile {
		display:none;
	}
	
	.link-text {
		display:flex;
		align-items: center;
	}
	
	#channel-result-grid {
		width:115px;
		height:115px;
	}
	
	.trending-col .user-guide-title {
		padding-top:12% !important;
		padding-bottom:6% !important;
	}
	
	.trending-col .nopromo-user-guide-title,
	.trending-col .trending-topics-title {
		padding-top:28px !important;
		padding-bottom:28px !important;
	}
	
	.mobile-package-static {
		margin-top:80px;
	}
	
	.video-section h6 {
		font-size: 23px !important;
	}
	
	.connect-tab h4,
	.faq-section h6 {
		font-size: 23px !important;
		line-height: 130%;
	}
	
	.mobile-grid-2col {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-gap: 30px;
	}
	
	.mobile-grid-1col {
		grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
		grid-gap: 30px;
	}
}

/* end of mobile */

/* Tablet */
@media only screen and (min-width:768px) and (max-width:1024px) {
	.hide-this-tablet {
		display: none;
	}
}
/* end of tablet */
/* DESKTOP */
@media only screen and (min-width:1025px) and (max-width:1439px) {
	.hide-this-desktop {
		display:none;
	}
	
	.reverse-mobile {
		flex-direction: row-reverse;
	}
}
/* END OF DESKTOP */

/* Wide Screen */
@media only screen and (min-width:1280px) {
	.hide-this-widescreen {
		display:none;
	}
	
	.hero-vh80 {
		height:80vh;
		align-items: center;
    	display: grid;
	}
	
	.max-width-hero {
		max-width: 1200px !important;
		padding-right:352px;
	}
}
/* END OF WIDESCREEN*/

/* Responsive Adjustments for Smaller Screens */
@media (max-width: 768px) {
    .column {
        flex: 0 0 100%;
        max-width: 100%; /* Columns will stack on top of each other */
    }
}

@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}