@font-face {  font-family: oak-sans;  src: url(../fonts/oak-sans/OakSans-Bold.ttf);}
@font-face {  font-family: akzidenz-roman;  src: url(../fonts/akzidenz-grotesk/Akzidenz-grotesk-ce-roman.ttf);}
@font-face {  font-family: akzidenz-bold;  src: url(../fonts/akzidenz-grotesk/Akzidenz-grotesk-bold.ttf);}
.untree_co-section {  padding: 4rem 0px;}

.portfolio-item {position: relative; overflow: hidden;   cursor: pointer; padding: 2.5%;        }
.portfolio-item img { width: 100%;  height: auto;  display: block;  transition: transform 0.3s ease;      }
.portfolio-item .overlay {position: absolute; top: 0;left: 0; width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);
            color: white;display: flex;justify-content: center;align-items: center;opacity: 0;transition: opacity 0.3s ease;
            padding:2.5%;border-radius: 15px;}
.portfolio-item:hover img {transform: scale(1.1);}
.portfolio-item:hover .overlay { opacity: 1; }

/* Modal Styles */
.modal-content {opacity: 0; /* Initially hidden */transform: scale(0.7); /* Start with a smaller scale */background-color: #ffd54f; }
.modal-header{border-bottom: none;}
.close {font-size: 2rem;font-weight: 700;color: #000;background: #000; }

h2.services{padding:0 0 2.2rem 0px;font-size: 1.5em;letter-spacing: 15px; font-weight: 500; font-family: "Raleway", sans-serif;  }
.header-services{background: #F3F3F3;height: 90vh;margin-bottom: 7%;margin-top: -5%; }
h1.header-services{font-family: "Raleway", sans-serif; font-size: 2em;color: #333333;padding-top: 28%; margin-left: 5%; }
        
@media (min-width: 768px) {
.desktop-menu{   display: block;}
.mob-menu{display: none; }
/* .service [class*="icon-"] img {  margin-left: 25%;} */
/* Custom hover menu styles */
.navbar{ position: relative;  z-index: 10000;   }
.navbar-brand{ position: absolute; left: 63.5%; transform: translateX(-50%); top: 100%; transform: translate(-50%, -50%); z-index: 10;   }
.navbar .container-fluid{  justify-content: end;  }
.bg-light{ background-color: #ffffff00 !important; margin-right: 2%;}
#hover-menu { position: absolute; top: -100px; /* Initially hidden above the viewport */
      left: 0;     right: 0;   background-color: #f8f9fa;   z-index: 1050;   padding: 10px 0;  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      border-top: 1px solid #ddd;  opacity: 0; /* Start as invisible */   transition: top 0.6s ease, opacity 0.4s ease; /* Smooth transition */   }    
#hover-menu ul {   list-style: none;  padding: 0;  margin: 0;  display: flex; justify-content: center; /* Align menu items in the center */    }
#hover-menu ul li {   padding: 10px 20px; }    
#hover-menu ul li a {   text-decoration: none;  color: #333333;   font-weight: 700;   transition: color 0.3s;  font-family: "Raleway", sans-serif !important;
      text-transform: uppercase;   font-size: 16px; }
#hover-menu ul li a:hover { color: #FFB400; }
    /* Show the menu on hover with smooth transition */
.navbar:hover #hover-menu {top: 0px; /* Move into view */   opacity: 1; /* Make visible */  }   
.modal-lg, .modal-xl{max-width:70%!important}}

.news-subtitle{ font-family: "Raleway", sans-serif!important; }
.portfolio-wrapper{  margin: 50px!important;  }    
.navbar-toggler-icon{  width: 1.5em!important; height: 1.5em!important; }
.navbar-toggler{   font-size: 1.3rem;   }
h3.about-col1a{font-family: "Raleway", sans-serif;  font-size: 1.8em; letter-spacing: 1px; color: #333333; line-height: 40px;  text-align: right; }
h5.about-col1{  line-height: 40px;  text-align: right;font-size: 0.9em;padding-left: 4%; }
p.services-content{ font-family: "Raleway", sans-serif; font-size: 0.85em;color: #333333;  margin-right: 7%; line-height: 40px;  }
h1 {text-align: center;}
h5{font-family: "Raleway", sans-serif;  font-size: 1.3em; letter-spacing: 1px; color: #333333;}

/* Wave  */   
.wave { margin-bottom: 10px;margin-left: -2.5%; }
.wave svg {width: 90px;height: 20px;  }
.wave path {stroke: #f6c114;    stroke-width: 2px;    stroke-linecap: round;    fill: none; }
/* Wave End  */

/* Service Section */
.service [class*="icon-"] img {  width: 200px;}
.service h3 {  font-size: 16px;  font-weight: 400;  color: #000000;   font-family: oak-sans;  letter-spacing: 2px;}
/* Service Section End  */

  /* Projects  */
.detail-v1 .detail-label { display: block;  font-size: 1.2em;  font-weight: 400;  text-transform: uppercase;  letter-spacing: .1rem;
    font-family: "Raleway", sans-serif;  text-align: left;  color:#333333; }
.detail-v1 .detail-label-title { display: block;   font-size: 1.8em;  font-weight: 500;  text-transform: uppercase;   letter-spacing: .1rem;
      font-family: "akzidenz-bold";  text-align: left;  color:#333333;font-weight: 900;  }
.detail-v1 .detail-val { font-size: 1.3em;  font-family: "Raleway", sans-serif; text-align: left; color:#333333;}
p.portfolio-modal-content{font-family: "akzidenz-roman";    font-size: 1.5em;text-align: left;color:#333333;padding-right:5%;padding-top: 5%;}
h3 .overlay{    font-family: "Montserrat", sans-serif;  }
p.projects-content{  font-family: "Raleway", sans-serif;  font-size: 20px; margin-bottom: 5%;  margin-top: 5%;  color:#333333;  }
  /* Projects End  */

/* Clients */
.carousel-indicators li{ background-color: #252022; bottom: -30px!important;}
.carousel-indicators{ bottom: -35px!important;}

/* Press Media  */
.post-entry{box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;      padding: 10%;}
.post-entry .thumb {  display: block;  margin-bottom: 30px;  overflow: hidden;  border-radius: 4px; }
.post-entry .thumb img {    -webkit-transition: .15s all ease;    -o-transition: .15s all ease;   transition: .15s all ease; }
.post-entry .thumb:hover img {   -webkit-transform: scale(1.02);  -ms-transform: scale(1.02);    transform: scale(1.02); }
.post-entry h3 {  font-size: 16px;  margin-bottom: 0;  font-weight: 600; text-align: center;}
.post-entry h3 a {    color:#333333;  font-family: "Raleway", sans-serif;}
.post-entry .post-meta {  font-size: 14px; font-family: "Raleway", sans-serif; }
.post-entry .post-meta a {    color:#333333; }/* Press Media End  */

  /* Footer  */
.site-footer { padding: 10px 0; text-align: center;font-size: 0.85em;}
.site-footer a {    color: #777;    position: relative;    display: inline-block; font-family: "Raleway", sans-serif;}
.site-footer .social li { display: inline-block; padding-right: 2%;}
.site-footer .social li a { display: inline-block; width: 30px;height: 30px; position: relative; padding-right: 2%;  border-radius: 50%; color: #ffffff; }
 /* Footer End  */

/* SCSS for Handwritten Underline */
.hand-underline {   position: relative;  display: inline-block;  color: #1f2937;  }
.hand-underline::after {   content: "";  position: absolute; bottom: -0.1em; /* Space between text and underline */
      left: 0;   width: 100%; height: 0.4em; /* Flexible height, can be adjusted */
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0,6 C20,7 40,3 60,6 C80,9 100,4 100,6" fill="none" stroke="%23FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
      background-size: 100% 100%; /* Ensure SVG fits perfectly */   pointer-events: none; transform: translateY(0.2em); /* Slight lift to make the underline clear */   }
.red-text{color:#333333;font-family: "Gloria Hallelujah", cursive;top: 0!important;font-size: 28px; left:3px;}

#about{margin-top: -3.5%;}
@media (max-width: 768px){
#about{margin-top: -1%;}
.navbar-toggler-icon{width: 0.7em!important;   height: 0.7em!important;   margin-top: 35%;   }
.navbar-toggler{ font-size: 0.25rem;     }
.desktop-menu{  display: none;  }
.mob-menu{display: block;   }
.navbar.mob-menu{  z-index: 100000;  }
.navbar-light .navbar-nav .nav-link{  font-family: "Raleway", sans-serif!important; }
.navbar-light .navbar-toggler{  float: right; margin-top: 1%; }
.header-services{height: 75vh;}
h1.header-services { font-size: 1.5em; padding-top: 75%; margin-left: 5%;}
.hand-underline {font-size: 36px;  }
span.typewriter{font-size: 28px!important;}
h3.about-col1a{font-size: 1.3em; letter-spacing: 1px;  padding-left: 4%; text-align:left; }
h5.about-col1{  line-height: 40px;  text-align: left;font-size: 0.9em;padding-left: 4%;margin-right: 7%; }
.wave { margin-bottom: 10px;margin-left: -3.5%!important; }
h2.services{margin-left: 3%;}
p.services-content{ margin-left: 4%;  line-height: 35px !important;font-size: 0.95em; }
#main-section { top: -80%;  transform: rotate(-10deg)!important;  width: 125%!important;  margin-left: -2%!important;}
.close {font-size: .5rem;font-weight: 700; color: #000;   background: #000;  } 
.site-footer .social li{   padding-right: 7%!important;   }
.footer-section1{  display: none; }
.clients-wrap{  display: none; }
.owl-nav button {   position: absolute;  top: 50%;  background-color: #000; color: #fff;   margin: 0;  transition: all 0.3s ease-in-out;   }
.owl-nav button.owl-prev {   left: 0;  }
.owl-nav button.owl-next {  right: 0;   }    
.owl-dots { text-align: center;   padding-top: 15px; }
.owl-dots button.owl-dot {   width: 15px;   height: 15px;  border-radius: 50%;  display: inline-block;  background: #ccc;  margin: 0 3px;  }
.owl-dots button.owl-dot.active {      background-color: #000;    }
.owl-dots button.owl-dot:focus {      outline: none;    }
.owl-nav button {     position: absolute;    top: 50%;    transform: translateY(-50%);    background: rgba(255, 255, 255, 0.38) !important;  }
span { font-size: 40px;  position: relative; top: -5px; }
span.typewriter {      font-size: 45px;      position: relative;      top: 0px;  }
.owl-nav button:focus {       outline: none;    }
.owl-item { height: 300px !important; /* Adjust this value as needed */     display: flex;    }
.item { width: 100%; }
}