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

:root {
    --black: #1c1c1c;
    --gray: #7E7E7E;
    --gray-light: #E4E4E4;
    --red: #b30000;
    --font-size-base: 1rem;
    --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
    --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
    --font-size-xl: clamp(1.44rem, 2.38vw + 1.85rem, 3.75rem); /*font responsive */
    --border-radius: 10px;
}

body{
    font-family: 'Poppins', sans-serif;
    color: var(--black);
    font-size: var(--font-size-base);
    background-color: #FAF5EE;
    /* background-image: url("/img/old-wall.png"); */
    margin: 0;
}

a { color: #FAF5EE;}
h1 {font-size: var(--font-size-xl);}
h2 {font-size: var(--font-size-xl);}
h3 {font-size: var(--font-size-md);}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    font-family: 'Poppins', sans-serif;
    font-size: var(--font-size-base);
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0.7rem 0.75rem;

}

.btn {
    background-color: var(--black);
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

.btn-delete {
    padding: 10px 16px;
    background-color: var(--red);
}

img {
    width: 100%;
    height: auto;
}

/* Layout */
.container {
    max-width: 982px;
    margin: 0 auto;
    padding: 0 10px;

}
.main {
    padding: 20px 0;
}

.home-img {
    max-height: 528px;
    filter: drop-shadow(0px 44px 34px rgba(0,0,0,0.25));
    overflow: hidden;
    border-radius: var(--border-radius);
}

header {
    background-color: black;
    display: grid;
    align-items: center;
    /* grid-template-columns: 1fr 1fr; */
    /* grid-template-rows: auto; */
    padding-top: 10px;
    /* grid-template-areas: 
    "logo logo"
    "a b"
    "c d"
    "e f"
    ; */
}

.service-space-1 {
    grid-area: a;
    font-size: 16px;
    color: whitesmoke;
    font-weight: 700;
}
.service-space-2 {
    grid-area: b;
    font-size: 16px;
    color: whitesmoke;
    font-weight: 700;
}
.service-space-3 {
    grid-area: c;
    font-size: 16px;
    color: whitesmoke;
    font-weight: 700;
}
.service-space-4 {
    grid-area: d;
    font-size: 16px;
    color: whitesmoke;
    font-weight: 700;
}
.service-space-5 {
    grid-area: e;
    font-size: 16px;
    color: whitesmoke;
    font-weight: 700;
}
.service-space-6 {
    grid-area: f;
    font-size: 20px;
    color: whitesmoke;
    font-weight: 700;
}
.service-space-7 {
    grid-area: g;
    font-size: 20px;
    color: whitesmoke;
    font-weight: 700;
}
.service-space-8 {
    grid-area: h;
}

#home-align {
    height: 600px !important; 
  }
  
  .services-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    'logo a b c d e';
    grid-gap: 10px;
    justify-items: center;
    align-items: center;
    width:95%;
    margin-bottom: 1rem;
  }
  @media (max-width: 768px) {
    .services-container {
        font-size: 10px;
      grid-template-columns:  1fr 1fr;
      grid-template-areas:
      'logo logo'
      'a b'
      'c d'
      'e e';
      
        
    }
  }
  /* @media (min-width: 900px) {
    .service-container { grid-template-columns: repeat(6, 1fr); }
  } */
  
  .service-space {
    padding: 20px;
    background-color: #000000;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 5px;
    text-align: center;
    color: whitesmoke;
    font-size: 16px;
    font-weight: 600;
  }
  .divider {
    height: 100px;
    width: 1px;
    background-color: rgb(0, 221, 255);
  }

@media (max-width: 768px) {
    .divider {
        visibility: hidden;
}  .service-space {
    font-size: 10px;
}
}

@media (max-width: 768px) {
    .service-space-1,.service-space-2,.service-space-3,.service-space-4,.service-space-5,.service-space-6 {
        font-size: 10px;
        text-align: center;
    }
}
/* .service-space {
    display: none;
}
.service-space.active {
    display: block;
    transition: opacity 0.5s ease-in-out;
} */

/* @media only screen and (min-width: 768px) {
    .header {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: 
        "logo menu";
        font-size: 10px;
    }
} */

.header__logo {
    grid-area: logo;
    /* font-weight: 800;
    font-size: 25px;
    text-decoration: none; */
}


