/* berita ================= */
.berita .card-title {
		height: auto;
	    overflow: hidden;
	    word-break: break-word;
	    max-height: 36px;
	    text-overflow: ellipsis;
	    /*display: -webkit-box;*/
	    display:contents;
	    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.card-detail.berita .content span {
		height: auto;
	    overflow: hidden;
	    word-break: break-word;
	    max-height: 100px;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 5;
   	    -webkit-box-orient: vertical;
}
.card-detail.berita .content a {
	
}

/* end::berita ================= */

/* PERTUKARAN TARIKH HIJRAH */

textarea.result::-webkit-scrollbar {
    width: 5px;height: 5px;
}

textarea.result::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

textarea.result::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

textarea.result {
	overflow: hidden;
    height: auto;
    max-height: 40px;
    font-size: 12px;
    font-weight: 600;
}
/* end::PERTUKARAN TARIKH HIJRAH */


/* PERKHIDMATAN */
#slideshow .slick-track {
	padding: 5px 0;
}
/* end:: PERKHIDMATAN */

/* ePoster */
#eposter img:hover {
	cursor:pointer
}
/* end::ePoster */


/* font-sizes */
.hyperlinks > .fw-bolder {
    width: 200px;
    padding-left: 15px; position:relative
}
.hyperlinks > .fw-bolder.title:after {
	content:""; position:absolute;top:0;right:0;width:2px;height:100%;background:#333
}
.hyperlinks .waktuSlider {
	width: calc(100% - 200px);
}
.hyperlinks .waktuSlider .item {
	padding:0 5px;font-size: 0.8rem;
}
.hyperlinks a{
    font-size: 12px;
}
.prayer-times li {
	list-style:none
}

#slideshow .slick h5{
    font-size: 18px;
}

.title-bg h4{
    font-size: 22px;
}

.card-detail .content{
    font-size: 14px;
}

.card-detail h6{
    font-size: 15px
}

.card-detail .text-muted{
    font-size: 14px;
}

.calculator-section h5{
    font-size: 18px;
}

.calculator-section p{
    font-size: 14px;
    font-weight: 600;
}

.calendar-section h5,
.calendar-items-section h5{
    font-size: 18px;
}

.calendar-section h6{
    font-size: 14px;
}

.calendar-section .form-check-label,
.calendar-section.form-label,
.footer-links a{
    font-size: 14px;
}
.calendar-section .form-check-label {
	color:#333;font-weight:500
}

.btn-primary{
    background-color: #005b50;
    border: none;
    border-radius: 45px;
    color: white;
    padding: 5px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    margin: 4px 2px;
    cursor: pointer;
}
  
.btn-primary:hover {
    background:#d3bd22;
    transition: all 0.3s ease;
}
  
.btn-primary:active {
    background:#d3bd22;
}

.btn-secondary{
    background-color: #d3bd22 !important;
    border: none !important;
    border-radius: 25px;
    color: white !important;
    padding: 8px 20px !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px !important;
    margin: 4px 2px;
    cursor: pointer !important;
    min-width: inherit !important;
}
  
.btn-secondary:hover {
    background: #005b50;
    transition: all 0.3s ease;
}
  
.btn-secondary:active {
    background:#005b50;
}

.carousel-control-next-icon, .carousel-control-prev-icon{
    width: 3rem;
    height: 3rem;
    color: #005b50;
}

#DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul>li>a .menu-item-text:focus, #DeltaTopNavigation .ms-core-listMenu-horizontalBox>ul>li>a .menu-item-text:hover, footer a:focus, footer a:hover {
    color: #d3bd22;
}

.ms-core-listMenu-horizontalBox > ul > li > ul > li:hover{
	background-color: #d3bd22 !important;
}

.ms-core-listMenu-horizontalBox li.static.dynamic-children ul.dynamic{
	box-shadow: inherit !important;
	padding: 0px !important;
	background-color: #FAF8F1 ;
}

.navbar-light .navbar-toggler {
    color: #fff0 !important;border: none;
}

.image-cover-card h1{
    letter-spacing: 5px;
}

.dropdown-menu{
    background-color: #FAF8F1;
}

.image-cover-card img{
    height: 320px;
    object-fit: cover;
}

/* .image-cover-card .gradient-2{
    display:inline-block;
    background: -moz-linear-gradient(0deg, rgba(59,180,159,1) 0%, rgba(246,251,250,1) 100%); 
    background: -webkit-linear-gradient(0deg, rgba(59,180,159,1) 0%, rgba(246,251,250,1) 100%); 
    background: -o-linear-gradient(0deg, rgba(59,180,159,1) 0%, rgba(246,251,250,1) 100%);
    background: -ms-linear-gradient(0deg, rgba(59,180,159,1) 0%, rgba(246,251,250,1) 100%); 
    background: linear-gradient(0deg, rgba(59,180,159,1) 0%, rgba(246,251,250,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
}

.image-cover-card .gradient-2 img{
    position:relative;
    z-index:-1;
    display:block;
} */

