/* 
 Theme Name:     Webenefic
 Author:         Wasim Kabir
 Author URI:     https://imwasim.dev/
 Template:       Divi
 Version:        1.0.0
 Description:   A Child Theme built using the elegantmarketplace.com Child theme maker
Developed by Wasim Kabir
 Wordpress Version: 5.2.4
*/

/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */

.w-toggle-transform-animation {
    transform: none !important;
}

/*---------------- Custom Menu ----------------*/
/*---------------- END Custom Menu ----------------*/

/*--------------- Sub Menu ----------------*/
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu {
    background-color: #046865 !important;
}
/*--------------- END Sub Menu ----------------*/

/*------- Moving Image --------*/
.w-stylized-image {
    transition: all 1s ease-in-out;
    animation: moving-image 1.7s infinite;
}
@keyframes moving-image {
    0% {
        left: 0;
    }
    50% {
        left: 15px;
    }
    100% {
        left: 0;
    }
}

/*---------------------------------------*/
/*----------- About Styles --------------*/
/*---------------------------------------*/
.w-about-details-row .et_pb_column:hover .et_pb_text h3 {
    transition: all 0.5s;
    transition-delay: 0.3s;
    color: white;
}
.w-about-details-row .et_pb_column:hover .et_pb_text p {
    transition: all 0.5s;
    transition-delay: 0.3s;
    color: white;
}
.w-about-details-row .et_pb_column:hover .et_pb_divider:before {
    border-top-color: #ffd700;
}

/*-----Shutter Effect-----*/

.w-hover-1 {
    display: inline-block;
    position: relative;
    margin: 0px;
    overflow: hidden;
    background: #000;
}

