/*
 Theme Name:   Ruffer Child
 Theme URI: https://themeholy.com/wordpress/ruffer/
 Description:  This is a child theme for Ruffer WordPress Theme
Author URI: https://themeforest.net/user/themeholy
 Author URI:   #
 Template:     ruffer
 Version:      1.0
 Tags:         two-columns, three-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu, theme-options, editor-style, featured-images, microformats, post-formats,  sticky-post, threaded-comments, translation-ready
 Text Domain:  ruffer-child
*/

/*  [ Add your custom css below ]
- - - - - - - - - - - - - - - - - - - - */
#top_header .th-social a{
    background-color: #5cf300;
    color: #000;
    font-size: 20px;
}
.about_icons .hicon img{
	width:60px;
} 

.about_icons .counter-card_icon img {
    width: 60px;
    max-height: 50px;
    object-fit: contain;
}
.auto_title .box-title{
	margin-top: 27px;
	font-size:21px;
}
.auto_title .service-featured.style2 .service-hover-wrap {
    max-width: 100%;
}
.auto_title .service-featured.style2:hover .service-hover-wrap {
    height: 150px;
}
.auto_title .service-featured_content {
    padding: 0;
}
.th-btn  {
    color: #000;
}
.th-btn:hover  {
    color: #fff;
}
/* Right Arrow */
.far.fa-arrow-right:before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    content: "\f061";
}

/* Left Arrow */
.far.fa-arrow-left:before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    content: "\f060";
}
.header-layout3 .main-menu {
    margin-left: 30px;
}

/*Mega Menu CSS*/
.main-menu ul.sub-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* center horizontally */

    width: 100vw;
    max-width: 600px;

    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 30px;
    background: #fff;

    visibility: hidden;
    opacity: 0;
    transition: 0.3s ease;
    z-index: 999;
}
.main-menu li:hover > ul.sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.main-menu ul.sub-menu li {
    width: 260px; /* each column */
}
.main-menu ul.sub-menu li > a {
    font-weight: bold;
    display: block;
    margin-bottom: 0px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.main-menu ul.sub-menu li:last-child > a {
    border-bottom: none;
}
.main-menu {
    position: relative;
}

.main-menu ul.sub-menu {
    left: -260px;
    width: 100vw;
	border-top: 3px solid #5cf300;
}
#about_us select, #about_us .form-control, #about_us .form-select, #about_us textarea, #about_us input {
    height: 50px;
}
div#watch_video {
    padding: 7px 15px;
    border-radius: 5px;
    position: absolute;
    z-index: 999;
    color: #000;
    background: transparent;
    right: 14%;
    margin-top: 55px;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
}
.hero-video-1 {
    background: rgb(92 243 0 / 76%) !important;
    position: absolute;
    right: 12%;
    top: 36%;
    padding: 50px;
    border-radius: 10px;
}

@media (min-width:320px) and (max-width:768px){
	.hero-video-1 {
		background: rgb(92 243 0 / 76%) !important;
		position: absolute;
		right: 35% !important;
		top: 72% !important;
		padding: 26px;
		border-radius: 10px;
	}
	div#watch_video {
		padding: 7px 15px;
		border-radius: 5px;
		position: absolute;
		z-index: 999;
		color: #000;
		background: transparent;
		right: 35%;
		margin-top: 45px;
		font-weight: bold;
		font-size: 12px;
		text-transform: uppercase;
	}
}
/*Mega Menu CSS*/