/* Multilevel Dropdown*/
@media only screen and (min-width: 992px) {
    .dropdown-nav {
        position: relative;
    }
    .sub-menu {
        position: absolute;
        list-style: none;
        z-index: 10;
        opacity: 0;
        visibility: hidden;
        padding: 0;
        left: 0;
        width: 180px;
        background-color: #f6f6f6;
    }
    .sub-menu-list {
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }
    .sub-menu-list a {
        text-decoration: none;
        color: #000;
        display: block;
        padding: 0.5rem;
    }
    .dropdown-nav:hover .sub-menu {
        perspective: 1000px;
        opacity: 1;
        visibility: visible;
    }
    .dropdown-nav:hover .sub-menu-list {
        opacity: 1;
        visibility: visible;
        animation: viewMenu 0.8s ease-in-out forwards;
    }
    @keyframes viewMenu {
        0% {
            opacity: 0;
            transform: rotateX(-90deg);
            transform-origin: top;
        }
        100% {
            opacity: 1;
            transform: rotateX(0deg);
        }
    }
    .sub-menu-list:hover {
        background-color: #757575;
    }
    .sub-menu-list:hover .subdropdown-nav-link {
        color: #fff;
    }
    .hidden-menu {
        display: none;
    }

    .sub-menu-list {
        position: relative;
        cursor: context-menu;
    }
    .rt-sub-menu, .rt-sub-menu2 {
        position: absolute;
        list-style: none;
        z-index: 20;
        opacity: 0;
        visibility: hidden;
        padding: 0;
        left: 100%;
        top: 0;
        width: 180px;
        background-color: #f6f6f6;
    }
    .rt-sub-menu li, .rt-sub-menu2 li {
        border-bottom: 1px solid rgba(0,0,0,0.3);
    }
    .rt-sub-menu a, .rt-sub-menu2 a {
        padding: 0.5rem;
    }
    .sub-menu-list:hover .rt-sub-menu, .sub-menu-list:hover .rt-sub-menu2 {
        opacity: 1;
        visibility: visible;
    }
    .rt-sub-menu li:hover, .rt-sub-menu2 li:hover {
        background-color: #757575;
    }
    .rt-sub-menu li:hover a, .rt-sub-menu2 li:hover a {
        color: #fff;
    }
    .hidden-sub-menu, .hidden-sub-menu2 {
        display: none;
    }
}

