@import url("pages.css");
@import url("template.css");
@import url("animation.css");

/*---------------------------*/
/* CSS Line(Global Section) */
/*-------------------------*/
* {
margin: 0;
padding: 0;
}

body {
font-size: 15px;
font-family: var(--font-Josefin-Sans);
font-weight: 400;
line-height: 1.8;
overflow-x: hidden;
background-color: var(--color-body);
/* background-image: url('../img/vector/islamic-bg-op4.svg'); */
}

p {
font-size: 1rem;
line-height: 1.375em;
color: var(--color-black);
}

h1 {
font-family: var(--font-Poiret-One);
font-weight: normal;
font-size: 2.5rem;
color: var(--color-dark);
}

/*--------------------------*/
/* CSS Line (Root Section) */
/*------------------------*/
:root {
/* COLOR */
--color-body: #f2f6fb;
--color-soft-green: #e4f0d3;
--color-white: #fff6f6;
--color-grey: #f1f1f1;
--color-medium-grey: #61677a;
--color-black: #0f0f0f;
--color-semi-dark: #212529;
--color-dark: #000000;
--color-yellow: #ffc436;
--color-maroon: #872341;
--color-blue: #1a72d0;
--color-soft-blue: #8eaccd;
--color-dark-blue: #144272;

/* FONT */
--font-Abril-Fatface: "Abril Fatface", serif;
--font-Beau-Rivage: "Beau Rivage", cursive;
--font-Kaushan-Script: "Kaushan Script", cursive;
--font-Josefin-Sans: "Josefin Sans", sans-serif;
--font-Poiret-One: "Poiret One", sans-serif;
--font-Philosopher: "Philosopher", sans-serif;

/* TRANSITION */
--tran-025s: 0.25s;
--tran-050s: 0.5s;
--tran-075s: 0.75s;
--tran-1s: 1s;
}

/*-------------------------------*/
/* CSS Line(Components Section) */
/*-----------------------------*/
/* Background */
.bg-grey {
background-color: var(--color-grey);
}
.bg-dark-blue {
background-color: var(--color-dark-blue);
}
.bg-blue {
background-color: var(--color-blue);
}
.bg-soft-blue {
background-color: var(--color-soft-blue);
}

/* Under Line */
.under-line-1 {
height: 2px;
width: 8rem;
background-color: var(--color-yellow);
border: none;
opacity: 1;
}
.under-line-2 {
height: 2px;
width: 16rem;
background-color: var(--color-yellow);
border: none;
opacity: 1;
}
.under-line-max {
height: 2px;
width: 100%;
background-color: var(--color-yellow);
border: none;
opacity: 1;
}

/* Fonts Family */
.font-Abril-Fatface {
font-family: var(--font-Abril-Fatface);
}

.font-Beau-Rivage {
font-family: var(--font-Beau-Rivage);
}

.font-Kaushan-Script {
font-family: var(--font-Kaushan-Script);
}

.font-Poiret-One {
font-family: var(--font-Poiret-One);
}

.font-Philosopher {
font-family: var(--font-Philosopher);
font-weight: 700;
}

/* Text Color */
.text-yellow {
color: var(--color-yellow);
}

/* Font Size */
.fs-x1 {
font-size: 3rem;
}

/* Text Responsive */
.text-responsive {
font-size: calc(10% + 0.5vw + 0.5vh);
}

/* Block Quotes*/
.quote-box {
  border-left: 5px solid var(--color-blue);
  padding: 15px 20px;
  margin: 20px 0;
  font-style: italic;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.15);
}

.quote-box p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
}

.quote-box span {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  color: var(--color-blue);
}

/*Share*/
.share-floating {
  position: fixed;
  right: 15px;
  bottom: 100px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.share-floating a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
  transition: transform 0.2s;
}
.share-floating a:hover {
  transform: scale(1.1);
}

.share-floating a.facebook { background: #3b5998; }
.share-floating a.twitter { background: #1da1f2; }
.share-floating a.whatsapp { background: #25d366; }
.share-floating a.telegram { background: #0088cc; }

/* 📱 Mobile mode: jadikan bar horizontal di bawah */
@media (max-width: 768px) {
  .share-floating {
    flex-direction: row;
    justify-content: center;
    right: 0;
    left: 0;
    bottom: 15px;
    gap: 15px;
  }
}

/*-------------------------------------------------*/
/* Small devices (landscape phones, 576px and up) */
/*-----------------------------------------------*/
@media (max-width: 576px) {
.centerOnMobile {
text-align: center;
}

.fs-5 {
font-size: 1rem !important;
}

#profil .vm-img {
width: 40%;
}

.nav-item a {
font-size: 1rem !important;
}
}

/*-----------------------------------------*/
/* Medium devices (tablets, 768px and up) */
/*---------------------------------------*/
@media (max-width: 767px) {
}

/*-----------------------------------------*/
/* Large devices (desktops, 992px and up) */
/*---------------------------------------*/
@media (min-width: 992px) {
}

/*--------------------------------------------------*/
/* X-Large devices (large desktops, 1200px and up) */
/*------------------------------------------------*/
@media (min-width: 1200px) {
#profil .vm-img {
width: 60%;
}
}