.carousel-slider img{
    object-fit: cover;
    height:400px
}

.icon {
  width: 32px; /* Adjust the width of the image */
  height: 32px; /* Adjust the height of the image */
  margin-right: 8px; /* Adjust the spacing between the image and text */
}

/* Define the background color for the button */
.btn-custom {
  background-color: #005B50 !important; /* Change this color to your desired background color */
  color: white; /* Text color for the button */
  /* Add any other button styles here */
}

/* Change the background color on hover */
.btn-custom:hover {
  background-color: #D3BD22 !important; /* Change this color to your desired hover background color */
  /* Add any other styles for hover here */
}



/* Custom */

.input-box{
    display: flex !important;
    align-items: center !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 25px !important;
}

.form-control {
    border: none !important;
    outline: none !important;
    flex-grow: 1 !important;
    /*padding: 8px;*/
}

.search-icon {
        width: 24px !important;
    height: 24px !important;
    margin-right: 10px !important;
    margin-left: 10px !important;
    margin-top: 5px !important;
}
.form-control::placeholder {
    color: black !important; /* Change the color to black */
    font-weight: bold !important; /* Make the placeholder text bold */
}

.ms-core-navigation{
	font-family: 'Montserrat' !important;
}

.dynamic-children > .menu-item-text:hover {
    color: #fff !important; /* Change the font color to yellow on hover */
}


.zoom {
  /* padding: 50px;
  background-color: green;*/
  transition: transform .2s; /* Animation */
  /* width: 200px;
  height: 200px;
  margin: 0 auto; */
}

.zoom:hover {
  transform: scale(1.02); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.no-inherit {
  color: black; /* You can replace 'inherit' with the default value you want */
  /* Add more properties as needed */
}

#navbar {
    transition: top 0.3s; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}

#navbar.hidden {
    top: -100px; /* Adjust the value to hide the header completely */
}


/* Change the color of the links within the div with id "links" */
#links a {
    color: white; /* Color for regular links */
    text-decoration:none !important;
}

#links a:visited {
    color: white; /* Color for visited links */
}

#footerLinks a {
	text-decoration:none !important;
	color:black; !important;
	font-weight:700 !important;
}



/* Custom */


@media screen and (min-width:1650px){
	.carousel-slider img{
	    object-fit: cover;
	    height:480px
	}
}

.slick img{
    /* width: 80px; */
    height: 85px;
    object-fit: cover;
    margin: auto;
}

.slick-prev {
    left: 0px !important;
}

.images-row img{
    height: 320px;
    width: 320px;
    object-fit: cover;
    -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

@media screen and (max-width: 992px){
    .images-row img{
        width: 100%;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1300px) {
    .images-row img{
        height: 280px;
        width: 280px;
    }  
    
    .calendar-section .calendar-dates{
        margin: 0px !important;
    }

    .navbar-nav .nav-item{
        padding: 0px !important;
    }
    
    /*New*/
    .ms-siteicon-img{
    max-width:150% !important;
    width:200% !important;
	}

}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
    .images-row img{
        height: 290px;
        width: 240px;
    }  
    
    .calendar-section .calendar-dates{
        margin: 0px !important;
    }

    .navbar-nav .nav-item{
        padding: 0px !important;
    }
    
    /*New*/
    .ms-siteicon-img{
    max-width:150% !important;
    width:200% !important;
	}

}
.card-detail .card {
    margin: 0px 8px;
}

.images-row img:hover {
	transform: scale(1.05);
}

/*@media screen and (min-width: 1360px) {
    .images-row{
        padding-left: 80px; 
        padding-right: 80px;
    }
}*/

#eposter .slick-list{
	padding: 12px 0px 12px 0px;
}

@media screen and (min-width: 992px) {

    .images-row img{
        border-radius: 20px;

    }
    
        /*New*/
    .ms-siteicon-img{
    max-width:150% !important;
    width:200% !important;
	}

}

.logo-bg-green .img-logo:hover{
    transform: scale(1.05);
    transition: .3s ease-in-out;
}

nav{
    background-color: #005b50 !important;
}
.top-bar-nav nav{
    background-color: #3BB49F !important;
}

.header-img-icons{
	width: 30px;
	height: 30px;
	object-fit: cover;
}

.header-img-gov{
	width: 46px;
	height: 30px;
	margin-right: 0px !important;
	object-fit: cover;
}

.header-date img{
	height: 25px;
	width: 25px;
}

@media screen and (min-width: 1024px){
    nav{
        height: 165px;
    }
    .top-bar-nav nav{
    background-color: #3BB49F !important;
    height: auto !important;
}

    /*New*/
    .ms-siteicon-img{
    max-width:150% !important;
    width:200% !important;
    position: relative;
    bottom: -18px;
	}


}

.navbar-brand img{
    width:380px;
    height: 100px;
}

