:root {
    --main-bg-color: #198754;
    --main-hover-bg-color: #4c227c;
    --normal-color: #fff;
}
@media (max-width: 920px){
	#body-container{
		padding: 0
	}
    .hamburger-menu-container{
        display: flex;
		padding: 10px 0;
    }
	.sub-contact{
		font-size: 12px;
	}
	.name_union{
		font-size: 18px;
    	font-weight: bold;
	}
    .nav-link{
        background: var(--normal-color);
        border-bottom: 1px solid var(--main-bg-color);
    }

    #check{
        display: block;
    }

    .nav-btn{

        position: fixed;
        height: 100vh;
        /* top: 50px; */
        top: 0px;
        left: 0;
        width: 100%;
        background-color: #fff;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        overflow-x: hidden;
        overflow-y: auto;
        transform: translateX(100%);
        transition: .65s;
    }

    #check:checked ~ .nav-btn{
        transform: translateX(0);
    }

    #check:checked ~ .nav-btn .nav-link,
    #check:checked ~ .nav-btn .log-sign{
        animation: animation .5s ease forwards var(--i);
    }

    .nav-links{
        flex: initial;
        width: 100%;
    }

    .nav-links > ul{
        flex-direction: column;
		margin-top: 75px;
    }

    .nav-link{
        width: 100%;
        opacity: 0;
        transform: translateY(15px);
    }

    .nav-link > a{
        line-height: 1;
        padding: 10px 10px;
        display: unset;
        width: 100%;
        float: left;
    }

    .nav-link:hover > a{
        transform: scale(1);
        background-color: var(--main-bg-color);
    }

    .dropdown, .dropdown.second{
        position: initial;
        top: initial;
        left: initial;
        transform: initial;
        opacity: 1;
        pointer-events: auto;
        width: 100%;
        padding: 0;
        background-color: var(--main-bg-color);
        display: none;
    }
    
    .nav-link:hover > .dropdown,
    .dropdown-link:hover > .dropdown{
        display: block;
        margin-top: 44px;
        margin-left: 0;
    }

    .nav-link:hover > a > i,
    .dropdown-link:hover > a > i{
        transform: rotate(360deg);
    }

    .dropdown-link > a{
        background-color: transparent;
        color: var(--normal-color);
        padding: 10px 2rem;
        line-height: 1;
    }

    .dropdown.second .dropdown-link > a{
        padding: 1.2rem 2rem 1.2rem 3rem;
    }

    .dropdown.second .dropdown.second .dropdown-link > a{
        padding: 1.2rem 2rem 1.2rem 4rem;
    }

    .dropdown-link:not(:nth-last-child(2)){
        border-bottom: none;
    }

    .arrow{
        z-index: 1;
        background-color: var(--main-bg-color);
        left: 10%;
        transform: scale(1.1) rotate(45deg);
        transition: .5s;
    }

    .nav-link:hover .arrow{
        background-color: var(--main-bg-color);
    }

    .dropdown .dropdown .arrow{
        display: none;
    }

    .dropdown-link:hover > a{
        background-color: var(--main-hover-bg-color);
    }

    .dropdown-link:first-child:hover ~ .arrow{
        background-color: var(--main-hover-bg-color);
    }

    .nav-link > a > i{
        font-size: 1.1rem;
        transform: rotate(-90deg);
        transition: .7s;
    }

    .dropdown i{
        font-size: 1rem;
        transition: .7s;
    }

    .log-sign{
        flex: initial;
        width: 100%;
        padding: 1.5rem 1.9rem;
        justify-content: flex-start;
        opacity: 0;
        transform: translateY(15px);
    }
}
@media only screen and (max-width: 768px) {
    /* .col-md-4{width: 50% !important;flex: 0 0 50%;max-width: 50%;} */
    #myImg{max-width: unset;}
    .sm-mb-2{margin-bottom: 15px !important;}
    .sm-mt-2, .sm-p{padding-right: 4px;padding-left: 4px;}
    .sm-mt-3{margin-top: 15px;}
	.url-valu-section {
		padding: 10px 0px 0px;
	}
	.marquee_icon{
		height: 13px;
		width: 15px;
		color: #FFC107;
	}
	.user-profile .user-img img {
		width: 75px !important;
		aspect-ratio: 4 / 4;
		object-fit: cover;
		border-radius: 5px;
	}
	.man-member .user-img img{
		width: 100%;
		aspect-ratio: 4 / 4;
		object-fit: cover;
		border-radius: 5px;
		height: unset;
		border: 0;
		box-shadow: none;
	}
	header {
		border: 0;
		box-shadow: 0px 3px 10px #ececec;
	}
}

@media only screen and (max-width: 768px) {
.col-xs-12{width: 100% !important;flex: 0 0 100%;max-width: 100%;}
.col-xs-6{width: 50% !important;flex: 0 0 50%;max-width: 50%;}
.page-footer p{text-align: left;}
.sm-left{text-align: left !important;}
.footer-copyright{display: grid; text-align: center;}
.email, .phone{text-align: center;}
.head-logo{display: unset !important;margin-bottom: 5px;text-align: center;}
.logo{margin: auto;}
h5#dateTimeClock{font-size: 10.9px;}
.slide{height: 250px !important;margin-bottom: 5px;}
.carousel-item img{height: 250px !important;}
.sm-mb-5{margin-bottom: 5px;}
.sm-mb-4{margin: 4px;}
.message-img {height: 70px;width: 70px;}
.footer-link{font-size: 12px;}
.message-title{font-size: 15px !important;}
.description{font-size: 12px !important;}
p {font-size: 16px !important;}
.sm-m-1{margin: 10px !important;}
.sm-p-1{padding: 10px !important;}
.sm-m-0{margin: 0px !important;}
.sm-p-0{padding: 0px !important;}
.sm-p{padding: 5px !important;}
.sm-mb-15{margin-bottom: 15px !important;}
#myImg{max-width: unset;}
.url-valu-section .container{display: -webkit-inline-box !important;}
.url-valu-section svg{float: unset !important; margin-top: 0 !important;}
}
@media only screen and (max-width: 375px) {
    /* .up-down {transform: translate(134px, 5px);} */
}
@media only screen and (max-width: 320px) {
    /* .up-down {transform: translate(80px, 5px);} */
}