.myClass {
    height: 500px; /* Adjust to your design */
    position: relative;
    z-index: 1;
}

.myClass .owl-carousel img {
    width: calc(100vw + 100px);
}

.owl-carousel .owl-item {
    overflow: hidden;
}

/*.myClass .animated img {
    -webkit-animation-duration: 5000ms !important;
    animation-duration: 5000ms !important;
    -webkit-animation-fill-mode: both !important;
    animation-fill-mode: both !important;
    -webkit-animation: myMove;
    animation: myMove;
}

@keyframes myMove {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
}

@-webkit-keyframes myMove {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
}

@-o-keyframes myMove {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
}

@-moz-keyframes myMove {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
}

@-ms-keyframes myMove {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
}
*/

.myClass .animated img {
    -webkit-animation: zoomIn 5000ms linear forwards;
    animation: zoomIn 5000ms linear forwards;
}

@keyframes zoomIn {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

@-webkit-keyframes zoomIn {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1.1);
    }
}

/* carousel styles */
.owl-next, .owl-prev {
    width: 22px;
    height: 40px;
    margin-top: -20px;
    position: absolute;
    top: 25% !important;
}
.owl-prev {
    left: 10px !important;
}
.owl-next {
    right: 10px !important;
}



.icon-empower {
  color: #e91e63; /* Pink - empowerment */
}

.icon-donate {
  color: #ff9800; /* Orange - charity */
}

.icon-medical {
  color: #4caf50; /* Green - health */
}


.h2-sub {
	font-size: 30px !important;
}

.small-gap {
	margin-bottom: 7px !important;
}

.section-padding45 {
  padding-top: 45px;
  padding-bottom: 40px;
}

.section-padding60 {
  padding-top: 65px;
  padding-bottom: 60px;
}

.donate-btn {
    padding: 19px 29px;
}

.our-cases-area .single-cases .cases-caption .donate-field {
	width: -webkit-fill-available;
}

.card-title {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
}

.btn-block {
    width: max-content;
    padding: 19px 29px;
	float: right;
    margin-top: 17px;
}

.white-text {
	color: #ffffff;
}

.logo-header {
	max-height: 85px;
}

.preloader-size {
	padding-top: 0 !important;
}

.preloader-img-size {
    max-width: 85px !important;
}

.menu-full {
    padding: 39px 15px !important;
}
.submenu-full {
	width: max-content !important;
}

@media only screen and (min-width: 356px) and (max-width: 576px) {
  /* line 231, C:/Users/HP/Desktop/jun-2020/277.Charity _Non-profit/assets/scss/_headerMenu.scss */
	.logo-header {
		max-height: 52px;
		margin-bottom: -9px;
		margin-top: -9px;
	}

	.menu-full {
		padding: 0px 11px !important;
	}

	.hide-mobile {
		display: none !important;
	}
	
	.myClass {
		height: 237px;
		position: relative;
		z-index: 1;
	}
	.owl-next, .owl-prev {
		top: 41% !important;
	}
}

/* ========================
   Sub-Submenu (Desktop)
   ======================== */
@media (min-width: 992px) {
    /* Hide sub-submenu by default */
    .submenu .sub-submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
        background-color: rgba(0, 12, 32, 0.6);
        padding: 10px 0;
        min-width: 200px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 999;
    }

    /* Show sub-submenu on hover */
    .submenu li:hover > .sub-submenu {
        display: block;
    }

    /* Align top-level submenu */
    .submenu li {
        position: relative;
    }

    /* Sub-submenu link styles */
    .sub-submenu li a {
        padding: 10px 20px !important;
        display: block !important;
        color: #ffffff !important;
        white-space: nowrap;
    }

    .sub-submenu li a:hover {
        color: #178ae5 !important;
		background: none !important;
		padding-left: 13px !important;
    }

    /* Optional: add right arrow for items with sub-submenu */
    .submenu li > a::after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        float: right;
        margin-left: 5px;
    }

    /* Prevent arrow on normal submenu items */
    .submenu > li > a::after {
        content: none;
    }

    /* Only show right arrow on items with sub-submenu */
    .submenu li:has(.sub-submenu) > a::after {
        content: "\f105";
    }
}

.deg-head{
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	color: #fff;
}