@media only screen and (max-width: 991px) {
	.dropdown-nav, .sub-dropdown-nav {
        position: relative;
    }
    .dropdown-nav-link {
        width: calc(100% - 50px);
    }
    .hidden-menu {
        position: absolute;
        top: 0;
        right: 0;
        color: #ffffff;
        width: 35px;
        height: 35px;
        background-color: #757575;
        text-align: center;
        line-height: 35px;
        cursor: pointer;
    }
    .hidden-sub-menu2 {
        position: absolute;
        top: 0;
        right: 0;
        color: #ffffff;
        width: 35px;
        height: 35px;
        background-color: #757575;
        text-align: center;
        line-height: 35px;
        cursor: pointer;
    }
    .sub-menu {
        position: absolute;
        opacity: 0;
        visibility: hidden;
    }
    .sub-menu-small {
        position: static;
        list-style: none;
        z-index: 10;
        opacity: 1;
        visibility: visible;
        padding: 0;
        width: 100%;
    }
    .sub-menu-list {
        padding-left: 15px;
        background-color: #ccc;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .subdropdown-nav-link {
        text-decoration: none;
        color: #fff;
        display: block;
        width: calc(100% - 50px);
        /*float: left;*/
    }
    .rt-sub-drop, .rt-sub-drop2 {
        list-style: none;
        padding-left: 0;               
    }
    .rt-sub-drop li, .rt-sub-drop2 li {
    	padding-left: 15px;
    }
    .rt-sub-menu, .rt-sub-menu2 {
        position: absolute;
        left: 0;
        width: 100%;
        top: 0;
        z-index: 20;
        opacity: 0;
        visibility: hidden;
    }
    .rt-sub-menu-small, .rt-sub-menu-small2 {
        position: static;
        left: 0;
        width: 100%;
        top: 0;
        z-index: 20;
        opacity: 1;
        visibility: visible;
    }
    .rt-sub-menu-small li, .rt-sub-menu-small2 li {
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .rt-sub-menu-small li:hover, .rt-sub-menu-small2 li:hover {
        background-color: rgba(0,0,0,0.1);
    }
    .rt-sub-menu-small li a, .rt-sub-menu-small2 li a {
        padding: 0.5rem;
        color: #fff;
        display: block;
    }
    .rt-sub-menu-small li:hover a, .rt-sub-menu-small2 li:hover a {
        color: #757575;
        text-decoration: none;
    }
}


@media only screen and (max-width: 1200px) {
	
	.pro-col {
		margin-top: 4rem;
	}

	.abt-why-wrap {
    	padding: 2rem 1rem;
	}

	.email-wrap {
	    font-size: 34px;
	}
}

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

	.top-nav-wrap {
		padding: 1rem 0.5rem 0.5rem;
	}

	.navbar {
		padding: 0.2rem 0.5rem;
	}

	.navbar-light .navbar-toggler {
		margin-left: auto;
		border-color: rgba(0,0,0,0.3);
		border-radius: 50px;
	}

	.navbar-light .navbar-toggler-icon {
		position: relative;
		background-image: none;
	}

	.navbar-light .navbar-toggler-icon::after {
		position: absolute;
		content: "\f0c9";
		font-family: 'Font Awesome 5 Free';
		font-weight: 600;
		top: 2px;
	    left: 5px;
	    font-size: 25px;
	    color: #212529;
	}

	.nav-item {
		padding-left: 15px;
		padding-right: 15px;
		border-bottom: 1px solid #e0e0e0;
	}

	.abt-wel-image {
		padding-bottom: 2rem;
	}

	.pro-col {
		margin-top: 3rem;
	}

	.pro-card-in img {
	    width: 200px;
	    position: absolute;
	    top: -100px;
	    left: 50%;
	    transform: translateX(-50%);
	}

	.hm-abt-wrap {
		padding: 11rem 0.5rem 5rem;
	}
}

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

	.top-nav-wrap {
		padding: 0.5rem;
	}

	.top-title {
		font-size: 18px;
	}

	.email-col {
		margin-bottom: 1rem;
	}
	
	.myCarouselCaption-erik,.myCarouselCaption {
		width: 300px;
	}

	.myCarouselCaption h1,.myCarouselCaption-erik h1 {
    	font-size: 23px;
    	line-height: 23px;
	}

	.pro-wrap {
		padding-top: 5rem;
	}
	
	.hm-abt-inner {
		padding-right: 15rem;
	}

	.abt-point-col {
		margin-bottom: 3rem;
	}

	.abt-why-col {
		margin-bottom: 1.5rem;
	}

	.hm-pro-col {
		margin-bottom: 3rem;
	}
	
	.main-pro-card img {
	    top: -122px;
	}

	.main-pro-card img {
    	top: -157px;    
	}

	.email-wrap,.phone-wrap {
	    font-size: 24px;
	}

	.pro-card-in img {
	    width: 200px;
	    position: absolute;
	    top: -90px;
	    left: 50%;
	    transform: translateX(-50%);
	}

	.hm-abt-wrap {
		background-image: url(../img/hm-abt-bg-sm.jpg);
	    background-repeat: no-repeat;
	    background-size: cover;
	    background-position: bottom center;
		padding: 4rem 0.5rem 35%;
	}

	.hm-abt-inner {
	    padding-right: 0;
	}

	.testimonial-inner1, .testimonial-inner2, .testimonial-inner3 {
		flex: 0 0 100%;
    	max-width: 100%;
    	position: relative;
    	margin-bottom: 80px;
	}

	.testimonial-inner2 {
		top: 0;
	}

	.f-top-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.logo-col {
		grid-column: 1/3;
		grid-row: 1/2;
	}

	.f-social-col {
		grid-column: 1/2;
		grid-row: 2/3;
	}

	.contact-col {
		grid-column: 2/3;
		grid-row: 2/3;
	}

	.ft-nav-col {
		grid-column: 1/3;
		grid-row: 3/4;
	}

	.logo-col .logo-inner {
		text-align: left!important;
		margin-bottom: 1rem;
	}

	.contact-innner a {
		margin-left: 0;
		margin-right: 10px;
	}

	.contact-innner i {
		padding: 0.5rem;
	}

}

@media only screen and (max-width: 575px) {
	
	.myCarouselCaption,.myCarouselCaption-erik {
		display: none;
	}

	.email-wrap, .phone-wrap {
	    display: none;
	}

	.email-col {
		margin-bottom: 0;
	}

	.phone-wrap {
	    font-size: 18px;
	}

	.top-title {
    	font-size: 15px;
	}

	.pro-card-in img {
	    width: 200px;
	    position: absolute;
	    top: -130px;
	    left: 50%;
	    transform: translateX(-50%);
	}

	.test-icon {
	    font-size: 30px;
	}

	.hm-abt-para {
		text-align: justify;
	}

	.wrap-test {
		margin: 3rem 0 0;
	}
	
}

@media only screen and (max-width: 450px) { 
	.pro-card-in img {
	    width: 200px;
	    position: absolute;
	    top: -100px;
	    left: 50%;
	    transform: translateX(-50%);
	}

	.top-nav-info {
		display: none;
	}

}

@media only screen and (max-width: 432px) {
	
	.nav-item {
    	margin: 0.2rem 0;
    	padding-left: 1rem;
	}

	.myNav-toggler {
		margin: 0.5rem 0;
	}

	.email-wrap, .phone-wrap {
		display: none;
	}

	.hm-abt-inner h1 {
    	padding-top: 3rem;
	}

	.pro-card-in img {
	    width: 200px;
	    position: absolute;
	    top: -90px;
	    left: 50%;
	    transform: translateX(-50%);
	}
	
}


@media only screen and (max-width: 400px) {
	.hm-abt-wrap {
		padding: 0 0 36%;
	}

	.feature-wrap {
	    padding-top: 4rem;
	}

	h1 {
		font-size: 30px;
	}
}