.header__logo:hover {
    text-decoration: underline;
}
.header__nav {
    grid-area: menu;
    display: flex;
    justify-content: center;
    
}
.header__button {
    grid-area: button;
    display: flex;
    justify-content: end;
}

.header__button button {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    border: 0;
    padding: 6px 12px;
    background: none;
    border-radius: var(--border-radius);
    border: 2px solid transparent;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--black);
}
.header__button button:hover {
    border: 2px solid var(--black);
}

/* Header & navigation */
.header__nav ul {
    list-style-type: none;
    display: flex;
    gap: 1rem;
    font-weight: 600;
    padding: 0;
}
.header__nav ul a {
    padding: 10px;
    text-decoration: none;
}

.header__nav ul a:hover {
    padding: 10px;
    text-decoration: underline;
}

.header__nav ul a.active {
    color: var(--gray);
}

.author {
    padding: 10px 0;
    text-align: center;
}

.author__heading {
    margin-top: 10px;
    margin-bottom: 5px;
}

.author__body {
    font-size: var(--font-size-md);
    margin: 5px 0 40px;
}

/* Home article */

.articles__heading {
    margin-top: 4rem;
    font-weight: 400;
}

.article-ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
    display: flex;
    flex-direction: column;
}

.article-list__date {
    font-size: var(--font-size-base);
    color: var(--gray);
    width: 200px;
    display: inline-block;
}

.article-ul li a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    margin: 18px 0;
}

@media only screen and (min-width: 768px) {
    .article-ul li a {
        flex-direction: row;
        align-items: center;
    }
    .article-list__date{
        text-align: right;
    }
}

.article-ul li {
    font-size: 24px;
    cursor: pointer;
    transition: filter 0.1s;
}

.article-ul li:not(:lastchild) {
    border-bottom: 1px solid var(--gray-light);
}

.article-ul li:hover {
    filter: none;
}

.article-ul:hover li {
    filter: blur(3px);
}

.article-ul:hover li:hover {
    filter: none;
}

.pagination {
    font-size: 1.3rem;
    color: var(--gray);
    text-decoration: none;
    margin-top: 40px;
    display: inline-block;

}
.pagination:hover {
    color: var(--black);
}

.article {
    white-space: pre-wrap;
}

.footer {
    margin: 4rem ;
    text-align: center;
}

/* Searchbar */

.searchBar {
    visibility: hidden;
    transform: translateY(-100px);
    background-color: var(--black);
    padding: 4px 0;
    position: absolute;
    left: 0;
    right: 0;
}

.searchBar.open {
    transform: translateY(0);
    transition: transform 0.1s;
}

.searchBar input {
    margin: 0;
    padding: 0;
}

#searchClose {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--gray-light);
    padding: 15px;
}

/* Dashboard admin */
.admin-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .admin-posts {
    padding: 0;
    margin: 0;
  }
  
  .admin-post-controls form {
    display: inline-block;
  }
  
  .admin-post-controls .btn  {
    display: inline-block;
    background-color: var(--black);
    color: var(--gray-light);
    border: 0;
    text-decoration: none;
    font-size: .8rem;
    padding: 4px 8px;
    line-height: 2;
  }
  
  .admin-posts li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
  }

/* styles.css */

  /* .testimonial-container {
    display: flex;
    justify-content: space-around;
    margin: 50px;
  }
  
  .testimonial {
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 300px;
  } */
  
  .avatar {
    border-radius: 50%;
    margin-bottom: 20px;
  }
  
  p {
    font-style: italic;
  }
  
  h3 {
    color: #333;
  }

#home-size {
    height: 600px !important;
}

/* Testimonial */

#testimonial-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    overflow: hidden;
    width: 100%; /* Set the width of the slider */
    height: 200px; /* Set the height of the slider */
    /* border: 1px solid #ccc; */
    border-radius: 5px;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 768px) {
    #testimonial-slider {

        height: 450px;
}
}
.testimonial {
    opacity: 0;
    padding: 20px;
    background-color: #f5f5f5;
    width: 100%; /* Set the width of each testimonial */
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease;
}

.testimonial.active {
    opacity: 1;
}

.testimonial p:first-child {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
    .testimonial p:first-child {

    font-size: 15px;
}
}
.testimonial p:last-child {
    font-size: 14px;
    color: #777;
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

 /* Style for the arrow */
 .arrow {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 9999;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.arrow:hover {
    opacity: 1;
}

/* Style for the arrow shape */
.arrow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #000;
}

/* Style for the arrow animation */
.arrow-hidden {
    display: none;
}

.arrow-show {
    animation: scrollDown 1.5s infinite;
}

@keyframes scrollDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(15px);
    }
}
      