.w-hover-1 img {
    display: block;
    max-width: 100%;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

.w-hover-1:hover img {
    opacity: 0.5;
}

.w-hover-1::after {
    content: attr(ds-title);
    position: absolute;
    height: 12%;
    color: #fff;
    z-index: 1;
    top: 0;
    width: 90%;
    background: rgba(0, 0, 0, 0.5);
    font-weight: 300;
    font-size: 40px;
    text-transform: uppercase;
    padding: 5%;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

.w-hover-1::before {
    content: attr(ds-desc);
    position: absolute;
    height: 100%;
    color: #fff;
    z-index: 1;
    top: 27%;
    width: initial;
    background: rgba(255, 102, 0, 0.5);
    font-size: 16px;
    padding: 2% 5% 5% 5%;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

.w-hover-1:hover::after,
.w-hover-1:hover::before {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    transform: translateY(0%);
}

/*-----Push Right-----*/

.w-hover-2 {
    display: inline-block;
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    transition: background 0.3s ease-in-out;
}

.w-hover-2:hover {
    background: rgba(0, 0, 0, 0);
}

.w-hover-2 img {
    display: block;
    max-width: 100%;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

.w-hover-2:hover img {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    transform: translateX(100%);
}

.w-hover-2::before,
.w-hover-2::after {
    position: absolute;
    width: 100%;
    z-index: -1;
    -webkit-transform: translateX(-30%);
    -moz-transform: translateX(-30%);
    transform: translateX(-30%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

.w-hover-2::before {
    content: attr(ds-title);
    height: 30%;
    background-color: #000;
    color: #ffffff;
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 300;
    padding: 7% 5%;
}

.w-hover-2::after {
    content: attr(ds-desc);
    top: 30%;
    height: 70%;
    width: initial;
    background-color: #ff6600;
    color: #fff;
    font-size: 16px;
    padding: 5%;
}

.w-hover-2:hover::before,
.w-hover-2:hover::after {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    transform: translateX(0%);
}

/*-----Fade Effect-----*/

.w-hover-3 {
    display: inline-block;
    position: relative;
}

.w-hover-3 img {
    display: block;
    max-width: 100%;
}

.w-hover-3::before,
.w-hover-3::after {
    opacity: 0;
    position: absolute;
    width: 90%;
    color: #fff;
    padding: 5%;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.w-hover-3::before {
    content: attr(ds-title);
    top: 0;
    height: 10%;
    background: rgba(0, 0, 0, 0.5);
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 300;
}

.w-hover-3::after {
    content: attr(ds-desc);
    top: 25%;
    height: 60%;
    width: initial;
    background: rgba(255, 102, 0, 0.5);
    font-size: 16px;
    text-align: right;
}

.w-hover-3:hover::before,
.w-hover-3:hover::after {
    opacity: 1;
}

/*-----Push Left-----*/

.w-hover-4 {
    display: inline-block;
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    transition: background 0.3s ease-in-out;
}

.w-hover-4:hover {
    background: rgba(0, 0, 0, 0);
}

.w-hover-4 img {
    display: block;
    max-width: 100%;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

.w-hover-4:hover img {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
}

.w-hover-4::before,
.w-hover-4::after {
    position: absolute;
    width: 100%;
    z-index: -1;
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    transform: translateX(70%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

.w-hover-4::before {
    content: attr(ds-title);
    height: 30%;
    background-color: #000;
    color: #ffffff;
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 300;
    padding: 7% 5%;
}

.w-hover-4::after {
    content: attr(ds-desc);
    top: 30%;
    height: 70%;
    width: initial;
    background-color: #ff6600;
    color: #fff;
    font-size: 16px;
    text-align: right;
    padding: 5%;
}

.w-hover-4:hover::before,
.w-hover-4:hover::after {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    transform: translateX(0%);
}

/*-------------Menu Styles ---------------*/
ul#menu-main-menu li a {
    text-decoration: none !important;
}

/*---- Submenu ----*/
/*---- Submenu container -----*/
.nav li ul {
    width: 330px;
}
li#menu-item-231 ul.sub-menu {
    width: 200px;
}
.et-menu li li a {
    width: 100%;
}
ul.sub-menu li a {
    font-size: 20px !important;
    font-weight: bold;
}

/*-------------Menu Styles ---------------*/

/* ----------Custom Icons ----------*/
span.w-custom-icons {
    font-size: 24px;
    font-weight: bold;
    display: inline-block;
    color: #046865;
    transition: all 0.3s;
}
.w-about-details-row .et_pb_column:hover span.w-custom-icons {
    color: #ffd700;
}
/* ----------Custom Icons ----------*/


/* ---------Astonaut Orbitting --------*/
#w-astronaut {
    
    /* 
     * Make the initial position to be the center of the circle you want this
     * object follow.
     */
/*     position: absolute; */
    left: 0;
    top: 0;

    /*
     * Sets up the animation duration, timing-function (or easing)
     * and iteration-count. Ensure you use the appropriate vendor-specific 
     * prefixes as well as the official syntax for now. Remember, tools like 
     * CSS Please are your friends!
     */
    -webkit-animation: myOrbit 5s ease-in-out infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 5s ease-in-out infinite; /* Firefox 5-15 */
         -o-animation: myOrbit 5s ease-in-out infinite; /* Opera 12+ */
            animation: myOrbit 5s ease-in-out infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
    
    
    
}

/*
 * Set up the keyframes to actually describe the begining and end states of 
 * the animation.  The browser will interpolate all the frames between these 
 * points.  Again, remember your vendor-specific prefixes for now!
 */
@-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg) translateX(30px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

@-moz-keyframes myOrbit {
    from { -moz-transform: rotate(0deg) translateX(30px) rotate(0deg); }
    to   { -moz-transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

@-o-keyframes myOrbit {
    from { -o-transform: rotate(0deg) translateX(30px) rotate(0deg); }
    to   { -o-transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(30px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}
/* ---------Astonaut Orbitting END --------*/


/**
 * Submenu Colapsible style
 */
/*change hamburger icon to x when mobile menu is open*/
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '\4d';
}
/*adjust the new toggle element which is added via jQuery*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}
/*some code to keep everyting positioned properly*/
ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}
/*remove default background color from menu items that have children*/
.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}
/*hide the submenu by default*/
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}
/*show the submenu when toggled open*/
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}
/*adjust the toggle icon position and transparency*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	text-align: center;
	opacity: 1;
}
/*submenu toggle icon when closed*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\33';
	color: #ffd700;
	background: #f0f3f6;
	border-radius: 50%;
	padding: 3px;
}
/*submenu toggle icon when open*/
ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
	content: '\32';
}
/*add point on top of the menu submenu dropdown*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
	position: absolute;
	right: 5%;
	margin-left: -20px;
	top: -14px;
	width: 0;
	height: 0;
	content: '';
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #ffffff;
}
/*adjust the position of the hamburger menu*/
.mobile_menu_bar {
	position: relative;
	display: block;
	bottom: 10px;
	line-height: 0;
}
/*force the background color and add a rounded border*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
	background-color: #ffffff!important;
	border-radius: 10px;
}
/*
 * Submenu Collapsible END
 */
ul#mobile_menu1 {
    background-color: #046865 !important;
}

/*
 * Get A Quote Form Style
 */
.main div.container-fluid.section3 {
	padding-left: 10px !important;
	padding-right: 10px !important;
}
@media (min-width: 480px) {
	.main div.container-fluid.section3 {
		padding-left: 80px !important;
		padding-right: 80px !important;
	}
}
/*
 * Get A Quote Form Style END
 */