/**
 * Theme Name:     Twenty Twenty Child
 * Author:         the WordPress team
 * Template:       twentytwenty
 * Text Domain:	   twenty-twenty-child
 * Description:    Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
 */

 :root {
  --themecolor: #149900;
  --themecolor2: #149900;
  --text-black: #242529;
  --family900: 'Roboto-Bold';
  --family600: 'Roboto-Bold';
  --family400: 'montserrat';
  --family300: 'montserrat-Light';

}
@font-face {font-family: "Roboto-Bold"; src: url("fonts/Roboto-Bold.woff2") format("truetype"); font-weight:600; font-style: normal;}
@font-face {font-family: "montserrat";src: url("fonts/montserrat.regular") format("truetype"); font-weight:400; font-style: normal;}
@font-face {font-family: "montserrat-Light";src: url("fonts/Montserrat-Light.ttf") format("truetype"); font-weight: 300; font-style: normal;}
h1,h2,h3,h4{ font-family:var(--family900)}
.container {
  max-width: 1320px !important;
}
section{ padding: 0px}
.light-bg {
     background: linear-gradient(135deg, #f6fbf4 0%, #e1f5fb 55%, #dcffca 100%);
}

.c_btn{
    background: var(--themecolor);
    color: #fff;
    padding: 6px 13px; border: 1px solid var(--themecolor);
    display: inline-block;
    text-decoration: none;
    font-size: 17px;
    border-radius: 30px;font-size: 18px;
}
.c-links{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.c_btn:hover,.hpone:hover{ background:#fff; color: var(--themecolor);}
.hpone{
    background: var(--themecolor);
    color: #fff;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    border: 1px solid var(--themecolor);
}
img,a{ transition: ease all 0.4s; }
img{ max-width: 100%; display: inline-block;} 
body { font-size: 16px; line-height: 24px; color: #111;   font-family:var(--family300); }
.header_app { position: fixed; top: 0; background:#fff;    transition: ease all 0.4s;    padding: 10px 0px; right: 0; left: 0; z-index: 1030; }
.head-nav-section { display: flex; justify-content: space-between;    align-items: center; }
.logo img{ width:100px;}
.header_app.scrolled{ background: #fff;}
li{ padding: 0; margin: 0;}
.navlink ul{ display: flex; list-style: none; padding: 0; gap:20px; margin: 0; }
.navlink ul li a{    color: #181717;
    text-decoration: none;
    font-size: 18px;
    font-family: var(--family600);}
.scrolled .navlink ul li a{ color: #111; }
.navlink ul li a.active{ color:var(--themecolor2);}
.header_app.scrolled{ background: #fff;    box-shadow: 0px 0px 4px #c3bfbf;}
.navlink ul li a:hover{ color: var(--themecolor);}

.top-sleder{ margin-top:87px;}
.head-info{
    position: absolute;
    display: block;
    top: 50%;
    left: 0%;
    margin-right: -50%;
    transform: translate(0%, -50%);
    color: #fff;
    width: 100%;
}
.head-info h1{  font-family: var(--family600);   font-size: 47px;
    margin-bottom: 20px;}
    .btn_{    background: var(--themecolor);
    display: inline-block;
    padding: 10px 22px 11px;
    text-decoration: none;
    color: #fff;
    border-radius: 4px;
    border: 1px solid var(--themecolor);
    font-family: var(--family400);
    font-size: 18px;}
  .btn_:hover{ background:#fff; color: var(--themecolor);}
.ts{ display: block;}
.mobile-menu{    display: none;}
.section-row h2{     font-size: 35px;
    color: #111;
    font-family: var(--family600);}
.slick-arrow{  position: absolute;
    z-index: 99;
    top: 50%; width: 60px;
    height: 60px;
    text-indent: -9999px;
    border: 0;    margin-top: -60px;
    border-radius: 100%;
    transition: ease all 0.4s;}
.slick-prev { background: #fff url(images/left-chevron.png) no-repeat; background-size: 10px; background-position: 22px 20px; left: 20px;}
.slick-prev:hover{background: var(--themecolor2) url(images/left-chevron-hover.png) no-repeat;background-size: 10px; background-position: 22px 20px;}
.slick-next:hover{background: var(--themecolor2) url(images/left-chevron-hover.png) no-repeat;background-size: 10px;  background-position: 24px 21px;}
.slick-next {     background: #fff url(images/left-chevron.png) no-repeat;
    background-size: 10px;
    background-position: 24px 21px;
    right: 20px;
    transform: rotate(180deg);}
.card_{ padding: 0 10px;}
.servicesbox { margin: 0 -10px; overflow-x: hidden;}
.card_ figure{ position: relative; margin: 0;}
.card_ figure .pls_more{ position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 73%);
    top: 0;
    opacity: 0;
    transition: ease all .4s;
    justify-content: center;
    align-items: center;
    display: flex;}
.card_ figure:hover .pls_more{  opacity: 1;}
.card_ figure .pls_more a{
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: hsl(0deg 0% 100% / 42%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 39px;
    color: var(--themecolor);
}
.card_ figure .pls_more a:hover{ background:var(--themecolor) ; color: #fff;}
.card_  h3 a{     color: #111;
    font-size: 23px;
    text-decoration: none;
    display: block;
    margin: 20px 0px;}
    .card_  h3 a:hover{ color: var(--themecolor);}

/* Media section style start here */
.media-section {    background: var(--themecolor2);
    padding: 60px 0;
    color: #fff;
}

.media-left .featured {
    font-size: 14px;
    color: #bbb;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.media-left h2 {
    font-size: 40px;
    margin-top: 10px;
    line-height: 1.1; font-family: var(--family900);
}


.c-media{display: flex;
    flex-wrap: wrap;}
/* Logos Grid */
.media-logos {    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 80%;
}
.media-left{ width: 20%;}
.logo-item {    background: #ffffff;
    padding: 12px 14px;
    border-radius: 10px;
    transition: all 0.4s ease;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    corner-shape: notch;
}

.logo-item img {
    max-width: 140px;
    filter: grayscale(100%);
    transition: 0.4s ease;
}

/* Hover Effects */
.logo-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px var(--themecolor);
}

.logo-item:hover img {
    filter: grayscale(0%);
    transform: scale(1.08);
}
/* Media section style end here */
.hm-about-section { border-top: 1px solid #eaeaea;}
.profile-pcis img{ border-radius: 10px; }
._middle{ justify-content: center; align-items: center; display: flex;}
.hm-immigration-section{ background: url(images/immigration-officers-img.jpg) center top no-repeat; background-size: cover; color: #fff; min-height:510px; background-attachment: fixed; padding-top: 184px;}
.hm-immigration-section.abts{ background: url(images/about-1-1.webp) center top no-repeat; background-size: cover; color: #fff; min-height:510px; background-attachment: fixed; padding-top: 184px;}
.hm-immigration-section:before{ width: 100%; content: ''; position: absolute; left: 0; top: 0; height: 100%; background: hsl(0deg 0% 0% / 43%);}
.hm-immigration-section .container{ position: relative; z-index: 1;}
.links_{ color: #fff;
    text-decoration: none;
    font-family: var(--family400);
    font-size: 20px;
    border: 1px solid #fff;
    padding: 15px 24px;
    display: inline-block;}
.links_:hover{ background: var(--themecolor); color: #fff; border: 1px solid var(--themecolor)}
.hm-immigration-section h2{ font-size: 40px;}
.mission_img{ margin: 0; width: 50%;}
.mission_img img{ width: 100%; }
.our-mission-wrap{
    width: 50%;
    background: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 180px;
}
.our-mission-content p{
    font-size: 21px;
    font-family: var(--family400);
    line-height: 30px;
margin: 0;}
.our-mission-content .tags{
    font-size: 16px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
    font-family: var(--family300);
    color: var(--themecolor2);
}.listcounter{
    display: flex;
    width: 100%; flex-wrap: wrap;
    padding: 0;
    margin: 0; list-style: none;
}
.listcounter li{ width: 25%;    font-size: 38px;}
.listcounter li .counter{display: inline-block;
    font-size: 65px;
    font-family: var(--family300);
    color: var(--themecolor);
    margin-bottom: 10px;}
.listcounter li h4{     font-size: 16px;
    font-family: var(--family400);
    color: #444; margin: 20px 0 0 0;}

.gray-bg{ background: #f2f2f2;}
.tbox{  background: #fff;  padding: 30px;}
.tbox_wrap { padding: 0 10px;}
.testimonials_slieds{ overflow-x: hidden;}
.testimonials_slieds  .slick-arrow { margin-top: -32px;}
.testimonials_slieds .slick-next { right: -34px}
.testimonials_slieds .slick-prev { left: -34px}
.tbox p{ padding-left:70px; position: relative; background: url(images/quotation-mark.png) no-repeat 0px 0px;}
.test-head figure{ width: 70px; margin: 0;}
.test-head figure img{width: 60px; height: 60px; border-radius: 100%;}
.test-head{  display: flex; justify-content: left;  align-items: center;    gap: 12px}
.test-head h3{     font-size: 19px; font-family: var(--family400); margin: 0; padding: 0; color: var(--themecolor);}
.test-head span{ display: block; font-size: 14px; color: #6d6d6d; font-style: italic;}

.hm-faq-section h2{ font-size: 40px; color: var(--themecolor); }
.faq-item {
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.05);
  transition: 0.3s ease;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  position: relative;
}

.faq-question h3 {
  font-size: 18px;  margin: 0;
  color: #222;
}

.icon {
  width: 22px;
  height: 22px;
  position: relative;
}

.icon::before,
.icon::after {
  content: "";
  position: absolute;
  background: var(--themecolor);
  transition: 0.3s ease;
}

.icon::before {
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.icon::after {
  width: 2px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* Hide vertical line when active (minus icon) */
.faq-item.active .icon::after {
  height: 0;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 25px;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
  max-height: 200px;
  padding: 0 25px 20px 25px;
}

.faq-answer p {
  color: #555;
  line-height: 1.6;
  font-size: 15px;
}

/* Hover Effect */
.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.blog-card figure{ margin: 0; position: relative;}
.blog-card figure img{ width: 100%;}
.blog-card figure .post-date{     position: absolute;
    right: 0;
    top: 0;
    background: var(--themecolor);
    color: #fff;
    font-size: 13px;
    text-align: center;
    box-shadow: 0px 0px 3px 0px #c6b8b8;
    font-family: var(--family400);}
.blog-card figure .post-date span{
    display: block;
    background: #fff;
    color: var(--themecolor);
    padding: 0 7px;
}
.ps-category{ padding: 10px 0px 20px;}
.ps-category a{  color: #111;  text-decoration: none;  font-size: 16px;}
.ps-category a:hover{ color: var(--themecolor);}

.blog-card h3{
    font-family: var(--family400);
    font-size: 23px;
    display: block;
    margin-bottom: 17px;
}
.blog-card h3 a{
    color: #111;
    text-decoration: none;
}
.blog-card h3 a:hover{ text-decoration: underline; color: var(--themecolor2);}
.morelink a{
    font-family: var(--family400);
    font-weight: 600;
    text-decoration: none;
    color: #111;
    font-size: 17px;
}
.morelink a:hover{ color: var(--themecolor);}
.quicksec{
    background: var(--themecolor2);
    text-align: center;
    color: #fff;
    padding: 120px 0px;
}
.quicksec h2{
    font-size: 40px;
    max-width: 710px;
    margin: 0 auto;
}

.main-footer {
  background-color: #f2f2f2;
  color: #111;
  padding: 70px 0 0;
  position: relative;
}

.footer-logo img {
  max-width: 220px;
}

.footer-title {    margin-bottom: 20px;
    position: relative;
    font-family: var(--family400); font-size: 16px;
}

.footer-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: #111;
  margin-top: 8px;
}

.footer-text {
  font-size: 15px;
  line-height: 1.7;
  color: #e6f2f1;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links li a {
  text-decoration: none;
  color: #111;
  font-size: 15px;
  transition: 0.3s ease;
}

.footer-links li a:hover {
  color:var(--themecolor);
  padding-left: 5px;
}

/* Contact Icons */
.contact-info i {
  margin-right: 8px;
  color: #111;
}

/* Social Icons */
.social-icons li a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  color: #111;
  transition: 0.3s ease;
}

.social-icons li a:hover {
  background: #ffffff;
  color: #2f7f7c;
  transform: translateY(-3px);
}

/* Bottom Bar */
.footer-bottom {    background: #f68b3e;
    padding: 20px 0;
    margin-top: 50px;
    font-size: 14px;
    color: #ffffff;
}
.hm-about-section h3{ font-size: 24px;}

@media screen and (max-width:1000px) {
        .timeline-line {
        display: none;
    }
    .phase-circle {
        width: 100px;
        height: 100px;
        font-size: 28px;
    }
.mobile-menu{
    background: var(--themecolor2);
    padding: 10px;
    border-radius: 6px;
}.slick-prev {
    left: 0;
}.slick-next {
    right: 0;
}.bannerinfo {
    position: relative;
    display: block;
    top: 0;
    left: 0%;
    margin-right: 0%;
    transform: none;
    width: 100%;
}.bannerinfo .container {
    flex-wrap: wrap;
}
.formcontrl { width: 100%;   border-radius: 10px;  margin-top: 20px; background:var(--themecolor);}
   .mobile-menu,.d-custom-md-none{
        display: block;
    }.banner_info_content {
    width: 100%;        max-width: 100%;
    padding: 25px 0 0 0;
    margin-top: -61px;
}
    .mobile-menu .bar-icon{
        width: 22px;
        cursor: pointer;
    }
    .navlink ul {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 0;
    margin: 0;
    flex-wrap: wrap;
}
   .navlink ul li{ width: 100%;        margin: 0;}
.navlink ul li a {        color: #020202;
        text-decoration: none;
        font-weight: 600;
        font-size: 16px;
        display: block;
        border-top: 1px solid #ccc;
        padding: 8px 0px;
}.offcanvas-title {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 18px;
}
    .mobile-menu .offcanvas-body{
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .mobile-menu .offcanvas-body .mob-link{
        color: #000;
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        font-size: 17px;
    }
    .mobile-menu .offcanvas-body ul .mob-sublink{
        font-size: 16px;
        font-weight: 400;
        color: var(--primary-color);
        font-family: 'Poppins', sans-serif;
        text-decoration: none;
        margin-top: 15px;
        display: inline-block;

    }  .section-head h2,.aboutsection h2 {
    font-size: 32px;
}
.media-left {
    width: 100%;
    text-align: center;
}.media-logos {  gap: 1px;  width: 100%;}
.media-left h2,.hm-immigration-section h2,.hm-faq-section h2 {  font-size: 32px;}
.mission_img {
    margin: 0;
    width: 100%;
}.our-mission-wrap {  width: 100%;  padding:30px;}
.ourmission-section{
    display: flex;
    flex-wrap: wrap;
}
.hm-immigration-section { min-height: auto; padding: 74px 0;}
.hm-immigration-section .px-4,.hm-about-section .px-4{ padding: 0px !important;}
.head-info h1 {
    font-size: 24px;
    margin-bottom: 13px;
}.btn_ {  padding: 10px 13px 11px;  font-size: 16px;}

.logo img {
    width: 170px;
}
.top-sleder {
    margin-top: 67px;
}.logo-item {
    width: 33%;
}
.listcounter li {  width: 50%;  font-size: 30px;  margin-bottom: 30px;}

.listcounter li .counter {
    font-size: 41px;
    margin-bottom: 0px;
}.testimonials_slieds .slick-prev {
    left: 0;
}
.testimonials_slieds .slick-next {  right: 0;}
.blog-card{ margin-bottom: 20px;}
.quicksec h2 { font-size: 32px;}
}