@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* *,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
} */

html {
scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
}

/* NAVIGASI BAR*/
nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	background-color: #fff;
	/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
	/* max-width: 1300px; */
	margin: 0 auto;
    border-bottom: #2C1B47 solid 3px;
}

.wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.wrapper .logo{
    width: 25vw;
    margin-left: 300px;
}

.wrapper .logo a {
    color: #333;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
}

.wrapper .logo-gbr{
    height: 40px;
    width: 33px;
    float: left;
    background: transparent;
    margin-top: 5px;
    margin-right: 5px;
}

.wrapper .logo-teks1{
    font-weight: bolder;
    font-size: 25px;
    text-align: left;
    line-height: 36px;
}

.wrapper .logo-teks2{
    font-size: 14px;
    text-align: left;
    font-weight: lighter;
    margin-top: -8px;
    margin-bottom: 9px;
    line-height: 20px;
}

/* .searchbar {
	display: inline-block;
	align-items: center;
	background-color: #2C1B47;
	border-radius: 50px;
	padding: 5px 10px;
	max-width: 400px;
	width: 100%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
} */

/* .searchbar input {
	width: 100%;
	padding: 0px;
	border: none;
	outline: none;
	border-radius: 50px;
	font-size: 14px;
	background-color: transparent;
	color: #fff;
} */

/* .searchbar input::placeholder {
	color: #e5e5e5;
} */

/* .searchbar button {
	background-color: transparent;
	color: #fff;
	border: none;
	margin-left: 10px;
	font-size: 18px;
	cursor: pointer;
} */

.searchbar {
    background-color: #2C1B47;
    position: relative;
    border-radius: 30px;
    padding: 3px 50px 3px 10px;
    margin-right: 350px;
  }
  .search-box {
    background-color: transparent;
    outline: none;
    height: 35px;
    font-size: 15px;
    border: 0;
    width: 100%;
    color: #fff;
  }
  .search-button {
    position: absolute;
    right: 4px;
    top: 4px;
    background-color: #2C1B47;
    border-radius: 50%;
    border: 0;
    color: #FFF;
    width: 35px;
    height: 35px;
    outline: 0;
  }

.search-toggle {
	display: none;
	font-size: 24px;
	color: #2C1B47;
	cursor: pointer;
}

@media (max-width: 768px) {
	.searchbar {
		display: none; 
		width: 50%; 
        /* margin-right: -30px; */
	}

	.search-toggle {
		display: block;
	}
}


/* nav{
	position: relative;
	z-index: 99;
	width: 100%;
	height: 9vh;
	background: rgb(255, 255, 255);
    border-bottom: #2C1B47 3px solid;
}

nav .wrapper{
	position: relative;
    max-width: 1300px;
    padding: 0px 30px;
    height: 9vh;
    line-height: 60px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wrapper .logo{
    width: 25vw;
}

.wrapper .logo a {
    color: #333;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
}

.wrapper .logo-gbr{
    height: 40px;
    width: 33px;
    float: left;
    background: transparent;
    margin-top: 5px;
    margin-right: 5px;
}

.wrapper .logo-teks1{
    font-weight: bolder;
    font-size: 25px;
    text-align: left;
    line-height: 36px;
}

.wrapper .logo-teks2{
    font-size: 14px;
    text-align: left;
    font-weight: lighter;
    margin-top: -8px;
    margin-bottom: 9px;
    line-height: 20px;
} */

/* Serach Bar  */
    /* .searchbar {
    overflow: hidden;
    float: right;
  }

  .searchbar button {
    position: absolute;
    top: 7px;
    border: none;
    background-color: transparent;
    color: white;
    margin-top: 5px;
    margin-left: -40px;
    z-index: 10;
}

  input[type=text] {
    padding: 9px;
    border: none;
    margin: 16px 14px;
    font-size: 18px;
    background-color: #2C1B47;
    height: 40px;
    text-align: left;
    text-indent: 8px;
    outline: none;
    color: white;
  }

  .searchbar , input[type=text] {
    border-radius: 50px;
  } */

/* end navbar */

/* floating button sosmed */
.act-btn{
    background: #2C1B47;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    text-decoration: none;
    transition: ease all 0.3s;
    position: fixed;
    right: 30px;
    bottom:130px;
    box-shadow: 2px 2px 3px #999;
    z-index: 99;
}

.act-btn-yt{
    background:#2C1B47;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    text-decoration: none;
    transition: ease all 0.3s;
    position: fixed;
    right: 30px;
    bottom:190px;
    box-shadow: 2px 2px 3px #999;
    z-index: 99;
}

.act-btn-x{
    background: #2C1B47;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    text-decoration: none;
    transition: ease all 0.3s;
    position: fixed;
    right: 30px;
    bottom:310px;
    box-shadow: 2px 2px 3px #999;
    z-index: 99;
}

