@font-face {
    font-family: popin;
    src: url("fonts/Poppins-Regular.ttf");
 }
 @font-face {
    font-family: lora;
    src: url("fonts/Lora-VariableFont_wght.ttf");
 }
 @font-face {
    font-family: montserrat;
    src: url("fonts/Montserrat-VariableFont_wght.ttf");
 }
 @font-face {
    font-family: visbycf;
    src: url("fonts/visbycf-regular.otf");
 }
 a,a:hover{text-decoration: none;color: #fff;display: inline-block;}
 ul{padding: 0;margin: 0;}
 li{list-style: none;}
 img{width: 70%;}
 body{overflow-x: hidden;scroll-behavior: smooth;}
.tabs.current { display: block;}
.tabs { display: none;}
.slick-next:before { content: "";}
.slick-prev:before {content: "";position: absolute;display: block;}
.first-section h1,.footer-main h3,.sec-section h1,section.sec-section li h3,.service-section h1,ul.service h3,
section.projects h3,.bottom-links a.profile,.bottom-links a.linkedin,
.service-section.practice h5, .service-section.practice h4, .service-section.team h4{
    font-family: lora;}
.first-section h6,.footer-main h6,.footer-main span,.footer-main li a, .sec-section p,.service-section p,.service.teamli h6{
    font-family: visbycf;
}
.main-button2{
    font-size: 25px;
    padding: 7px 0;
    border-bottom: 2px solid;

}
section.first-section.practice.immigration, section.first-section.practice.civil, section.first-section.practice.family, section.first-section.practice.criminal{
    position: relative;}
section.first-section.practice.immigration:before,
section.first-section.practice.civil:before,
section.first-section.practice.family:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: #00000054;
}
section.first-section.practice.criminal:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: #0000008c;
}
section.service-section.team li {
    list-style: circle;
}
.main-button3{
    font-size: 20px;
    padding: 7px 0;
    letter-spacing: 0.2px;
    line-height: 16px;
    font-family: lora;position: relative;
}
.main-button3:before {
    content: "";
    border-bottom: 2px solid;
    position: absolute;
    display: block;
    width: 80%;
    bottom: -8px;
}
/* header */
header.header-section li {
    display: inline-block;
    padding-right: 28px;
    font-family: montserrat;
}
.scroll-bg .main-button {
    color: #926D31;
    background: #fff;}
.main-button {
    color: #fff;
    background: #926D31;
    padding: 10px 30px;
    display: inline-block;
    border:none;
}
.header-section{position: fixed; top: 0;
    width: 100%;
    z-index: 999;
}
/* header */
/* 1st section */
.first-section{
    background-repeat: no-repeat;
    background: url('../images/home-banner.webp');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 0;
}
.first-section h1{
      padding-top: 2%;
    font-size: 80px;
}

/* 1st section */
/* 2nd sec */

.sec-section{
    background-image: linear-gradient(90deg, #967033 50%, #5A400B);
    padding: 80px 0;
    color: #fff;
}
.sec-section h1{
    font-size: 115px;
}
.sec-section p{font-size: 20px;}
section.sec-section li {
    display: inline-block;
    width: 24%;
    text-align: center;
    padding-top: 100px;
}
section.sec-section li:nth-last-child(1) h3 {
    display: inline-block;
}
section.sec-section li h3 {
    font-size: 70px;
}
/* service section */
.service-section {
    padding: 70px 0;
}
section.service-section h1 {
    font-size: 50px;
    position: relative;font-weight: 700;
}

section.service-section h1:before {
    content: "";
    position: absolute;
    width: 21%;
    background: #967033;
    display: block;
    height: 5%;
    right: 0;
    bottom: -5px;
    left: 0;
    margin: auto;
}

section.service-section p {
    padding-top: 50px;
    color: #6D706D;
}
ul.service > li {
    width: 33%;
    display: inline-flex;
    align-items: center;
    padding: 50px 30px;
    gap: 45px;
    position: relative;cursor: pointer;
}

ul.service li .right h3 {
    font-size: 25px;
}

ul.service li .right a.main-button3 {
    color: #000;font-size: 17px;
}
ul.service li .left {
    width: 100px;
}

ul.service li .left img {
    width: fit-content;
}
ul.service.teamli { justify-content: space-between; border-top: 1px solid #6b6b6ba8;}
ul.service {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; 
    
  }
  ul.service > li:last-child {
    /*margin-left: auto;*/
    /*margin-right: auto;*/
  }
  .first-section.about{
    background: url('../images/3.webp');
    background-size: cover;
    background-position: center;
    
  }
  .first-section.practice{
    background: url('../images/1.webp');
    background-size: cover;
    background-position: center;
  }
  .first-section.team{
    background: url('../images/4.webp');
    background-size: cover;
    background-position: center;
  }
  .first-section.team.teamP{
    background: url('../images/contact-banner.png');
    background-size: cover;
    background-position: center;
  }
  .first-section.contact{
    background: url('../images/5.webp');
    background-size: cover;
    background-position: center;
  }
  
  section.first-section.about h6, .first-section.practice h6, .first-section.team h6,.first-section.contact h6 {
    background: #926d31;
    padding: 7px 60px;
    font-size: 20px;
    display: inline-block;
}
.sec-section.about, .projects p{
    background: #fff;
    color: #00000080;
}
.sec-section.about h1:before {
    content: "";
    display: block;
    position: absolute;
    background: #967033;
    width: 100%;
    height: 2%;
    bottom: -15px;
}

.sec-section.about h1 {
    position: relative;
    color: #666666;
}
section.projects li {
    display: inline-block;
    width: 33%;
    /* height: 300px; */
    padding-right: 20px;
    overflow: hidden;
    overflow: hidden;
}

section.projects li img {
    width: 100%;
    /* height: 320px; */
}

section.projects h3 {
    font-size: 50px;font-weight: 700;
}
section.projects {
    padding: 0 0 60px 0;
}
section.service-section.team h1:before{
width: 85%;
margin-right: auto;
margin: unset;
}
ul.service.teamli li .left img {
    max-width: 100%;
}
ul.service.teamli > li {
    width: 49%;
    padding: 20px;
    border: 1px solid #00000026;
    border-top: 2px solid #967033;
    margin-top: 30px;
    gap: 20px;
    transition: 0.5s ease-in-out;
}
a.teammail {
    color: #707372;
    font-size: 13px;
}

a.teammail i {
    color: #926d31;
}
ul.service.teamli li .left {
    width: 200px;
    height: 220px;
    overflow: hidden;
}
ul.service.teamli li:hover {
    background: #926d31;
    /* transition: 0.5s ease-in-out; */
}

ul.service.teamli li:hover, ul.service.teamli li:hover a.teammail, ul.service.teamli li:hover a.teammail i,ul.service.teamli li:hover .bottom-links a.profile,ul.service.teamli li:hover .bottom-links a.linkedin {
    color: #fff;
}
a.profile, a.linkedin {
    color: #000;
    text-decoration: underline;
    /* vertical-align: bottom; */
}
.bottom-links {
    display: flex;
    justify-content: space-around;
    margin-top: 25%;
    /* align-items: flex-start; */
    gap: 100px;
}
ul.service.teamli .right {
    height: 100%;
    /* display: flex; */
    display: flex;
    flex-direction: column;
    /* height: 100%; */ /* ensure it stretches full height of its parent */
    /* width: 90%; */
    justify-content: space-between;
}
section.service-section.team p {
    padding: 0;
}
.map {
    background: #DBDBDB;
    padding: 30px;
}

.map iframe {
    width: 100%;
    height: 250px;
}
.icons a {
    display: flex;
    color: #505050;
    margin: 10px 0;
}
.icons a i {
    font-size: 20px;
}

.icons {
    padding: 30px 0;
}

.icons h3:before {
    content: "";
    display: block;
    background: #505050;
    width: 50%;
    bottom: 0;
    position: absolute;
    height: 5%;
    /* margin-bottom: 20px; */
}

.icons h3 {
    position: relative;
    margin-bottom: 30px;
    color: #505050;
}
section.service-section p.color {
    color: #926d31;
}
.service-hover h3{ font-size: 30px;}
.service-hover a.main-button3:before{display: none;}
.service-hover a.main-button3{background: #926d31;
    color: #fff; 
    text-decoration: underline;
    padding: 10px;font-size: 17px;
    max-width: max-content; 
}
.service-hover {
    background: url(../images/cta.png);
    background-size: cover;
    background-position: 60% 0%;
    position: absolute;
    width: 90%;
    height: 100%;
    padding: 20px 40px;
    transition: 0.5s ease-in-out;
    opacity: 0;
        display: flex;
    justify-content: center;
    flex-direction: column;
    right: 0;
    left: 0;
    margin: auto;
}
ul.service li:hover .service-hover{opacity: 1;}
/* wp */
.blog-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 30px;
    margin-bottom: 40px;
}

.blog-card {
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.card-thumb {
    position: relative;
    overflow: hidden;
}

.card-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
}

.card-title {
    font-size: 18px;
    margin: 0 0 8px 0;
    font-weight: bold;
}

.card-title a {
    color: #fff;
    text-decoration: none;
}

.card-meta {
    font-size: 12px;
    color: #ddd;
    margin-bottom: 10px;
}

.card-excerpt,
.read-more {
    display: none; /* Optional: Hide excerpt/read more for overlay layout */
}

/* 📱 Responsive: Show 1 column on small screens */
@media (max-width: 992px) {
    .blog-grid-wrapper {
        grid-template-columns: 1fr;
    }
}

/* wp */
/* footer */
.sort-button {
    text-align: right;
    color:#888;
    font-family: 'visbycf';
}
.sort-button select {
    padding: 8px 15px;
    color: #9e9c9c;
    border-color: #a7a3a3;
}
.scroll-bg {
    background: #926d31;box-shadow: 4px 4px 10px rgb(0 0 0 / 32%);
}
button.scroll-top {
    position: fixed;
    display: none;
    right: 20px;
    bottom: 20px;
    background: #fff;
    border: none;
    height: 40px;
    z-index: 999;
    cursor: pointer;
}

.footer-main{
    padding: 60px 0;
    background-image: linear-gradient(90deg, #967033 70%, #5A400B);
    color: #fff;
    position: relative;
}
.footer-main ul {
    width: 49%;
    display: inline-block;
}
.footer-main ul li{
    padding: 10px;
}
.email-input input {
    background: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 8px 20px 7px 20px;
    width: 78%;
}

.email-input button {
       margin-left: -5px;
    background: #fff;
    border: none;
    padding: 7px;
    width: 20%;
    color: #5B410C;
    font-weight: 600;
    font-size: 18px;
}

.email-input input::placeholder {
    color: #fff;
}
.right-footer {
    width: 85%;
    margin-left: auto;
}

footer.footer-main:before {
    content: "";
    border-right: 3px solid;
    display: block;
    width: 10%;
    height: auto;
    right: 63%;
    top: 0;
    position: absolute;
    bottom: 0;
    margin: auto;
}
ul.top div{display: none;}
/* footer */
/* inner pages */
.service-section.practice p {
    padding: 20px 0;
}

.service-section.practice h5 {
    font-weight: 600;
}
.service-section.practice h4 {
    font-weight: 800!important;
    font-size: 25px;
}
/* bannerslider */
.banner-slider .slick-dots li.slick-active button:before,.banner-slider .slick-dots li.slick-active  {
    width: 40px;
}
.banner-slider .slick-dots li button:before {
    background: #ffffff; border-radius: 0;
    width: 10px;
    height: 10px;
    opacity: 1;}
.banner-slider .slick-dots li { margin-right: 0px;}
ul.teamli ul.slick-dots li.slick-active button:before { color: #926d31;  }
    ul.teamli ul.slick-dots li button:before { background: #926d31;}
    .logo-a{width: 70%;}.logo-a img {transform: scale(1.2);}
    .banner-slider li.slick-slide {padding-top: 2%;}
    .first-section.practice.civil { background: url(../images/7.webp);    background-size: cover;  background-position: center;}
    .first-section.practice.family { background: url(../images/8.webp);    background-size: cover;  background-position: center;}
    .first-section.practice.commercial { background: url(../images/9.webp);    background-size: cover;  background-position: center;}
    .first-section.practice.immigration { background: url(../images/10.webp);    background-size: cover;  background-position: center;}
    .first-section.practice.criminal { background: url(../images/11.webp);    background-size: cover;  background-position: center;}
    
    .contact-form input,.contact-form textarea {
       background: transparent;
    width: 100%;
    margin-bottom: 20px;
    padding: 12px 15px;
    border: 1px solid #a8a7a47a;
    color: #000;
    font-size: 14px;
    border-radius: 8px;
}
.contact-form textarea {
    height: 100%;
    resize: none;
}
footer.footer-main img {
    width: 90%;
}
/* mobile */
@media screen and (min-width: 0px) and ( max-width: 767px) {
    .first-section {height:40vh;}
    .icons a {  font-size: 14px;}
    ul.banner-slider h5 {  font-size: 13px; }
    .main-button2 {  font-size: 18px;}
    ul.banner-slider h1 {  font-size: 30px;  }
    section.service-section.team img {  width: 50%; display: block;    margin: auto;}
    section.service-section.team p {    font-size: 14px; padding-top: 1.5rem !important;}
    .service-section.practice p{   padding:10px 0;}
    .first-section.about {  background-size: 140% 85%;background-repeat: no-repeat;height:40vh;}
    .first-section.practice, .first-section.team, .first-section.contact{height:40vh;}
    .sec-section{padding:40px 0;}
   .service-section {  padding: 30px 0;}
   section.first-section.about h6, .first-section.practice h6, .first-section.team h6, .first-section.contact h6{font-size:12px;}
    ul.service.teamli { text-align: center;        margin-bottom: 30px;}
    ul.teamli li.slick-slide{border: 1px solid #00000026;  border-top: 2px solid #967033;padding: 20px;}
    ul.service.teamli li .left {  width: 80%;  height: 300px;margin: 10px auto;}
    .bottom-links {margin-top: 10%;}
    section.service-section h1 { font-size: 35px;}
    header.header-section li.navbar-nav { font-size: 14px;}
    .logo-a {         width: 20%;  overflow: hidden; } 
    header .main-button {   padding: 6px 15px;   margin: 5px 0;         color: #926D31;   background: #fff;}
    .logo-a img {  width: 60%;   transform: scale(1.2);}
    header .row { flex-direction: column-reverse;}
    .navbar-collapse {   padding: 15px;  }
    header.header-section li.navbar-nav {   display: flex;flex-direction: column !important;  align-items: flex-start !important;padding: 5px 0;}
    .header-section {
        background: #926d31 !important;}
    button.navbar-toggler {
            color: #fff;
        }
    header .col-md-2 {
            display: flex;
            align-items: center;
            justify-content: space-between; 
          }
    section.first-section.about h6, .first-section.practice h6, .first-section.team h6, .first-section.contact h6 {padding: 7px 10px;}
    .footer-main h3{font-size: 18px;}
    ul.top div{display: inline-block;}
    .first-section h1 {  font-size: 45px;}
    .sec-section h1 {  margin-bottom: 20px !important; font-size: 40px;}
    section.projects h3 {  font-size: 40px;}
    ul.service li .right h3 { font-size: 20px;}
    .service-hover h3 {  font-size: 25px;}
    .sec-section p {  font-size: 16px;}
    section.projects li { width: 32%;padding-right: 0;}
    section.sec-section li {    width: 47%; padding-top: 30px;}
    section.sec-section li h3 { font-size: 50px;}
    section.service-section p { padding: 20px;}    
    ul.service > li {   width: 100%;padding: 20px;}
    footer.footer-main:before{display: none;}
    .right-footer { width: 100%;}
    .email-input input { width: 70%;}
    .email-input button { width: 30%;}
    .footer-main {   padding: 60px 0 0;}
}
/* ipad only */
@media screen and (min-width: 768px) and ( max-width: 1023px) {
    .first-section h1 { font-size: 70px;}
    header .col-md-5,header .col-md-2{max-width: 100%;}
    .logo-a {         width: 15%;   height: 70px;   overflow: hidden; } 
    .main-button {   background: #ffffff;   padding: 6px 10px;   margin: 5px 0; color: #926d31;}
    .logo-a img {         width: 70%;  transform: scale(1.2) translateY(-4px);}
    header .row { flex-direction: column-reverse;}
    .navbar-collapse {   padding: 15px;  }
    header.header-section li.navbar-nav {   display: flex;flex-direction: column !important;  align-items: flex-start !important;padding: 5px 0;}
    .header-section {
        background: #926d31 !important;}
    button.navbar-toggler {
            color: #fff;
        }
    header .col-md-2 {
            display: flex;
            align-items: center;    justify-content: space-between;  }
    ul.top div { display: inline-block; }
    .sec-section h1 {   font-size: 75px; }
    ul.service li {  width: 50%;}
    .footer-main ul {  width: 100%;}
    section.projects li {   width: 32%;}
    ul.service.teamli li {   width: 100%;}
}
/* both  */
@media screen and (min-width: 768px) and ( max-width: 1024px) {
   .email-input button { width: 25%;}
    .email-input input { width: 75%;}
    .first-section{height:50vh;}
    .sec-section.about .col-md-5,.sec-section.about .col-md-7{
    max-width:100%; flex:0 0 100%;}
    .sec-section { padding: 50px 0;}
    .sec-section.about .col-md-7{margin-top:30px !important;}
}
/* ipad pro */
@media screen and (min-width: 1024px) and ( max-width: 1365px) {
    header.header-section li {  padding-right: 16px;  font-size: 13px;}
    .main-button { padding: 7px 13px;  font-size: 13px;}
    ul.service.teamli li {          width: 47%;  margin-right: 0;}
    ul.service.teamli { justify-content: space-between;}
    .bottom-links { gap: 20px; }
    ul.service.teamli li .left {   width: 170px;}
    .sec-section h1 {  font-size: 100px;}
    
}
/* laptop */
@media screen and (min-width: 1366px) and ( max-width: 1800px) {
   

}
h1,h2,h3,h4,h5,h6,p,li,a,span{
    font-family: popin;
}