.input-row {
    display: flex;
    justify-content: center;
    white-space: nowrap;
  

}
.input-field {
    margin: 10px;
    margin-top: 0;
   
    /* text-align: center; */
    
}
input[type="number"] {
    padding: 5px;
    width: 100px;
}
.input-column {
    display: flex;
    flex-direction: column;
    box-sizing:border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    background-color:#fff8a32e;
    font-size:18px;
    font-family:ubuntu;
    margin:1rem;
    margin-top:0.5rem;
    /* width:100%; */
    
}
form {
    
    margin: 0 auto;
}
@media only screen and (max-width: 600px) {
  .input-row {
    justify-content: left;
    overflow-x: auto;      
  }


  .input-column {
      /* flex-direction: row; */
      margin:0;
      font-size:15px;
      
  }
}
.read-only {
pointer-events: none; /* Disable mouse events */
background-color: #f0f0f0; /* Change background color to indicate read-only */
color: #777; /* Adjust text color for better readability */

}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#loading-bar {
    display: none; /* Initially hide the loading bar */
    height: 4px;
    background-color: #4CAF50;
}

.center-button {
    text-align: center; /* Center align the button */
}
.center-button button {
    display: inline-block; /* Make the button a block element to center it */
    margin: 2rem;
}

.coloumn {
    columns:2;
    -webkit-columns: 2;
    -moz-columns:2
}
.info-icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
    white-space: pre;
  }
  
  .info-icon i {
    font-size: 18px;
    color: #000000; /* blue color */
    
  }
  
  .info-icon::after {
    content: attr(data-text);
    position: absolute;
    background: #000;
    color: #fff;
    padding: 2%; /* Adjust the padding as needed */
    border-radius: 5px;
    top: 110%; /* Adjust the distance from the icon */
    left: 50%; /* Move the tooltip to the left to prevent overlapping with content on the right side */
    transform: translateX(-17%);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
    /* margin-left: 14rem; */
    z-index: 9999; /* Ensure the additional information is above all other elements */
    /* max-width: 80vw; Set a maximum width to prevent content from being cut off */
  }
  
  /* @media only screen and (max-width: 600px) {
    .info-icon::after::after {
        position: relative;
    }
  } */

  .info-icon.active::after {
    visibility: visible;
    opacity: 1;
  }

  .services-container a {
    align-self: baseline;
    text-align: center; /* To center the text horizontally */
    /* margin-top: -1rem; */
}

table {
    border-collapse: collapse;
    border: 2px solid rgb(140 140 140);
    font-family: sans-serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-left: auto;
    margin-right: auto;
  }
  
  caption {
    caption-side: bottom;
    padding: 10px;
    font-weight: bold;
    text-align: center;
  }
  
  thead,
  tfoot {
    background-color: rgb(228 240 245);
  }
  
  th,
  td {
    border: 1px solid rgb(160 160 160);
    padding: 8px 10px;
  }
  
  td:last-of-type {
    text-align: center;
  }
  
  tbody > tr:nth-of-type(even) {
    background-color: rgb(237 238 242);
  }
  
  tfoot th {
    text-align: right;
  }
  
  tfoot td {
    font-weight: bold;
  }
  
  .captcha {
    display: flex;
    justify-content: center;
    margin: 2rem;
  }

  #cal {
    width: 50px;
    height: 50px;
    -webkit-animation: NAME-YOUR-ANIMATION 1s infinite;  /* Safari 4+ */
    -moz-animation: NAME-YOUR-ANIMATION 1s infinite;  /* Fx 5+ */
    -o-animation: NAME-YOUR-ANIMATION 1s infinite;  /* Opera 12+ */
    animation: NAME-YOUR-ANIMATION 1s infinite;  /* IE 10+, Fx 29+ */

  }
  
  @-webkit-keyframes NAME-YOUR-ANIMATION {
    0%, 49% {
      background-color: rgb(255, 230, 0);
      /* border: 3px solid #e50000; */
    }
    50%, 100% {
      background-color: #FAF5EE;
      /* border: 3px solid rgb(117, 209, 63); */
    }
  }