.act-btn-wa{
    background: #2C1B47;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    text-decoration: none;
    transition: ease all 0.3s;
    position: fixed;
    right: 30px;
    bottom:370px;
    box-shadow: 2px 2px 3px #999;
    z-index: 99;
}

.act-btn-fb{
    background: #2C1B47;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    text-decoration: none;
    transition: ease all 0.3s;
    position: fixed;
    right: 30px;
    bottom:250px;
    box-shadow: 2px 2px 3px #999;
    z-index: 99;
}
.act-btn:hover, .act-btn-fb:hover , .act-btn-x:hover, .act-btn-yt:hover, .act-btn-wa:hover{
    background: #ba8de0;
}

/* end floating button */

/* button kategori berita */

    .button-kategori button, .container .btn-light {
        /* display: inline; */
        background-color: #2C1B47;
        border: none;
        color: white;
        padding: 12px 16px;
        font-size: 16px;
        cursor: pointer;
        margin: 20px 4px;
        border-radius: 50px;
    }
    .button-kategori button:hover {
        background-color: #ba8de0;
    }

  .button-kategori {
    display: flex;               
    gap: 5px;                   
    overflow-x: auto;            
    white-space: nowrap;         
    padding: 10px 10px 10px 0px;
    scroll-behavior: smooth;     
    }

    .button-kategori::-webkit-scrollbar{
        display: none;
    }

    /* end button kategori */

    /* isi berita  */
    
    .kategori-berita p{
        font-size: 25px;
        font-weight: bolder;
        color: #2C1B47;
        margin: auto;
    }

    /* card for category looping */

    .article-berita .button-kategori, .article-berita .berita-terbaru, .article-berita .berita-populer, .article-berita .berita-kategori, .container-detail{
        /* margin-left: 100px;
        margin-right: 100px; */
        max-width: 1300px;
        /* background: #2c2041; */
            /* box-shadow: var(--box-shadow); */
            padding: 25px;
            position: relative;
            margin: auto;
    }

    .container-detail img{
        width: 100%;
        padding: 10px 0;
    }

    .container-detail p{
        font-size: 18px;
        text-align: justify;
    }

    .horizontal{
        display: flex;
        gap: 30px;                   
        overflow-x: auto;            
        padding: 10px;
        margin-left: 10px;
        scroll-behavior: smooth;   
    }
    .horizontal::-webkit-scrollbar{
        display: none;
    }
  
  .containers {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-block: 2rem;
      gap: 2rem;
      z-index: 0;
  }
  
  .card__image {
      /* width: clamp(22rem, calc(22rem + 2vw), 24rem); */
      width: 100%;
      height: 230px; 
      /* overflow: hidden; */
      /* position: relative; */
      /* border-radius: 20px; */
  }
  
  .card .card__image img {
      /* max-width: 100%;
      height: 100%;
      object-fit: cover; 
      display: block; */
        max-width: 100%;
        max-height: 100%;
        display: block;
        object-fit: contain;
  }
  
  .containers .card {
      display: flex;
      margin: 10px;
      flex-direction: column;
      width: clamp(22rem, calc(22rem + 2vw), 24rem);
      /* height: fit-content; */
      overflow: hidden;
      box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.1);
      border-radius: 1em;
      border: none;
      /* background: #ECE9E6; */
      /* background: linear-gradient(to right, #FFFFFF, #ECE9E6); */
  }
  
  .card__body {
      /* padding: 0.5rem; */
      padding: 10px 20px;
      display: flex;
      flex-direction: column;
      gap: 0.25rem; 
      margin-bottom: 0; 
  }
  
  .tag {
      align-self: flex-start;
      padding: .25em .75em;
      border-radius: 1em;
      font-size: .75rem;
  }
  
  .tag + .tag {
      margin-left: .5em;
  }
  
  .tag-blue {
      background: #56CCF2;
      background: linear-gradient(to bottom, #2F80ED, #56CCF2);
      color: #fafafa;
  }
  
  .tag-brown {
      background: #D1913C;
      background: linear-gradient(to bottom, #FFD194, #D1913C);
      color: #fafafa;
  }
  
  .tag-red {
      background: #cb2d3e;
      background: linear-gradient(to bottom, #ef473a, #cb2d3e);
      color: #fafafa;
  }
  
  .card__body h4 {
      font-size: 1.1rem;
      text-transform: capitalize;
      text-align: justify;
      margin-top: 10px;
  }
  
  .card__body p {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.4em; 
      max-height: 4.2em; 
      text-align: justify;
      font-size: 14px;
  }

  .containers .card .card__body h4{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .card__footer {
      display: flex;
      /* padding: 0.5rem; */
      /* margin-top: 0.5rem; */
      padding: 10px 20px;
      margin-top: 0px;
      position: absolute;
      bottom: 0;
  }
  
  .user {
      display: flex;
      gap: 0.5rem;
  }
  
  .user__image {
      border-radius: 50%;
      width: 25px;
      height: 25px;
      margin-top: 5px;
  }

  .user__info > h5 {
      color: #000;
      font-size: 14px;
      font-weight: 700;
      /* margin-top: -10px; */
      /* padding-bottom: -10px; */
  }

  .user__info > p {
    color: #000;
    font-size: 14px;
    /* margin-top: -10px; */
    /* padding-bottom: -10px; */
}

  .user__info .tgl_user, .user__info small{
    margin-top: -20px;
  }
  

    .card:hover {
      box-shadow: 0 0.2rem 1.5rem rgba(0, 0, 0, 0.2);
      transform: translateY(-0.5rem);
      transition: 0.3s ease;
  }
  
  .tag:hover {
      filter: brightness(0.9);
      cursor: pointer;
  }

   /* Next & previous buttons */
   .horizontal .prev, .horizontal .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        /* padding: 16px; */
        margin-top: -22px;
        /* color: white; */
        color:#2C1B47;
        font-weight: bold;
        font-size: 40px;
        transition: 0.6s ease;
        /* border-radius: 0 3px 3px 0; */
        user-select: none;
        text-decoration: none;
        border-radius: 50%;
        /* background-color: #2C1B47; */
        width: 50px;
        height: 50px;
        line-height: 50px;
    }
    .horizontal .next {
        padding-left: 15px;
        right: -24px;
        /* border-radius: 3px 0 0 3px; */
    }
    .horizontal .prev {
        padding-left: 11px;
        left: -27px;
    }

    @media only screen and (max-width: 600px) {
        .wrapper .logo{
            width: 200px;
            margin-left: 0px;
        }

        .mobile-item .logo-teks1{
            font-size: 12px;
        }
    
        .mobile-item .logo-teks2{
            font-size: 8px;
        }
    
        .mobile-item .logo-gbr{
            height: 30px;
            width: 23px;
            margin-top: 10px;
            margin-right: 3px;
        }

        .searchbar{
            margin-right: 0px;
        }

        /* Serach Bar  */  
        /* input[type=text] {
            margin: 8px 6px;
            font-size: 12px;
            height: 30px;
            width: 130px;
        }

        .searchbar button {
            top: 4px;
        } */

        /* Button horizontal kategori */
        
        .button-kategori button {
            padding: 8px 12px;
            font-size: 12px;
            margin: 0px 4px;
        }
        
        .button-kategori {
            display: flex;               
            gap: 2px;      
            padding: 10px 10px 10px 0px;
        }
        
        .containers .card {
            /* Full width on smaller screens */
            /* flex: 1 0 90%; */
            flex: 0 1 auto;
            width: auto;
        }
        .container .terbaru-swiper-button-next, .container .terbaru-swiper-button-prev,
        .container .populer-swiper-button-next, .container .populer-swiper-button-prev{
            /* visibility: hidden; */
            /* top: 50%; */
            margin-top: -22px;
            font-size: 40px;
            width: 40px;
            height: 40px;
            line-height: 40px;
        }
        .container .terbaru-swiper-button-next, .container .populer-swiper-button-next {
            right: -27px;
            float: right;
            padding-left: 9px;
        }
        .container .terbaru-swiper-button-prev, .container .populer-swiper-button-prev {
            left: -29px;
            padding-left: 7px;
        }
        .act-btn-fb{
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 25px;
            right: 30px;
            bottom:210px;
        }
        .act-btn-x{
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 25px;
            right: 30px;
            bottom:260px;
        }
        .act-btn-yt{
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 25px;
            right: 30px;
            bottom:160px;
        }

        .act-btn-wa{
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 25px;
            right: 30px;
            bottom:310px;
        }

        .act-btn{
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 25px;
            right: 30px;
            bottom:110px;
        }
        .card__image {
            /* width: 100%; */
            height: 190px; 
        }
    }

    @media only screen and (min-width: 768px) and (max-width: 992px){
        .containers .card {
            flex: 0 1 auto;
            /* width: auto; */
        }
        .wrapper .logo{
            width: 300px;
            margin-left: 0px;
        }
        .mobile-item .logo-teks1{
            font-size: 16px;
        }
    
        .mobile-item .logo-teks2{
            font-size: 12px;
        }
    
        .mobile-item .logo-gbr{
            height: 30px;
            width: 23px;
            margin-top: 10px;
            margin-right: 3px;
        }
        /* .searchbar button {
            top: 13px;
        } */
        .searchbar{
            margin-right: 0px;
        }
    }

    @media screen and (min-width: 992px) and (max-width: 1280px) {
        .containers .card {
            flex: 0 1 auto;
            width: auto;
        }
        .wrapper .logo{
            width: 500px;
            margin-left: 0px;
        }
        .containers .card {
            flex: 0 1 auto;
            width: auto;
        }
        .searchbar{
            margin-right: 0px;
        }
        /* .searchbar button {
            top: 1px;
        } */
        
    }

    @media screen and (min-width: 1281px) and (max-width: 2000px) {
        .containers .card {
            flex: 0 1 auto;
            width: auto;
        }
    }