@media screen and (max-width: 992px) {
    .navbar-brand img{
        width:180px;
    }

    nav .container-fluid{
        background-color: #005b50 !important;
        z-index: 100;
    }
}

.navbar-nav {
    flex-direction: row;
}

.hyperlinks a{
    color: black !important;
    text-decoration: none !important;
}

.title-bg{
    background-image: linear-gradient(90deg, rgba(59,180,159,1) 0%, rgba(255,255,255,1) 100%) !important;
}

.title-bg h4{
    color: #FFF;
    font-weight: 800;
}

.card-detail .card-body{
    background-color: #FAF8F1 !important;
}

.calculator-section .card{
    border-radius: 20px !important;
}

.calendar-section .card{
    border-radius: 20px;
    background-color: #3bb49f;
}

.calendar-items-section .card{
	background-color: #005b50;
}

.calculator-section .card-top-body{
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    background-color: #005b50 !important;
}

.calculator-section .card-bottom-body{
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #FAF8F1 !important;
}

.calculator-section .card-bottom-body img{
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.calculator-section .card-bottom-body .img-logo{
    border-radius: 30px;
    background-color: #3bb49f;
    width: 150px;
    height: 150px;
    margin: auto;
}

@media screen and (max-width: 992px) {
    .calculator-section .card-bottom-body .img-logo{
        width: 110px;
        height: 120px;
    }
}    


.calendar-section .calendar-dates input{
    max-width: 110px;
}

.calendar-section .calendar-email input{
    max-width: 100px;
}

.calendar-dates{
    border-radius: 15px;
    background-color: #005b50;
}

footer ul li{
    color: #FFF;
    text-decoration: none !important;
}

img{
    object-fit: cover;
}

.image-cover-card .first-card img{
    background-image:linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
}

.slick-prev:before, .slick-next:before{
    color:black;
    font-size: 30px;
}

@media screen and (min-width: 1650px) {
    .card-detail .card{
        width: 22.5rem;
    }
}  

@media screen and (min-width: 1300px) and (max-width: 1649px) {
    .card-detail .card{
        width: 18.5rem;
    }
} 

@media screen and (min-width: 1200px) and (max-width: 1299px) {
    .card-detail .card{
        width: 16rem;
    }
} 

.image-cover-card .card{
    border: inherit !important;
}

.form-control{
    border-radius: 30px;
}

.card-img-logo img{
    width: 230px;
    height: 50px;
    object-fit: cover;
}

.card-detail img{
    height: 200px;
}

.slick a{
    text-decoration: none;
    color: black;
}

.slick h4{
    font-weight: 800 !important;
}

.extra-bold{
    font-weight: 700;
}

.medium-bold{
    font-weight: 600;
}

.label-small{
    font-size: 10px;
}

.bg-grey-color{
    /*background-color: #E4E4E4;*/
    min-height: 600px; 
    margin-top: -18rem;
}

.bottom-content-section{
    margin-top: -20rem;
}

@media screen and (max-width: 992px) {
    .bottom-content-section{
        margin-top: -24rem;
    }
}    

.carousel-control-next, .carousel-control-prev {
    color: #005b50; 
}

.gradient-img-carousel{
    width: 92.5%;
    position: absolute;
    z-index: 1;
}

@media screen and (max-width: 1300px) {
    .gradient-img-carousel{
        width: 90%;
    }
}  

.dropdown-menu a{
    color: #3D3D3D !important;
}

.dropdown-item:focus, .dropdown-item:hover {
    background-color: #D3BD22;
}


.slick-prev:before, .slick-next:before {
    font-size: 40px;
}

.shadow{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.title-image img{
    width: 30px;
}

.hyperlinks {
    font-size: 14px;
}

.calendar-items-section .calendar-items .item{
    background-color: #FAF8F1;
    border-radius: 14px; }

.calendar-items-section .calendar-items .item:hover{
    background-color: #d3bd22 !important;
}

.calendar-items-section .calendar-items .item .num-side{
    border-right: 1px solid #707070;
}

.calendar-items-section .title-section{
    background-color: #3bb49f;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

.calendar-items-section .calendar-items{
    background-color: #005b50;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    padding-bottom: 1.4rem !important;
}

.calendar-items-section .card{
    border-radius: 20px;
}

.calendar-items-section .num-side h6{
    font-size: 12px;
}

.calendar-items-section .date-side .date{
    font-size: 16px;
}

@media (min-width: 992px){
.bottom-content-section {
    margin-right: 4rem!important;
    margin-left: 4rem!important;
}
}

@media screen and (min-width: 992px) and (max-width: 1366px){
    .calculator-section .card-bottom-body .img-logo{
        width: 112px;
        height: 112px;
    }

    .calculator-section .card-bottom-body img {
        width: 80px;
        height: 80px;
    }  
    
    .navbar-brand img {
        width: 278px;
        height: 100px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1024px){
    .card-detail .card:last-child{
        display: none;
    }
}