/*
Theme Name: Zeireed
Description: WordPress Theme for Zeireed
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, light
Text Domain: am
*/

@import url('https://fonts.googleapis.com/css2?family=Calistoga&display=swap');
.single-post-body ul {
  padding-left: 20px;
}
.single-post-body h1, .single-post-body h2, .single-post-body h3, .single-post-body h4, .single-post-body h5, .single-post-body h6{
	margin-top:20px;
}
.single-post-body p{
	margin-bottom:10px;
}

    .project-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        border: 3px solid #57608ADE;
        margin: 4rem 0;
        border-radius: 8px;
        box-shadow:0px 12px 80px -6px rgba(41, 91, 117, 0.15);
    }
    .project-box {
        padding: 6px 30px;
        border-right: 3px solid #57608ADE;
        border-bottom: 3px solid #57608ADE;
        padding-bottom: 40px;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 40px;
        text-align: center;
        background: linear-gradient(181.63deg, #EDEDED 0.9%, #E9E9E9 81.06%, #FFFFFF 94.88%);
    }
    .project-box-icon {
        display: flex;
        justify-content: center;
        background: linear-gradient(181.63deg, #EDEDED 0.9%, #E9E9E9 81.06%, #FFFFFF 94.88%);
        margin: 0 auto;
        margin-top: -30px;
        padding: 6px 16px;
        border: 1px solid rgb(59 78 101/var(--tw-border-opacity,1));
        border-radius: 4.375rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        position: relative;
    }
    .project-box-icon::before {
        position: absolute;
        content: '';
        top: 110%;
        width: 29px;
        height: 20px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 21'><path fill-rule='evenodd' clip-rule='evenodd' d='M0.510775 17.1576C0.102241 17.0069 -0.103321 16.5628 0.0516402 16.1656L5.85336 1.29451C6.00832 0.897308 6.46512 0.69745 6.87366 0.848114C7.28219 0.998773 7.48776 1.4429 7.33279 1.8401L1.53107 16.7112C1.37611 17.1084 0.91931 17.3082 0.510775 17.1576Z' fill='%23323A61'/><path fill-rule='evenodd' clip-rule='evenodd' d='M7.59797 20.4459C7.18871 20.3723 6.91439 19.9677 6.98528 19.5423C7.28114 17.7668 7.56148 15.9777 7.84271 14.183C8.4902 10.0509 9.14241 5.88871 9.99971 1.79166C10.088 1.36981 10.4886 1.10222 10.8944 1.19396C11.3003 1.28571 11.5578 1.70205 11.4695 2.1239C10.6209 6.17932 9.97924 10.2746 9.33484 14.3874C9.05211 16.1919 8.76885 17.9998 8.46736 19.8091C8.39647 20.2345 8.00724 20.5196 7.59797 20.4459Z' fill='%23323A61'/><path fill-rule='evenodd' clip-rule='evenodd' d='M15.2243 0.88786C15.6308 0.855307 15.9874 1.18313 16.0207 1.62008C16.3549 6.00306 16.8559 10.3642 17.3588 14.7423C17.5609 16.5022 17.7634 18.2647 17.9554 20.0325C18.0028 20.4681 17.7127 20.8598 17.3075 20.9074C16.9024 20.955 16.5356 20.6405 16.4882 20.205C16.2987 18.46 16.0977 16.7108 15.8964 14.9583C15.3921 10.5673 14.8853 6.15548 14.5485 1.73797C14.5152 1.30102 14.8177 0.920416 15.2243 0.88786Z' fill='%23323A61'/></svg>") no-repeat center center;
    }
    .project-box-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .project-box-content h4 {
        font-size: 24px;
        font-weight: 700;
        color: #323A61;
    }
    .project-box-content p {
        color: #7f7979;
    }


    @media (min-width: 901px) { 
        .project-box:nth-child(3n) {
            border-right: none;
        }
    }
    @media (min-width: 601px) and (max-width: 900px) { 
        .project-box:nth-child(2n) {
            border-right: none;
        }
    }
    @media (max-width: 600px) { 
        .project-box {
            border-right: none;
        }
    }

    @media (min-width: 901px) {
        .project-box:nth-last-child(-n + 3) {
            border-bottom: none;
        }
    }
    @media (min-width: 601px) and (max-width: 900px) {
        .project-box:nth-last-child(-n + 2) {
            border-bottom: none;
        }
    }
    @media (max-width: 600px) {
        .project-box:last-child {
            border-bottom: none;
        }
    }

    .project-box:first-child {
        border-top-left-radius: 8px;
    }
    @media (min-width: 901px) {
        .project-box:nth-child(3) {
            border-top-right-radius: 8px;
        }
        .project-box:nth-child(4) {
            border-bottom-left-radius: 8px;
        }
        .project-box:nth-child(6) {
            border-bottom-right-radius: 8px;
        }
    }
    @media (min-width: 601px) and (max-width: 900px) {
        .project-box:nth-child(2) {
            border-top-right-radius: 8px;
        }
        .project-box:nth-last-child(2) {
            border-bottom-left-radius: 8px;
        }
        .project-box:last-child {
            border-bottom-right-radius: 8px;
        }
    }
    @media (max-width: 600px) {
        .project-box:first-child {
            border-top-right-radius: 8px;
        }
        .project-box:last-child {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }
    }

/* contact page tab css  */

.contact-tab-item {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%), linear-gradient(0deg, #EDEEF2, #EDEEF2), #EBECF0;
  background-blend-mode: soft-light, normal, normal;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: -10px -10px 20px #FAFBFF, 10px 10px 20px #A6ABBD;
  border-radius: 40px;
  padding: 13px 20px;
  color: var(--primary-color);
  cursor: poPoppins;
  position: relative;
  transition: all 0.4s ease-in-out;
  list-style: none;
  margin-bottom: 16px;
}

.contact-tab-item.active {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%), linear-gradient(90.38deg, #ED6387 -2.94%, #FBAC3E 128.97%), #EBECF0;
  background-blend-mode: soft-light, normal, normal;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: -2px -4px 45px #FAFBFF, 4px -2px 20px #A6ABBD;
  border-radius: 40px;
  color: #fff;
  transition: all 0.4s ease-in-out;
}
.contact-tab-content.active {
  opacity: 1;
  margin-top: 24px;
  margin-bottom:1.5rem;
}
.contact-tab-content {
  position: relative;
  height: fit-content;
  padding: 10px;
  border-radius: 8px;
}

.input-single-row {
  display: flex;
  gap: 20px;
}
form input {
  height: 56px;
}
/* Hide label initially */
.label {
  background: #fff;
  padding: 0 8px;
  font-family: "Marko One";
  line-height: 1.6;
  color: #323A61;
	text-transform: capitalize;
}

.contact-form-left-col p {
  position: relative;
	margin-bottom:0;
}
.contact-form-left-col input {
  position: relative;
  z-index: 1;
}

/* contact page tab css */

/* Comments Section Styles */
.comments-section {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #e1e1e1;
    background-color: #fff;
}

.comments-title {
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: 600;
    color: #323A61;
    font-family: "Marko One", serif;
}

/* Comment List */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.comment-list li {
    margin-bottom: 30px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}
.comment-list li::before {
  content: '';
  position: absolute;
  background: linear-gradient(90.38deg, #ED6387 -2.94%, #FBAC3E 128.97%), #EBF0F3;
  height: 100%;
  width: 3px;
  left: 0;
  top: 0;
}
.comment-list .children {
    margin-top: 20px;
    margin-left: 40px;
}

.comment-list .children li {
    background: #fff;
    border-left: 3px solid #ccc;
}

/* Comment Meta */
.comment-meta {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.comment-author {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.comment-author img {
    border-radius: 50%;
    margin-right: 10px;
}

.comment-author-name a{
    font-weight: 600;
    color: #323A61;
    font-family: "Marko One", serif;
}

.comment-metadata {
    font-size: 14px;
    color: #666;
}

.comment-metadata time {
    margin-right: 10px;
}

.edit-link a {
    color: #007cba;
    text-decoration: none;
    font-size: 14px;
}

/* Comment Content */
.comment-content {
    line-height: 1.6;
    color: #444;
    margin-bottom: 15px;
}

.comment-content p {
    margin-bottom: 15px;
}

/* Comment Awaiting Moderation */
.comment-awaiting-moderation {
    background: #fff3cd;
    color: #856404;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 10px;
}

/* Reply Link */
.reply a {
    background: linear-gradient(90.38deg, #ED6387 -2.94%, #FBAC3E 128.97%), #EBF0F3;
    color: white;
    padding: 5px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    font-family: "Marko One", serif;
}

.reply a:hover {
    background: transparent;
    border: 1px solid #f38267;
    color: #323A61;
}

/* Comment Form */
#respond {
    margin-top: 40px;
    padding: 0;
    background: transparent;
    border-radius: 8px;
}

#reply-title {
    font-size: 24px;
    margin-bottom: 20px;
    color: #323a61;
    font-family: "Marko One", serif;
    text-transform: capitalize;
}
.comment-author-name {
  text-transform: capitalize;
  font-family: "Marko One", serif;
  color: #323A61;
}
.comment-form p {
    margin-bottom: 20px;
}
.comment-form-cookies-consent {
  display: flex;
  gap: 12px;
  align-items: center;
}
.comment-form-cookies-consent label {
  margin-bottom: 0;
}
.comment-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.1);
}

.comment-form textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit {
    margin-top: 20px;
}

.form-submit input[type="submit"] {
    background: linear-gradient(90.38deg, #ED6387 -2.94%, #FBAC3E 128.97%), #EBF0F3;
    color: #fff;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
    font-family: "Marko One", serif;
}

.form-submit input[type="submit"]:hover {
    background: transparent;
    border: 1px solid #f38267;
    color: #323A61;
}

.comment-notes {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

/* Comment Navigation */
.comment-navigation {
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}

.comment-navigation a {
    color: #007cba;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid #007cba;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.comment-navigation a:hover {
    background: #007cba;
    color: white;
}

.no-comments {
    font-style: italic;
    color: #666;
    text-align: center;
    padding: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .comment-list .children {
        margin-left: 20px;
    }
    
    .comment-meta {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .comment-author {
        margin-bottom: 10px;
    }
    
    .comment-navigation {
        flex-direction: column;
        gap: 10px;
    }
}
/* portfolio 2nd layout */
.services-wrapper {
  column-count: 2;
  column-gap: 30px;
  padding: 4rem 0;
}
.single-service-blocks {
  position: relative;
  box-shadow: 0px 3px 20px #c1c1c1;
  margin-bottom: 24px;
  overflow: hidden;
  height: 650px;
}
.service-box-content-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 24px;
  background: #302f2f80;
  width: 100%;
}
.service-box-content-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.79), rgba(0, 0, 0, 0));
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 75px;
  gap: 8px;
  z-index: 1;
}
.service-box-title {
  color: #fff;
  font-size: 32px;
  text-transform: uppercase;
  font-weight: bold;
  font-family: "Marko One", serif;
	margin-bottom:0;
}
.service-box-category a{
  color: #fff;
  font-size: 20px;
  letter-spacing: 0.8px;
}
.service-box-cms a{
  color: #fff;
  font-size: 22px;
}
.icon-btn-list a i {
  font-size: 24px;
  color: #fff;
}
.icon-btn-list a {
  line-height: 1;
	width:40px;
	height:40px;
}
.icon-btn-list a img{
	width:40px;
	height:40px;
}
.icon-btn-list {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}
.service-box-content::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90.38deg, #ED6387 -2.94%, #FBAC3E 128.97%);
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  z-index: 0; 
}
.single-service-blocks:hover .service-box-content::after {
  opacity: 1;
}
.service-box-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  background-repeat: no-repeat;
  transition: background-size 0.6s ease;
  background-size: 0 1px, 1px 0, 0 1px, 1px 0;
  background-position: 0 100%, 0 100%, 100% 0, 100% 0;
  background-image: linear-gradient(to right, #000, #000), linear-gradient(to top, #000, #000), linear-gradient(to left, #000, #000), linear-gradient(to bottom, #000, #000);
}
.single-service-blocks:hover .service-box-content::before {
  background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
}
@media screen and (max-width: 768px)  {
  .services-wrapper {
    column-count: 1;
  }
  .single-service-blocks, .service-box-img {
    height: 650px;
  }
}
@media screen and (max-width: 1300px)  {
  .service-box-img, .single-service-blocks{
    height: 550px;
  }
}
.image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
  text-align: center;
}
.image-modal img {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
}
.modal-close {
  position: absolute;
  top: 30px;
  right: 45px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10000;
}
.service-box-img img {
  width: 100%;
  height: 100%;
	object-fit:cover;
	object-position:center;
}