/*
Theme Name: HK26 Theme
Theme URI: https://www.linkedin.com/in/connectwithrameez/
Author: 1stFold
Author URI: https://www.1stfold.com/
Description: A custom WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-custom-theme
*/
body{ font-size: 20px; color: #000; line-height: 24px; padding: 0; margin: 0;font-family: "Poppins", sans-serif;}
a{text-decoration: none; color: #000;}
a:hover{color:#AB248D;}
.container{ max-width: 1200px; margin: 0 auto;}
.site-header{
	margin: 30px 0 0;
    position: absolute;
    width: 100%;
    z-index: 999;
}
.main-navigation a{font-size:20px; font-weight:500; color:#fff; text-transform:uppercase;}
.main-navigation a:hover{color:#ED1C24;}
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  display: inline-block;
  margin: 0 23px;
}
.menu li:last-child{margin-right:0;}
.menu li:first-child{margin-left:0;}

.menu li.btn a{ padding: 10px 23px; background: #F37624; color: #fff;}
.menu li.btn a:hover{background: #000;}

/* Basic toggle button styling */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001; /* Ensure above menu */
}

.menu-toggle .bar {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #ED1C24;
  margin: 5px 0;
  transition: 0.4s;
}

.flex-box{ display: flex; align-items: center; justify-content: space-between;}
.copy-right-box{ font-size: 16px; color: #fff; font-weight: 400; padding: 0; margin: 25px 0 0;text-align: center;}

.footer-nav-box{ display: flex; align-items: center; justify-content: space-between;}
.footer-menu{ padding: 0; margin: 0;}
.footer-menu li{ list-style: none; display: inline-block; margin-right: 50px;}
.site-footer{padding:50px; margin-top:60px; background:#000;}
.footer-social-box{margin:0 auto;}
.footer-social-box a{ margin:0 10px;}
.footer-social-box a:hover svg path{stroke:#ED1C24;}
.portfolio-slider .slick-slide {
  transform: scale(0.9);
  transition: 0.4s;
}
.portfolio-slider .slick-prev{
    position: absolute;
    right: 300px;
    top: 0;
    width: 40px;
    height: 40px;
    background: url(http://localhost/HK-26/wp-content/uploads/2026/02/arrow-left.png) no-repeat;
    border: none;
    font-size: 0; cursor:pointer;
}
.portfolio-slider .slick-next{
    position: absolute;
    right: 250px;
    top: 0;
    width: 40px;
    height: 40px;
    background: url(http://localhost/HK-26/wp-content/uploads/2026/02/arrow-right.png) no-repeat;
    border: none;
    font-size: 0; cursor:pointer;
}
.social-links{padding:10px; background:#444444;position:fixed; top:405px; right:0;}
.social-links a{ margin-bottom:10px; display:block;}
.social-links a svg{ vertical-align:middle;}
.social-links a:hover svg path{ fill:#ED1C24;}
.social-links a:hover svg circle{ stroke:#ED1C24;}
.social-links a:last-child{ margin-bottom:0;}
.whatapp-box{position:fixed; right:30px; bottom:30px;}
.wpcf7 input,.wpcf7 textarea{
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 10px;
}
.wpcf7 label{ font-size:16px;}
.wpcf7 label,.wpcf7 p{width:100%; padding:0; margin:0 0 20px;}
.wpcf7 .flex-box{ display:flex; align-items:center; justify-content:space-between; gap:30px;}
.wpcf7 input[type="submit"]{    cursor: pointer;
    border: none;
    margin: 20px 0 0;
    background-color: #61CE7000;
    font-family: "Roboto", Sans-serif;
    font-size: 24px;
    font-weight: 400;
    fill: #ED1C24;
    color: #ED1C24;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #ED1C24;
    border-radius: 100px 100px 100px 100px;
    padding: 10px 45px 10px 45px;
    transition-duration: .3s;
    transition-property: transform;
    display: block;
    width: fit-content;
}
.wpcf7 input[type="submit"]:hover{    background: #000;
    color: #FFFFFF;
    transform: scale(.9);}
strong{font-weight: 700!important;}
.faq-list summary{background:#0000000d;}
.portfolio-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.portfolio-thumb img {
    width: 100%;
    height: auto;
    display: block;
}
.portfolio-title{ display:flex; align-items:center; justify-content:space-between;    font-family: "Poppins", Sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #444444; padding:0 0 20px; margin:20px 0; border-bottom:1px solid #ED1C24;}
.portfolio-title .link-icon{margin-left:10px;}
.portfolio-item:hover .portfolio-title a{color: #ED1C24;}
.single-portfolio-banner{
	background-image: url(https://hkwebsolutions.co.uk/wp-content/uploads/2026/02/contact-sec-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	min-height:400px; position:relative;
}
.single-portfolio-banner:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%;background:rgba(0,0,0,0.3);}
.single-portfolio-banner h1 {
    font-family: "Poppins", Sans-serif;
    font-size: 60px;
    font-weight: 800;
    text-transform: uppercase;
    color: #FFFFFF;
    padding-bottom: 2px;
    border-bottom: 3px solid #ED1C24;
    padding: 0 0 2px;
    margin: 0;
    line-height: 60px;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	z-index:10; text-align:center;
}
.single-portfolio .flex-box{display:flex; justify-content:space-between; gap:50px;align-items: normal;}
.single-portfolio{font-size:20px; line-height:30px; font-family: "Poppins", Sans-serif; color:#444444; font-weight:300;}
.single-portfolio .content-box{margin:80px auto;}
.single-portfolio .content-box h2{    font-family: "Poppins", Sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: #000;
	border-bottom: 3px solid #ED1C24;
    padding: 0 0 2px;
    margin: 0;
	line-height: 42px;
    display: block;
    width: fit-content;
}
.project-detail h4{margin:0; padding:0;font-size:22px; font-weight:600; margin-right:10px;}
.portfolio-slider2 .portfolio-list .slick-track{display:flex; gap:50px;}
.portfolio-slider2 .portfolio-list .slick-arrow{display:none!important;}
.project-detail-inner.clients{display:flex; align-items:center; font-size:24px; color:#000; font-weight:700; margin-bottom:15px; padding-bottom:15px; border-bottom:2px solid #eee;}
.project-detail-inner.case-study,.project-detail-inner.tools{margin-bottom:15px; padding-bottom:15px; border-bottom:2px solid #eee;}
.portfolio-content{ width:100%;}
.site-link{text-align:center; margin-top:40px;}
.site-link a{
	margin:20px auto;background-color: #61CE7000;
    font-family: "Roboto", Sans-serif;
    font-size: 24px;
    font-weight: 400;
    fill: #ED1C24;
    color: #ED1C24;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #ED1C24;
    border-radius: 100px 100px 100px 100px;
    padding: 10px 45px 10px 45px;transition-duration: .3s;transition-property: transform;
	display: block;
    width: fit-content;}
.site-link a:hover{background:#000;color: #FFFFFF;transform:scale(.9);}
.mob-br{display:none;}
.current_page_item a{color:#ED1C24;}
.elementor-background-video-container video {
    inset-block-start: 0!important;
    inset-inline-start: 50%!important;
    transform: translateX(-50%)!important;
}
@media (max-width:1200px) {
.menu li {
    display: inline-block;
    margin: 0 15px;
}
.main-navigation a {font-size: 16px;}
.site-header {padding: 0 2%;width: 96%;}
.portfolio-slider .slick-prev { right: 100px; top: 20px;}
.portfolio-slider .slick-next { right: 50px; top: 20px;}
.single-portfolio .content-box {margin: 50px 20px;}
.portfolio-title {font-size: 16px;line-height: 18px;}
}
@media (max-width:1024px) {
	.footer-logo img{ max-width:150px;}
.menu-toggle {display: block; margin:0 auto; margin-right:0;}
.nav-box{ width:100%;}

  .main-navigation .menu {
    display: none;
    flex-direction: column;
  }

  .main-navigation .menu.active {
    display: flex;
  }
	.menu-toggle {
    display: block;
  }

  .main-navigation .menu {
    display: none;
    flex-direction: column;
    background: #fff; /* Optional: background for dropdown */
    position: absolute;
    top: 45px; /* adjust based on header height */
    right: 0;
    left: 0;
    z-index: 1000;
  }

  .main-navigation .menu.active {
    display: flex;
  }

  /* Transform hamburger to cross when active */
  .menu-toggle.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(7px, 6px);
  }

  .menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
.menu li {margin: 0;}
	#primary-menu li a {
        padding: 15px;
        display: block;
		font-size: 14px;
		border-bottom: 1px solid #c4c4c4;
		color:#000;
	}
	.footer{ padding:30px 10px;}
#primary-menu li ul {
    position: relative;
    top: auto;
    left: 0;
    width: 100%;
}
	.arrow-down{ float:right;}
	.sub-menu {
    display: none;
  }

  .sub-menu.open {
    display: block!important;
  }

  .arrow-down {
    cursor: pointer;
    display: inline-block;
  }
	.arrow-down.active img {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
}
@media (max-width:767px) {
.wpcf7 .flex-box {display: block;}
.single-portfolio .content-box .flex-box {display: block;}
.project-detail {margin-bottom: 20px;}
.lrg-img{margin-top:20px;}
.single-portfolio .content-box h2 {font-size: 24px;}
.lrg-img img{ width:100%; height:auto;}
.portfolio-list {display: block;}
.whatapp-box svg{width:40px; height:40px;}
.whatapp-box {
     right: 10px;
    bottom: 10px;
}
.mob-br{display:block;}
.project-detail h4,.single-portfolio {font-size: 16px; line-height:24px;}
.project-detail-inner.clients {
		font-size: 16px;
		line-height: normal;
	display:block;
	}
.single-portfolio-banner {min-height: 300px;}
.copy-right-box {font-size: 12px;}
.site-footer {margin-top: 20px;}
.banner-heading{background:#000;}
	.single-portfolio-banner h1 {
        font-size: 18px;
        line-height: normal;
        width: 100%;
        bottom: 0;
        left: 0;
        transform: none;
        background: #000;
        top: auto;
        padding: 15px 0;
    }
.site-link a,.wpcf7 input[type="submit"]{font-size: 20px;}
}
@media (max-width:600px) {
.site-header .logo img{max-width: 230px;height: auto;}
.portfolio-image img{ width:100%; height:auto;}
.single-portfolio .content-box {margin: 30px 20px;}
}